Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ BigCommerce supports multiple locales for shoppers in different regions.
It's possible to modify product URLs in Catalyst so that each variant has a unique URL based on the selected options, essentially creating separate product pages for each variant. However, this isn't done automatically and requires custom code. You can link to a specific product variant using query parameters, which update dynamically as options are selected on the product detail page (PDP).
* Add translations for categories and locations to multiple locales added to Catalyst channel. Learn about how to use the [GraphQL Admin API](https://developer.bigcommerce.com/docs/store-operations/translations) to add translations to a single channel and locale.

<Callout type="info">
Managing locales (in Control Panel, CLI, or via the GraphQL Admin API) is available for Catalyst channels. As of `October 2025`, all Catalyst stores have the multi-language feature enabled by default. On stores where multi-language is disabled, locale mutations and Channel Manager locale controls aren't available.
</Callout>

## Default Catalyst features

### Manage language settings
Expand All @@ -33,6 +37,8 @@ Out of the box, the Catalyst storefront displays translated product data for the

The Catalyst storefront sends an `Accept-Language` HTTP request header to indicate the shopper’s preferred language or locale. This header allows the system to identify the appropriate translation to display. The translations for checkout are dynamically applied based on the locale specified in this header.

Catalyst always respects the shopper's `Accept-Language` header and the storefront language selector; there is no Control Panel toggle for “use browser language” on Catalyst channels.

## Customization

Catalyst provides built-in features, but you can further customize its functionality to fit your needs.
Expand All @@ -45,7 +51,7 @@ You can manage language settings within a channel using the GraphQL Admin API or
* Setting a default language
* Activating or deactivating specific languages

By default, Catalyst does not include multilingual support when installing a storefront via the CLI. However, you can enable and manage locales using the GraphQL Admin API or the CLI. For detailed instructions, refer to the [Locale Configuration Guide](https://developer.bigcommerce.com/docs/store-operations/settings/locales).
By default, a new Catalyst project starts with a single locale. Add and manage additional locales using the GraphQL Admin API or the CLI. For detailed instructions, refer to the [Locale Configuration Guide](https://developer.bigcommerce.com/docs/store-operations/settings/locales).

### Configuring language settings using the CLI

Expand Down Expand Up @@ -91,4 +97,3 @@ By default, BigCommerce offers translations for the checkout page and emails in
## Resources

* [Locale Configuration](/docs/store-operations/settings/locales)

Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,12 @@ Follow the [Getting Started with Catalyst](/docs/storefront/catalyst/getting-sta

## Adding a locale in Catalyst

You can add additional languages to your storefront when you initially create your Catalyst storefront through the Control Panel. If you didn’t do so, you have a couple of options.
<Callout type="info">
**Control Panel access:** The Localization tab in Channel Manager for adding/removing locales is available for Catalyst channels in **Settings** > **Localization** or via editing the channel in **Channel Manager**.
**Default:** multi-language is enabled by default on all Catalyst stores.
</Callout>

You can add additional languages to your storefront when you initially create your Catalyst storefront through the Control Panel. If you didn't do so, you have a couple of options.

You can enable more locales for your storefront through the Control Panel:

Expand All @@ -34,17 +39,17 @@ Go ahead and start your development server. When you visit the running applicati

The selector lists all the enabled locales in your storefront. The storefront in this tutorial uses English as the default language and French (`fr`) as an additional language.

You might have to restart your development server to see the new locale in your storefront selector.
You might have to restart your development server to see the new locale in your storefront selector.

## Locale-specific URLs

Now, try switching to your newly-added locale, in my case `FR`, in the storefront selector. Notice the locale prefix, e.g. `fr`, has been applied to the pathname in the URL, `http://localhost:3000/fr`. This is because Catalyst uses [prefix-based routing](https://next-intl.dev/docs/routing/middleware#locale-detection) from the [`next-intl`](https://next-intl.dev/) library which means the locale prefix will be added to the pathname of each localized page.
Now, try switching to your newly added locale, in my case `fr`, in the storefront selector. Notice the locale prefix, e.g. `fr`, has been applied to the pathname in the URL, `http://localhost:3000/fr`. This is because Catalyst uses [prefix-based routing](https://next-intl.dev/docs/routing/middleware#locale-detection) from the [`next-intl`](https://next-intl.dev/) library which means the locale prefix will be added to the pathname of each localized page.

## Translating static strings

The Catalyst source code includes text elements that can be translated using predefined static strings. These static translations are housed in the `core/messages` folder in your Catalyst app. You can then access the static translations within your components using the `next-intl` library.

Let’s explore more of how this works! Static string translations are already provided for the locales that Catalyst supports out of the box, like `FR`, so let’s start there.
Let’s explore more of how this works! Static string translations are already provided for the locales that Catalyst supports out of the box, like `fr`, so let’s start there.

1. In the `core/messages` folder, open the pre-populated translation file for French, `fr.json`. You should see predefined translation keys — for example, those used in an empty cart message — along with their translations.

Expand All @@ -68,7 +73,7 @@ Let’s explore more of how this works! Static string translations are already p
// load all the translation strings from core/messages under the 'Cart' namespace.

const t = await getTranslations('Cart');

// pass translated strings into your components
const emptyState = (
<>
Expand All @@ -84,13 +89,13 @@ Let’s explore more of how this works! Static string translations are already p
}
```

3. If you click on the cart, you should see a translated empty cart message if you switch your locale to `FR`.
3. If you click on the cart, you should see a translated empty cart message if you switch your locale to `FR`.

<Video src={"https://storage.googleapis.com/bigcommerce-production-dev-center/videos/catalyst/static%20french%20translations.mov"} />

As you’ve noticed, after you enable a supported locale, the text for some components on your page will already be translated into this language. But if your locale is unsupported, you’ll need to [define your own static string translations](/docs/storefront/catalyst/content-management/internationalization/static-translations#translation-file) in this directory.
As you’ve noticed, after you enable a supported locale, the text for some components on your page will already be translated into this language. But if your locale is unsupported, you’ll need to [define your own static string translations](/docs/storefront/catalyst/content-management/internationalization/static-translations#translation-file) in this directory.

When you create more components, you’ll want to access the translations from your file. Learn more about [how to use the translations](/docs/storefront/catalyst/content-management/internationalization/static-translations#using-keys-in-react-components) inside your Client and Server Components.
When you create more components, you’ll want to access the translations from your file. Learn more about [how to use the translations](/docs/storefront/catalyst/content-management/internationalization/static-translations#using-keys-in-react-components) inside your Client and Server Components.

## Translating dynamic data from BigCommerce

Expand All @@ -117,7 +122,7 @@ You can translate dynamic product data by sending GraphQL mutations with the [Gr
<br />
3. Download and import the [Postman collection for translations](https://storage.googleapis.com/bigcommerce-production-dev-center/template-files/catalyst/translations.postman_collection.json).

The Postman collection includes requests for products, categories, and brands, but we’ll focus on the product ones for now.
The Postman collection includes requests for products, categories, and brands, but we’ll focus on the product ones for now.
<br />
4. Run the requests in the [Postman Collection Runner](https://learning.postman.com/docs/collections/running-collections/intro-to-collection-runs/). Select only the **Product Basic Information** mutation in the run sequence and upload the Product Translations file from Step 1.

Expand All @@ -127,13 +132,13 @@ Your products should now have French translations for their names and descriptio

![Product localized in French](https://storage.googleapis.com/bigcommerce-production-dev-center/images/catalyst/multi-language/product%20french.png)

#### Textual search
#### Textual search

BigCommerce indexes the localized name, description, and search keywords for a product. This means you can match search queries to translated product content through these fields after you add translations. You’ve already translated the names and descriptions, so let’s move on to search keywords.
BigCommerce indexes the localized name, description, and search keywords for a product. This means you can match search queries to translated product content through these fields after you add translations. You’ve already translated the names and descriptions, so let’s move on to search keywords.

Search keywords are custom terms you can define so that a product is more visible in your storefront’s textual search. They aren’t visible on the storefront and don’t affect SEO, but help match more search queries to relevant products.
Search keywords are custom terms you can define so that a product is more visible in your storefront’s textual search. They aren’t visible on the storefront and don’t affect SEO, but help match more search queries to relevant products.

Your sample data doesn’t include predefined search keywords for your products. You can add them by sending a GraphQL mutation to [set the storefront details for a locale](https://developer.bigcommerce.com/docs/store-operations/catalog/msf-international-enhancements/product-attributes#set-storefront-details-for-a-locale).
Your sample data doesn’t include predefined search keywords for your products. You can add them by sending a GraphQL mutation to [set the storefront details for a locale](https://developer.bigcommerce.com/docs/store-operations/catalog/msf-international-enhancements/product-attributes#set-storefront-details-for-a-locale).

Let’s try it out. In the same Postman Collection you imported earlier, open the [Postman Collection Runner](https://learning.postman.com/docs/collections/running-collections/intro-to-collection-runs/) again. This time, select the **Product Search Keywords** mutation in the run sequence. You can use the same [Product Translations file](https://storage.googleapis.com/bigcommerce-production-dev-center/template-files/catalyst/product-translations.json) you downloaded earlier since it also includes translations for search keywords.

Expand All @@ -159,7 +164,7 @@ Follow along to run sample translation data using Postman.
<br />
2. Open the same [Postman collection for translations](https://storage.googleapis.com/bigcommerce-production-dev-center/template-files/catalyst/translations.postman_collection.json) that you imported when you were translating product data. You can use the same sample Postman environment you imported earlier.

3. Run the requests in the [Postman Collection Runner](https://learning.postman.com/docs/collections/running-collections/intro-to-collection-runs/). Select only the **Categories** mutation in the run sequence and upload the Categories Translations file from Step 1.
3. Run the requests in the [Postman Collection Runner](https://learning.postman.com/docs/collections/running-collections/intro-to-collection-runs/). Select only the **Categories** mutation in the run sequence and upload the Categories Translations file from Step 1.

<Video src={"https://storage.googleapis.com/bigcommerce-production-dev-center/videos/catalyst/postman-category-translations.mov"} />

Expand All @@ -169,12 +174,12 @@ Once again, you should notice the category headings change in the header once yo

### Translating brands

A brand is an attribute that groups your products by label and supports SEO. Brand data is fetched dynamically from BigCommerce, including its name, page title, meta keywords, meta description, and search keywords.
A brand is an attribute that groups your products by label and supports SEO. Brand data is fetched dynamically from BigCommerce, including its name, page title, meta keywords, meta description, and search keywords.
Before translating brands, we’re going to first add a brand to a product, so that the brand is available on your storefront:

1. Under the **Products** tab, click on **Products**.
1. Under the **Products** tab, click on **Products**.
2. Click on the ellipses **(...)** next to the product you want to add a brand. Click **Edit**.
3. In the **Basic Information** section, select the Rustic Roots brand in the dropdown. This brand came with the sample catalog data.
3. In the **Basic Information** section, select the Rustic Roots brand in the dropdown. This brand came with the sample catalog data.

To add translations, you can send [GraphQL mutations](https://developer.bigcommerce.com/docs/store-operations/translations/brands) using the GraphQL Admin API. Follow along to run sample translation data using Postman.

Expand All @@ -195,9 +200,9 @@ When you visit the brand page at the path `/fr/rustic-roots`, you should see the

## Translating Makeswift content

The Catalyst storefront you created with [One-Click Catalyst](/docs/storefront/catalyst/getting-started/workflows/one-click-catalyst) comes integrated with a Makeswift site. In the [Makeswift editor](https://docs.makeswift.com/product/builder-basics), you can add localized text for any component that you’re editing in Makeswift.
The Catalyst storefront you created with [One-Click Catalyst](/docs/storefront/catalyst/getting-started/workflows/one-click-catalyst) comes integrated with a Makeswift site. In the [Makeswift editor](https://docs.makeswift.com/product/builder-basics), you can add localized text for any component that you’re editing in Makeswift.

To try this out, make sure your development server is still running and visit the Makeswift editor by clicking the **Edit in Makeswift** button from your Control Panel. In the Makeswift editor, switch to your Development (Dev) Makeswift site.
To try this out, make sure your development server is still running and visit the Makeswift editor by clicking the **Edit in Makeswift** button from your Control Panel. In the Makeswift editor, switch to your Development (Dev) Makeswift site.

To add a locale in Makeswift, open your site settings and go to the **Locales** tab. Then, click the **+ Add locale** button. In this case, we’ve added `fr`.

Expand All @@ -213,11 +218,11 @@ You should now be able to switch to the French locale in Makeswift.

With the French locale selected, you’ll notice a message that informs you that the localized page inherits from the default locale. To stop inheriting from the default and start customizing the content for the localized page, click the **Edit for this locale** button.

Now you can now customize the content specifically for the French locale. Note that this does not affect the content in the base locale. In the canvas, click on the Slideshow component and change its text in the properties sidebar. You can also localize other properties like the slideshow image and its alt text.
Now you can now customize the content specifically for the French locale. Note that this does not affect the content in the base locale. In the canvas, click on the Slideshow component and change its text in the properties sidebar. You can also localize other properties like the slideshow image and its alt text.

<Video src={"https://storage.googleapis.com/bigcommerce-production-dev-center/videos/catalyst/makeswift%20french%20locale%20content.mp4"} />

For non-default locales, make sure you [toggle the page to be online](https://docs.makeswift.com/product/page/metadata#metadata) in the sidebar.
For non-default locales, make sure you [toggle the page to be online](https://docs.makeswift.com/product/page/metadata#metadata) in the sidebar before publishing.


## Wrap up
Expand All @@ -226,4 +231,4 @@ Now, you should have a Catalyst app that fully supports multiple languages. Reme

* Static string translations in components
* Dynamic data from BigCommerce
* Makeswift content
* Makeswift content
Loading