fbpx

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

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

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

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

Join Our Growing Community!

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

4 thoughts on “How to Add the Shopify Video to Banner Section Easily in 2024”

  1. Hi there,
    Firstly thanks for this guide its really good.
    I am having an issue with the default image still showing over my video even tho no image is selected. Any advice?
    thanks.

    1. Hello, You need to remove the image when use video and do not missed the code to show above image condition to show video

  2. Hi, i’m having a few issues with the code, my video is uploading, however its not contained within the image banner area its overflowing onto other sections of my page. I also cant seem to centre the video? Its currently a draft on shopify.
    Any solutions?
    Thanks.

Leave a Comment

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

Explore the #1 Shopify Slider today

πŸš€Create Any Shopify Slider Including a Single Page, Section & More

X
Scroll to Top