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

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

Process 1:

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.

Process 2:

If you think the above process is tough then you can start with Slider Revolution without having any coding knowledge. This app is completely responsive to add any video on any page with a lot of features.

What makes Slider Revolution best:

• 📌 Top Recommended Shopify Slider & Builder App.
• 📌 Create Image, carousel, banner, layer and product slider including single page.
• 📌 Use 200+ ready slider templates and 20+ addons to create slider in no time.
• 📌 Drag & drop slider with no coding experience.
• 📌 Use social media content in your slider from YouTube, Vimeo, Facebook, Instagram.
• 📌 Create Multilingual and RTL supported sliders, banners, carousel for your store.
• 📌 Overall 4.9 rating on Shopify.

Now watch this video guide to Add any Video to the Banner Section on any page:

Read More:

What Is The Recommended Shopify Image Banner Size