Supporting multiple languages in your theme

StoreConnect themes support multiple languages through a locale system. You define a set of translated strings for each language your theme needs to support, and StoreConnect automatically serves the right language based on each store's locale setting.

This is useful when you have stores serving different regions, or when you want a single theme that can be reused across markets without hardcoding language into your templates.

How it works

The locale system has three parts that work together:

1. Theme locales — each represents a language your theme supports (e.g. English, French). One theme locale is set as the default.
2. Locale translations — key/value pairs on each theme locale. The key is a shared identifier (e.g. store.home.greeting); the value is the translated string for that language.
3. The t Liquid filter — used in your templates to output the translated value for the current locale: {{ "store.home.greeting" | t }}

When a visitor views a store, StoreConnect matches the store's Locale field to the corresponding theme locale and returns translations from it. If no match is found, the default theme locale is used.

Step 1: Configure the locale picklist

Theme locales and stores share a global Salesforce picklist for the locale field. Before creating theme locales, make sure the locales you need are present in this picklist.

"In Salesforce Setup, go to Picklist Value Sets and open the Locales value set. Add any locale codes your theme needs to support (e.g. en, fr, de)."

Step 2: Create theme locales

From the Related tab on your theme record, add a new Theme Locale for each language.

For each theme locale:

Step 3: Add locale translations

From the Related tab on your theme locale, add locale translations — one for each string you want to make translatable.

Each translation has two fields:

• Key — a unique identifier for this string within the theme locale. Use dot notation to group related strings (e.g. store.home.greeting, products.cta.add_to_cart). Keys must match across all theme locales — if English has the key store.home.greeting, French must use the same key.
• Value — the translated text for this locale (e.g. "Welcome" for English, "Bienvenue" for French).

Step 4: Use translations in your templates

In any Liquid template, use the t filter to output the translation for the current locale:

{{ "store.home.greeting" | t }}

StoreConnect looks up the key in the active theme locale for the current store and returns the value. If the key is missing, it outputs a missing translation message to help you identify gaps.

See t-filter-reference for the full filter reference.

Step 5: Assign a locale to your store

Once your theme locales and translations are set up, go to the store record and set the Locale field to the locale you want that store to use.

The store will now use the matching theme locale. If the field is blank or no match exists, the default theme locale is used.

Dynamic translations

Translations can include dynamic values — for example, including the store's name in a greeting. Use %{variable_name} as a placeholder in the translation value:

Then pass the value in from your template using a named parameter:

{{ "store.home.greeting" | t: store_name: current_store.name }}

Output: Welcome to My Store

You can use any Liquid variable as a parameter value — store fields, product names, customer details, and so on.

Walkthrough example

To make a home page greeting translatable for English and French:

1. Create a theme locale for English — set as Default and Active.
2. Add a locale translation: key store.home.greeting, value Welcome.
3. Create a theme locale for French — set Active, not default.
4. Add a locale translation to the French locale: key store.home.greeting, value Bienvenue.
5. In the home page template, replace the hardcoded text with:

{{ "store.home.greeting" | t }}

6. Set the store's Locale field to fr.

Preview the store — it now displays "Bienvenue". Switch the locale back to en and it displays "Welcome".