Storefront selector for multi-storefront

To localize shopping experiences, you can have multiple storefronts that target specific shopper segments, regions, or brands. You can add a selector to a theme so shoppers can select the storefront they want to browse from a list of options.

You can do the following with the storefront selectors that you create and inject into a theme:

• Customize the style of the switcher and its options.
• Choose which pages you want the selector to appear.
• Select the storefronts that you include in the selector.

This guide walks you through how to add data for the storefront selector into your Cornerstone theme.

Learn about how to create and localize Stencil storefronts to support international shoppers in the International Enhancements for Multi-Storefront (opens in a new tab) support article.

Steps to add storefront selector data

Currently, there is no Stencil object for the storefront selector. Instead, you can add data for the storefront selector in the config.json file, which allows the selector to appear in the theme_settings Stencil object.

To change the data for the selector, perform the following steps:

• Step 1: Clone the Cornerstone repository (opens in a new tab).
• Step 2: Install the Stencil CLI and necessary project dependencies.
• Step 3: Install theme modules, initialize the project, and run the project locally.
• Step 4: Change the data for the selector.
• Step 5: Create a bundle with new changes.
• Step 6: Upload the bundle to the control panel.

Step 1: Clone the GitHub repository

To clone the Cornerstone repository, run the command below in the terminal of your operating system:

git clone https://github.com/bigcommerce/cornerstone.git

Step 2: Install Stencil CLI

Open the cloned repository in any code editor (IDE). Open your IDE-terminal, which is where you can run the rest of the steps. Depending on the operating system, install the Stencil CLI supported by the appropriate version of Node.js.

To verify the success of the Stencil CLI installation, run the command below in the terminal:

stencil -V

If you did everything correctly, you will see the Stencil CLI version in the terminal.

Step 3: Install theme modules, initialize the project, and run the project locally

To install the modules, run the following command in the terminal:

npm install

After successfully installing modules, the node_modules folder will appear in the root of the project.

Run the following commands to initialize and run the project:

stencil init

To execute this command, you will need a link to your store, a Stencil Access Token, and a port on which your local project will run. After successful initialization, a secrets.stencil.json file containing the token will appear in the root of the project.

Run the following command to start the project locally:

stencil start

Go to the local link in the terminal to open your project in the browser.

Step 4: Change the data for the storefront selector

Open the config.json file and edit the necessary storefront selector data. To display the selector in the browser, change the show_channels key to true and save the changes. By default, this key is false. You can also configure this key in Page Builder. Refresh the browser page to reflect the changes.

"settings": {
  "channels": [
    {
      "id": 1,
      "name": "Example storefront 1",
      "code": "example-storefront-1",
      "is_active": true,
      "switch_url": "https://example-storefront-1.mybigcommerce.com"
    },
    {
      "id": 2,
      "name": "Example storefront 2",
      "code": "example-storefront-2",
      "is_active": false,
      "switch_url": "https://example-storefront-2.mybigcommerce.com"
    },
    {
      "id": 3,
      "name": "Example storefront 3",
      "code": "example-storefront-3",
      "is_active": false,
      "switch_url": "https://example-storefront-3.mybigcommerce.com"
    }
  ],
  "show_channels": true
}

Step 5: Create a bundle with new changes

After making changes in the selector, make sure that everything is displayed correctly in the browser. Then run the command below to build the project bundle with the new changes:

stencil bundle

After a successful build, a zip file will appear in the project root with the theme name and version, for example Cornerstone-6.14.0.zip.

Step 6: Upload the bundle to the control panel

To upload the bundle (opens in a new tab) with the updated selector, go to Themes in the control panel and click the Upload Theme button. Select the bundle created in the previous step and upload it.

Apply the bundle and open your store. If the selector is not displayed, go to Page Builder (opens in a new tab) and navigate to Theme Styles > Header and Footer > Utility navigation > Show storefront selector and check this checkbox. Save the changes and refresh the store.

Resources

• Cornerstone repository (opens in a new tab)
• Stencil Access Token
• Installing Stencil CLI
• Theme Uploads - Restrictions
• Stencil Themes (opens in a new tab) (support article)
• Page Builder (opens in a new tab) (support article)