How to Create a Story-Style Shoppable Video Widget
Step-by-step setup for a story-style vertical shoppable video widget. Presets, embed code, product tagging, and Shopify theme app embed steps.
A story-style shoppable widget is the vertical carousel format in beyondRegular. Pick a vertical preset in the dashboard, add products to each frame, then paste the embed script and a div carrying data-bn-preset onto your storefront. Shoppers swipe through short vertical videos and tap tagged products to add to cart.
Build the vertical preset in the dashboard
Sign in at itsbeyondregular.com and open Widgets, then click New Widget. Pick the Vertical Carousel format, which is the story-style layout that fills a tall frame and lets shoppers swipe up for the next video. Name it something you will recognise later, for example story-home-hero.
Upload three to eight vertical videos, 9:16 aspect, MP4 under 40 MB each. Give every video a poster image so the first frame is not blank while the file lazy-loads. Save the preset. beyondRegular gives you a PRESET_ID string on the preset detail page. Copy it, you will paste it into your storefront in the next step.
Tag products so each frame is shoppable
On the preset detail page, open a video and click Add Product Tag. Search your connected catalogue by title or SKU and pin one to four products per frame. Tags read live price and stock from your store, so INR prices show automatically for Indian shoppers and out-of-stock items are hidden.
Set a call to action for each tag, either Add to Cart or View Product. Add to Cart uses your store's native cart, so checkout stays on your own gateway, Razorpay, Shopify Payments, PayU, Cashfree, CCAvenue, or Stripe. Hit Publish. The preset is live the moment it is published, no redeploy needed on your side.
Embed on a non-Shopify storefront
Paste the loader once in your site's <head> or just before </body>:
<script async src="https://www.itsbeyondregular.com/embed.js"></script>
Then drop the mount div wherever you want the story-style widget to render, usually the homepage hero or a PDP:
<div data-bn-preset="PRESET_ID"></div>. Replace PRESET_ID with the string from step one. The script is around 26 KB gzipped, loads async, and the video files lazy-load, so it does not block LCP. Refresh the page and the vertical carousel appears.
Embed on Shopify with the theme app embed
On Shopify, skip the raw script tag. Open your admin, go to Online Store, then Themes, click Customize on your live theme. In the left sidebar hit App embeds. Toggle beyondRegular on. This loads embed.js sitewide with no theme file edits.
Now add the mount point. In the theme editor, click Add section or Add block on the page where you want the story widget, choose beyondRegular Widget, then paste your PRESET_ID into the block's Preset ID field. Save. If you prefer code, open theme.liquid or a section file and drop <div data-bn-preset="PRESET_ID"></div> in the spot you want.
Verify it renders and tracks
Open the storefront page in an incognito window. You should see the vertical frame, autoplay muted, with a product tag pill overlaid. Swipe or use the arrow keys to move between videos. Click a tag, confirm it either opens the PDP or adds to the native cart depending on the CTA you set.
If you are on the Pro plan, install the Shopify web pixel from Settings, then Attribution in the beyondRegular dashboard. This records widget-attributed add-to-carts and orders against each preset. Live shopping and broadcast are not supported, the widget is for pre-recorded vertical video only.
Common questions
What size and format should my vertical videos be?
Shoot 9:16, 1080x1920 is the sweet spot. MP4 with H.264 video and AAC audio plays everywhere. Keep each clip under 40 MB and ideally 15 to 30 seconds, since story-style watch time drops off fast after that. Always upload a poster image, JPG or PNG, at the same 9:16 ratio. The poster shows while the video file lazy-loads, so a missing poster means shoppers stare at a black rectangle for a second on slow connections. Audio is muted on autoplay by browser policy, so bake captions into the video if the message depends on voiceover.
Can I put the widget on a specific page instead of sitewide?
Yes. The embed.js loader is safe sitewide because it does nothing until it finds a div with data-bn-preset on the page. So on Shopify, keep the theme app embed toggled on, then only add the widget block to the pages you want, for example the homepage and a specific collection template. On non-Shopify stores, put the script tag in your global layout and only place the <div data-bn-preset="PRESET_ID"></div> in the templates or CMS blocks where the story widget should appear. Different pages can use different PRESET_IDs.
The widget is not showing up, what do I check first?
Ranked by how often we see it: one, the mount div is missing or the PRESET_ID is mistyped, view page source and search for data-bn-preset. Two, the preset is still in Draft, open it in the dashboard and hit Publish. Three, on Shopify the theme app embed toggle is off, re-check Online Store, Themes, Customize, App embeds. Four, a content security policy on your store is blocking itsbeyondregular.com, allow it in your script-src and connect-src. Five, an ad blocker in the test browser is hiding it, try incognito with extensions disabled.