How to Add the Shopify Video to Banner Section Easily in 2023

Share Post:

Add the Shopify Video to Banner Section

Do you want to add the Shopify Video to Banner Section? The Banner is the most important section of any website. It is a prime section to get the focus of visitors and showcase your products or services in a dynamic and engaging way. By adding a video, you can give potential customers a quick and visually appealing introduction to your brand.

In this article, we will discuss the process of adding a video to the banner section of your Shopify store. By following this tutorial, you will be able to add the video to any section of your store.

After completing this tutorial, you will see the Shopify Video to Banner Section like this:

video background

Add the Shopify Video to Banner Section

To apply the video as a banner, we have to add some codes. We can follow the following process to add the video to Shopify stores.

  • Login to the Shopify admin panel
  • Go to Online Store > Themes > Customize > … Dot Button > Edit code
edit code of shopify
  • Now theme editor file will be appear.
  • Go to Sections > and edit the image-banner.liquid
  • Now paste the following code on image-banner.liquid
{%- if section.settings.my_video_background_banner != blank -%}
    <div class="my_video_background_banner">  
      <video autoplay muted loop id="myVideoBackground">
        <source src="{{ section.settings.my_video_background_banner }}" type="video/mp4">
      </video>
    </div>
{%- endif -%}

Here is given screenshots:

embeded video code
  • Now we will set a condition if the video is uploaded, then the image will not show. So let’s add the conditions.
{%- if section.settings.my_video_background_banner == blank -%} 

// your exisiting code

{%- endif -%}

Here is given screenshots:

starting ending code
  • Now we have to add the schema code where a field will be added to upload the video.
//schema
{
    "type": "url",
    "id": "my_video_background_banner",
    "label": "My Video Background Banner"
},
schema
  • Now we have to add the css code to responsive the video for any devices.
  • Go to Assets > base.css
  • Now copy paste the code
//CSS Code
.my_video_background_banner {
    position: absolute;
    width: 100%;
    height: 100%;
}
base css code
  • Now click the Save button.

Our task is finished. Now we have to upload a video and paste the link to the video background field. To upload the video, follow the following process:

  • Login to the Shopify
  • Settings > File > Upload Files
file upload shopify
  • Now just Copy the link. We have to paste the link into the Image banner field.
  • Go to Online Store > Themes > Customize > Image banner
  • Paste the link into the video background banner field.
Shopify Video to Banner Section
  • Now click Save button

You also can watch the video: How to Add Shopify Video to Banner Section

The article concludes by showing how to add a Shopify Video to Banner Section, including uploading the video file, creating a video section in the theme’s code, and customizing its appearance on the store’s homepage.

Read More:

What Is The Recommended Shopify Image Banner Size

Join Our Growing Community!

Subscribe to our newsletter and never miss our Products latest offer news and useful shopify tips & tricks.

Leave a Comment

Your email address will not be published. Required fields are marked *

Explore the #1 Shopify Slider today

Sign Up
close-link

🚀🔥Create Stunning Image, Video, and Product Sliders in Minutes with Slider Revolution 6

X