How to Create a Grid Video Widget for Collection Pages
Install a beyondRegular grid video widget on your collection pages. Exact embed.js snippet, data-bn-preset code, and Shopify template steps.
A grid video widget on collection pages shows multiple shoppable videos in a tidy row-and-column layout above or below your product grid. You install the beyondRegular embed script once in your theme, then drop a single div with a preset ID onto the collection template. The widget pulls the videos and product tags you set in the dashboard, and clicks open the PDP or add-to-cart on your own store.
Create the grid preset in the dashboard
Sign in at itsbeyondregular.com and open Widgets, then click New Widget. Pick Grid as the format. Grid renders videos in a responsive layout: 2 columns on mobile, 3 or 4 on desktop, set under Layout > Columns. Choose the collection you want this grid tied to under Content > Source > Collection, then pick the videos you already uploaded.
In Product tagging, drop tags on each frame and link them to the exact product handles from your store. Save. Copy the PRESET_ID shown at the top of the preset page. You will paste it into the collection template in the next step. Preview inside the dashboard before you touch theme code.
Install embed.js once, site-wide
Open your theme code editor. On Shopify, go to Online Store > Themes > Edit code > layout/theme.liquid. On other platforms, edit the main layout or header template. Paste this line just before the closing </head> tag:
<script async src="https://www.itsbeyondregular.com/embed.js"></script>
Async keeps it off the LCP path. The widget script is around 26 KB gzipped and video loads lazily, so the collection page still renders fast. If you use Shopify's theme app embed, flip the beyondRegular embed toggle under App embeds in the theme editor instead of pasting the script by hand.
Drop the widget onto the collection template
On Shopify, open sections/main-collection-product-grid.liquid or templates/collection.json depending on your theme. Find the spot where you want the videos, above the product grid is the common choice, and paste:
<div data-bn-preset="PRESET_ID"></div>
Replace PRESET_ID with the ID you copied. Save. Reload a collection page and the grid renders in place. If you use a page builder like Shogun or PageFly, add a Custom HTML block on the collection layout and paste the same div. Do not wrap the div in display:none or a lazy-loaded tab, the widget needs to be in the DOM on first paint.
Pass the collection handle so the grid stays contextual
A single preset can serve many collections if you pass the handle at runtime. On Shopify, use Liquid to inject it:
<div data-bn-preset="PRESET_ID" data-bn-collection="{{ collection.handle }}"></div>
The widget reads data-bn-collection and shows videos tagged to that collection in the dashboard. This means one preset covers Shoes, Bags, and Denim without three separate embeds. On WooCommerce or custom stacks, replace the Liquid tag with your own template variable that outputs the collection slug.
Verify tags, cart, and attribution
Open a collection page, click a video, tap a tagged product. It should route to the PDP on your own domain, or fire an add to cart on your native cart drawer. Checkout stays on your existing gateway, Razorpay, PayU, Cashfree, Shopify Payments, Stripe, whichever you already run. INR prices come straight from your catalogue for Indian shoppers.
If you are on the Pro plan, enable the Shopify web pixel from the dashboard under Attribution. That is what maps widget views and clicks to orders. Without it, the grid still works, you just lose the revenue attribution reports.
Common questions
Can I show a different set of videos per collection without creating a new preset each time?
Yes. Create one Grid preset, then pass data-bn-collection on the div. On Shopify use <div data-bn-preset="PRESET_ID" data-bn-collection="{{ collection.handle }}"></div>. The widget filters videos by the collection handle you tagged in the dashboard. This keeps theme code clean and lets you manage everything from one preset. If a collection has no tagged videos, the widget renders nothing rather than falling back to a default set, so the page layout does not break.
The widget div is in the theme but nothing shows up. What do I check first?
Rank the causes by how often they hit. First, confirm embed.js is loaded, open DevTools Network tab and search for embed.js on the collection page. Second, check the PRESET_ID matches the one in the dashboard, a stray space or typo breaks it. Third, make sure no parent element has display:none or is inside a tab that hides until click. Fourth, check the preset has published videos assigned. Fifth, clear your CDN cache if you use Cloudflare or Shopify's asset cache.
Does the grid widget hurt collection page load speed or LCP?
No, as long as you keep the script tag async. The bundle is around 26 KB gzipped and videos lazy-load only when the tile scrolls into view. The widget mounts after your product grid paints, so LCP stays on your hero image or first product card. If you see a regression in Lighthouse, check that you did not accidentally load embed.js with defer removed, or place the div above the fold in a way that forces immediate video decode. Async plus below-hero placement keeps scores steady.