Documentation

Locales and translations

Elevate, May 20-22-2025, Miami Beach, Florida

Learn how to manage language-related settings from the Studio.

commercetools Frontend lets you create an international commerce site with support for multiple languages. This way, you can provide a localized experience to your customers and reach a wider audience. This is because deciding which languages to support is one of the things to consider when moving to commercetools Frontend.

From the Studio, you can manage some language-related settings for your commercetools Frontend project.

Locale-specific page versions

You can create locale-specific page versions for each language you support to display different page versions depending on the customer's locale.

To create locale-specific page versions, when creating a page version, select the locale(s) you want the page version to be available for. The page version will then be displayed for all selected locales.
If you select all locales or no locales, the page version will be displayed for all locales.
Create page version dialog with the en_GB locale selected.

Component-level translations

You can set localized texts for the languages in your project by leveraging Frontend components with translatable schema fields. If a Frontend component contains translatable fields, you can configure the texts in the component settings from the page builder.
Translatable fields are defined by developers in the Frontend component schemas. Ask developers in your team to add, remove, or edit translatable fields.

If you set localized texts in the component settings, the text displayed in the component will change based on the customer's locale. Otherwise, if you don't enter any localized text, the text for the default language will appear.

If you do not set the text for either the default language or the other languages, the default text set in the component schema will be displayed. If no default text is set in the schema, no text will be displayed.

To set localized texts for translatable fields in a Frontend component, follow these steps:

  1. In the page builder, select the Frontend component. In the Component settings pane, you can identify translatable fields by the language label and the Manage languages expandable section.
  2. Enter the text for the default language. In this example, we enter Happy New Year Sale! for EN-GB.
    By default, the text for the default language is used for the other languages if you don't enter a text for them.
    Component settings pane with manage languages section expanded with placeholder value.
  3. Click Manage languages and enter the localized text for the other languages in your project. In this example, we enter Frohes neues Jahr! for DE-CH.
    Component settings pane with manage languages section expanded with entered translation.
  4. Click Save or Publish changes.

Locale-specific URLs

You can set different URLs for your page folders based on the languages supported in your project. You can do it from a page folder's General settings section when creating a page folder or editing its settings.
In the following example, we set our-company as the relative path for EN-GB and ueber-uns for DE-CH.
Page folder settings dialog with manage languages section expanded and relative paths set for EN_GB and DE-CH locales.