Set Up the Shopify Theme App Embed
Enable the beyondRegular theme app embed in Shopify, add a widget block, and verify checkout attribution. Step-by-step with the exact script and data-attribute.
Install the beyondRegular theme app embed from your Shopify admin, toggle it on for your active theme, then drop a widget block on any page and pick a preset. No code edits, no liquid patches. If you want a widget outside the theme editor, paste the standard script and div into a custom HTML section.
Install the app embed
Open your Shopify admin, go to Online Store, then Themes. On your live theme click Customize. In the left sidebar switch to the App embeds tab (the puzzle-piece icon). Find beyondRegular in the list and flip the toggle on. Click Save in the top right. That single toggle loads embed.js on every storefront page so any widget block you add later can render. You do not need to touch theme.liquid, layout files, or any snippet. If beyondRegular is not in the list, install it from the Shopify App Store first, then reopen the theme editor.
Add a widget block to a page
Still inside the theme editor, pick the page you want to place the widget on (Home, Product, Collection, or any template). Click Add block or Add section, choose beyondRegular, then pick the format: horizontal carousel, vertical carousel, floating bubble, or reel feed. Open the block settings on the right and select the preset you built in the beyondRegular dashboard. Presets carry the videos, tagged products, and theme colours. Drag the block to the position you want. Click Save. Preview the page from the theme editor before publishing to confirm the widget renders and the product tags open the right PDPs.
Manual placement outside the block system
If you need the widget somewhere the block picker cannot reach (a custom Liquid section, a page built by a page builder, or a headless surface), paste the standard embed instead. Add this to the section HTML:
<script async src="https://www.itsbeyondregular.com/embed.js"></script> <div data-bn-preset="PRESET_ID"></div>
Replace PRESET_ID with the id shown next to the preset in the dashboard. The script is idempotent, so if the app embed is already on it is safe to include again. Keep the div where you want the widget to render. On a headless storefront, mount the div in your React or Vue template and let embed.js hydrate it after the component paints.
Verify attribution and checkout
Open the storefront in an incognito window, click a tagged product from the widget, and complete a test order using Shopify Payments or your configured gateway (Razorpay, PayU, CCAvenue, Cashfree, Stripe). Checkout stays on your own domain and gateway, beyondRegular never intercepts it. Prices pull from the Shopify catalogue, so Indian shoppers see INR automatically. On the Pro plan the web pixel fires order events back to your beyondRegular dashboard within a minute. If attribution is missing, confirm the Customer events pixel for beyondRegular is set to Connected under Settings, Customer events.
Troubleshoot common install issues
Widget not visible after saving: the block is on a template that is not the active one. Confirm you are editing the theme marked Live under Online Store, Themes.
Widget shows a spinner forever: the preset id is wrong or the preset is unpublished. Open the dashboard, copy the id shown next to the preset name, and paste it into data-bn-preset.
Products open the wrong PDP: the tag is pointing at a deleted or draft product. Retag the frame in the dashboard and republish the preset.
Script loaded twice: harmless. embed.js dedupes on the src URL. If you still want a single load, remove the manual snippet and rely on the app embed toggle only.
Common questions
Do I need to edit theme.liquid or any Liquid files?
No. The theme app embed system loads embed.js through Shopify's app embed API, which is separate from your theme code. You toggle beyondRegular on in the App embeds tab, save, and Shopify injects the script for you across every storefront page. Widget blocks are added through the block picker in the theme editor, so they live in section settings, not in Liquid. The only time you paste code is if you want a widget inside a custom HTML section or a headless template, and even then it is one script tag and one div.
Will the app embed slow down my storefront?
embed.js is around 26 KB gzipped and loads with the async attribute, so it does not block first paint or Largest Contentful Paint. The widget itself only renders after the page is interactive, and video assets stream from Cloudflare only when a frame enters the viewport. If you want to confirm, run PageSpeed Insights before and after enabling the app embed. On a typical Dawn-based theme the LCP delta is inside measurement noise.
Can I use the widget on a headless Shopify storefront (Hydrogen, Next.js)?
Yes. The theme app embed toggle only affects the Liquid storefront, so on headless you skip that step and paste the embed directly into your React or Vue template. Add the script tag once in your root layout and drop <div data-bn-preset="PRESET_ID"></div> wherever you want the widget. embed.js hydrates the div after mount, so it works with server-rendered and client-rendered routes. Shopify checkout still runs on your configured domain, so attribution and payment flow are unchanged.