How to Add a Video Banner to Your Shopify Store
(2026 Complete Guide)

A video banner at the top of your Shopify storefront does in three seconds what a static hero image takes a paragraph of copy to do — it shows your brand in motion, sets a mood, and gives shoppers something to look at while the rest of the page loads. Done well, it lifts conversion. Done badly, it wrecks your page speed scores and looks awful on mobile.

What is a video banner on Shopify?

A video banner is a full-width video element placed at the top of a Shopify page — most commonly the homepage, but also collection pages and (less often) product pages. Unlike a product video that lives in the PDP media gallery, a banner video sits in the hero slot where most stores would otherwise have a static image with text overlay.

Three things distinguish a banner video from other Shopify video:

• It's placement-defined, not product-defined. A single banner runs across your homepage; it isn't bound to a specific SKU.
• It's looping and silent by default. Banner videos autoplay, mute, and loop — they're ambient, not interactive.
• It usually has a CTA or text overlay. A banner video without a clear action is decoration; a banner video with a button is a conversion mechanism.

The merchants who get the most out of banner videos use them like a brand statement that happens to convert. The ones who get the least treat them like moving wallpaper.

The four ways to add a video banner to Shopify

For ~70% of Shopify merchants, the theme editor is enough — if you have one polished branded video and don't need a different version for mobile. For everything else, an app is the right answer.

Method 1 — Theme editor video section

Most modern Shopify themes (Dawn, Symmetry, Prestige, Pipeline, Broadcast, Empire) include a "Video" section you can drop into the homepage via the customizer.

Steps:

1. From Shopify Admin, go to Online Store > Themes and click Customize on your active theme
2. Click Add section and select "Video" (or "Video Background," depending on theme)
3. Add the section to your homepage template
4. Upload your video file (MP4 or MOV, under 50 MB ideally) or paste a YouTube/Vimeo URL
5. Toggle autoplay, mute, loop on
6. Save

Limitations: most theme video sections show one video. The same video shows on desktop and mobile, which is the issue we'll cover in the next section. Theme video sections also tend not to support CTAs or buttons overlaid on the video itself — you get a text caption at best.

Method 2 — Custom code (Liquid)

For a dev team building a specific layout no app supports:

<!-- Inside theme section: hero-video.liquid -->
<div class="video-banner">
  <video autoplay muted loop playsinline preload="metadata">
    <source src="{{ section.settings.video_desktop | asset_url }}" type="video/mp4">
  </video>
  {% if section.settings.cta_text %}
    <a href="{{ section.settings.cta_url }}" class="banner-cta">{{ section.settings.cta_text }}</a>
  {% endif %}
</div>

For mobile/desktop separation, you'd need device detection or CSS media queries plus separate <video> elements with media attributes — possible but brittle. Every theme update is a regression risk; every new banner means another deploy.

This method is the right call for ~5% of stores. For everyone else, the maintenance cost outweighs the flexibility gain.

Method 3 — Generic banner apps

Apps in the Shopify App Store like Vidify, JEase, Viddy, and Clickable Video Banner CB add a video banner block via the theme customizer without requiring code. Each has a slightly different angle:

• Vidify — desktop and mobile videos separate, customizable text/buttons
• Viddy — entire banner is one clickable link
• JEase — one-click homepage video banner, Store 2.0 compatible
• Clickable Video Banner CB — focuses on making banners interactive

These cover the basic case well. They don't typically handle page-speed optimization aggressively, and most charge for advanced features like carousels or per-banner analytics.

Method 4 — Whatmore

Whatmore's banner video feature was redesigned in March 2026 to handle the operational details that the other three methods leave to you:

• Separate uploads for desktop (16:9) and mobile (9:16) — no aspect-ratio compromise
• Page-speed impact handled inherently — CDN, lazy-load, adaptive bitrate built in
• Inline CTA editing — text and button overlay, edited directly in the banner workflow
• 3–5 banner carousel with drag-and-drop reordering
• Media drawer for previewing banner videos before they go live
• Table-based video management for the banner library

Desktop and mobile aspect ratios — the 16:9 / 9:16 problem

This is the single biggest gripe Shopify merchants have about video banners. A 16:9 horizontal video designed for a desktop hero looks great on desktop and terrible on mobile, where it gets letterboxed or zoomed-cropped and loses half its compositional intent. A 9:16 vertical video designed for mobile looks great on mobile and equally terrible on desktop. There's no single aspect ratio that works for both.

Three real solutions:

1. Native upload + theme code customization — upload two video files, add CSS media queries or device detection in your theme code, route the right file to the right device. Works but is fragile across theme updates.
2. Generic apps that support separate uploads — Vidify supports this on a paid plan; Viddy supports it as an optional feature. Check before you commit.
3. Whatmore — separate desktop (16:9) and mobile (9:16) uploads are first-class, not an upsell. You upload both files in the same workflow, and the app routes them based on viewport automatically.

Aspect ratio recommendations:

• Desktop: 16:9 (1920×1080) or 21:9 cinematic for full-bleed hero
• Mobile: 9:16 (1080×1920) — vertical, full-bleed, matches the format shoppers see on Instagram and TikTok
• File size: under 5 MB per video; under 10 seconds preferred; H.264 codec, AAC audio
• Frame rate: 24 or 30 fps (60 fps is overkill for banner video and doubles file size)

If your team has been treating the desktop video as the primary asset and "the mobile experience will be fine," go test on three mid-range Android devices today. If it isn't, this is the most impactful fix in the entire guide.

CTAs and clickability — making banners convert

The honest truth about most video banners on Shopify: they look beautiful and convert nothing. A banner video without a clear next-step is decoration. A banner video with the right CTA is one of the strongest conversion levers on a homepage.

There are three CTA patterns worth knowing:

1. Whole-banner clickable — the entire video is a link. Works for a single dominant message ("Shop new arrivals"). Doesn't work when you want to test two CTAs or send users to different destinations.

2. Text + button overlay — a headline and a CTA button overlay the video. Most flexible pattern. Lets you A/B test button text, change destination URLs without re-uploading the video, and stack a secondary action ("Learn more" alongside "Shop now").

3. Hotspot tagging — products tagged within the video frame, similar to shoppable video on PDPs. Advanced pattern; closer to shoppable video than a traditional CTA banner.

For most stores, text + button overlay is the right default. It separates the creative (the video) from the conversion logic (the CTA), which lets you iterate on each independently.

CTA copy that converts on a banner:

• One action only ("Shop new arrivals," "Get 20% off")
• Visible on mobile without scrolling (button minimum 44px tap target)
• High-contrast colour against the video (test in different scenes if the video is dynamic)
• Action-oriented verb, not a descriptor ("Shop now" beats "Our new collection")

Carousel and multi-banner setup

One banner isn't always enough. Seasonal campaigns, multi-product promotions, A/B testing different hero messages — these all benefit from rotating banner content. Carousels let you do this without redesigning the homepage every two weeks.

Best practices for a banner video carousel:

• 3–5 banners maximum. More than that and shoppers leave before the carousel cycles back to the first message.
• 5–7 seconds per slide. Long enough to read the headline, short enough to keep momentum.
• Manual pause control. Let users pause if they want to read.
• Same aspect ratio across all banners. Mixing 16:9 and other ratios in one carousel breaks the layout.
• One CTA per banner. Don't stack actions inside a single slide.

Whatmore supports a 3–5 banner carousel natively, with drag-and-drop reordering in the admin and a media drawer for previewing each banner before it goes live (this was the focus of the March 2026 UI revamp).

Page speed considerations

Video banners are the single most common cause of LCP regressions on Shopify homepages. The Shopify Performance Engineering team has published their own guide on this — it's not a niche concern.

Three rules of thumb that prevent ~90% of page speed issues:

1. File size under 5 MB per banner video. Most issues come from 30–50 MB exports of "good quality" video. Recompress with H.264 to under 5 MB at 1080p; the visual difference is imperceptible at banner scale.

2. Lazy-load anything below the fold. The hero banner runs immediately; secondary banners (collection pages, lower homepage sections) should only load when the user scrolls toward them.

3. Use a video CDN, not raw Shopify file hosting. Native upload of large files routes through Shopify's general CDN without adaptive bitrate. Specialized video CDNs serve different files to different devices based on bandwidth.

Whatmore handles all three inherently — CDN delivery, lazy-loading for below-the-fold banners, and adaptive bitrate optimization.

Best video banner apps for Shopify

Six apps worth knowing. Each has a different sweet spot.

Honest "best for" framings:

• Whatmore — best when you need separate desktop/mobile, a CTA, page-speed handled, and the option to expand into a carousel. The most complete feature set in this list; pricing reflects that.
• Vidify — best when you want a clean simple banner with a button overlay and you're willing to upgrade to a paid plan for mobile/desktop separation.
• Viddy — best when "the whole banner is a link" is exactly the model you want. Lowest-friction install.
• JEase — best for merchants who want a single homepage video banner up in 10 minutes and don't need anything beyond that.
• K:Video Slider — best when you want video slider functionality and don't already have a slider app.

Real Shopify stores using video banners well

Three examples worth studying:

The pattern across all three: video banners aren't tacked onto an existing homepage. They're designed alongside the rest of the homepage so the visual language matches.