Shoppable video for Indian D2C brands, explained

What is shoppable video?

Shoppable video is a product video with tappable product tags overlaid on it, letting a viewer add the featured product to cart, see its price, or open its detail page without leaving the video frame. It sits between traditional product photography and live-commerce streams: asynchronous like a static gallery, conversion-instrumented like a checkout. In Indian D2C the format is colloquially called "reels on the website" because the source clips are usually Instagram or TikTok reels reused on the storefront.

What is a shoppable video widget?

A shoppable video widget is a small embeddable script that renders shoppable video carousels, floating bubbles, or reel-style feeds on an existing website without rebuilding the storefront. The widget mounts inside a Shadow DOM so it can't leak CSS into the theme or pick up theme CSS that would break it. beyondRegular ships a single 15 KB gzipped script (measured per build in stats/widget-size.json) - well below the 30 KB ceiling the Web Almanac reports as the median for similar third-party embeds.

How to add shoppable video to a Shopify store in 4 steps

1. Create a preset. Sign up at itsbeyondregular.com/signup and create a preset - pick a template (Horizontal carousel, Vertical reel, or Floating bubble), choose colours, and save.
2. Import videos. Paste an Instagram reel URL, upload an MP4, or drop a TikTok link. The dashboard handles transcoding and stores the file on Cloudflare R2.
3. Tag products. For each video, paste the Shopify product handle or full URL. beyondRegular pulls the product title, image, and price automatically through the Shopify Storefront API.
4. Embed in your theme. Paste the 4-line script snippet from the dashboard's "Use" dialog into a Custom Liquid block in Shopify theme editor, or install the App Store extension for one-click order attribution via the Shopify Web Pixel.

Total time on a Shopify Dawn-family theme: about 7 minutes from signup to first video live.

Shoppable video vs the alternatives

What is the right widget format for your storefront?

The three templates beyondRegular ships map to three distinct buyer journeys. The horizontal carousel sits below the product image on a PDP and is the highest-converting placement for considered purchases (apparel, beauty, home). The floating bubble is a low-friction discovery surface used on the home page or category index. The vertical reel feed is a full-screen TikTok-style stack best suited to mobile-first editorial drops and Diwali / festive campaigns. Pick one per page; do not stack two formats on the same template.

How does beyondRegular handle accessibility?

Every widget surface ships with semantic <button> and <a href> elements (no clickable divs), keyboard focus states, and ARIA labels on icon-only buttons. The carousel exposes role="feed" to assistive tech. Colour contrast is measured against WCAG 2.1 AA for the default theme; custom CTA colours are validated in the template editor before publish.

What happens to performance when you install the widget?

The script loads asynchronously with defer, videos use the native <video preload="metadata"> hint, and aspect ratios are reserved on first paint so the widget contributes zero to cumulative layout shift. On a mid-range Android over 4G - the median Indian shopper device - the widget adds well under 200 ms to time-to-interactive on a Shopify Dawn baseline.

How does revenue attribution actually work?

On Shopify, the BeyondRegular Web Pixel extension subscribes to the checkout_completed event published by Shopify's Web Pixels API and matches the buyer's session ID back to the last widget click - including orders processed through Razorpay, PayU, CCAvenue, and Cashfree gateways. Attribution lands as a real order on the merchant's Shopify dashboard, not a third-party tracker estimate.

Key takeaways

• Shoppable video adds an in-frame add-to-cart path that static images and YouTube embeds structurally cannot.
• beyondRegular's widget is 15 KB gzipped, measured per build, and renders inside a Shadow DOM so it cannot leak CSS into the storefront.
• Three templates (carousel, floating bubble, reel feed) map cleanly to PDP, discovery, and full-screen editorial use cases - pick one per page.
• Shopify install takes about 7 minutes and supports all India-native payment gateways through the Web Pixel attribution path.
• Pricing starts at ₹299/month with GST invoices for Indian businesses; international plans are billed in USD through secure global payment partners.

Sources referenced on this page: Google Search Central - AI optimization guide, Shopify Web Pixels API, WCAG 2.1 quick reference, web.dev - cumulative layout shift, IPTC × Google - AI-image provenance.