How to Add Product Videos to Shopify Collections

The fastest way to add product videos to Shopify collections is to attach a video to each product's media gallery, then either enable your theme's built-in setting to show that video on the collection grid, or add a short metafield-driven code snippet that swaps the product image for a video on hover or autoplay. Most Shopify themes released in the last few years support at least one of these two paths without needing a developer, and apps can fill the gap if your theme doesn't.

Why add video to the collection page, not just the product page

A collection page is a scanning environment. Shoppers are comparing options fast, and a static photo grid asks them to imagine movement, texture, or scale on their own. A short video playing on hover or on scroll gives that information for free, right where the comparison is happening, instead of waiting for a click-through to the product page.

This is also why the method matters. A video bolted onto the product page alone won't show up in the grid. If your goal is specifically to add product videos to Shopify collections — the grid view itself — you need the video attached to the product's media and a theme or snippet that's told to look for it on that page template, not just on product templates.

Three ways to add product videos to Shopify collections

There are three realistic routes, in order of how much setup they take.

1. Native theme setting — some Shopify themes (Dawn and several Dawn-derived themes) let you toggle "show second media item on hover" in the theme editor. If the second item in a product's media gallery is a video, it plays automatically when a shopper hovers the grid thumbnail.
2. Metafield + custom code — you create a metafield that stores a video reference per product, then edit the collection/product-grid-item snippet to check for that metafield and render a video tag instead of (or on top of) the image.
3. App-based — a video-for-collections app handles the upload, the metafield, and the front-end code for you, which is faster if you're not comfortable in the theme editor but adds another subscription and another script to maintain.

If you've already gone through the process of adding product videos to your theme's product pages, you're halfway there — the same uploaded media can usually be reused on the collection grid with one of the two methods below. If you haven't done that step yet, it's worth reading alongside this one: How to Add Product Videos to Your Shopify Theme.

Step-by-step: native theme setting method

This is the quickest path and works on Dawn and many Dawn-based themes.

1. Go to a product in your Shopify admin and open the Media section.
2. Upload your video so it becomes the second item in the media list (the first slot is usually reserved for the main photo). MP4 is the safest format; keep the file size reasonable so the grid doesn't lag.
3. Repeat for every product you want a grid video on. Doing this for a handful of hero products first is a reasonable way to test before rolling it out store-wide.
4. In your theme editor, go to Theme settings → Product grid (naming varies slightly by theme) and look for an option like "Enable video looping" or "Show second media on hover." Turn it on.
5. Open a collection page in preview mode and hover over a product card that has a video as its second media item. It should start playing muted and loop; moving away stops it.

Step-by-step: metafield + code method

Use this when your theme has no native toggle, or when you want more control than hover-play — for example autoplay on scroll, or a video that replaces the image entirely instead of only showing on hover.

1. In Shopify admin, go to Settings → Custom data → Products → Add definition.
2. Create a metafield (type: File reference, or URL if you're hosting the video elsewhere) named something like `collection_video`.
3. Open each product, scroll to the Metafields section, and upload or link the video.
4. In your theme code editor, duplicate the snippet that renders a product card in the collection grid (often `card-product.liquid` or similar depending on the theme).
5. Inside the image block, add a conditional check for the metafield and output a `` tag with `autoplay muted loop playsinline` attributes when the field is populated, falling back to the standard image when it isn't.
6. Save, preview a collection page, and test on both desktop and mobile — `playsinline` is what keeps the video from forcing fullscreen on phones.

This method is more durable across theme updates than hacking the default snippet directly, because the metafield lives independently of the code — if you ever switch themes, the video data stays attached to the product and you just need to rewrite the front-end piece. If you want more detail on using this video specifically within collection page templates, see How to Use Product Videos on Shopify Collection Pages.

What format actually works in a collection grid

Collection cards are small and often square or near-square, which is a different constraint than a full-width product page video. A vertical 9:16 ad cropped poorly can lose the subject; a video shot or exported with the product centered and some margin on all sides tends to survive cropping into whatever aspect ratio your grid card uses.

A practical workflow is to create one well-made 30-second vertical product video, then trim or export shorter cuts for the collection grid instead of filming or generating a separate asset for every placement. The opening few seconds of a good ad usually carry the clearest single shot of the product anyway, which is exactly what a grid loop needs.

Where the video itself comes from

You have three realistic sources for the footage before you ever touch Shopify's upload button.

• Filmed yourself — a phone and natural light can produce a usable product clip; see How to Film Product Videos With a Phone and How to Film Product Videos Without a Studio if you're starting from zero equipment.
• UGC creators — real people filming the product in use, useful for proof-style clips; see How to Find UGC Creators for Product Videos.
• AI-generated from a product link — tools like FrameNotion read a product page or link and have FrameNotion AI write and render a 30-second vertical video from scratch, including hook, problem, benefit, proof, offer, and call to action, with a voiceover and captions baked in. A finished ad is ready in roughly 10-20 minutes, and it also comes in 4:5, 1:1 and 16:9, so the same asset can be trimmed down for a collection grid loop and reused on product pages and in ads without starting over.

Whichever source you use, a video built for sound-off viewing with clear captions or on-screen text performs better in a grid, where sound is almost always off by default and the viewer may only watch two or three seconds before moving on.

Common mistakes when adding product videos to Shopify collections

• Uploading a landscape video meant for a different placement and letting Shopify crop it awkwardly inside a square or portrait card — re-export or crop before uploading.
• Putting the video first in the media list so it becomes the default thumbnail even when not hovered — keep the photo first unless you specifically want autoplay-on-load.
• Skipping the `muted` and `playsinline` attributes in custom code, which causes mobile browsers to block autoplay entirely or force fullscreen.
• Using the full 30-second ad with no trim, which keeps looping past the point a shopper is still scanning the grid — a 6-10 second loop is usually plenty.
• Adding video to every single product at once without checking page load speed first — start with best-sellers or new arrivals and measure before rolling out store-wide.

A simple test plan before a full rollout

Pick one collection — ideally a higher-traffic one like best sellers or a seasonal category — and add grid videos to five or ten products inside it. Leave the rest of the store as photos only. Watch page load time and any qualitative feedback (support tickets about slow pages, for instance) for a week or two before deciding to extend it store-wide. This keeps the change reversible and gives you a side-by-side sense of whether it's worth the engineering time, without having to roll it back from your entire catalog if something looks off.

How FrameNotion fits into this

FrameNotion doesn't publish to Shopify directly — you still handle the upload and the theme setting or metafield step described above. What it solves is the asset itself: paste your product page link, and FrameNotion AI writes and renders a 30-second vertical video from scratch, checking its own frames before delivering an MP4. You get the ad in 9:16 for sound-on placements plus 4:5, 1:1 and 16:9 versions, so the same video can be trimmed for a collection grid loop, kept full-length on the product page, and run as-is in paid social. See example ads or how it works before you start uploading.

If you also want the grid video to carry some motion polish — a slow zoom instead of a flat loop — pair this guide with How to Add Zoom Effects to Product Videos.