Capturing the attention of potential customers is paramount. One of the most effective ways to achieve this is by incorporating dynamic visual elements into your online store. A video banner section can transform the look and feel of your Shopify site, providing an engaging and immersive experience for visitors. In this blog post, we will guide you through the process of creating a stunning video banner section in Shopify, highlighting the key steps and best practices to ensure your banner not only looks great but also enhances your brand’s message.
Code: https://github.com/ndrishinski/blogs/blob/master/video-banner/sections/video-banner.liquid
Video by cottonbro studio from Pexels: https://www.pexels.com/video/a-woman-in-a-gold-dress-having-a-sip-of-alcoholic-drink-while-posing-in-a-photo-shoot-3402883/
Prefer video?
Enjoy, otherwise read on!
Create a new section file
The first thing we will do is create a new file in our sections directory. I am going to name it ‘video-banner.liquid’. This file will hold all of our HTML, CSS and Javascript. The first thing we’ll add is our styles at the top.
<style>
.luxury-banner {
position: relative;
width: 100%;
height: 70vh;
overflow: hidden;
font-family: Arial, sans-serif;
}
.luxury-banner #bannerVideo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.luxury-banner .overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: {{ section.settings.banner-video-h1-text-color}};
text-align: center;
}
.luxury-banner h1 {
margin-bottom: 1rem;
color: {{ section.settings.banner-video-h1-text-color }} !important;
font-size: 48px !important;
}
.luxury-banner p {
max-width: 40rem;
margin-bottom: 2rem;
font-size: 20px!important;
}
.luxury-banner .cta-button {
background-color: {{ section.settings.banner-cta-background }};
border: none;
padding: 1.75rem 4.50rem;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s;
color: {{ section.settings.banner-cta-text-color }}
}
.luxury-banner .cta-button:hover {
background-color: #f0f0f0;
}
.luxury-banner .mute-button {
position: absolute;
bottom: 1rem;
right: 1rem;
background-color: rgba(255, 255, 255, 0.5);
border: none;
border-radius: 50%;
padding: 0.5rem;
cursor: pointer;
transition: background-color 0.3s;
}
.luxury-banner .mute-button:hover {
background-color: rgba(255, 255, 255, 0.75);
}
.luxury-banner .mute-icon,
.unmute-icon {
width: 1.5rem;
height: 1.5rem;
}
.luxury-banner .hidden {
display: none;
}
@media (max-width: 768px) {
.luxury-banner h1 {
font-size: 32px!important;
}
.luxury-banner p {
font-size: 16px!
}
}
</style>I won’t go into much detail about this code but the main thing to notice is that we are referencing a section setting to set the color in a few places. We’ll create this setting later in our schema.
Next we will add our HTML below:
<div class="luxury-banner">
{{ section.settings.banner-video | video_tag: autoplay: true, loop: true, id: "bannerVideo", muted: true }}
<div class="overlay">
<h1>{{ section.settings.banner-h1-text }}</h1>
<p>{{ section.settings.banner-p-text}}</p>
<a href="collections/{{ section.settings.banner-cta-link }}">
<button class="cta-button">
{{ section.settings.banner-cta-text}}
</button>
</a>
</div>
{% if section.settings.banner-show-mute %}
<button id="muteButton" class="mute-button" aria-label="Unmute video">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="mute-icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.25 9.75L19.5 12m0 0l2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6l4.72-4.72a.75.75 0 011.28.531V19.94a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.506-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.395C2.806 8.757 3.63 8.25 4.51 8.25H6.75z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="unmute-icon hidden">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" />
</svg>
</button>
{% endif %}
</div>A few things to point out here.
The video_tag liquid filter is being used to embed our video. We pass a few arguments along to make it loop, autoplay and mute. Shopify let’s us add it in this one tag rather than add the HTML directly which is nice!
We are also referencing a few more section settings from the schema which we’ll add in a moment.
The svg towards the bottom is our button which indicates if the video is muted or not. But we have a liquid conditional {% if … %} which will only show this button if we have enabled it to show.
Now we’re ready to add our JavaScript. We’ll also add the liquid conditional to only show if we are showing the mute button. Often we’ll want a video to play with no audio, and we don’t need this JavaScript in that case.
{% if section.settings.banner-show-mute %}
<script>
document.addEventListener('DOMContentLoaded', function () {
const video = document.getElementById('bannerVideo');
const muteButton = document.getElementById('muteButton');
const muteIcon = muteButton.querySelector('.mute-icon');
const unmuteIcon = muteButton.querySelector('.unmute-icon');
muteButton.addEventListener('click', function () {
if (video.muted) {
video.muted = false;
muteIcon.classList.add('hidden');
unmuteIcon.classList.remove('hidden');
muteButton.setAttribute('aria-label', 'Mute video');
} else {
video.muted = true;
muteIcon.classList.remove('hidden');
unmuteIcon.classList.add('hidden');
muteButton.setAttribute('aria-label', 'Unmute video');
}
});
});
</script>
{% endif %}This JavaScript handles the click event on our mute button and toggles it on or off.
All we need now is to add our schema settings at the bottom of the file to successfully add and customize this in the theme editor.
{% schema %}
{
"name": "Video Banner",
"settings": [
{
"type": "video",
"id": "banner-video",
"label": "Banner Video"
},
{
"type": "text",
"id": "banner-h1-text",
"label": "Heading Text",
"default": "Disover Luxury"
},
{
"type": "text",
"id": "banner-p-text",
"label": "SubHeading Text",
"default": "Indulge in exquisite craftsmanship and timeless elegance"
},
{
"type": "color",
"id": "banner-video-h1-text-color",
"label": "Text Color",
"default": "#fff"
},
{
"type": "text",
"id": "banner-cta-text",
"label": "Button Text",
"default": "Shop Now"
},
{
"type": "color",
"id": "banner-cta-background",
"label": "Button backgroudn color",
"default": "#fff"
},
{
"type": "color",
"id": "banner-cta-text-color",
"label": "Button Text Color",
"default": "#000"
},
{
"type": "checkbox",
"id": "banner-show-mute",
"label": "Show mute button",
"default": true
},
{
"type": "collection",
"id": "banner-cta-link",
"label": "Link for button"
}
],
"presets": [
{
"name": "Video Banner"
}
]
}
{% endschema %}This will allow us to customize our text, text color, button text and button color. It also gives us the option to show or hide the mute button and add the collection we want our button to link to.
Conclusion
After saving our code, we can now navigate to the theme editor and add our section called ‘video-banner.liquid’.
Creating a video banner section in Shopify is a powerful way to elevate your online store’s aesthetic and engage your audience. By following the steps outlined in this blog, you can easily implement a captivating video banner that showcases your products and brand story. Remember to optimize your video for performance and ensure it aligns with your overall design strategy. With a well-crafted video banner, you can leave a lasting impression on your visitors, encouraging them to explore your offerings and ultimately driving conversions. Embrace the potential of video content and watch your Shopify store thrive!