---
title: "How to Add Video to Shopify Collection Pages Without Slowing Them Down"
description: "Collection pages are the worst place on a Shopify store to get video wrong, because one heavy grid multiplies the cost by every product on it. Here are the three ways to add video, what each does to load time, and the setup that keeps a collection fast."
author: "Aashish Kaushik"
published: 2026-09-11T13:01:08.804Z
updated: 2026-09-11T13:01:08.826Z
url: https://blog.swipereel.app/shopify-video-collection-page
---
# How to Add Video to Shopify Collection Pages Without Slowing Them Down

## Key takeaways

- Collection pages multiply the cost of video by the number of products on the grid, so a technique that is fine on a product page can double a collection's load time.
- The theme's built-in Video section is the cheapest option but it only gives you one video per page and no product tagging.
- Editing card templates to play video on hover works on desktop only and needs strict poster and preload rules to stay fast.
- A lazy-loaded app widget placed above or between grid rows adds video without touching the theme's card markup and survives theme updates.

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](/how-to-add-shoppable-video-shopify) covers placement first.

## Why collection pages punish video harder than product pages

![Row of shoppable videos with product cards and prices on the Decize storefront](https://blog-media.cdn.byteinfy.com/media/17/17e03dd14f8963e5f91afff2dd85bf67/original.webp)

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.

> **Where the section sits matters for speed**
> 
> Place the Video section below the collection banner, not above the fold as the first element. A video section at the very top makes its poster image the Largest Contentful Paint candidate, and a large poster served without proper sizing will push LCP past the threshold Google treats as good. Below the banner it loads after the page is already visible.

## 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](/shopify-product-video-instead-image) 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.

## Three ways to add collection page video, by cost
| Method | Videos per page | Product tagging | Speed cost when done right | Survives theme updates |
| --- | --- | --- | --- | --- |
| Theme Video section | One | No | Very low | Yes |
| Card template edit | One per card | No | Low to moderate, rises with grid size | No, needs re-applying |
| App widget (carousel or grid block) | Many, in one feed | Yes | Low, loads on scroll | Yes |

## 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](/shopify-video-autoplay-not-working-mobile) 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](/reduce-shopify-bounce-rate-video-2026) goes further into which Core Web Vitals move with video and which do not, if you want the metric-by-metric detail.

## Collection page video, before you publish
- Video is in its own section, not inside every product card
- Poster image is set and sized for the slot it fills
- Preload is off for anything outside the viewport
- Autoplay is muted with playsinline, or disabled
- Containers have a fixed aspect ratio so the grid does not shift
- App script is deferred, not synchronous in the head
- PageSpeed Insights run before and after on the same collection URL
- Tested on a real phone with the Network tab open

## 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](/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.

**Put video on your collection pages without touching the grid**
SwipeReel imports Instagram Reels and TikTok videos as a lazy-loaded, shoppable widget on any Shopify theme. Free plan includes 25 uploads and 5 live videos.

[Install SwipeReel free](https://apps.shopify.com/swipereel)

## FAQ

### Can I add a video to a Shopify collection page without an app?

Yes. Dawn, Horizon and most Online Store 2.0 themes include a Video section you can add to the collection template in Online Store > Themes > Customize.

### Does video on a collection page hurt SEO?

Not by itself.

### Why do my collection page product cards show a still image instead of my video?

Themes render product cards using the featured media's preview image on purpose. A collection of twenty autoplaying videos would be slow and distracting.

### How many videos can I safely put on one collection page?

There is no fixed number, but the rule is that only the videos in the viewport should ever be loading.

### Should collection page videos autoplay?

Silent autoplay is fine and works on mobile when the video is muted and set to play inline.

### Can I show different videos on different collections?

With the theme Video section you set a video per template, so all collections using that template share it unless you create separate templates.

### Will video on collection pages work on Horizon as well as Dawn?

Yes for all three methods. Horizon and Dawn both support app blocks and the Video section.