How to Create a Banner Video Widget Without Slowing LCP
Install a shoppable banner video widget with beyondRegular and keep LCP fast. Async embed.js, lazy video, correct hero placement, Shopify setup.
Load beyondRegular through the async embed.js tag, keep the widget below the LCP element (or reserve a poster box as the LCP), and let the widget lazy-load the video after first paint. The script is around 26 KB gzipped and does not block render, so the banner appears without pushing your Largest Contentful Paint.
Add the async embed script once
Place the loader in your site head or right before the closing body tag. Keep it async so the browser can parse HTML and paint the hero before fetching the widget code.
<script async src="https://www.itsbeyondregular.com/embed.js"></script>
On Shopify, skip the manual tag. Go to Online Store, Themes, click Customize on your live theme, then open App embeds in the left rail and toggle beyondRegular on. The theme app embed injects the same async loader with no theme.liquid edits.
Drop the banner container in the right spot
Create a preset in the beyondRegular dashboard under Widgets, New widget, then pick Horizontal carousel or Floating bubble. Copy the preset ID from the Install tab.
Paste the container where the banner should render:
<div data-bn-preset="PRESET_ID"></div>
If the hero image above the fold is your LCP element, keep the widget container below it. If the banner itself is the hero, set a poster image with the same dimensions as the video frame, so the browser has a stable LCP candidate before the video decodes.
Reserve space so layout does not shift
Give the container a fixed aspect ratio in CSS. This prevents CLS when the widget mounts, and keeps the reserved box paintable as an LCP candidate.
<style>[data-bn-preset]{aspect-ratio:16/9;width:100%;background:#0b0b0b;}</style>
For vertical carousel or reel feed, use aspect-ratio:9/16. The widget respects the parent box, so the video frame sizes to the container instead of forcing a reflow after script execution.
Let the video lazy-load, do not preload
Do not add a preload link for the video file. beyondRegular fetches the video only after the widget mounts, and it uses IntersectionObserver, so off-screen frames stay idle until scroll.
Product tags, prices, and PDP links come from your store catalogue. INR shows for Indian shoppers automatically. Add to cart routes to your native gateway (Shopify Payments, Razorpay, PayU, Cashfree, CCAvenue, Stripe), so the widget adds zero checkout overhead.
If you run Cloudflare or another CDN in front of your storefront, do not proxy embed.js. Hit the origin so version headers stay correct.
Verify LCP after install
Open Chrome DevTools, Performance panel, and record a cold load. The LCP marker should land on your hero image or the reserved container, not on the video element itself.
Run PageSpeed Insights on the page URL. Field data updates over 28 days, so use the Lab tab for immediate signal. If LCP regresses, the usual cause is placing the widget above the hero without a poster, or dropping the async attribute during a copy paste.
Common questions
Where do I get the PRESET_ID for the banner?
Log in to the beyondRegular dashboard, open Widgets in the left sidebar, and pick the widget you built (or click New widget to create one). On the widget page, open the Install tab. You will see the exact <div data-bn-preset="..."></div> snippet with your preset ID filled in. Copy that block and paste it into your template where the banner should render. Each preset has its own ID, so a homepage carousel and a PDP bubble use different IDs even on the same store.
Does the banner widget work on Shopify without editing theme.liquid?
Yes. In Shopify admin go to Online Store, Themes, then click Customize on your live theme. In the left rail, open App embeds and toggle beyondRegular on. That injects embed.js site-wide. To place a banner in a specific section, open Sections, Add section, Custom Liquid, and paste <div data-bn-preset="YOUR_ID"></div>. Save and preview. The theme app embed handles the loader, so you only paste the container div where the banner should appear.
Will the widget hurt my Core Web Vitals?
The loader is async and around 26 KB gzipped, so it does not block HTML parsing or first paint. Video files lazy-load through IntersectionObserver, so off-screen widgets stay idle. LCP regressions almost always come from two mistakes: dropping the async attribute when copying the script tag, or placing the widget above your hero image without reserving a box with aspect-ratio CSS. Fix those two and CLS stays at zero. For attribution on Pro, install the Shopify web pixel from the dashboard, it runs after load and does not touch LCP.