Locales and translations in the Frontastic studio

There are 2 different ways to manage different languages for your sites in the Frontastic 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. The Frontastic 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 Frontastic 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 Frontastic components, the Frontastic 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 Frontastic components should be translatable, but it isn't, talk to your development team about adding that field to your Frontastic 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 Frontastic component in the default language, plus we'll add a title each locale.

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

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

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

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.

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.


Did this page help you?