Catalyst Multi-Storefront Setup

Catalyst allows you to localize the shopping experience when you sell internationally in order to increase shopper conversion. In such cases, you may want to localize many aspects of the storefront experience including the language, products sold, currency, and more.

This tutorial shows you how to localize the shopping experience in the US supporting the en locale and in Switzerland supporting de and fr locales within the same Catalyst app.

By the end of this tutorial, you should have a Catalyst app where:

1. The products sold in the US are not the same as the products sold in Switzerland.
   Localizing products ensures that imagery and branding resonate with the local culture, values, and norms of a region.

2. The pricing features are localized for each country.
   Localizing prices helps fulfill price expectations and tailor the shopping experience to pricing differences that vary by region. Displaying prices in local currency reduces friction in the purchasing process.

3. The translations are localized for each country.
   US Storefront has English (en) translations. The Switzerland storefront has French (fr) translations and German (de) translations. Localizing language helps shoppers understand product details and connect with your brand.

There are three means of localizing the data to keep in mind:

• Locale data: This involves language translations, which are localized for a specific locale that you enable in your Catalyst storefront.

• Channel data: Many of the features that you localize, like catalog and pricing, are first created for your global store and then assigned to storefront channels. You can then assign the storefront channel to a locale in the Catalyst App so that channel-specific data gets propagated to those locales.

• Global data: Other features, like tax, belong to the global store and require that you create zones, or regions, where you want tax rules to apply. Localizing global data is out of scope for this tutorial.

Prerequisites

Storefront channels are sales channels where shoppers can browse and purchase products. You need Multi-Storefront enabled (opens in a new tab) on your store so that you can create a storefront channel for the US and a separate storefront channel for Switzerland to configure within your Catalyst app. One of the storefront channels should be your Catalyst channel. To have two active storefront seats, you may need to buy more storefront seats (opens in a new tab) or upgrade your BigCommerce plan.

• If you don't already have a Catalyst storefront, follow the Getting Started with Catalyst documentation to create your Catalyst app using One-Click Catalyst. To follow along, choose the option to use sample catalog data. Then, follow the Local Development documentation to pull down the code and run locally. This Catalyst storefront will be the default channel for your Catalyst app, which is the channel that gets automatically added to your .env.local file.
• For the secondary channel, you can use an existing one or create a new one from the control panel.

Under Channels, make your channel active by clicking the ellipses (...) next to the storefront and clicking Make active.

Enable locales

First, you need all the locales you plan to use enabled in your Catalyst storefront, in this case, en, fr, and de. Note that you only need to add locales to the Catalyst channel you created as it is the default channel for your Catalyst app, not both channels you are using.

To add locales for your Catalyst storefront in the control panel:

1. Under the Channels tab, choose your Catalyst storefront and click on the Localization tab.
2. Click Add new and save your language selections. Make sure the new languages are active using the settings here.

Configure channels in your Catalyst app

In your Catalyst app, you need to configure the channel where Catalyst pulls data from for each locale you want to use. When you switch to the locale in your storefront selector, channel data gets propagated to that locale.

First, identify the channel ID of your storefront channels:

1. Under the Channels tab, choose your Catalyst storefront.
2. Locate the numeric value in the URL that follows the channel path segment. This is your Channel ID.

https://store-{{store_hash}}.mybigcommerce.com/manage/channel/{{channel_id}}/app?id=53284

Let’s say there are 2 storefront channels, one with channel ID of 1063175 and 1718564. In this case, we're going to sell to the US through the channel with an ID of 1063175 and use the English en locale. We’ll then sell to Switzerland through the other storefront channel with ID 1718564 and have two locales, fr and de.

In your Catalyst app, adjust the localeToChannelsMappings object in your channels.config.ts file:

const localeToChannelsMappings: Record<string, string> = {
  en: '1063175',
  fr: '1718564',
  de: '1718564'
};

Localize your data

Locale data

Each locale that we want to include on our storefronts – in our case en, fr, and de – needs language translations. Learn more about how to localize a storefront into multiple languages in the tutorial.

If you're using Makeswift, you'll need to add the same locales that you added in your Control Panel.

For more details on customizing content in Makeswift, check out the Translating Makeswift content section.

Channel data

Catalog

If you followed the getting started guide with sample data, your Catalyst storefront should already include products and categories that were added to your catalog. Your data might be different if you didn’t use sample data. Here are the products from your catalog that this demo will use:

To sell different products in the US and Switzerland, you need to assign US products to the US channel and Swiss products to the other channel.

To illustrate, we’re going to assign the following products to the US channel and remove them from the Swiss channel.

• ZZ Plant
• Spray Bottle
• Snake Plant

We’re also going to assign the following products to the Swiss channel and remove them from the US channel.

• Sansevieria
• Pothos
• Palm

To assign (or remove) catalog products to your channels in the control panel:

1. Under the Products tab in the control panel, click on All Products.
2. For a given product, click the dropdown under the Channels column, click Manage channels, check the boxes next to the channel you want to assign the product.

To follow along, make sure you have a category named Shop All on both channels. That category comes by default with the sample data on your Catalyst storefront. Ensure that the products you previously assigned to the channels are in the Shop All category for their respective channels:

You can create categories for your channel in the control panel:

1. Under the Products tab in the control panel, click on Categories
2. Click + Add New and select the channel you want for the category. Make sure you enable the category’s visibility.
3. Assign the product to the categories you created by clicking the ellipses (...) next to the product, clicking Edit, checking the category you created for the storefront, then clicking Save.

Start your development server.

When you visit the “Shop All” category, you should see products you added to the US Channel when you are in the EN locale. When you switch to the DE or FR locale, you should see the products you added to the Swiss channel.

Pricing

Now we’re going to see how to localize prices for products that are common between both storefronts selling to the US and Switzerland .

To start, make sure the following products are assigned to both the US and Swiss channels.

• Monstera
• Jade
• Fiddle Leaf Fig

Next, you need to create a price list (opens in a new tab) to specify US prices and a separate price list to specify prices for Switzerland.

Here are the step by step instructions on creating a price list for a channel:

1. Under the Products tab in the control panel, click on Price lists, click Create new, and give it a name
2. Click the ellipses (...) next to the price list, click Edit. You can filter the products you see in the control panel by the storefront channel. Enter prices for one of the channels for the three products, then click Save.
3. Click on the Assignments tab, click + Add Assignment, and choose the channel you want to assign the price list.

Here’s a sample list of prices for the US.

Here’s the sample list of prices for the Swiss channel.

When you visit the en locale, you should see the US prices. When you visit the fr and de locales, you should see the prices for Switzerland.

Currencies

Now we’re going to localize currencies (opens in a new tab) so that your US channel uses US dollars (USD), while your Swiss channel uses Swiss Francs (CHF) and Euros (EUR):

1. In the control panel, click the Settings tab, and click Currencies to view the currency settings for your global store.

2. If USD, EUR, or CHF aren’t listed, click Add new currency and enter the currency code.
   Currencies must be listed as a Visible on the storefront in the global settings to show up in Catalyst. Learn more about using multiple currencies (opens in a new tab) and setting up their payment methods.

3. Assign the currency to the correct channel by clicking the channels dropdown next to the currency.

When you visit your storefront, you should see the respective currencies: