How to Add Video to Your Shopify Product Page (2026)

If you’ve uploaded a product video to Shopify and it just… sits there below the fold, unwatched, you’re not alone. In large-scale usability testing, Baymard Institute found that 41% of users watched product videos. Still, 35% of major ecommerce sites get the placement, sizing, or discoverability wrong badly enough that shoppers never notice a video exists at all (Baymard Institute, “UX Research on Product Page Videos”). A video nobody sees converts nobody.

This guide covers every real way to get video onto a Shopify product page in 2026: native product media upload, a theme-level video section for autoplay, a custom Liquid embed, and, if you want the video to do more than play, shoppable hotspots and watch-time analytics via a dedicated app. Pick the method that matches how much you actually need the video to work for conversion, not just occupy space on the page.

Before you start

What You’ll Need Before Adding Video to a Product Page

Step 1

Step 1: Decide Between Native Upload, a Theme Section, or a Shoppable Video App

All three paths put a video on the page; they differ in autoplay control, interactivity, and what you can measure afterward. Know which one fits before you start, so you’re not redoing the work later.

Just need a video visible (a product demo, a size-and-fit clip, a founder explainer)? Native upload (Step 2) is enough, and free. Want muted autoplay as a background or hero element? You need a theme section (Step 3). Want the video to drive the add-to-cart click by tagging the product, tracking drop-off, and testing one cut against another? That’s a shoppable video app’s job (Step 7); no theme configuration replaces it. See the build vs. buy analysis for shoppable video for the fuller engineering tradeoff.

Step 2

Step 2: Upload Video Directly to a Product in Shopify Admin

By the end of this step, a video sits in the product’s media gallery, live for any shopper who reaches that page. No theme editing required.

Instructions:

1. In Shopify admin, go to Products and open the product you want to add video to.
2. Scroll to Media and click Upload new, or drag the file directly into the media area.
3. Select your file. Shopify accepts .mp4, .mov, and .webm, transcodes it automatically, and serves it back as adaptive MP4/HLS based on the viewer’s connection speed (Shopify Help Center, “Product media types”).
4. Already hosted on YouTube or Vimeo? Use Add from URL instead. The video must be Public/Unlisted on YouTube, or allow external embedding on Vimeo.
5. Drag the thumbnail to reorder within the gallery. Position 1 is where most themes display it by default, though Shopify blocks autoplay there regardless of theme.
6. Click Save.

Verification: Open the live product page in an incognito window. You should see the video thumbnail with a play icon in the media gallery.

Limits to know: max file size 1GB, max duration 10 minutes, but keep the actual file well under 10MB. Large embedded videos are a common cause of poor Largest Contentful Paint scores on product pages. On mobile, the flow is the same from the Shopify app: open the product, tap + in Media, choose YouTube or Vimeo URL or upload from your camera roll.

Step 3

Step 3: Add a Video Section or Background Video With the Theme Editor

By the end of this step, you’ll have a dedicated video block on the product page, separate from the media gallery, that can autoplay muted, which native product media cannot do.

Instructions:

1. In Shopify admin, go to Online Store → Themes → Customize.
2. Navigate to a product template page in the theme editor.
3. Click Add section/Add block and look for a Video type. Dawn and most Online Store 2.0 themes ship this built in; check your theme’s docs if you don’t see one.
4. Upload your file or paste a YouTube/Vimeo URL into the section’s video field.
5. Enable Autoplay and confirm Muted is checked, required for mobile autoplay (more in Step 5).
6. Set the section’s position on the page and Save.

Verification: Reload the storefront preview. The section should play automatically and silently on load, with a visible unmute control if your theme includes one.

For a walkthrough specific to background/hero-style video banners rather than inline sections, see how to add a video banner in Shopify.

Step 4

Step 4: Embed With Custom Liquid If Your Theme Has No Video Section

If your theme lacks a built-in video block, add a custom Liquid section instead: create a new section file in Themes → Edit code, drop in an iframe pointing to your YouTube or Vimeo video ID wrapped in a responsive container div, add a schema block so it’s assignable in the editor, then attach it to the product template from Customize. Preview at both desktop and mobile widths. The frame should resize proportionally with no horizontal scroll or cut-off controls.

This path takes longer than native upload and is really only worth it when the theme editor genuinely has no video option. For the embed code itself, see how to embed video in Shopify and, for YouTube specifically, how to embed YouTube videos on Shopify.

Step 5

Step 5: Fix Autoplay So the Video Actually Plays on Mobile

Apple’s own WebKit policy states that <video> elements are only allowed to autoplay without a user gesture if they contain no audio track or the muted attribute is set (WebKit Blog, “New Video Policies for iOS,” 2016, retrieved 2026) — no Shopify theme setting works around that platform rule. The video also needs playsinline set for autoplay to behave sanely on iPhone, and even a correctly-muted video pauses if it scrolls out of the viewport or iOS Low Power Mode suppresses it.

Instructions:

1. Confirm your video section (Step 3) has muted, autoplay, and playsinline all set — playsinline stops iOS from forcing full-screen the instant playback starts.
2. If you need audio, don’t fight autoplay. Add a visible tap-to-unmute control instead.
3. Test on an actual iPhone in Safari, not desktop Chrome. Desktop behavior doesn’t predict mobile Safari behavior.
4. If it still won’t autoplay, check whether the theme loads it via a YouTube/Vimeo <iframe> (autoplay parameters can get stripped by cookie-consent or ad-blocking extensions) versus a native <video> tag, which behaves more predictably.

Verification: Load the live page on an iPhone and Android device over cellular data (not office Wi-Fi) and confirm it plays muted without a tap.

If a video that used to autoplay suddenly stops, see troubleshooting Shopify video not playing for causes beyond autoplay policy.

Step 6

Step 6: Compress and Optimize Video for Page Speed

Instructions:

1. Export at 1080p rather than 4K. Shopify’s uploader accepts up to 4K, but 1080p is the practical ceiling for PDP use; playback adapts down to 480p/720p automatically based on connection speed anyway.
2. Compress to well under 10MB using HandBrake or your editor’s export presets. An uncompressed export is a common cause of slow Largest Contentful Paint scores.
3. Trim dead air at the start and end. Every extra second adds load weight for no benefit.
4. If using a theme video section, check whether it lazy-loads below the fold. A video that loads immediately competes with your hero image and add-to-cart button for bandwidth on first paint.
5. Re-test page speed after compression, comparing before/after LCP with your usual Core Web Vitals tooling.

Verification: Load time with the video present should stay close to load time without it. A visible slowdown of more than a few hundred milliseconds means the file is still too heavy.

Step 7

Step 7 (Optional): Add Shoppable Hotspots and Watch-Time Analytics With an App

Native upload and theme sections get a video onto the page, but neither tells you whether anyone watched past the first five seconds, and neither lets a viewer add the product to cart from inside the video itself. That’s the gap dedicated shoppable video apps close.

Instructions:

1. Install a shoppable video app from the Shopify App Store; Whatmore, Tolstoy, and Vimotia are the most common options for this specifically.
2. Connect the app to your product catalog so it can tag SKUs directly inside the video frame at the timestamp they appear on screen.
3. Import or upload your existing video (the same file from Step 2 works, so you don’t need to reshoot).
4. Place the app’s embed block on the product page template via the theme editor, similar to the section step in Step 3.
5. Publish, then check the app’s analytics dashboard after a few days of traffic for watch-time, drop-off point, and hotspot click data per video.

Whatmore’s product page video feature handles tagging and embed in one step, reporting watch-time and per-hotspot clicks by default rather than as a paid add-on. Nish Hair drove 2,000+ add-to-carts and an 8% conversion rate in its first 7 days after adding tagged shoppable video, and Hay lifted product page conversions 43% after pairing Whatmore’s video with a Shopflo checkout integration. For the general mechanics beyond Shopify, see how to add shoppable video to your ecommerce website.

Common mistakes

Common Mistakes to Avoid When Adding Video to a Product Page

1. Uploading a heavy, uncompressed file and hoping Shopify’s transcoding fixes it. Transcoding handles compatibility, not page speed. A 200MB source still costs load time. Compress before you upload.

2. Assuming the native media gallery will autoplay like a theme section. It won’t, on any theme. Shopify blocks autoplay in the primary media slot by design.

3. Forgetting playsinline on a custom embed. Without it, iOS forces full-screen the instant playback starts, a mistake we’ve seen repeatedly on sites migrating a desktop-only embed to mobile.

4. Placing the video below a long description instead of near the top. With 35% of major ecommerce sites getting product-video placement wrong per Baymard, burying a video is one of the most fixable errors on a PDP.

5. Never checking analytics after publishing. Strong watch-time with zero hotspot clicks usually means a placement problem, not a content one, but only a tool that reports both can tell you that.

Results

What Success Looks Like

If everything above went correctly, your product page now shows a video that loads quickly and plays automatically and silently on mobile if that’s the method you chose. If you added a shoppable app, it also reports watch-time and click data within a few days of traffic. Page load time shouldn’t meaningfully change, and the thumbnail should be visible without scrolling on desktop and mobile alike.

The next-level enhancement is tracking whether the video is changing behavior, not just sitting on the page correctly: watch-time, drop-off point, and click-through on any tagged hotspot. For the full list of shoppable video KPIs worth watching, see the shoppable video benchmarks report.

Next steps

Next Steps

Video on a product page only helps conversion if shoppers actually see it, it loads fast, and it plays automatically on the device most of your traffic uses. Start with native upload if you have no PDP video yet; add a theme section once autoplay matters; move to a shoppable app once you’re ready to track whether the video is changing add-to-cart behavior, not just sitting there.

For a broader look at where video fits across every stage of the shopping journey, not just the product page, see the ecommerce video playbook for every product category.