Internationalization and the Language Editor

What is internationalization?

Internationalization is a standardized framework that renders store sites entirely translatable, while leaving the translations open-ended and up to the merchant. It’s no mistake that you’ll also hear internationalization referred to as localization, because it puts the emphasis on the unique and local pedigrees of online stores.

Internationalization is not simply a feature but a standard for all themes on Shopify. With any Shopify theme, merchants can get down to translating their store without further ado by using Shopify’s built-in Language Editor.

What internationalization is not

Internationalization does not allow a customer to select their preferred language when entering your store. Instead, only one language can be active on your storefront at any one time. In some cases, themes will come pre-packaged with complete translations in one or more languages. In most cases, however, languages will have to be manually translated.

Sculpting your language

Given this open framework, internationalization allows for not just other languages but also other dialects and, simply put, an expanded field of customization. Internationalization is for the French who say “Bonjour” and not “Hello,” the British who say “Basket” and not “Cart,” or the merchant who’s prone to saying “Howdy” rather than “Welcome.”

Internationalization gives merchants full control over the presentation of their business and their products. So we can begin see how internationalization can be a tool for transposing tone and content just as much as it is a tool for translating between languages.

Adding a language

Adding and editing a language are done within the built-in Shopify language editor. To get to the language editor, first go to Online Store > Themes from your dashboard. Then, click the button beside the theme you’ll be using and click the Edit Language link. This will bring you to a list of your current active and inactive languages.

Theme languages list

To begin, you’ll want to Add a language by clicking the button in the right-hand corner.

A modal will pop up, which offers over 100 languages to choose from, with the additional option to set a region (for example, Canada or France for French). Click Create after making your selection.

The Add a language modal

The language you added will now be listed with the others, but it will be inactive, allowing you to edit the language as a draft, before being activated.

Adding and editing translations

Click on your language to launch the Language Editor.

The Shopify Language Editor

The Language Editor is organized through tabs that correspond to general sections of your store (Layout, Blogs, Cart, Collections, Products, etc.). In most cases, translations are created from scratch by entering them into the form.

However, the Checkout & System tab is an exception; here, you’ll find translation strings that are universal to all Shopify themes. For this reason, this section comes with (pre-translated) language support for some select languages, while other sections do not. For example, if you select Canadian French as your language, the Checkout & System section will be automatically populated with French translations.

Searching and filtering translations

The Shopify Language Editor allows you to filter and search for translations. Using the search function can be quite handy when translating a word that occurs across your entire site. You can search for strings that occur across multiple sections of the language editor (like the word “cart”) and translate them in a single pass.

Filter search translations

You can also filter complete or missing translations, letting you breeze through unfinished translation, rather than hunting them down, case by case.

Finally, when you’re all set and done, you’ll want to make your language active.

Transferring your locale files

If you’re updating your store to a new version of a theme, you can simply copy over your locale file. To find your locale files, got to edit HTML/CSS under the button.

Transfer locale files from the Edit HTML/CSS page

Locale files have their own folder called Locales. Open this folder and click on the language that you would like to transfer. Simply select all and copy into a plain text file to save on your desktop. Also take note of the file name (e.g. en.default.json), as you’ll need to copy this over as well.

After uploading the new version, navigate to the Locales folder. Click Add a new locale and create a new locale from scratch with the same file name as the previous locale file. Paste the code into the editor and hit save.

Remember to activate the language and you’ll be all set!

How internationalization works

So, how does it all work? Every theme is required to replace all the hard-coded website content with translation keys. That is, hard-coded strings – like “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—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.

All the merchant has to do is edit the locale files via the easy-to-use create Shopify Language Editor—no code, just translations entered in a simple form.