Translations in components

Frontend

Translating text in Javascript is aasy as pie! It uses Shopify theme’s locale JSON files.

Brush exposes a $t() magic that uses i18next under the hood and automatically takes care of translating to the current language.

Translating text

Just use the same translation path as you would in liquid:

some-component.ts

$t("accessibility.account")

Using interpolation

Pass the variables in the second argument of $t().

some-component.ts

const count = 7;
const query = "shirt";
return $t("accessibility.search_results_count", { count, query });

Translation cache

In order to optimize performance and save resources, the content of the JSON translation files are cached in Gadget. So if any of those file change, the translation cache must be refresehd. In order to do that, head to your Gadget admin and, from the search bar at the top, search for Restart app and run it.