Shopify Video Banner Section: 3 Ways to Add One (2026 Guide)

Your homepage banner is the first thing every visitor sees. A static image sits there. A video moves, demonstrates, and holds attention. The problem is Shopify does not give you a single obvious button to add a video to your banner section. The path depends on which theme you are using and how much control you need.

There are 3 ways to add a video to the Shopify banner section: the Dawn theme’s built-in video option (no code, no app), custom Liquid code in image-banner.liquid (full control, developer method), and the Slider Revolution app (templates, YouTube/Vimeo support, no coding). This guide covers all three, with screenshots, complete code, and a troubleshooting section for the most common issues.

Types of Shopify Video Banners

Before choosing a method, it helps to know what kind of video banner you are building. The three types have different setup requirements and different effects on your store.

If you need the banner to be clickable to a product or collection page after adding the video, see our guide on how to make an image banner clickable on Shopify. Video banners follow the same linking approach.

Method Comparison: Which One to Use

Method 1: Dawn Theme Built-In Video (No Code, No App)

If your store uses the Shopify Dawn theme (or any OS 2.0 theme like Craft, Sense, Refresh, or Ride), you can add a video to the banner section directly in the theme customizer. No code edits, no third-party apps.

Step 1: Upload Your Video to Shopify Files

Before you can use a video in the banner, it needs to be hosted on Shopify’s CDN. Go to Settings > Files and click Upload Files. Select your MP4 file. Once uploaded, click the file link to copy its CDN URL. You will need this in the next step.

Step 2: Open Theme Customizer

Go to Online Store > Themes and click Edit Theme.

Step 3: Select the Image Banner Section

In the left sidebar, click the Image Banner section (usually the first section on the homepage). The section settings will open on the left.

Step 4: Switch Media Type to Video

In the Image Banner settings, look for the First media or Background media option. Click Select media, then choose Video instead of Image. Paste the Shopify CDN URL from Step 1 into the video URL field, or upload directly from the media picker.

Step 5: Set Autoplay and Loop Options

In the banner section settings, enable Autoplay and Loop. The video will be muted automatically when autoplay is on (browser requirement). Add your overlay text, button, and heading as usual. These sit on top of the video.

Step 6: Save and Preview

Click Save. Preview the banner on desktop and mobile before publishing. On mobile, verify your fallback image shows instead of the video (especially on iOS Safari where autoplay is restricted).

Method 2: Custom Liquid Code (Full Control)

This method adds a video background field directly to the Image Banner section by editing the theme’s Liquid files. It works on any theme that has an image-banner.liquid section file. After the edit, you get a new “Video Background Banner” field in the theme customizer that accepts a Shopify Files URL.

Here is what the finished result looks like:

Step 1: Open Theme Code Editor

Go to Online Store > Themes. Click the three-dot menu on your active theme and select Edit code.

Step 2: Open image-banner.liquid

In the left sidebar, open the Sections folder and click image-banner.liquid to open it.

Step 3: Add the Video HTML Block

Find the opening of the banner’s content area (usually near the top of the section, inside the main <div>). Paste this code block before the existing image/content markup:

{%- if section.settings.my_video_background_banner != blank -%}
  <div class="my_video_background_banner">
    <video autoplay muted loop playsinline id="myVideoBackground">
      <source src="{{ section.settings.my_video_background_banner }}" type="video/mp4">
    </video>
  </div>
{%- endif -%}

{%- if section.settings.my_video_background_banner != blank -%}
  <div class="my_video_background_banner">
    <video autoplay muted loop playsinline id="myVideoBackground">
      <source src="{{ section.settings.my_video_background_banner }}" type="video/mp4">
    </video>
  </div>
{%- endif -%}

Step 4: Wrap the Existing Image Code with a Condition

To hide the default banner image when a video is active, wrap the existing image code in a conditional check:

{%- if section.settings.my_video_background_banner == blank -%}

  {# your existing image banner code goes here #}

{%- endif -%}

{%- if section.settings.my_video_background_banner == blank -%}

  {# your existing image banner code goes here #}

{%- endif -%}

Step 5: Add the Schema Setting for the Video Field

Scroll down to the {% schema %} block in the file. Inside the "settings" array, add this object to create the video URL input field in the theme customizer:

{
  "type": "url",
  "id": "my_video_background_banner",
  "label": "Video Background Banner"
},

{
  "type": "url",
  "id": "my_video_background_banner",
  "label": "Video Background Banner"
},

Step 6: Add the CSS to base.css

Open Assets > base.css and paste the following CSS at the end of the file:

.my_video_background_banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.my_video_background_banner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.my_video_background_banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.my_video_background_banner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

Step 7: Save Both Files

Click Save in the code editor after editing each file.

Step 8: Upload the Video and Paste the URL

Go to Settings > Files and upload your video file. Once uploaded, copy the file URL. Then go to Online Store > Themes > Customize > Image Banner. You will now see a new “Video Background Banner” field in the section settings. Paste the video URL into that field.

Step 9: Save and Test

Click Save. Test the banner on desktop and mobile. The video should autoplay muted in a loop, contained within the banner area. If you need to add a CTA button on top, make sure your banner text container has a higher z-index than the video wrapper (z-index: 1 on the content layer is usually enough).

You can also upload HTML files to Shopify via Settings > Files to host auxiliary scripts alongside your video content.

Watch the video: Embedding videos using custom code 

Method 3: Slider Revolution App (YouTube, Vimeo, Templates)

Slider Revolution is the best choice when your video banner needs to use a YouTube or Vimeo source, or when you want to start from a professionally designed template instead of building from scratch. It also gives you full animation control, overlay text effects, and CTA button placement without writing any code.

If you already use Slider Revolution for a hero slider or sale banner, adding a video banner is done from the same dashboard with no extra configuration.

Design your Shopify store with advanced animation effects, special fx, dynamic content, and so on.

• Image slider, banner, layer, video, hero, carousel, pages, theme sections
• 200+ ready templates and addons
• Compatible with Shopify 2.0 online store themes and popular landing page builder
• Multilingual, RTL-supported, banner, landing page builder, theme section store
• Use social media content in your slider from YouTube, Vimeo, Facebook, Instagram

Step 1: Access Slider Revolution Templates

Open the Slider Revolution app from your Shopify admin. Click New Slider or Template Library. Search for “video” to filter banner templates that feature video as the primary content.

Step 2: Install the Template

Click on a template and select Install Template. Slider Revolution imports the template with all its slides, animations, and settings ready to customize.

Step 3: Add a YouTube Video Source

In the editor, click the slide background or the video layer. In the Source settings panel on the right, select YouTube Video and paste your YouTube video ID (the characters after ?v= in the YouTube URL).

Step 4: Preview and Publish

Click Preview to verify the video loads and plays correctly. Then click How to Publish to get the publishing guide.

Step 5: Copy the Shortcode

Copy the shortcode ID from the publishing guide by clicking the Copy button.

Step 6: Add to Your Shopify Theme

Click Go To Store, which opens the theme customizer. Add the Slider Revolution section to your page and paste the shortcode. Click Save.

Using a Local (Self-Hosted) Video

To use a video file from Shopify Files instead of YouTube: in the Slider Revolution editor, select the video layer, set the source type to HTML5, then click Media Library and select your uploaded video file.

This method also supports video carousels if you want multiple video clips in a scrollable format instead of a single banner. The same shortcode system applies.

Watch the Video to add Banner Section using Slider Revolution App

Video Format and Size Guide for Shopify Banners

The video format you use affects how fast your banner loads and whether it plays correctly across browsers and devices. Here are the specs that work best for Shopify banner sections.

Mobile Autoplay and Fallback Image

Mobile browsers, particularly iOS Safari, restrict autoplay video in ways that desktop browsers do not. If you do not handle mobile correctly, your video banner will show nothing on iPhone, or it will trigger a fullscreen video player, breaking the page layout.

The Three Rules for Mobile Video Autoplay

1. Always use muted. Browsers will not autoplay a video with sound unless the user has already interacted with the page. The muted attribute is the only reliable way to get autoplay working across all browsers.

2. Always use playsinline. On iOS, video elements without playsinline will launch in the native fullscreen player instead of playing inline in the page. Your banner layout breaks completely. Add playsinline to every video tag.

3. Set a fallback image for mobile. Even with the correct attributes, some users have data saver enabled or are on slow connections where video buffering creates a blank banner. A fallback image ensures the banner always shows something. In the Dawn theme, set a Mobile media image in the banner settings. In the custom Liquid method, use a CSS media query to hide the video container on small screens and show a background image instead:

@media (max-width: 768px) {
  .my_video_background_banner {
    display: none;
  }
  .banner-section {
    background-image: url('YOUR-FALLBACK-IMAGE-URL');
    background-size: cover;
    background-position: center;
  }
}

@media (max-width: 768px) {
  .my_video_background_banner {
    display: none;
  }
  .banner-section {
    background-image: url('YOUR-FALLBACK-IMAGE-URL');
    background-size: cover;
    background-position: center;
  }
}

For stores with product-focused banners, consider pairing the video banner with a product slider below the fold. The video captures attention at the top; the product slider converts it further down the page.

Troubleshooting Common Issues

Most Commonly Asked Questions

Md Nazmul Islam

I’m a digital marketing expert and mobile app developer with a deep understanding of Shopify App Store optimization. I contribute insightful articles on Shopify to help businesses thrive online.