How to Translate Shoppable Video Button Labels
Localise Add to cart, Shop now, and player controls on beyondRegular shoppable video widgets using data-bn-labels or the dashboard Language panel.
Translate button labels on your beyondRegular shoppable video widgets by adding data-bn-labels attributes to the embed div, or by setting locale defaults in the dashboard under Widgets, Preset, Language. Both methods override the default English strings for Add to cart, Shop now, View product, and the mute or unmute toggles.
Which labels you can translate
Every user-facing string on the widget is overridable. The main ones merchants change are the primary CTA on a product tag (Add to cart or Shop now), the secondary link (View product), the price prefix if you show one, and the accessibility labels on player controls (Play, Pause, Mute, Unmute, Next, Previous). Currency symbols are not part of this list because prices are pulled straight from your store catalogue, so INR, USD, or AED render based on the shopper's storefront locale, not the label config.
Method 1: per-embed override with data-bn-labels
The fastest path is to add a single attribute to the same div you already pasted for the widget. The value is a JSON string with the keys you want to replace. Any key you leave out falls back to the default English string.
```html <script async src="https://www.itsbeyondregular.com/embed.js"></script> <div data-bn-preset="PRESET_ID" data-bn-locale="hi-IN" data-bn-labels='{"addToCart":"कार्ट में डालें","shopNow":"अभी खरीदें","viewProduct":"उत्पाद देखें","mute":"म्यूट","unmute":"अनम्यूट"}' ></div> ```
Use single quotes on the outer attribute so the inner JSON can keep its double quotes. data-bn-locale sets the language tag for screen readers and date or number formatting. If you leave it out, the widget reads navigator.language.
Method 2: dashboard Language panel
If you do not want to touch theme code every time, set the labels once per preset in the app. Path: Dashboard, Widgets, open your preset, Settings tab, Language and labels. Pick the target language from the dropdown, then edit each field in the right column. Save. The change ships to every page using that preset within about a minute, cached edge nodes included.
On Shopify, the theme app embed toggle still points to the same preset, so nothing in your theme needs to change. If you run multiple market storefronts, duplicate the preset per language and swap the PRESET_ID inside a Liquid conditional based on {{ localization.language.iso_code }}.
Multilingual stores and RTL
For Arabic, Hebrew, or Urdu, set data-bn-locale to ar, he, or ur. The widget flips to RTL layout automatically and mirrors the tag pin, the carousel arrows, and the drawer slide direction. You do not need a separate RTL preset.
If your store serves several languages from one domain, keep one embed div and swap only the labels JSON with your existing i18n runtime. Example with Shopify's translate filter:
```liquid <div data-bn-preset="PRESET_ID" data-bn-locale="{{ request.locale.iso_code }}" data-bn-labels='{"addToCart":{{ "products.product.add_to_cart" | t | json }}}' ></div> ```
Verify and troubleshoot
After deploy, open the storefront in an incognito window, right-click the widget, and Inspect. Look for the root element .bn-widget. Its data-labels dataset should show your JSON. If you still see English, the three usual causes, in order: invalid JSON in the attribute (a stray double quote is the top offender, validate at jsonlint.com), the theme app embed is pointing at a different preset than the one you edited, or a full-page cache like Cloudflare or Shopify's CDN is holding the old HTML, so purge and retest.
Player control labels not translating usually means data-bn-locale is missing, so the accessibility strings fall back to English even when your custom labels applied.
Common questions
Can I translate the price or currency shown inside the widget?
No, and you should not try. Prices and currency symbols come directly from your store catalogue at render time, so an Indian shopper sees INR and a shopper on your US storefront sees USD, using the same widget preset. If you override the price string with data-bn-labels, you break the link to the live catalogue and add-to-cart will still send the real product price to checkout, which confuses shoppers. Translate only the surrounding copy like the CTA, the View product link, and the accessibility labels on the video player.
Does the widget auto-detect the shopper's language?
Partially. If you do not set data-bn-locale, the widget reads navigator.language from the browser and picks the matching label set from your preset, falling back to English if that language is not configured. This works for most single-market stores. For multi-market Shopify or a custom storefront that already runs i18n, do not rely on auto-detection. Set data-bn-locale explicitly from your existing locale variable, so the widget language matches the rest of the page even when the shopper's browser is set to something else.
How do I translate labels for the floating bubble and reel feed formats?
Same attribute, same keys. data-bn-labels is format-agnostic, so the JSON you write for a horizontal carousel also drives the floating bubble, vertical carousel, and reel feed. The reel feed exposes two extra keys, swipeUp and swipeForMore, which you can add to the same JSON blob. The floating bubble adds one key, openVideos, for the collapsed state tooltip. If a key does not apply to the format currently rendering, the widget ignores it silently rather than throwing, so a shared labels blob across all four formats is safe.