How to Customize Shoppable Video Colors, Fonts, and CTAs
Restyle beyondRegular shoppable video widgets with data attributes and CSS variables. Change accent color, font, and CTA label without touching JS.
You can restyle every beyondRegular widget without touching JavaScript. Set data attributes on the embed div for accent color, font family, and CTA label, or override the exposed CSS variables in your theme stylesheet. Same knobs work for horizontal carousel, vertical carousel, floating bubble, and reel feed.
Load the script once, then style per widget
Every page that renders a widget needs the embed script in the head or before the closing body tag. Add it once per template, not once per widget. Use <script async src="https://www.itsbeyondregular.com/embed.js"></script> and then drop the widget div anywhere on the page.
Style props sit on the div itself, so you can run two presets side by side with different colors and fonts. Example: <div data-bn-preset="PRESET_ID" data-bn-accent="#111111" data-bn-font="'Inter', sans-serif" data-bn-cta="Shop the look"></div>.
On Shopify, the theme app embed toggle injects the script for you. Go to Online Store, Themes, Customize, App embeds, and switch on beyondRegular. You still add the div through a custom Liquid block or a section wherever you want the widget to render.
Change accent color and CTA button label
The accent color drives the tag pill background, the add to cart button, the progress bar, and the active state on the carousel dots. Pass it as a hex, rgb, or CSS variable. Split it out with data-bn-cta-bg and data-bn-cta-text when the button needs its own palette.
Full example: <div data-bn-preset="reels_home" data-bn-accent="#ff4d2e" data-bn-cta-bg="#000000" data-bn-cta-text="#ffffff" data-bn-cta="Add to bag"></div>. data-bn-cta rewrites the button copy across every frame in the widget.
If you want per product copy, set the CTA in the dashboard under Studio, Video, Product tag, CTA label. The div level attribute wins when both are set. For contrast, keep the accent and CTA background at least 4.5:1 against the video overlay.
Set fonts to match your storefront
The widget inherits the font stack of the parent container by default, so most stores need zero font work. If your body font is loaded through a CSS file and the widget renders inside an iframe wrapper, pass the family explicitly on the div.
Use: <div data-bn-preset="PRESET_ID" data-bn-font="'Satoshi', 'Inter', sans-serif" data-bn-font-weight="500" data-bn-font-url="https://fonts.googleapis.com/css2?family=Satoshi:wght@500;700&display=swap"></div>. data-bn-font-url preloads the file inside the widget shadow root.
Skip data-bn-font-url if the font is already loaded by the theme, otherwise the browser downloads it twice. For the floating bubble format, add data-bn-font-size="14" if the default 13px feels tight on your brand.
Override CSS variables for full control
Every visual token is exposed as a CSS variable on the widget root. Use these when you want theme wide styling without repeating attributes on each div. Drop the block in your theme.css or Shopify theme.liquid stylesheet.
.bn-widget { --bn-accent: #111; --bn-accent-contrast: #fff; --bn-radius: 12px; --bn-cta-radius: 999px; --bn-font-family: 'Inter', sans-serif; --bn-tag-bg: rgba(0,0,0,0.6); --bn-tag-text: #fff; --bn-price-color: #111; }
The widget reads variables at mount and on resize, so live theme editor edits reflect without a hard refresh. Radius tokens control the video card, the CTA pill, and the bubble. Set --bn-radius to 0 for a hard edge look, 24px for soft cards.
Where to change defaults inside the dashboard
If you do not want to touch code at all, the same knobs live in the merchant dashboard. Go to itsbeyondregular.com, Studio, Presets, pick your preset, then Appearance.
Appearance has four blocks. Colors sets accent, CTA background, CTA text, and tag pill. Typography sets font family, weight, and size. Buttons sets CTA label and corner radius. Layout sets card radius and spacing.
Click Save and the change ships to every page that renders that preset ID. No redeploy needed. The embed pulls the latest style config on each mount, cached for 60 seconds at the edge.
Common questions
Do style changes apply to all widget formats or just one?
Data attributes on the div style only that instance, so a horizontal carousel and a floating bubble on the same page can run different accents. CSS variable overrides in your theme stylesheet apply to every widget on the site because they target the .bn-widget root. Dashboard Appearance changes apply per preset ID, so if your homepage carousel and PDP reel share the same preset they will both update. Duplicate the preset first if you want them to diverge.
Will custom fonts break Core Web Vitals or LCP?
The widget itself is around 26 KB gzipped, async, and does not block LCP. Fonts are the risk. If you pass data-bn-font-url the widget preloads it with font-display swap, so text renders in the fallback family first. If your theme already loads the font, skip data-bn-font-url so you do not download it twice. For the floating bubble, the font only renders after user interaction, so it never touches LCP on landing.
How do I change the add to cart button color without changing the tag pill?
Use the split attributes instead of the single accent. data-bn-cta-bg controls the button background, data-bn-cta-text controls the label color, and data-bn-tag-bg plus data-bn-tag-text control the product tag pill. data-bn-accent is a shorthand that sets both when you want them to match. If you set accent and cta-bg together, cta-bg wins for the button and accent still drives progress bar and active dots. Same logic works through the CSS variables listed in the reference section.