How to Add Custom CSS to a Shoppable Video Widget
Style beyondRegular shoppable video widgets with custom CSS. Target the data-bn-preset wrapper, override colors, sizing, and product tag styles safely.
You can style a beyondRegular shoppable video widget by targeting its container and internal class hooks with your own stylesheet. Add CSS to your site's main stylesheet or a `<style>` block, scope rules under the widget's wrapper, and use `!important` only when overriding inline defaults. The widget mounts inside the `<div data-bn-preset="PRESET_ID">` you drop into your page, so every custom rule should hang off that element.
Where the widget mounts
Every beyondRegular widget renders inside the div you paste into your page. The script `https://www.itsbeyondregular.com/embed.js` reads the `data-bn-preset` attribute and injects the carousel, bubble, or reel feed inside that container.
```html <script async src="https://www.itsbeyondregular.com/embed.js"></script> <div data-bn-preset="PRESET_ID" id="br-hero"></div> ```
Give the wrapper an `id` or extra class so your CSS can scope cleanly. That way your rules only touch this one widget, not every beyondRegular instance on the page. On Shopify, paste the same markup inside the section where you want the widget to appear, then keep the theme app embed toggle on.
Write scoped CSS rules
Add a `<style>` block in your theme's `theme.liquid` head, or drop rules into your existing stylesheet. Always scope selectors under the wrapper you named above, so future template changes do not leak styles into other components.
```css #br-hero { max-width: 960px; margin: 32px auto; border-radius: 16px; overflow: hidden; } #br-hero [data-bn-preset] { background: #0b0b0b; } ```
Widget size stays around 26 KB gzipped and loads async, so your stylesheet order matters. Load your CSS in the `<head>` before `embed.js` so first paint uses your sizing rules, not the defaults.
Target product tags and controls
Product tags, price chips, and the add to cart button all sit inside the widget's shadow-safe wrapper. Use attribute selectors so upgrades to embed.js do not break your styles.
```css #br-hero [data-bn-tag] { background: rgba(0,0,0,0.72); color: #fff; font-family: 'Inter', system-ui, sans-serif; } #br-hero [data-bn-price] { font-weight: 600; } #br-hero [data-bn-cta] { background: #ff3b30; border-radius: 999px; padding: 10px 18px; } ```
Prices come from your store catalogue, so Indian shoppers see INR automatically. Do not hardcode currency strings in CSS pseudo-elements.
Format-specific overrides
Horizontal carousel, vertical carousel, floating bubble, and reel feed each expose a format hook via `data-bn-format`. Scope by format when you run more than one preset on the same page.
```css [data-bn-format="bubble"] { bottom: 24px; right: 24px; width: 120px; height: 120px; } [data-bn-format="reel"] { aspect-ratio: 9 / 16; } [data-bn-format="carousel-h"] { gap: 12px; } ```
For the floating bubble, keep it clear of your cart drawer trigger. For reel feed on mobile, avoid fixed pixel heights and let `aspect-ratio` do the work so short and tall videos both fit.
Ship it without breaking checkout
Checkout stays on your own gateway, Razorpay, PayU, Cashfree, Shopify Payments, or Stripe, so CSS changes never touch payment flow. Still, test add to cart after every style change, especially if you override `[data-bn-cta]` or hide any element with `display: none`.
In your Shopify admin go to Online Store, Themes, Customize, then App embeds and confirm beyondRegular is on. Preview the theme, open the page with your widget, and check DevTools for any CSS specificity conflicts.
If a rule refuses to apply, raise specificity with the wrapper id before reaching for `!important`. Video lazy-loads on scroll, so scroll into view when you verify styles, not just on first paint.
Common questions
Can I use CSS to hide the beyondRegular product tag on some videos?
Yes. Every tag renders with `data-bn-tag` on the element and inherits any preset id you set on the wrapper. Target it with a scoped rule such as `#br-hero [data-bn-tag] { display: none; }` to hide tags on that one placement, or use `visibility: hidden` if you want the layout box preserved. Do not hide the tag globally if you rely on it for add to cart, since shoppers tap the tag to open the product sheet. On Pro plan the Shopify web pixel still fires on cart events, so attribution is not affected by visual hiding.
Why are my CSS overrides not applying to the widget?
Three causes, ranked by how often we see them in support. First, your stylesheet loads after `embed.js` has already rendered, so specificity ties go to the defaults, add the wrapper id to your selector. Second, you targeted a class that changed between widget versions, switch to `data-bn-*` attribute selectors which stay stable. Third, the widget is inside a Shopify section that is cached, hard refresh with Cmd or Ctrl + Shift + R, or bump the theme asset version. If all three check out, confirm the preset id in your div matches the one in your beyondRegular dashboard.
Does custom CSS slow down my page or hurt LCP?
No, as long as you keep your stylesheet lean. The widget itself is around 26 KB gzipped, loads async, and lazy-loads video on scroll, so it does not block LCP. Your added CSS only costs whatever bytes you write, usually under 1 KB for a full skin. Put the CSS in your existing theme stylesheet rather than a new file, so you avoid an extra round trip. Avoid `@import` inside the widget wrapper and skip heavy web fonts loaded just for the widget, system font stacks render instantly and match most storefront designs.