How to Embed a Shoppable Video Widget in PageFly
Add a beyondRegular shoppable video widget to any PageFly page using an HTML element, the embed.js script, and a data-bn-preset div.
To embed a shoppable video widget in PageFly, open the page in the PageFly editor, drop an HTML element where you want the widget, and paste the beyondRegular embed.js script tag plus a div with your data-bn-preset ID. Save and publish. The widget renders inside the PageFly section on the storefront and links tagged products to your Shopify cart.
Get your preset ID from beyondRegular
Open the beyondRegular dashboard, go to Widgets, and pick the preset you want to embed. Each preset has a unique ID shown next to the preset name. Copy that ID. This is the value you pass into data-bn-preset on the target div.
Pick the format that fits the PageFly section you are editing. Horizontal carousel works well inside full-width rows. Vertical carousel fits sidebars and half-width columns. Floating bubble does not need an HTML element in PageFly at all, it is enabled globally through the Shopify theme app embed toggle. Reel feed works best in a dedicated full-width section.
Add an HTML element in the PageFly editor
In Shopify admin, open Apps, launch PageFly, and open the page you want to edit. From the left element panel, search for HTML and drag the HTML element into the row and column where the widget should sit.
Click the HTML element to open its settings on the right. You will see a code editor labelled HTML. This is where the embed snippet goes. Do not use the Liquid element, use HTML. PageFly wraps the HTML element in its own container, so give the parent column a sensible width first so the widget has room to lay out.
Paste the embed snippet
Paste this exact snippet into the HTML element, replacing PRESET_ID with the ID you copied.
<script async src="https://www.itsbeyondregular.com/embed.js"></script> <div data-bn-preset="PRESET_ID"></div>
The script tag only needs to appear once per page. If you already added it in another HTML element on the same PageFly page, only paste the div on the second spot. The div is the mount point, embed.js finds every element with data-bn-preset and renders the matching widget into it. The script is async and around 26 KB gzipped, so it does not block LCP and video assets lazy-load on scroll.
Save, publish, and verify
Click Save in the top right of PageFly, then click Publish. Open the live page in an incognito window. The widget should render inside the PageFly section within a second or two. Product tags inside each video open the product, and Add to cart hands off to your normal Shopify cart and checkout, so Shopify Payments, Razorpay, PayU, Cashfree, or Stripe all keep working as configured.
If you are on the Pro plan, the Shopify web pixel tracks views, clicks, add to cart, and purchases against the widget, so PageFly page revenue attributed to the widget shows up in the beyondRegular dashboard without extra setup.
Troubleshoot a blank widget
Widget not showing up on the PageFly page? Check these in order. First, view page source on the live URL and confirm the embed.js script tag and the data-bn-preset div both made it into the HTML. PageFly sometimes strips script tags if you paste into a Liquid element or a Text element by mistake, always use the HTML element.
Second, confirm the preset ID is spelled correctly and the preset is set to Published in the beyondRegular dashboard, drafts do not render. Third, open the browser console and look for CSP errors, some themes set a strict Content Security Policy that blocks www.itsbeyondregular.com, allowlist that origin in the theme. Fourth, if the container is zero width or hidden, the widget stays collapsed, give the PageFly column a min height and full width.
Common questions
Do I need to add the embed.js script to my theme if I already added it in PageFly?
No, you do not need to add it to the theme separately for that page. The script tag inside the PageFly HTML element loads embed.js when the page loads, and that is enough for any data-bn-preset div on the same page to render. If you want the same widget or a floating bubble to appear across every page of the store, including non-PageFly pages, use the beyondRegular theme app embed toggle in the Shopify theme editor instead. That injects embed.js store-wide so you do not have to paste it into each PageFly page.
Can I put more than one widget on the same PageFly page?
Yes. Drop multiple HTML elements in different rows and paste a div with a different data-bn-preset ID in each one. You only need the embed.js script tag once on the page, so include it in the first HTML element and skip it in the others, just paste the div. embed.js scans the DOM for every element with data-bn-preset and renders each preset independently. This is useful when you want a horizontal carousel above the fold and a vertical reel feed lower down, for example on a campaign or collection landing page built in PageFly.
Will the widget slow down my PageFly page?
Not meaningfully. embed.js is around 26 KB gzipped and loads with the async attribute, so it does not block first paint or LCP. Video files inside the widget lazy-load, meaning the browser only fetches a video when the shopper is about to see it. On PageFly pages that already run several apps, keep an eye on total third party script weight in the browser network tab, but the beyondRegular widget itself is one of the lighter add-ons. If you see a slow page, the cause is almost always heavy hero images or other apps, not the widget.