Themes and Localization

Your marketplace may be configured to support different languages for localization. If this ability has been enabled, you can prepare and deploy translations for your storefront by creating YAML locale files in the theme /translations folder.

A YAML locale file is a .yml file that contains a set of translations for the text strings used in a theme template file. All files must be in YAML format and a separate locale file is required for every language. You must ensure that your account representative has configured your marketplace to support different languages. If you add localization files to your theme, it does not automatically enable different languages for your marketplace. Additionally, each theme must include its own list of localization files, because they cannot be shared across themes.

After you create and test the translations locally with the Storefront Toolkit, you can upload them to the marketplace with . See Manage theme translations for more information.

Localization file requirements

• Add the files to the themes/themeName/translations folder.
• The format of the file name must use the language (two-letter ISO 639-1 code) and country (two-letter ISO 3166-1 code) codes with the .yml extension (for example, the localization file name for the French language in Canada is fr-ca.yml).

Localization formatting requirements

• formatMessage---The utility Nunjucks uses to handle different string states, which are variable and plural. You can view the Nunjucks Internationalization library for more information.
• i18n.custom.home.startingat---This is an example of our string path. All strings that come from the theme start with i18n.custom.

Usage example

The .yml file must contain translations in the following format:

<page>:
    <string>: <string value>

For example, the following translation appears in the en-us.yml file:

home:
    welcome: Welcome my friend

The following example shows how the string appears in your theme template:

{{ t(i18n.custom.home.welcome) }}

Usage with variable

The .yml file must contain translations in the following format:

<page>:
    <string>: <string value>

For example, the following translation appears in the en-us.yml file:

home:
    startingat: The product {productName} costs {startingPrice}.

You can embed variables in the localized value. After the localized value is used, you can specify the variable value.

The following example shows how the string appears in your theme template:

{{ formatMessage(t(i18n.custom.home.startingat), {price:price}) }}

Usage with plural

The .yml file must contain translations in the following format:

<page>:
    <string>: <string value>

For example, the following translation appears in the en-us.yml file:

home:
    comments: Posted {num, plural, one{# comment} other{# comments}}

The following example shows how the string appears in your theme template:

{{ formatMessage(t(i18n.custom.home.comments), { num: 2 }) }}

The tool uses FormatJS, a message formatting tool. See the FormatJS documentation for more information.