> For the complete documentation index, see [llms.txt](https://help.dollarlabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.dollarlabs.io/dollarback-store-credit/widgets-and-storefront/translate-your-widgets.md). # Translate your widgets {% embed url="" %} \_Translation is demonstrated throughout the video, first at 1:31.\_ Every text field in every DollarBack widget can be translated per language, so a multi-language store shows the loyalty program in each market's own words. This page covers adding a language, using AI translate, and hand-editing individual strings. ## How widget translation works Each widget's customization page has language tabs across the top. The first tab is your base language (English); each language you add gets its own tab holding a full set of that widget's text fields. The storefront picks the version matching the language the customer is browsing in, with no extra setup per page. Translations are per widget: translating the floating widget doesn't translate the product page message. Plan a pass over each widget you use. ## Prerequisites * The extra language published on your store in Shopify (**Settings → Languages**). Only languages your store has appear as options. * The widgets themselves set up; see [Widget map: what shows where](/dollarback-store-credit/widgets-and-storefront/widget-map-what-shows-where.md). ## Step 1. Add a language to a widget 1. Go to **DollarBack admin → Customization** and open a widget. 2. Click **Add translation** next to the language tabs and pick a language from the list (your store's published non-English languages). 3. A new tab appears for that language, pre-filled with the base-language strings, ready to translate. ## Step 2. Translate with AI With the new language tab selected, click **Translate with AI**. DollarBack translates all of the widget's text fields into that language in one pass. A toast confirms when it's done ("Translated to French"). Variables like `{amount}` and `{discountCode}` are preserved; they keep filling in per customer regardless of language. AI translate is a starting point, not a proofreader. Review the output: loyalty copy is brand voice, and short UI strings ("Redeem", "Copy") sometimes need a human call. ## Step 3. Hand-edit strings Any field in a language tab can be edited directly, before or after AI translate. Common reasons: * Fixing tone: formal vs informal address matters in many languages. * Fitting space: a translated button label can be twice as long as the original; check it in the preview. * Keeping brand terms untranslated: if your program is called "The Grove Club" in every market, put that back where the AI translated it. Save the widget as usual; the translation ships with it. To drop a language from a widget, open its tab and use **Remove** for that language. ## Multi-language stores in practice Say you sell in France with a French storefront at `/fr-fr/` backed by a EUR market. Once you've added French translations to your widgets: * A customer browsing `/fr-fr/` sees every DollarBack surface (product message, floating widget, loyalty page) in French. * Prices and cashback amounts show in EUR automatically: currency comes from Shopify Markets, not from translation. `{amount}` renders as a EUR value on the French storefront and USD on the default one. * The same customer switching back to the default storefront sees English again; the translation follows the storefront language, not the customer. Language and currency are independent systems that happen to travel together: translations handle the words, Markets handles the money. ## What is and isn't translatable | Translatable (per widget, via the language tabs) | Not translatable here | | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | All message templates and state messages (product page, cart, checkout, thank-you) | Colors, typography, spacing, and other styling | | Floating widget labels: tabs, earn forms, tier labels, login prompts | Custom CSS | | Loyalty page copy: hero (both states), sections, FAQ | Program data you typed elsewhere: cashback config titles, tier names, reward names; translate-sensitive stores should keep these language-neutral or brand-name them | | Account and checkout block headings, buttons, empty states, errors | Email notifications; they have their own templates, see [Customize email templates](/dollarback-store-credit/notifications/customize-email-templates.md) | | Tooltip text | The Google Wallet pass notification texts (set in Integrations) | ## Verify it works 1. Open the translated storefront path (for example `/fr-fr/`) in a private window. 2. Check a product page, the floating widget, and the loyalty page: all strings should be in the new language, with amounts in the market's currency. 3. Switch to the default storefront and confirm the base language still shows. ## Common issues * A widget still shows English on the translated storefront: that widget has no translation for the language, or the language isn't published in Shopify. * One string stayed in English: it's a program-data field (config title, reward name), not a widget string; rename it in its own editor. * Amounts show the wrong currency: that's a Markets setup question, not translation. Check the market serving that language. ## Related articles * [Widget map: what shows where](/dollarback-store-credit/widgets-and-storefront/widget-map-what-shows-where.md) * [The floating cashback widget](/dollarback-store-credit/widgets-and-storefront/the-floating-cashback-widget.md) * [Set up the loyalty page](/dollarback-store-credit/widgets-and-storefront/set-up-the-loyalty-page.md) * [Customize email templates](/dollarback-store-credit/notifications/customize-email-templates.md)