The Video Banner Code for Dawn Theme in Shopify is essential for store owners looking to enhance their site’s visual appeal. The Dawn theme is a clean, lightweight theme, but it lacks a built-in video banner section by default. This guide will help you add a custom video banner code for Dawn theme to your Shopify store easily.
Steps to Add a Video Banner Code for Dawn Theme
Video Tutorial
For those who prefer a visual guide, here is a step-by-step video tutorial, a part of our Shopify course by Kashif Mahmood:
1. Create a New Section for the Video Banner Code
To begin, you need to create a new Liquid section in your Shopify theme.
- Go to your Shopify Admin panel.
- Navigate to Online Store > Themes.
- Click Actions > Edit Code.
- Under the Sections folder, click Add a new section.
- Name it
video-bannerand click Create Section. - In the newly created
video-banner.liquidfile, paste the following Liquid code:
{{ 'section-video-banner.css' | asset_url | stylesheet_tag }}
{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}
<div
id="Banner-{{ section.id }}"
class="banner video-background banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}"
>
<div class="banner__media media video-background">
<video autoplay muted loop playsinline id="myVideo">
<source src={{ section.settings.video_url }} type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
<div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2
class="banner__heading inline-richtext {{ block.settings.heading_size }}"
{{ block.shopify_attributes }}
>
{{ block.settings.heading }}
</h2>
{%- when 'text' -%}
<div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<p>{{ block.settings.text }}</p>
</div>
{%- when 'buttons' -%}
<div
class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}"
{{ block.shopify_attributes }}
>
{%- if block.settings.button_label_1 != blank -%}
<a
{% if block.settings.button_link_1 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link_1 }}"
{% endif %}
class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_1 | escape -}}
</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a
{% if block.settings.button_link_2 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link_2 }}"
{% endif %}
class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_2 | escape -}}
</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
{% schema %}
{
"name": "Video Banner",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "text",
"id": "video_url",
"label": "Video Url"
},
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "top-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
}
],
"default": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.label"
},
{
"type": "checkbox",
"id": "show_text_box",
"default": true,
"label": "t:sections.image-banner.settings.show_text_box.label"
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.mobile.content"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.label"
},
],
"blocks": [
{
"type": "heading",
"name": "Video Banner",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "t:sections.image-banner.blocks.heading.settings.heading.default",
"label": "t:sections.image-banner.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
},
{
"value": "hxl",
"label": "t:sections.all.heading_size.options__4.label"
},
{
"value": "hxxl",
"label": "t:sections.all.heading_size.options__5.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "text",
"name": "Video Banner Heading",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "text",
"default": "t:sections.image-banner.blocks.text.settings.text.default",
"label": "t:sections.image-banner.blocks.text.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
}
],
"default": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.label"
}
]
},
{
"type": "buttons",
"name": "t:sections.image-banner.blocks.buttons.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label_1",
"default": "t:sections.image-banner.blocks.buttons.settings.button_label_1.default",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link_1",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_1",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
},
{
"type": "text",
"id": "button_label_2",
"default": "t:sections.image-banner.blocks.buttons.settings.button_label_2.default",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
},
{
"type": "url",
"id": "button_link_2",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
}
]
}
],
"presets": [
{
"name": "Video Banner",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
]
}
{% endschema %}
2. Add CSS for Styling the Video Banner
Once the Liquid structure is ready, you need to style it using CSS.
- Open the Assets folder in the theme editor.
- Create a new file named section-video-banner.css.
- Add the following CSS code:
.banner {
display: flex;
position: relative;
flex-direction: column;
z-index: auto;
isolation: isolate;
}
.banner__box {
text-align: center;
}
@media only screen and (max-width: 749px) {
.banner--content-align-mobile-right .banner__box {
text-align: right;
}
.banner--content-align-mobile-left .banner__box {
text-align: left;
}
}
@media only screen and (min-width: 750px) {
.banner--content-align-right .banner__box {
text-align: right;
}
.banner--content-align-left .banner__box {
text-align: left;
}
.banner--content-align-left.banner--desktop-transparent .banner__box,
.banner--content-align-right.banner--desktop-transparent .banner__box,
.banner--medium.banner--desktop-transparent .banner__box {
max-width: 68rem;
}
}
@media screen and (max-width: 749px) {
.banner--small.banner--mobile-bottom .banner__media {
height: 28rem;
}
.banner--medium.banner--mobile-bottom .banner__media > .banner__media {
height: 34rem;
}
.banner--large.banner--mobile-bottom .banner__media > .banner__media {
height: 39rem;
}
.banner--small:not(.banner--mobile-bottom) .banner__content {
min-height: 28rem;
}
.banner--medium:not(.banner--mobile-bottom) .banner__content {
min-height: 34rem;
}
.banner--large:not(.banner--mobile-bottom) .banner__content {
min-height: 39rem;
}
}
@media screen and (min-width: 750px) {
.banner {
flex-direction: row;
}
.banner--small:not(.banner--adapt) {
min-height: 42rem;
}
.banner--medium:not(.banner--adapt) {
min-height: 56rem;
}
.banner--large:not(.banner--adapt) {
min-height: 72rem;
}
.banner__content.banner__content--top-left {
align-items: flex-start;
justify-content: flex-start;
}
.banner__content.banner__content--top-center {
align-items: flex-start;
justify-content: center;
}
.banner__content.banner__content--top-right {
align-items: flex-start;
justify-content: flex-end;
}
.banner__content.banner__content--middle-left {
align-items: center;
justify-content: flex-start;
}
.banner__content.banner__content--middle-center {
align-items: center;
justify-content: center;
}
.banner__content.banner__content--middle-right {
align-items: center;
justify-content: flex-end;
}
.banner__content.banner__content--bottom-left {
align-items: flex-end;
justify-content: flex-start;
}
.banner__content.banner__content--bottom-center {
align-items: flex-end;
justify-content: center;
}
.banner__content.banner__content--bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
}
@media screen and (max-width: 749px) {
.banner{
flex-direction: row;
flex-wrap: wrap;
}
}
.banner__media {
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
@media screen and (min-width: 750px) {
.banner__media {
height: 100%;
}
}
@media screen and (max-width: 749px) {
.banner--mobile-bottom .banner__media {
position: relative;
}
.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
background: transparent;
}
.banner:not(.banner--mobile-bottom) .banner__box {
border: none;
border-radius: 0;
box-shadow: none;
}
.banner:not(.banner--mobile-bottom) .button--secondary {
--alpha-button-background: 0;
}
.banner::before {
display: none !important;
}
}
.banner__content {
padding: 0;
display: flex;
position: relative;
width: 100%;
align-items: center;
justify-content: center;
z-index: 2;
}
@media screen and (min-width: 750px) {
.banner__content {
padding: 5rem;
}
.banner__content--top-left {
align-items: flex-start;
justify-content: flex-start;
}
.banner__content--top-center {
align-items: flex-start;
justify-content: center;
}
.banner__content--top-right {
align-items: flex-start;
justify-content: flex-end;
}
.banner__content--middle-left {
align-items: center;
justify-content: flex-start;
}
.banner__content--middle-center {
align-items: center;
justify-content: center;
}
.banner__content--middle-right {
align-items: center;
justify-content: flex-end;
}
.banner__content--bottom-left {
align-items: flex-end;
justify-content: flex-start;
}
.banner__content--bottom-center {
align-items: flex-end;
justify-content: center;
}
.banner__content--bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
}
@media screen and (max-width: 749px) {
.banner--mobile-bottom .banner__content {
order: 2;
}
.banner:not(.banner--mobile-bottom) .field__input,
.banner--mobile-bottom .banner__box.color-scheme-1 {
background: transparent;
}
}
.banner__box {
padding: 4rem 1.5rem;
position: relative;
height: fit-content;
align-items: center;
text-align: center;
width: 100%;
word-wrap: break-word;
z-index: 1;
}
.banner--mobile-bottom .banner__box {
padding: 4rem 3.5rem;
}
@media screen and (min-width: 750px) {
.banner__box {
padding: 4rem 3.5rem;
}
.banner--desktop-transparent .banner__box {
padding: 4rem 0;
background: transparent;
max-width: 89rem;
border: none;
border-radius: 0;
box-shadow: none;
}
.banner--desktop-transparent .button--secondary {
--alpha-button-background: 0;
}
.banner--desktop-transparent .content-container:after {
display: none;
}
}
@media screen and (max-width: 749px) {
.banner--mobile-bottom::after,
.banner--mobile-bottom .banner__media::after {
display: none;
}
}
.banner::after,
.banner__media::after {
content: '';
position: absolute;
top: 0;
background: #000000;
opacity: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.banner__box > * + .banner__text {
margin-top: 1.5rem;
}
@media screen and (min-width: 750px) {
.banner__box > * + .banner__text {
margin-top: 2rem;
}
}
.banner__box > * + * {
margin-top: 1rem;
}
.banner__box > *:first-child {
margin-top: 0;
}
@media screen and (min-width: 750px) {
.banner__box {
width: auto;
max-width: 71rem;
min-width: 45rem;
}
}
@media screen and (min-width: 1400px) {
.banner__box {
max-width: 90rem;
}
}
.banner__heading {
margin-bottom: 0;
}
.banner__box .banner__heading + * {
margin-top: 1rem;
}
.banner__buttons {
display: inline-flex;
flex-wrap: wrap;
gap: 1rem;
max-width: 45rem;
word-break: break-word;
}
@media screen and (max-width: 749px) {
.banner--content-align-mobile-right .banner__buttons--multiple {
justify-content: flex-end;
}
.banner--content-align-mobile-center .banner__buttons--multiple > * {
flex-grow: 1;
min-width: 22rem;
}
}
@media screen and (min-width: 750px) {
.banner--content-align-center .banner__buttons--multiple > * {
flex-grow: 1;
min-width: 22rem;
}
.banner--content-align-right .banner__buttons--multiple {
justify-content: flex-end;
}
}
.banner__box > * + .banner__buttons {
margin-top: 2rem;
}
@media screen and (max-width: 749px) {
.banner:not(.slideshow) .rte a,
.banner:not(.slideshow) .inline-richtext a:hover,
.banner:not(.slideshow) .rte a:hover {
color: currentColor;
}
}
@media screen and (min-width: 750px) {
.banner--desktop-transparent .rte a,
.banner--desktop-transparent .inline-richtext a:hover,
.banner--desktop-transparent .rte a:hover {
color: currentColor;
}
}
/*Custom CSS for Video Background*/
.media.video-background>*:not(.zoom) {
height: auto;
}
.banner__media, .banner:after, .banner__media:after {
background: none
}
@media screen and (max-width: 749px) {
.banner.video-background:not(.banner--mobile-bottom) .banner__content {
min-height: 20rem;
}
.button {
min-height: calc(3.5rem + var(--buttons-border-width) * 2);
font-size: 1.2rem;
}
.banner__box {
padding-top: 1rem;
padding-bottom: 1rem;
}
.banner__heading.h0 {
line-height: 2rem;
font-size: calc(var(--font-heading-scale) * 3rem);
}
}
@media screen and (min-width: 550px) {
.banner.video-background {
min-height: 39rem;
}
}
@media screen and (min-width: 990px) {
.banner.video-background {
min-height: 54rem;
}
}
@media screen and (min-width: 1320px) {
.banner.video-background {
min-height: 72rem;
}
}
3. Upload and Configure the Video
You can upload a video to Shopify’s files section or use an external video (e.g., from YouTube or Vimeo). Then, update the Liquid code to fetch the video dynamically.
Conclusion
Adding a video banner code for Dawn theme in Shopify improves user engagement and the overall look of your store. By following these steps, you can create a fully responsive video banner that integrates seamlessly into your Shopify theme.
If you encounter any issues, ensure your video file is correctly hosted and the CSS is properly applied. Happy coding!
Hi