How to Add a Product Video to a Shopify Home Page

A video on the home page is the easiest thing in the world to add badly. The creative is the part people worry about; the part that causes trouble is file size, how the theme wraps it, and what happens on a phone on mobile data.

This is a practical checklist, not a case for video: we have no conversion measurement to offer and will not pretend otherwise.

How to add a product video to a Shopify home page

We placed a twenty-second motion-graphics video — the AI-made piece described in our guide to making product videos — in the home page hero section of a motorsport gear store we work with, running on Shopify.

Broadly there are three routes, and they behave differently:

• The theme's own video section. Simplest, and the theme handles responsive sizing and the poster image for you. Your options are whatever the theme exposes.
• A video block inside another section. Useful when the video belongs beside copy rather than full-width.
• Custom code or an embed. Most control, most ways to hurt performance, and it stops being the theme's problem when something breaks.

Start with the native section unless it genuinely cannot do what you need.

File size and format

Keep it boring: MP4 with H.264 plays everywhere, and that matters more than squeezing out the last few per cent with a newer codec.

• Strip the audio track if it will play muted. It is dead weight on every load.
• Cut the length before you cut the quality. Twenty seconds compressed lightly beats ninety seconds compressed hard.
• Export at the size it will display, not at 4K for a slot that renders a few hundred pixels wide.
• Check Shopify's current upload limit before you build to a size it will reject.

We are deliberately not quoting a target file size: the right number depends on the slot, and a figure from a blog is a worse guide than your own speed test.

How the theme handles it

Themes crop. A piece composed for a wide hero loses its edges in a square or tall container, and anything near the frame edge — a logo, a callout — is what goes. Check the rendered result at several widths rather than trusting the preview.

Also check what the theme does *before* the video is ready: a blank box, a colour block and a poster image are very different first impressions.

Mobile behaviour

This is where most home page videos go wrong.

• Autoplay requires muted. Browsers block sound-on autoplay, so design for silence and carry the message in on-screen text.
• iOS needs the inline playback attribute, or the video takes over the screen in a fullscreen player. Good themes handle it; custom embeds often do not.
• Set a poster frame. It is what people see while the video loads, and on a slow connection it may be all they see.
• Consider a static image on mobile instead. A still that loads instantly can serve the visitor better than a video that arrives late.

What it does to page speed

If the video sits in the hero, it is competing with your largest contentful paint, because the hero is almost always where LCP lives.

Worth being blunt about what we measured. After publishing, PageSpeed Insights reported a mobile Performance score of 43, with LCP at 14.1 seconds and FCP at 4.7 seconds. Desktop Performance came in at 57.

Two caveats matter. We did not record the scores before the video went on, so this is not a before-and-after and we are not claiming the video caused those figures — a Shopify home page carries plenty of other weight. And we have not yet confirmed whether the video is the LCP element, which is the first thing to establish before changing anything.

What it does show is that a hero video can sit alongside a real speed problem, and that "it looks fine on my laptop" is not a test.

• Identify the LCP element first. PageSpeed names it. Until you know, you are guessing.
• Do not preload the video. Let the poster image carry the first paint.
• Lazy-load anything below the fold, including video.
• Test on a throttled mobile connection, not on your desktop.

For the rest of the home page, our Shopify SEO checklist covers the speed items that often matter more than the video does.

What to check after publishing

1. On a real phone, on mobile data — not desktop, not wifi.
2. Muted. Does it still make sense with no sound?
3. At three widths, for cropping.
4. Page speed, and which element is the LCP, so you know what the video is actually costing you.

Frequently asked questions

Can you add a video to a Shopify home page without an app? Yes. Most current themes include a video section or block, so an app is usually unnecessary for a single home page video. Apps earn their place for galleries, shoppable video or playback analytics.

Should a Shopify home page video autoplay? If it autoplays it must be muted, so it only works when the message survives silence. A poster frame with a play control is often the better choice, especially on mobile.

Will a home page video slow down my Shopify store? It can, particularly in the hero where it competes with the largest contentful paint. Keeping it short, not preloading it and using a light poster image are what keep the cost down — and the only way to know what it costs on your store is to measure, ideally before and after.

If you are working out which parts of your store work are worth automating and which need a person, that is where our AI automation work starts — looking at what your team repeats each week and saying plainly where automation pays and where it does not.