How to Add Product Videos to Your Shopify Theme

If you want to know how to add product videos to your Shopify theme, the short answer is: you have four main options — the theme editor's built-in video section, the product media uploader, a custom HTML/Liquid embed, or a video app from the Shopify App Store. Which one you pick depends on where you want the video to show up: homepage, product gallery, collection page, or a dedicated section you build yourself.

This guide walks through each method with the exact steps, explains which video specs work best for each placement, and covers where to actually get product videos if you don't have any yet.

What "adding a product video to your Shopify theme" actually covers

"Theme" is a broad word, and Shopify stores can show video in several places that behave differently:

• Homepage hero or banner — a looping background video behind your main headline and call to action.
• Product page gallery — a video that sits alongside product photos, often the first thing a shopper swipes to after the main image.
• Collection page tiles or hover previews — short clips that play when a shopper hovers over or scrolls past a product thumbnail.
• Standalone sections — a dedicated "how it works" or testimonial section with embedded video anywhere on a page.

This article covers the general, theme-wide setup. If you want a deeper walkthrough for a specific placement, see how to add video ads to Shopify product pages or how to use product videos on Shopify collection pages.

Method 1: Add video through the theme editor (no code)

Most current Shopify themes, including the free Dawn-based themes, include a native video or video-hero section you can add without touching code.

1. Go to Online Store > Themes > Customize.
2. Open the page or template where you want the video (homepage, a custom page, or a product template).
3. Click Add section and look for a section named Video or Video hero. If your theme doesn't have one by default, check if it ships as an app block you can drag into an existing section.
4. Upload an MP4 file directly, or paste a link to a hosted video (some themes support YouTube or Vimeo embeds as an alternative).
5. Set the behavior: autoplay on or off, loop on or off, and muted by default. Muted autoplay is the safer default across browsers.
6. Add a fallback poster image in case the video fails to load on a slow connection.
7. Preview the section on both desktop and mobile view before you save, then publish.

This is the fastest route if you just want a background or hero video somewhere on your theme and don't need it tied to a specific product.

Method 2: Upload product video directly to product media

If the goal is a video tied to one specific product — a demo, an unboxing, or a short UGC-style clip — the cleanest method is uploading it as product media so it lives in the same gallery as your photos.

1. Go to Products and open the product you want to edit.
2. In the Media section, click Add media and choose your video file.
3. Shopify enforces a maximum file size for uploaded videos — check the current limit in your admin before uploading, since it can change.
4. Once uploaded, drag the video thumbnail into the gallery order you want (many stores place it second or third, after the hero product shot).
5. Save the product. The video now appears as a swipeable item in the product gallery, playable inline on most themes.

This method works well because it requires no theme editing and it keeps the video exactly where shoppers already look for product information. For a more detailed breakdown of this specific placement, see how to add video ads to Shopify product pages.

Method 3: Embed video with custom HTML or Liquid for more control

The theme editor and product media uploader cover most use cases, but if you want something more specific — a sticky video that plays as the shopper scrolls, a video inside a custom comparison section, or a background video behind a specific block of text — you'll need to edit theme code.

1. In the Shopify admin, go to Online Store > Themes, then click the ... menu next to your live theme and choose Edit code.
2. Create a new section file (for example, custom-video-block.liquid) or edit an existing one.
3. Inside the section, add a standard HTML video element with attributes for autoplay, muted, loop, and playsinline so it behaves correctly on mobile browsers. Point the source at a video file uploaded to your theme's assets or linked from Shopify's file storage.
4. Add a poster attribute pointing to a static image so there's a visible fallback before the video loads.
5. Save the file, then go back to the theme editor and add your new custom section to the page through Add section.
6. Test load time and playback on a real mobile device, not just the desktop preview — autoplay rules and connection speed behave differently on phones.

This route takes longer and assumes some comfort with Liquid and HTML, but it's the only way to get placements the built-in theme editor doesn't offer out of the box.

Method 4: Use a Shopify app for video galleries and hover previews

If you want features like video-on-hover for collection thumbnails, a shoppable video carousel, or syncing one video library across many products, a dedicated video app is usually faster than building it yourself in code.

• Search the Shopify App Store for video gallery, shoppable video, or video hover apps.
• Check that the app injects its code as a theme app block (newer method) rather than deeply editing your theme files, since that's easier to remove later if you switch apps.
• Install, follow the app's setup flow to connect your product videos, then place its block through the theme editor like any other section.
• Run a page-speed check after installing. Video apps add scripts and assets, and stacking several apps can slow your store down.

Apps are worth it when you need video on every collection tile or a library shared across dozens of products. For a single hero video or a handful of product clips, the built-in methods above are usually enough.

Choosing the right video specs for each theme placement

Different placements call for different aspect ratios and lengths. Using the wrong shape forces awkward cropping or black bars.

A few format rules that hold across placements: use MP4 (H.264) for the widest browser compatibility, compress the file so it doesn't drag down page load, and design the video to communicate without sound. Many browsers block autoplay audio by default, so a video that only makes sense with sound on will lose most of its message. Word-by-word captions or on-screen text fix this.

Where to get the product videos to upload

Once the technical setup is sorted, the real bottleneck for most stores is having a video worth uploading in the first place. A few paths:

• Film it yourself with a phone, focusing on one clear shot of the product in use plus a close-up of a key detail.
• Hire a UGC creator to film a casual, testimonial-style clip — see how to find UGC creators for product videos for a step-by-step process.
• Animate existing product photos if you don't have footage yet — how to animate product photos for ads covers that approach.
• Generate a video from your product link using an AI tool, which is useful when you need something fast without a camera or editing software.

FrameNotion is built for that last option: paste a product or website link, and FrameNotion AI reads the page and writes a custom 30-second vertical video ad from scratch — hook, problem, benefit, proof, offer, and call to action — then checks its own rendered frames and renders an MP4. You can add a logo, up to six product images, and notes like a promo code. Every ad includes an AI voiceover, a music track, sound effects, and word-by-word captions (or music-only or silent, your choice), and it's made to work on mute too. A finished ad takes about 10 to 20 minutes, and you get it as 9:16, 4:5, 1:1, and 16:9, which covers the homepage hero, product gallery, and collection placements covered above without re-filming anything. See examples or how it works on the features page.

Publish checklist before you go live

• Video plays correctly on a real phone, not just desktop preview.
• Autoplay is muted by default; sound-on is optional, not required to understand the message.
• A poster or fallback image is set in case the video fails to load.
• File size is compressed enough that the page doesn't noticeably slow down.
• Captions or on-screen text carry the key message without audio.
• The video is placed where shoppers already look — product gallery or above-the-fold hero, not buried below several scrolls.

How FrameNotion fits into this workflow

FrameNotion doesn't publish to your Shopify theme or track ad performance — you still handle the upload and placement using the methods above. What it handles is the harder part: producing a finished, on-brand product video from a single link in minutes instead of days, in the aspect ratios your theme actually needs. If you're building out video for multiple products, check pricing for plans and one-off packs, or browse the blog for more placement-specific guides, like turning a batch of product images into video automatically in how to turn product images into video ads automatically.