Want personalized guidance adding this to your store?
Check out our Insiders community: https://www.skool.com/the-prompted
Members of The Prompted community receive a detailed store audit, 1-on-1 guidance for implementing new features, and access to an exclusive theme. You'll also get marketing support, the same tactics we use to spend over $100k/mo on Meta Ads.
---
In this tutorial, we're looking at how to add a video banner to your store. This is a great way to show off your brand in an interactive and dynamic way.
Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).
Create new section file video-banner-custom.liquid
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{%- if section.settings.desktop_video_height == 'adapt' -%}
{%- style -%}
@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.desktop_video.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- if section.settings.mobile_video_height == 'adapt' -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.mobile_video.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- style -%}
@media screen and (max-width: 749px) {
.banner__desktop {
display: none !important;
}
.banner__mobile {
display: block !important;
}
}
@media screen and (min-width: 750px) {
.banner__mobile {
display: none !important;
}
.banner__desktop {
display: block !important;
}
}
.banner__desktop .banner__media.media.banner__media-video video, .banner__mobile .banner__media.media.banner__media-video video {
top: 50%;
transform: translateY(-50%);
height: auto;
}
{%- endstyle -%}
<div class="banner__desktop">
<div
id="Banner-{{ section.id }}"
class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.desktop_video_height }}{% if section.settings.desktop_video_height == 'adapt' %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
>
<div class="banner__media media banner__media-video">
{%- if section.settings.desktop_video != blank -%}
{{ section.settings.desktop_video
| video_tag:
autoplay: true,
loop: true,
muted: true,
controls: false
}}
{%- else -%}
<div class="banner__media media placeholder">
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
</div>
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<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>
</div>
<div class="banner__mobile">
<div
id="Banner-{{ section.id }}"
class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.mobile_video_height }}{% if section.settings.mobile_video_height == 'adapt' %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
>
<div class="banner__media media banner__media-video">
{%- if section.settings.mobile_video != blank -%}
{{ section.settings.mobile_video
| video_tag:
autoplay: true,
loop: true,
muted: true,
controls: false
}}
{%- elsif section.settings.desktop_video != blank -%}
{{ section.settings.desktop_video
| video_tag:
autoplay: true,
loop: true,
muted: true,
controls: false
}}
{%- else -%}
<div class="banner__media media placeholder">
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
</div>
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<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>
</div>
{% schema %}
{
"name": "Video Banner",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "header",
"content": "Desktop settings"
},
{
"type": "video",
"id": "desktop_video",
"label": "Desktop video"
},
{
"type": "select",
"id": "desktop_video_height",
"options": [
{
"value": "adapt",
"label": "Adapt to video"
},
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "medium",
"label": "Desktop Video height"
},
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "top-left",
"label": "Top left"
},
{
"value": "top-center",
"label": "Top center"
},
{
"value": "top-right",
"label": "Top right"
},
{
"value": "middle-left",
"label": "Middle left"
},
{
"value": "middle-center",
"label": "Middle center"
},
{
"value": "middle-right",
"label": "Middle right"
},
{
"value": "bottom-left",
"label": "Bottom left"
},
{
"value": "bottom-center",
"label": "Bottom center"
},
{
"value": "bottom-right",
"label": "Bottom right"
}
],
"default": "middle-center",
"label": "Desktop content position"
},
{
"type": "checkbox",
"id": "show_text_box",
"default": true,
"label": "Show text box"
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center",
"label": "Desktop content alignment"
},
{
"type": "header",
"content": "Mobile settings"
},
{
"type": "video",
"id": "mobile_video",
"label": "Mobile video"
},
{
"type": "select",
"id": "mobile_video_height",
"options": [
{
"value": "adapt",
"label": "Adapt to video"
},
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "medium",
"label": "Mobile Video height"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center",
"label": "Mobile content alignment"
},
{
"type": "checkbox",
"id": "show_text_below",
"default": true,
"label": "Show text below video on mobile"
},
{
"type": "header",
"content": "General settings"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color scheme",
"default": "scheme-1"
}
],
"blocks": [
{
"type": "heading",
"name": "Heading",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "Video banner",
"label": "Heading"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "Small"
},
{
"value": "h1",
"label": "Medium"
},
{
"value": "h0",
"label": "Large"
}
],
"default": "h1",
"label": "Heading size"
}
]
},
{
"type": "text",
"name": "Text",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "text",
"default": "Give customers details about the banner video or content in general.",
"label": "Text"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "Body"
},
{
"value": "subtitle",
"label": "Subtitle"
},
{
"value": "caption-with-letter-spacing",
"label": "Caption with letter spacing"
}
],
"default": "body",
"label": "Text style"
}
]
},
{
"type": "buttons",
"name": "Buttons",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label_1",
"default": "Button label",
"label": "First button label",
"info": "Leave blank to hide the button"
},
{
"type": "url",
"id": "button_link_1",
"label": "First button link"
},
{
"type": "checkbox",
"id": "button_style_secondary_1",
"default": false,
"label": "Use secondary button style for first button"
},
{
"type": "text",
"id": "button_label_2",
"default": "Button label",
"label": "Second button label",
"info": "Leave blank to hide the button"
},
{
"type": "url",
"id": "button_link_2",
"label": "Second button link"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "Use secondary button style for second button"
}
]
}
],
"presets": [
{
"name": "Video Banner",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
]
}
{% endschema %}