Skip to content

Commit 39fa8f1

Browse files
DEVDOCS-6365 - Add updates to multi-language being turned on by default in new stores (#1094)
<!-- Ticket number or summary of work --> # [DEVDOCS-6365] ## What changed? <!-- Provide a bulleted list in the present tense --> * Multi-language is turned on by default in new stores ## Release notes draft In new stores, multi-language is now turned on by default. ping @bigcommerce/dev-docs @bc-terra [DEVDOCS-6365]: https://bigcommercecloud.atlassian.net/browse/DEVDOCS-6365?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
1 parent bb229c9 commit 39fa8f1

File tree

3 files changed

+50
-36
lines changed

3 files changed

+50
-36
lines changed

docs/storefront/catalyst/content-management/internationalization/multi-language/overview.mdx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ BigCommerce supports multiple locales for shoppers in different regions.
1717
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).
1818
* 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.
1919

20+
<Callout type="info">
21+
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.
22+
</Callout>
23+
2024
## Default Catalyst features
2125

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

3438
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.
3539

40+
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.
41+
3642
## Customization
3743

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

48-
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).
54+
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).
4955

5056
### Configuring language settings using the CLI
5157

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

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

docs/storefront/catalyst/content-management/internationalization/multi-language/setup.mdx

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,12 @@ Follow the [Getting Started with Catalyst](/docs/storefront/catalyst/getting-sta
1212

1313
## Adding a locale in Catalyst
1414

15-
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.
15+
<Callout type="info">
16+
**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**.
17+
**Default:** multi-language is enabled by default on all Catalyst stores.
18+
</Callout>
19+
20+
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.
1621

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

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

3540
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.
3641

37-
You might have to restart your development server to see the new locale in your storefront selector.
42+
You might have to restart your development server to see the new locale in your storefront selector.
3843

3944
## Locale-specific URLs
4045

41-
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.
46+
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.
4247

4348
## Translating static strings
4449

4550
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.
4651

47-
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.
52+
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.
4853

4954
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.
5055

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

7075
const t = await getTranslations('Cart');
71-
76+
7277
// pass translated strings into your components
7378
const emptyState = (
7479
<>
@@ -84,13 +89,13 @@ Let’s explore more of how this works! Static string translations are already p
8489
}
8590
```
8691

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

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

91-
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.
96+
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.
9297

93-
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.
98+
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.
9499

95100
## Translating dynamic data from BigCommerce
96101

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

120-
The Postman collection includes requests for products, categories, and brands, but we’ll focus on the product ones for now.
125+
The Postman collection includes requests for products, categories, and brands, but we’ll focus on the product ones for now.
121126
<br />
122127
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.
123128

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

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

130-
#### Textual search
135+
#### Textual search
131136

132-
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.
137+
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.
133138

134-
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.
139+
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.
135140

136-
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).
141+
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).
137142

138143
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.
139144

@@ -159,7 +164,7 @@ Follow along to run sample translation data using Postman.
159164
<br />
160165
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.
161166

162-
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.
167+
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.
163168

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

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

170175
### Translating brands
171176

172-
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.
177+
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.
173178
Before translating brands, we’re going to first add a brand to a product, so that the brand is available on your storefront:
174179

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

179184
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.
180185

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

196201
## Translating Makeswift content
197202

198-
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.
203+
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.
199204

200-
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.
205+
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.
201206

202207
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`.
203208

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

214219
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.
215220

216-
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.
221+
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.
217222

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

220-
For non-default locales, make sure you [toggle the page to be online](https://docs.makeswift.com/product/page/metadata#metadata) in the sidebar.
225+
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.
221226

222227

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

227232
* Static string translations in components
228233
* Dynamic data from BigCommerce
229-
* Makeswift content
234+
* Makeswift content

0 commit comments

Comments
 (0)