Internationalization is a standardized framework that renders themes entirely translatable while leaving the translations open-ended and up to the merchant. Use the Edit languages settings access this framework, then translate to another language or modify the current language for your theme.
Access the Edit languages settings
- In the Online Store, locate your theme
- Select the Actions dropdown
- Select Edit languages
Change to another language set
In some cases, themes will come pre-packaged with complete translations in one or more languages.
Our theme Superstore includes 21 language sets to choose from.
Atlantic v14.5.0+, Grid v4.9.0+, Launch v6.6.0+, Handy v2.9.0+, Empire v5.5.0+, Startup v9.5.0+, and Editions v9.9.0+ include the following 10 language sets:
- Spanish
- Portuguese
- Czech
- Japanese
- French
- German
- Hindi
- Dutch
- Turkish
- Chinese (Simplified)
Manually translate the language
In most cases, languages will have to be manually translated using the Edit languages settings.
Sculpting your language
This open framework allows for not just other languages, but also other terms, wordings, and phrasing. For example, a store might prefer “Bag” to “Cart”—which can be modified using the Edit languages settings.
Translating dynamic checkout buttons
The theme is unable to control how the text of Dynamic checkout buttons are presented. These are controlled by the Shopify platform and the payment providers activated for the store.
Navigating the language editor
The language editor is organized through tabs that correspond to elements of your theme (General, Blogs, Cart, Collections, Contact, etc.). In most cases, translations are created from scratch by entering them into the form.
Searching and filtering translations
Search for translations by using the Search field. Use keywords that match portions of the desired text.
Use the Filter dropdown to locate missing translations.
Code change considerations for language
Every theme is required to replace all the hard-coded website content with translation keys. That is, hard-coded strings (e.g. "Checkout" or "Recent posts") are replaced with a translation key and tagged with a translation filter. That looks something like this in the code:
<span>{{ 'element.tag.id' | t }}</span>
The element.tag.id is the translation key— and generally a placeholder for the translation. The t tag is the filter, which acts as the gatekeeper between the translation key and the particular translations stored in the locale file. Locale files represent individual languages and house all the translations to be used for the site.
The t filter uses the string as a key to get the corresponding translation from the active locale file. The point being that a merchant can have multiple languages or locale files and it's the t filter that makes sure that the translations are pulled from the correct and active language or locale file.