This tutorial will guide you through setting up a video banner on the Dawn theme, specifically version 15. If you have a slightly older version, this guide may still be helpful.
Table of Contents
- Step 1: Access the Code Editor
- Step 2: Add a New Section
- Step 3: Create a CSS File
- Step 4: Customize the Theme
- Step 5: Add Video URL
- Step 6: Customize the Video Banner
- Step 7: Adjust Text and Button Position
- Step 8: Save and Preview
- Step 9: Get the Code
Step 1: Access the Code Editor
If you’re using Shopify’s Dawn theme and want to add a video banner, start by accessing the code editor.
First, navigate to the code editor from your Shopify admin dashboard. You will need to add a couple of files to achieve this.
Step 2: Add a New Section
Once in the code editor, go to the “Sections” folder and add a new section. Name this section “video-banner” and ensure it’s a Liquid file. This will create a blank file where we will add our custom code.
Delete any default code in this new file and paste the code provided below. Save the file once done.
Step 3: Create a CSS File
Next, navigate to the “Assets” folder and create a new asset file. This file will handle the CSS for your video banner. Name the file “section-video-banner.css”. It should match the css asset file you see on top of video-banner.liquid.
Paste the provided CSS code into this new file and save it.
Step 4: Customize the Theme
After saving your files, go to the theme customization area. Here, you will find an existing image banner. For now, hide this image banner to focus on adding the video banner.
Click on “Add Section” and search for “video-banner.” Add this section to your layout; it will initially appear at the bottom, but you can drag it to the top.
Step 5: Add Video URL
With the video banner section added, you will now see various customization options on the right-hand side. The most important step is to add the URL of your video.
If your video is hosted on a different CDN, enter the URL in the designated field. Alternatively, you can upload the video to Shopify’s content files and copy the URL from there. Paste this URL into the video URL field.
Step 6: Customize the Video Banner
Now that your video is showing, you can customize the banner further. You can remove the container on the desktop view by unchecking the “Show container on desktop” option.
Additionally, you can modify the buttons to suit your needs. For instance, you might want to remove one button or change the text color to make it more readable.
Step 7: Adjust Text and Button Position
In the customization panel, you will find options to adjust the position of the text and buttons. You can play around with these settings to get the look you desire.
For mobile and desktop layouts, there are separate options to position the text on the left, right or center. All the settings you see are similar to those available for the image banner but are more limited.
Step 8: Save and Preview
Once you are satisfied with your customizations, save your changes. You can now preview how the video banner looks on your store. Ensure that the text is readable and that the video scales well across different screen sizes.
If you need to make further adjustments, you can always go back to the customization panel and tweak the settings.
If you encounter any issues or need further explanation, I recommend checking out my older videos where I go into more detail about troubleshooting and specific code functionalities.
And that’s it! You now have a fully functional video banner on your Dawn theme.
Step 9: Get the Code
video-banner.liquid
{{ '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 %}
section-video-banner.css
.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;
}
}
