How to Add Video to Shopify Collection Pages Without Slowing Them Down

The fast way to put video on a Shopify collection page is to keep it out of the product grid. Add it as its own section, lazy-load it so the browser only fetches what is on screen, and serve a poster image so the page paints before any video file arrives. Done that way, a collection page with a dozen product clips loads about as fast as one with none.

The slow way, which is where most merchants start, is to make every product card play a video. That multiplies the cost of one video by the number of cards on the grid, and the result is a collection page that stalls on mobile.

This guide covers the three workable methods, what each one costs in load time, and the setup steps for the one that fits most stores. If you have not yet decided where video belongs on your store at all, the guide to adding shoppable video on Shopify covers placement first.

Why collection pages punish video harder than product pages

A product page has one product and one gallery. If its video is heavy, one page is slow. A collection page has twenty or forty products in a grid, and any technique that attaches video to cards attaches it to all of them at once.

Three things go wrong specifically on collections:

• Requests multiply. Even with lazy loading, each card that has a video element needs its poster image, and on scroll each one fetches the first chunk of its video file. Forty cards means forty extra requests before the shopper has looked at anything.
• Layout shifts compound. Video elements without fixed dimensions cause cumulative layout shift. One shift on a product page is tolerable. Twenty shifts on a grid as it loads is a visible jump that Google measures and penalises.
• Mobile autoplay budgets are shared. Browsers cap how many videos autoplay at once. On a grid, the ones that lose the race sit frozen on a black frame, which looks broken.

None of that means video is wrong on collection pages. It means the video needs to live somewhere other than inside every card.

Option 1: the theme's Video section

Dawn, Horizon and almost every Online Store 2.0 theme ship a Video section. In Online Store > Themes > Customize, open a collection template, choose Add section, and pick Video. It takes a Shopify-hosted file from Files or a YouTube or Vimeo URL, with a cover image and an optional heading.

This is the cheapest option in every sense. One video, one request, and the theme handles the poster image and lazy loading for you. Shopify's hosted video accepts files up to 1 GB, 10 minutes and 4K, so a short brand or collection clip is well within limits.

Where it falls short:

• One video per template. If every collection uses the same template, they all show the same clip unless you create separate templates per collection.
• No product tagging. The video plays, and that is all. A shopper who sees a product they like has to find it in the grid below.
• No feed. You cannot show six short clips from six products in the collection without stacking six sections, each with its own load cost.

It is the right choice for a hero clip that sets the tone of a collection, such as a campaign film above the summer range. It is the wrong choice if the goal is to show products in use.

Option 2: video on the product cards themselves

If you want cards that move, you edit the card snippet. In Dawn that is snippets/card-product.liquid, and the edit is to check whether the product's featured media is a video and, if so, emit a video element instead of an image.

The guide to using video instead of an image on product cards has the full Liquid. The short version of the rules that keep it fast:

• Poster first, always. Render the video's preview image as the poster attribute so the card has something to show before any video bytes arrive.
• preload="none". Without this the browser fetches the start of every video on the grid at page load.
• Play on hover or on intersection, not on load. Desktop gets hover playback. Mobile gets playback when the card enters the viewport, and only for cards actually visible.
• Fixed aspect ratio on the container. This prevents layout shift as the video element replaces the image.
• Cap the number. Only convert the first row or two of cards. Below that, fall back to images.

Even done properly, this method has a ceiling. Hover does not exist on touch, so on mobile the cards behave like autoplaying loops that compete for the browser's autoplay budget, and the shared card snippet is also used in search results, recommendations and cart drawers. A change there shows up in places you did not plan for.

It is a reasonable choice for a small catalogue with strong product clips, on a store where a developer maintains the theme. It is a poor fit for a large catalogue or for anyone who does not want to redo the edit after every theme update.

Option 3: a lazy-loaded shoppable video widget

The third method leaves the grid alone. An app block from a video app sits on the collection page as its own section: a carousel or grid of short clips above the products, or a row between grid sections. Each clip carries a product tag, so a shopper can add to cart from the video without leaving the page.

This is the approach that scales, for three reasons.

The grid is untouched. Card markup, search results and cart drawers keep working exactly as the theme intended. Nothing breaks when the theme updates.

Loading is handled by the widget. A well-built widget defers its own script until the page has rendered, loads poster images first, and only fetches video for clips in or near the viewport. SwipeReel's widgets, for instance, are lazy-loaded so they do not block page render, and they come as theme app extension blocks, so they appear in the theme editor's Add section list without any code.

One feed, many pages. Build a feed of clips for a collection and assign it to that collection's page. Build another for the next collection. The clips themselves can come from Instagram Reels and TikTok, which is usually where the footage already exists.

The trade-off is that you are adding an app, and an app is a dependency. Check how it loads before you commit; the section on measuring below shows how.

Setting up a widget on a collection page

The steps below assume a theme app extension widget such as SwipeReel, but the shape is the same for any app block.

1. Install the app and build a feed. Import the reels or TikToks you want on this collection, or bulk upload clips. Tag each clip with the product it shows.
2. In Shopify admin, go to Online Store > Themes and click Customize on your live theme.
3. Use the page selector at the top to open Collections, then the default collection template (or a specific collection if you use multiple templates).
4. Click Add section in the left panel. App blocks are listed under Apps. Choose the carousel or grid layout.
5. Pick the feed you built, then drag the section to sit below the collection banner and above the product grid. Horizon and Dawn both let you drop a section between the banner and the grid.
6. Set the widget to show a poster image and to autoplay muted only when in view. Leave any "preload all" option off.
7. Save, then open the collection on a phone to confirm the grid renders before the widget's clips start loading.

If you have a second row you want mid-grid, Dawn and Horizon do not let you insert a section inside the product grid, only before or after it. Most stores get the same effect by placing a Stacked or Overlay layout below the grid for shoppers who reach the end.

The speed rules that apply to all three methods

Whichever route you pick, five settings decide whether the page stays fast.

Poster images sized for the slot. A poster served at 1080 pixels wide into a 300 pixel card is wasted transfer. Use the theme's image size filters or the app's responsive poster option.

No preloading beyond the viewport. A video element with preload="auto" or a widget that fetches its whole feed at load time will show up as a wall of media requests in the Network tab. If you see that, the setting is wrong.

Muted, inline autoplay. Silent playback with muted and playsinline works on iOS and Android. Anything with sound needs a tap, and a video waiting for a tap on a collection page looks like a broken thumbnail. The mobile autoplay guide covers the attribute set and the iOS Low Power Mode exception.

Fixed dimensions. Every video container needs an aspect ratio in CSS so the layout does not jump when the media arrives. Vertical clips from Reels and TikTok are 9:16; set the container to match.

One script, deferred. If the app adds a script tag, it should carry defer or be injected after DOMContentLoaded. A synchronous script in the head is the single most common reason a video app tanks a speed score, and it has nothing to do with the videos themselves.

How to measure the actual cost

Do not trust the app listing's speed claims or your own eye. Measure the collection page before and after, on the same device, with the same method.

1. Open PageSpeed Insights and run the collection URL on mobile. Note LCP, CLS and INP, and the total transfer size in the diagnostics.
2. Add the video by whichever method you chose.
3. Run the same URL again. Wait a few minutes after saving so Shopify's CDN cache has refreshed.
4. Compare. A widget done right should move LCP by a fraction of a second at most and leave CLS unchanged. If transfer size jumped by tens of megabytes, something is preloading.

Then check the Network tab in your browser's developer tools with the Media filter on. Load the collection page and do not scroll. You should see poster images and, at most, one or two video requests for the clips visible on screen. Scroll, and more should appear as they enter view. If everything arrives at once, the lazy loading is not working.

The bounce rate and video article goes further into which Core Web Vitals move with video and which do not, if you want the metric-by-metric detail.

Which option to pick

For a single campaign film above a seasonal collection, use the theme's Video section and stop there. It is free, fast and already in your theme.

For a small catalogue where every product has a strong clip and a developer maintains the theme, the card edit is defensible on desktop. Keep it to the first row and accept that mobile behaves differently.

For everything else, which is most stores, use a widget. Clips from Reels and TikTok, product tags that let shoppers buy from the video, one feed per collection, no theme edits, and loading that stays out of the way of the grid. The shoppable video examples collection includes several collection page placements if you want to see what the layouts look like on live stores before you build one.