How to Show Related Videos on Shopify Collection Pages
Show related shoppable videos on Shopify collection pages with beyondRegular. Add one liquid snippet, pass the collection handle, ship in under 10 minutes.
Show related videos on Shopify collection pages by dropping a beyondRegular carousel widget into your collection template and passing the current collection handle as a filter. The widget reads the handle, pulls videos tagged with matching products, and renders them inline. Total setup is one theme app embed toggle plus a five-line snippet in collection.liquid.
Step 1: Enable the theme app embed
Open your Shopify admin and go to Online Store, then Themes. Click Customize on the live theme. In the sidebar, open App embeds. Find beyondRegular and toggle it on, then click Save at the top right.
This loads embed.js once per page across the storefront. The script is around 26 KB gzipped, runs async, and does not block LCP. You do not need to paste the loader tag into theme.liquid yourself. If you prefer the manual route, drop this into the head of theme.liquid instead of using the embed toggle:
<script async src="https://www.itsbeyondregular.com/embed.js"></script>
Step 2: Create a preset for collection-related videos
In the beyondRegular dashboard, go to Widgets, then click New widget. Pick Horizontal carousel as the format. Name it something like collection-related so you can find it later.
Under Content source, choose Filter by product tag or Filter by collection. Select Collection handle as the input mode. This tells the widget to only show videos where at least one tagged product belongs to the collection the shopper is currently viewing.
Save the preset. Copy the preset ID from the top of the settings panel. You will need it in the next step. IDs look like bn_col_a1b2c3.
Step 3: Add the snippet to collection.liquid
Back in Themes, click the three dots next to your live theme and choose Edit code. In the file tree, open templates, then collection.json or sections/main-collection-product-grid.liquid depending on your theme. For most Dawn-based themes, edit sections/main-collection-product-grid.liquid.
Paste this block above the product grid, or wherever you want the videos to appear:
<div data-bn-preset="bn_col_a1b2c3" data-bn-collection="{{ collection.handle }}"></div>
Replace bn_col_a1b2c3 with your real preset ID. The data-bn-collection attribute passes the current Shopify collection handle at render time. Click Save. Refresh any collection page on the storefront to see the carousel.
Step 4: Verify and troubleshoot
Open a collection page and check the widget renders. If it shows an empty state, the most common cause is that no videos in your library have tagged products from that collection. Go to Videos in the dashboard and tag more products. Second most common: the preset filter mode is still set to All videos. Reopen the preset and switch to Filter by collection.
Third most common: the theme app embed is off. Recheck under Customize, App embeds. Fourth: Shopify edge-caches collection pages for logged-out shoppers. Append ?bnrefresh=1 to the URL to bypass, or wait a few minutes for the cache to expire.
Add to cart uses the native Shopify cart, so checkout stays on your own payment gateway. INR prices flow straight from your product catalogue for Indian shoppers, no extra config.
Common questions
Can I show a different set of videos on each collection?
Yes. The data-bn-collection attribute is read at render time, so every collection page automatically passes its own handle. You do not need a separate preset per collection. If you want fully different formats, say a floating bubble on Sale and a carousel on New Arrivals, create two presets and wrap each snippet in a Liquid conditional like {% if collection.handle == 'sale' %}. Tag your product videos properly in the dashboard and the correct set surfaces on the matching collection page without any extra config.
What if my theme is a headless or custom build, not Dawn?
The install is the same idea, just adapted to your stack. Load embed.js once from https://www.itsbeyondregular.com/embed.js in your document head. Then, on your collection route, render the div with data-bn-preset set to your preset ID and data-bn-collection set to the current collection handle from your data layer. For Hydrogen, pass collection.handle from the loader. For Next.js storefronts on Shopify Storefront API, read handle from your route params and inject it into the attribute server-side.
Will related videos slow down my collection pages?
No meaningful impact on LCP. The embed.js loader is around 26 KB gzipped and marked async, so it does not block the initial render of your collection grid. Video thumbnails lazy-load only when the carousel enters the viewport, and full video only plays on tap or hover depending on your preset settings. If you see a Lighthouse drop, check that your theme is not double-loading embed.js. That happens if the theme app embed is on and someone also pasted the script tag into theme.liquid manually.