Shopify questionAnswer4 min read
Should My Store Have a Video on the Homepage?
A homepage video helps when it shows what a photo can't. Otherwise it mostly slows the first screen on mobile. Here is how to decide, and how to do it right if you go ahead.
Key takeaways
- A homepage video helps when it shows something a photo can't: a product in motion, how it's used or how it's made. As pure decoration, it mostly costs speed.
- If the video sits in the hero, it usually becomes the page's Largest Contentful Paint element. Google counts the poster image or the first frame, whichever shows first.
- Shopify-hosted videos can be MP4, MOV or WebM, up to 10 minutes, 1 GB and 4K. For a background banner, aim for a few seconds and a few megabytes.
- Autoplaying video that runs longer than five seconds needs a visible pause control to meet WCAG 2.2 criterion 2.2.2.
- Who it is for
- Store owners redesigning a homepage
- Time needed
- 5 minutes to read
- What you need
- A short product video
Only if the video shows your product better than a photo can. A short, muted, looping Shopify video banner that demonstrates the product can earn its place, but a long or decorative video in the hero mainly slows the first screen on mobile. For most stores, I recommend a strong hero image with a click-to-play video further down the page.
I build Shopify homepages and do speed work on them, so I see both sides: the brand that wants movement and the mobile page that takes too long to show anything. Shopify's video limits and Google's guidance below were checked on 7 November 2026.
When a homepage video is worth it
Video or image in the hero?
- Needs showing, light fileUse a video bannerShort loop of the product in use, with a poster image and pause button.
- Needs showing, heavy fileVideo lower downKeep an image in the hero and put the full video below, click to play.
- Photo explains it, light fileImage, maybe test videoStart with an image. Test a video only if you have a clear reason.
- Photo explains it, heavy fileUse an imageThe video adds weight without adding information.
Products that benefit from motion: apparel on a moving body, kitchen gadgets, anything that folds, pours, lights up or assembles. Products that don't: most jewelry close-ups, prints, packaged goods. A sharp photo does the job there.
What a hero video does to speed
Google's web.dev documentation says that for a video element, Largest Contentful Paint uses the poster image load time or the first frame, whichever is earlier. That gives you a simple fix: always set a light poster image. The visitor sees it at once, and LCP is measured on it rather than on the video file.
The bigger cost is bandwidth. A background video starts downloading on every visit, including phone visitors on mobile data. A heavy file competes with your product images and scripts for the same connection. See what a good Shopify PageSpeed score looks like before and after you add one.
How to add a video banner in Shopify
- Prepare the file. Trim to the strongest few seconds, remove the audio track and export at the width your hero actually displays.
- Choose the hosting. Upload to Shopify, or paste a YouTube or Vimeo link. Shopify says YouTube videos must be Public or Unlisted and Vimeo videos must allow embedding on external sites.
- Add the section. In the theme editor, add your theme's video section to the homepage. Shopify's free themes include one.
- Set the poster and controls. Add a cover image, mute it, and make sure there's a visible way to pause it.
- Test on a real phone. Check how fast the first screen appears on mobile data, not just on office wifi.
| Spec | Shopify limit | For a hero banner |
|---|---|---|
| Formats | MP4, MOV, WebM | MP4 |
| Length | Up to 10 minutes | 5 to 15 seconds |
| File size | Up to 1 GB | As small as looks sharp |
| Resolution | Up to 4K | The width it displays at |
Shopify converts uploaded videos and serves them as MP4 or HLS. The limits in the middle column are what Shopify accepts, not what a hero should use.
Accessibility: the pause button isn't optional
WCAG 2.2 success criterion 2.2.2 (level A) says that moving content which starts automatically, lasts more than five seconds and is shown alongside other content needs a way to pause, stop or hide it. A looping hero video meets all three conditions. Some theme video sections don't show a pause control, so check yours. If you sell in the EU, the European Accessibility Act lists e-commerce among the services it covers. My guide to making a Shopify store accessible covers the rest.
Test it rather than guess
A video banner is a good candidate for an A/B test: same page, image hero against video hero, judged on add-to-cart rate and revenue per visitor, not on time on page. My guide on how to A/B test on Shopify shows how to set one up. For the rest of the page, see designing a high-converting homepage.
What to do next
- Decide what the video has to show that a photo can't. If the answer is "nothing", use an image.
- Cut it short and silent, and add a poster image and pause control.
- Measure mobile speed before and after adding it.
- Keep longer videos below the hero or on product pages, where interested shoppers will press play.
- Want it checked? My speed optimization service starts from $100, with a fixed quote.
Free tools
Check your own store
Free, no sign-up. Each one runs a part of this guide for you.
Frequently asked questions
Does a video banner slow down a Shopify store?
It can. A background video downloads on every visit and competes with images and scripts for bandwidth. A light poster image, a short silent file and testing on mobile keep the cost down.
What size should a Shopify video banner be?
Shopify accepts videos up to 10 minutes and 1 GB, but a hero banner should be a few seconds long, without audio, and exported at the width it actually displays. Keep the file as small as it can be while still looking sharp.
Should I host homepage video on Shopify or YouTube?
Both work. Shopify-hosted video avoids YouTube's branding and related videos, while YouTube or Vimeo links must be public or unlisted and allow embedding. For a muted background loop, Shopify hosting is usually cleaner.
Does a homepage video improve conversion?
It depends on the product. Video helps when motion explains the product, such as how it fits or works. Test it against an image hero and judge on add-to-cart rate and revenue per visitor.
Do autoplay videos need a pause button?
Yes, if they run longer than five seconds alongside other content. WCAG 2.2 criterion 2.2.2 requires a way to pause, stop or hide them.
Can I autoplay a homepage video with sound?
Browsers generally block autoplay with sound, and most visitors browse muted. Design the video to work silently, with any message shown as on-screen text.
Sources
- Product media types and requirements, Shopify Help Center
- Adding product media, Shopify Help Center
- Largest Contentful Paint (LCP), web.dev
- Understanding Success Criterion 2.2.2: Pause, Stop, Hide, W3C
- European Accessibility Act, European Commission
Related services and work
I'm a Shopify developer and CRO specialist. I have built and improved Shopify stores since 2018, completed more than 1,000 projects, and hold a 4.96 average rating across 719 client reviews.
More guides
-
Why Shopify Stores Lose Sales on Mobile: A Practical CRO Checklist
Mobile visitors decide fast, with one thumb and plenty of distractions. Here is how to find the leaks on a Shopify store and fix them in the right order.
-
Shopify CRO Audit Checklist for DTC Brands
The checklist I use to audit DTC Shopify stores, from checking that the data can be trusted to deciding which fixes to ship first.
-
When to Build a Custom Shopify App Instead of Adding Another Subscription
Another subscription is the quickest fix, until you are paying for five apps that still don't match how your business works. Here is how to decide.
-
How to Find Out What Theme a Shopify Store Uses
Every Shopify store names its theme in the page code. Here is where to look, how to read what you find, and what it means for your own theme choice.
-
How to See What Apps a Shopify Store Uses
Apps leave traces in a store's page code: scripts from their own servers, app embed folders and pixel settings. Here is how to read them, and what to do with the list.
-
How to Name a Shopify Store (and Check the Name Is Free)
A store name has to be easy to say, free as a domain and a handle, and clear of other brands. Here is the process I use with clients, and what Shopify lets you change later.
