How to Embed Shoppable Video in Shopify Liquid Sections
Add beyondRegular embed.js to theme.liquid and drop a data-bn-preset div into any Shopify Liquid section. Exact snippets, menu paths, and troubleshooting.
Add the beyondRegular script to theme.liquid, then drop a div with data-bn-preset into any Liquid section where you want the shoppable video to render. The widget mounts wherever the div sits, so you can place it inside sections/homepage.liquid, product templates, or custom sections. No app block needed if you prefer full Liquid control.
Load embed.js once in theme.liquid
Open your Shopify admin, go to Online Store, Themes, then click the three dots on your live theme and choose Edit code. Open layout/theme.liquid.
Paste this line just before the closing </head> tag: <script async src="https://www.itsbeyondregular.com/embed.js"></script> Loading it in the head with async keeps it off the critical path. The file is about 26 KB gzipped and does not block LCP. Video assets lazy-load only when a widget scrolls near the viewport, so home page speed stays intact. Save the file. You only load this script once for the whole store.
Drop the widget div into a Liquid section
Create or open a section file, for example sections/shoppable-video.liquid. Add the mount div where you want the widget to appear: <div data-bn-preset="{{ section.settings.bn_preset }}"></div> Then add a schema block so merchandisers can paste the preset ID from the beyondRegular dashboard without touching code: {% schema %} { "name": "Shoppable video", "settings": [ { "type": "text", "id": "bn_preset", "label": "beyondRegular preset ID" } ], "presets": [{ "name": "Shoppable video" }] } {% endschema %} Now the section shows up in the theme editor under Add section.
Grab the preset ID from the dashboard
Log into app.itsbeyondregular.com. Open Widgets, pick the widget you built (horizontal carousel, vertical carousel, floating bubble, or reel feed), and click Install.
Copy the value inside data-bn-preset from the snippet shown. It looks like a short alphanumeric string. Paste it into the section setting you just created in the theme editor, or hardcode it in Liquid if you never plan to change it.
Product tags inside each frame pull SKUs from your Shopify catalogue, so INR pricing and stock status are always live for Indian shoppers. Add to cart uses the native Shopify cart, and checkout runs on Shopify Payments, Razorpay, or whatever gateway you already have wired up.
Placing the widget on specific templates
For the home page, open templates/index.json (or index.liquid on vintage themes) and add your new section to the sections array. For product pages, add it to templates/product.json below the main product section.
If you want a floating bubble that follows shoppers across every page, skip section placement and instead render the div directly in theme.liquid, just before </body>: <div data-bn-preset="YOUR_PRESET_ID"></div> That single mount works site-wide because embed.js is already loaded globally. Do not add embed.js twice, one load is enough.
Troubleshooting when the widget does not appear
Ranked by how often we see them: 1) The div is inside a section that is not added to the template. Open the theme editor and confirm the section is placed and saved. 2) The preset ID is wrong or from a different store. Copy it again from Widgets, Install. 3) The theme is using an app-block wrapper that strips custom HTML. Move the div outside the app block. 4) A content security policy meta tag blocks itsbeyondregular.com. Add www.itsbeyondregular.com to script-src.
Open browser devtools, Console, and look for logs prefixed with [bn]. If you see nothing, embed.js did not load, recheck the script tag path.
Common questions
Can I use the Shopify theme app embed toggle instead of editing Liquid?
Yes. In the theme editor, click App embeds in the left sidebar and toggle beyondRegular on. That injects embed.js for you, so you can skip the theme.liquid step. You still need to drop the <div data-bn-preset="..."></div> mount wherever you want the widget to render, either in a Liquid section you control or via the beyondRegular app block that ships with the integration. Pick the app embed path if you want zero code edits, pick the Liquid path if you need precise placement inside custom sections your team already maintains.
Will the shoppable video slow down my product pages or hurt Core Web Vitals?
The embed.js file is about 26 KB gzipped and loads with the async attribute, so it does not block parsing or LCP. Video frames lazy-load only when the widget nears the viewport, and posters are lightweight images until then. On product pages, place the mount div below the main product section so the first paint stays product-image driven. If you want attribution to Shopify orders, upgrade to the Pro plan and enable the Shopify web pixel from the dashboard. That runs from Shopify's pixel sandbox, so it does not add weight to the theme itself.
How do product tags inside the video know which Shopify variants to link to?
When you tag a product in a frame inside the beyondRegular dashboard, you pick it from your live Shopify catalogue. The widget stores the product handle and variant ID, then at render time it fetches current price, currency, and availability from Shopify. Indian shoppers see INR because that comes from your Shopify market settings. Click a tag and the shopper either lands on the PDP or adds the variant straight to the native Shopify cart. Checkout runs on whatever gateway you already use, Shopify Payments, Razorpay, PayU, Cashfree, or CCAvenue. Nothing about payment flow changes.