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 to 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)
For Empire versions 5.8.0 and above, Italian is included as an additional language set.
Select Actions in the top-right corner of the language editor, then Change theme language.
In the modal window, select the desired language from the Language dropdown.
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.
Navigate 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.
e.g.
<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.