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 comes standard for all Shopify themes. Merchants can easily translate the content of their stores 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 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 screen that lets you customize a whole bunch of language settings for your store.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.

If you simply want to change the language of your storefront, click the Change theme language button at the top of the store. A popup modal will appear allowing you to select the Language from a dropdown menu.

Note that not all themes include translations for all languages. If your theme does not include translations for your chosen language, an error icon will appear next to Theme. The Shopify checkout and system can support almost any language. Click Save when you're ready to go.

Adding and editing translations

The Language Editor is organized through tabs that correspond to general sections of your store (General, Blogs, Cart, Collections, Contact 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.

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.

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.