How to Auto-Display Videos on Product Pages Based on Tagged Products
Show shoppable videos on product pages automatically based on product tags. Setup guide with embed.js, data attributes, and Shopify Liquid snippets.
Add the beyondRegular embed once, then drop a preset div into your product template and pass the product ID or SKU as a data attribute. The widget filters your preset for videos tagged with that product and renders only the matching frames. On Shopify, use Liquid variables inside the div; on custom stores, inject the ID from your template engine.
Load embed.js once in your theme
Put the loader in your global layout so it runs on every page. On Shopify, edit theme.liquid and paste this before the closing head tag:
<script async src="https://www.itsbeyondregular.com/embed.js"></script>
Async means it will not block LCP. The script weighs about 26 KB gzipped and only fetches video after the frame is in view. If you use the Shopify theme app embed, toggle beyondRegular on under Online Store, Themes, Customize, App embeds, and skip the manual script tag.
Create a product-filtered preset in the dashboard
Go to app.itsbeyondregular.com, open Presets, click New preset, and pick a format: horizontal carousel, vertical carousel, floating bubble, or reel feed.
Under Content rules, choose Filter by tagged product. Add the products you want covered, or select Auto to include every video where a product tag exists. Save the preset and copy the preset ID from the top of the edit screen. You will paste that ID into the div on your product template.
Drop the widget into product.liquid
Open Online Store, Themes, Edit code, then sections/main-product.liquid (or templates/product.liquid on older themes). Add this block where you want the videos to appear, usually below the product description:
<div data-bn-preset="PRESET_ID" data-bn-product-id="{{ product.id }}"></div>
The widget reads data-bn-product-id, matches it against the product tags in your preset, and renders only the frames that include that product. If you tag by SKU instead, use data-bn-sku="{{ product.selected_or_first_available_variant.sku }}". You can pass both; the widget prefers product ID.
Custom stores (WooCommerce, Magento, headless)
The contract is the same. Render the div server-side with the product identifier your catalogue uses. WooCommerce example inside single-product.php:
<div data-bn-preset="PRESET_ID" data-bn-product-id="<?php echo esc_attr($product->get_id()); ?>"></div>
For headless React or Next.js, render the div in your PDP component and let embed.js hydrate it on mount. Do not wrap it in a client-only guard; embed.js handles SSR output fine and mounts after hydration. Prices displayed inside frames come from your store catalogue, so INR shoppers see INR automatically.
Verify and troubleshoot
Open a product page and check the network tab for embed.js returning 200. Inspect the div: after mount it should have a data-bn-mounted="true" attribute and a child iframe or shadow root.
If nothing renders, causes in order of frequency: (1) preset ID typo, (2) product ID passed as empty string because the Liquid variable is wrong for that template, (3) no videos in the preset actually carry that product tag, (4) a strict Content Security Policy blocking itsbeyondregular.com. Allow www.itsbeyondregular.com in script-src, frame-src, and connect-src.
Common questions
What happens on a product page where no videos are tagged?
The div stays empty and collapses to zero height, so you do not get a blank gap in your layout. embed.js checks the preset for matches against the data-bn-product-id you passed, and if the result set is empty it exits quietly without rendering a frame or a skeleton. If you would rather show a fallback, wrap the div in your own container and use CSS to display a default banner when the widget container has no children. You can also set up a second preset with untagged filler videos and swap the preset ID based on template logic.
Can I show videos matched by collection or tag instead of a single product ID?
Yes. Use data-bn-collection="COLLECTION_HANDLE" or data-bn-tag="TAG_NAME" on the div instead of data-bn-product-id. The widget will pull every video where any tagged product belongs to that collection or carries that tag. This is useful on category landing pages and lookbooks where you want a broader feed. You can combine attributes: passing both product ID and collection narrows to videos that satisfy both, which is handy for variant-heavy catalogues where one product belongs to several curated groups.
Does the auto-tagged widget affect page speed or Core Web Vitals?
No, and this is worth checking yourself. The embed.js loader is async so it does not block first paint or LCP. The widget itself is around 26 KB gzipped and does not fetch video files until a frame enters the viewport. On a product template with a static hero above the fold, the video widget sits below the fold and loads lazily. If you place the div very high on the page and want to preload the poster image, add data-bn-preload="poster" so the first frame decodes earlier without pulling the video stream.