Documentation

This is the early access documentation preview for Custom Views. This documentation might not be in sync with our official documentation.

Locales and translations

There are 2 different ways to manage different languages for your sites in the Studio, but these will have been decided when your project was set up. For more information, see the decisions to consider article.

Firstly, you can set up multiple projects, each 1 with its own language. This means that you'll usually have to write each language separately for each project. Developers might have put some logic into the code to minimize this, but you'll need to talk to them as it varies from customer to customer. Our team can also set up a sync feature which means you don't have to rebuild certain things for each locale (for example, page folders or Frontend components). By default, everything is synced, so please contact our Support team if you don't want this to happen.

The other way to do this is to use a single project with multiple languages. This way, the structure and pages are shared across all languages, but you need to input the different translations if you're not using an automatic translation. If you want to show different pages for different locales, you'll need to talk to your development team to build the overrides into your code.

You could also combine both setups if you'd like to. Below is an example of that setup:

  • Project 1 = English Website (en_GB)
  • Project 2 = Swiss Website (de_CH, fr_CH, it_CH) with a similar page folder tree as the English website, but different pages in 3 different languages

Managing different languages

Some copy will be automatically translated, but it's dependent on what your development team has enabled or not.

In certain Frontend components, the Frontend component settings will have certain fields that are translatable, and it's here that you'll need to add the different copy for each language.

If you think a certain Frontend components should be translatable, but it isn't, talk to your development team about adding that field to your Frontend component schema.

Let's look at an example of how you'd edit text for different locales within the same project. Here, we'll add the title of a commercetools UI Tile Frontend component in the default language, plus we'll add a title each locale.

Firstly, click on the commercetools UI Tile Frontend component to open the settings panel and expand the Message section:

9884f40 29 06 2022 at 18 05 102x

Then input a title in the default language. In this example, German is the default language.

6b1dc30 29 06 2022 at 18 09 162x

Just below the default language input box, there's a Manage languages button. Click on it to expand all the different language options.

5250743 29 06 2022 at 18 10 012x

You can see that each field shows you the default title before you enter the translation. By leaving all the other languages blank, the default title will pull through to all locales.

57e1bbc 29 06 2022 at 18 14 402x

These titles will now display to your user depending on their locale.

Language resolution for the end-users

An end-user sees the text in their regional language if the Studio has a translation available for that language. Otherwise, they see the text in the default language. If the default language is unavailable, they see the default value from the schema (if specified).

In case of missing regional language translation, the component will show no text if both the default language field and the default value in the schema are not specified.