EComposer is #1 Drag & Drop Page Builder that helps you create professional Shopify websites without any coding. Provide 100+ design elements and 300+ templates, there’s no limit to what you can build. Install EComposer for free today and start building the store you’ve always wanted.
How To Add Video Banners For Shopify? ( Ways & Tips)
Table Of Contents
Adding video banners for Shopify store can be a powerful tool to capture attention, showcase products, and enhance the overall user experience.
In this guide, we'll explore three effective methods for adding video banners to your Shopify store: using custom code, using the EComposer Page Builder tool, or downloading a pre-made Shopify video theme. We'll also provide valuable tips to ensure your video banners are optimized for performance and visually appealing.
How To Add A Shopify Video Banner? (Using Custom Code)
If you're comfortable with coding, adding a video banner to your Shopify store using custom code gives you maximum flexibility. Here's a basic outline of the steps involved.
Step 1: Create a video banner.liquid Section
First, log in to your Shopify account. Then select "Online store" > "Themes" in the left vertical menu.
Then, find the theme to which you want to add the video banner. Hit on the three dots icon and select "Edit code."
In the Shopify theme code editor, open "Sections" and "Add a new section."
Select the format as .liqiud and name the new section "video-banner" (optional).
Step 2: Paste The Code
After creating a video banner section, paste our code below.
|
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% if block.type == 'video' %}
<div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image | img_url: 'master' }}');{%- endif -%}">
{%- if block.settings.video_link != blank -%}
<div class="fullscreen-video-wrap">
<video class="video-js" loop autoplay preload="none" muted playsinline
poster="https:{{ block.settings.video_image | img_url: 'master' }}">
<source src="{{ block.settings.video_link }}" type="video/mp4">
</video>
</div>
{% endif %}
<div class="videoBoxInfo">
{% if block.settings.title != blank %}
<h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">
{{ block.settings.title | escape }}
</h1>
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
{{ block.settings.text }}
</div>
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
<a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
{{ block.settings.button_label | escape }}
</a>
{% endif %}
</div>
</div>
{% else %}
<div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');{%- endif -%}">
<div class="imageBoxInfo">
{% if block.settings.title != blank %}
<h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">
{{ block.settings.title | escape }}
</h1>
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {
color: {{ block.settings.color_text }}!important;
}
{%- endstyle -%}
{% if block.settings.text != blank %}
<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
{{ block.settings.text }}
</div>
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
<a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
{{ block.settings.button_label | escape }}
</a>
{% endif %}
</div>
</div>
{% endif %}
{%- endfor -%}
{% else %}
<div class="placeholderNoblocks">
This section doesn’t currently include any content. Add content to this section using the sidebar.
</div>
{%- endif -%}
<style>
.main-content .videoBackground {
margin-top: -55px;
}
.videoBackground {
position: relative;
}
.videoBackground .fullscreen-video-wrap {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
width: 100%;
height: 100%;
overflow: hidden;
}
.videoBackground .fullscreen-video-wrap .video-js {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
.videoBackground .fullscreen-video-wrap video {
min-height: 100%;
min-width: 100%;
object-fit: cover;
}
.videoBackground .videoBox {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
padding: 100px 20px 80px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 500px;
max-height: 800px;
height: calc(100vh - 165px);
position: relative;
}
.videoBackground .imageBox {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
padding: 100px 20px 80px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
min-height: calc(100vh - 165px);
height: auto;
}
.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
z-index: 2;
margin: auto;
text-align: center;
}
.videoBackground .overlay {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: 1;
}
.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: auto;
text-decoration: none;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 2px;
padding: 10px 30px;
font-style: normal;
font-weight: normal;
letter-spacing: 0.06em;
white-space: normal;
font-size: 16px;
margin-top: 20px;
}
.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
color: #FFF;
font-size: 65px;
line-height: 40px;
}
.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
max-width: 500px;
margin: 0 auto;
}
.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
font-size: 17px;
line-height: 28px;
}
.videoBackground .placeholderNoblocks {
text-align: center;
max-width: 500px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.main-content .videoBackground {
margin-top: -35px;
}
.videoBackground .fullscreen-video-wrap {
z-index: 3;
}
.videoBackground .videoBox {
min-height: 300px;
height: 100%;
position: relative;
padding: 0;
}
.videoBackground .fullscreen-video-wrap {
position: relative;
min-height: 300px;
z-index: -2;
}
.videoBackground .videoBoxInfo {
padding: 2px 20px;
width: 100%;
}
.videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn { display: none;
}
}
</style>
{% schema %}
{
"name": {
"en": "Video Background"
},
"class": "videoBackground",
"max_blocks": 1,
"blocks": [
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "url",
"id": "video_link",
"label": {
"en": "Video link"
}
},
{
"type": "image_picker",
"id": "video_image",
"label": {
"en": "Cover image"
}
},
{
"type": "header",
"content": {
"en": "Text"
}
},
{
"type": "text",
"id": "title",
"label": {
"en": "Heading"
},
"default": "Video slide"
},
{
"type": "richtext",
"id": "text",
"label": {
"en": "Description"
},
"default": {
"en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
}
},
{
"type": "color",
"id": "color_text",
"label": {
"en": "Text color"
},
"default": "#ffffff"
},
{
"type": "text",
"id": "button_label",
"label": {
"en": "Button label"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"en": "Button link"
}
},
{
"type": "color",
"id": "color_btn_bg",
"label": {
"en": "Background button color"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "color_btn_text",
"label": {
"en": "Button text color"
},
"default": "#ffffff"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "color",
"id": "color_bg",
"label": {
"en": "Background color (optional)"
},
"default": "#16165b"
},
{
"type": "image_picker",
"id": "image_bg",
"label": {
"en": "or use an image (required)"
}
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"en": "Overlay opacity"
},
"min": 0,
"max": 99,
"step": 1,
"unit": {
"en": "%"
},
"default": 0
},
{
"type": "header",
"content": {
"en": "Text"
}
},
{
"type": "text",
"id": "title",
"default": "Image slide",
"label": {
"en": "Heading"
}
},
{
"type": "richtext",
"id": "text",
"label": {
"en": "Description"
},
"default": {
"en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
}
},
{
"type": "color",
"id": "color_text",
"label": {
"en": "Text color"
},
"default": "#ffffff"
},
{
"type": "text",
"id": "button_label",
"label": {
"en": "Button label"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"en": "Button link"
}
},
{
"type": "color",
"id": "color_btn_bg",
"label": {
"en": "Background button color"
},
"default": "#ffffff"
},
{
"type": "color",
"id": "color_btn_text",
"label": {
"en": "Button text color"
},
"default": "#ffffff"
}
]
}
],
"presets": [
{
"name": {
"en": "Video Background"
},
"category": {
"en": "Main"
},
"blocks": [
{
"type": "video" }
]
}
]
}
{% endschema %} |
Then, click “Save” button.
Step 3: Upload Your Video Banner File
To add your video to your Shopify store, you'll need to upload it as an .mp4 file. If you got your video from YouTube or Vimeo, you'll need to download it first. If you don't know how to upload videos from these sources, we have instructions in the tip section below.
After having a video file, just go to "Content" > "Files" and click "Upload files." Once it's uploaded, copy this link. You'll use it in the next step.
Step 4: Add Your Video Banner
Then go back to the Shopify theme customizer and click "Add section" and chose the "Video background" element.
Here you can:
- Embed a video by pasting a copy link in step 3 above.
- Insert text describing the video for customers using screen readers.
How To Add A Video Banner On The Shopify Store? (Without Code)
Want to add captivating video banners to your Shopify store, but coding isn't your forte? No worries. This guide explores two user-friendly approaches to achieve that desired visual impact.
- Option 1: Using EComposer Page Builder. This app allows you to create beautiful video banners without needing any coding knowledge.
- Option 2: Downloading a Shopify video template. If you'd rather skip the app installation and have video banner functionality built right in, consider using a pre-made Shopify video theme.
Let’s start!
Option 1: Using EComposer Page Builder
Don't worry if you don't want to use code. The EComposer Page Builder tool can help you add a video banner to your store with just a few clicks. There's no need to code!
With EComposer, you can:
- Drag and drop to design your perfect layout.
- Choose from tons of pre-made sections and elements.
- Customize your video section to match your store's style.
Here are how to do it:
Step 1: In the Shopify App Store, search for EComposer Landing Page Builder, and then install this app on your Shopify store.
Step 2: After installing the app, open EComposer and click "Start building." Here, you will choose the type of page and template (free and paid). For example, we chose the Homepage design.
Step 3: After the EComposer editor appears, find "Video" in the Element tab. Then, you just need to drag and drop this element to the position where you want the video to appear on the page.
Step 4: Move the mouse over the editing pen and hit it to change everything from the video and text to the style, design, and more advanced features. The changes will be made in the left section.
Option 2: Downloading A Shopify Video Theme
If you want to add video banners to your Shopify store without having to use code and third-party apps, you should use a video banner template that has already been made.
We looked at more than 100 Shopify themes and chose the 5 best ones with video headers to maximize the visual effect.
#1. Kalles Theme
Price: $89.
Best for: A modern and minimalist aesthetic.
Key features:
- Supports video thumbnails and 3D functionality, allowing you to showcase video content within your banners.
- Unique homepage layouts with more options promised in the future.
- 500+ Google Fonts for a personalized touch.
- Awesome shop layouts with Ajax technology.
#2. Gem Theme
Price: $380.
Best for: Boutique jewelry, chic accessories & clothing.
Key features:
- Supports image galleries could potentially be used to embed videos. By including a video within an image gallery section, you might be able to create a video banner.
- Customizable sectional layouts allow you to create custom layouts where you could potentially embed video content.
- The product media tabs might provide options to include videos within product pages. It could be used in conjunction with other sections to create a video banner effect.
#3. Reformation Theme
Price: $320.
Best for: Luxury clothing, perfume & fragrances.
Key features:
- Slideshow sections with video support can potentially be used to display video banners.
- Hover-style image display offers customers a 360-degree view of products, giving them a better sense of their appearance and details.
- Pre-orders, slide-out carts, and quick-buy features streamline the purchasing process and can increase sales.
Read more: 21 best converting Shopify themes that actually work.
Tips For Adding High-Quality Shopify Video Banners
Adding videos can add a dynamic element and boost engagement, but it's important to do it right. Here are some tips to help you create high-quality video banners that look great and load quickly.
Download A Video From YouTube, Vimeo
Want to download the YouTube or Vimeo videos for free? The SaveFrom extension is a great option. Just copy the link, then paste it into savefrom.net.
Custom Start Time Cho Video Banner
Sets a specific delay before the video begins playing, giving users more control over when they see the content. By setting a custom start time, you can delay the video's playback until the user scrolls to the section containing the banner or interacts with a specific element.
If you use the EComposer Page Builder to add video banners, you can easily set up, for example, a user to scrolls to the banner or trigger a specific event (e.g., clicking a play button), and the video will begin playing.
EComposer Page Builder’s custom start time for the video feature.
Optimize Video Quality
When you're making video banners for your Shopify store, try to use a high-quality video. 4K (4096 x 2160 px) is a great choice because it looks really sharp and clear.
You can use special tools to make your videos smaller without losing too much quality. Handbrake and Adobe Media Encoder are good options for this.
If you'd rather not do it yourself, websites like CloudConvert and Clipchamp can help.
Pick The Right Codec
Codecs help your videos load faster, so customers don't have to wait forever. H.264 is a great choice for online videos. It maintains good quality but makes the files smaller.
There are different settings within H.264, but they don't change much. You can try them out to see if you notice a difference.
Choose The Right Video Types
Product Showcase Videos
Product showcase videos are like showing off your products in person. They help people see how your items can make their lives better. You can show them how the products work, what they look like up close, and even hear what other customers think.
Look at SAKK Camera Equipment's homepage. They have a cool video that automatically plays and shows their products in action. It's a great way to grab attention and give customers a sneak peek.
Brand Storytelling Videos
You can show behind-the-scenes footage, talk to your team, or share stories from happy customers. It’s a great way to build a community around your business.
For example, the top page of Delani Jewelry has a collection. People who are happy with the brand made these videos:
Seasonal Or Promotional Videos
Seasonal videos are like special offers just for your customers. They can help you promote sales, new products, or discounts during holidays or special events. These videos can create excitement and make people want to buy right away. You can tailor them to your customers' interests so they're even more effective.
FAQs
What Size Is The Shopify Video Banner?
The best size for a video ad is usually 16:9 ratio, which is the format used for full-screen slideshows.
Should I Use A Video Loop For My Shopify Banner?
Yes, you can easily change video ads to automatically play and loop in a way that fits with your brand's style and message.
Does Using Video Banners On My Shopify Store Have Any Drawbacks?
Yes, there are potential drawbacks to using video banners on your Shopify store:
- Increased loading time, it is negatively impacts user experience and SEO.
- Mobile performance because video banners can consume more data on mobile devices. It potentially affects user experience and leads to higher data costs for customers.
- Overuse of video banners can be overwhelming for users and may distract from your products or content.
By carefully considering these factors and taking steps to optimize your video banners, you can effectively leverage them to enhance your Shopify store while minimizing potential drawbacks.
Key Takeaway
Whether you choose to use custom code, a drag-and-drop page builder like EComposer, or a pre-made Shopify video theme, the process is relatively straightforward. Remember to optimize your videos for performance, consider mobile responsiveness, and test your banners thoroughly to ensure they align with your store's branding and goals.
We also have an article with instructions on adding videos to Shopify product descriptions.
0 comments