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

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:

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

• 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:

• 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:

• 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"
},

• 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%;
}

• 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

• 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.

• 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