Skip to content
Getting started

Multi-store setup

Adobe Commerce uses a hierarchical structure to manage multiple stores within a single instance. This structure consists of three levels: websites, stores, and store views. Localization is managed at the store view level, allowing merchants to present the store in different languages and apply the proper currency.

To maintain storefronts that implement Edge Delivery Services, you must be familiar with its building blocks. The following topics describe the EDS features.

Big Picture

Multi-store refers to a streamlined architecture that enables managing multiple stores with unique catalogs and localization while leveraging a shared code base and unified content delivery. The content hierarchy follows Edge Delivery Services best practices, emphasizing a single-tier structure.

Content is organized primarily by language. US English files should be placed in the en directory of the project root. All other language- and region-specific files should be placed in a directory that is named in the format *region-code_language-code*. For example, the /en/ directory contains data for the US market, while the /en_ca/ directory contains data for Canada. French content should be placed in directories with names like fr_fr for France and fr_ca for Canada.

The Sharepoint file structure of a multi-store is shown below. Remove the .docx and .xlsx extensions for Google Drive files.

  • Directory/en/ — English store (Default root language)
    • placeholders.xlsx — Stores tokens for text and UI components for the English US store.
    • index.docx — The home page of the English US store.
    • store-switcher.docx — Manages the list of stores and their URL for the English US store.
  • Directory/en_ca/ — English Canadian Store
    • placeholders.xlsx — Defines tokens for text and UI components for the Canadian store.
    • index.docx — The home page of the English Canadian store.
    • store-switcher.docx — Manages the list of stores and their URL for the Canadian store.

Default files are provided in the sample content. These files can be customized to suit your needs.

Store-specific files

The content, placeholders, and store switcher files help define the experience in each store view as described here.

Store Switcher

Each store view has its own store-switcher document file called a fragment. This fragment provides the list of stores to select from by language. The store-switcher component renders a button in the footer that opens a modal containing the stores listed in this document.

Start by creating a store-switcher.docx file containing a bulleted list inside each store view root folder. Each line must define the display name of your store with an active link to the store, as shown below:

**Select a store:**
- United States (USD)
- [United States (USD)](https://main--aem-boilerplate-commerce--hlxsites.aem.page/en/)
- Canada (CAD)
- [Canada (EN)](https://main--aem-boilerplate-commerce--hlxsites.aem.page/en_ca/)

Content files

The content files provide the structure of the pages served to your shoppers. They are located in the store view directories and contain the content for each store view. These files are typically SharePoint .docx or Google document files used to generate the store view pages. These files should be localized or translated into the desired language.

Placeholders

The placeholders.xlsx file stores reusable variables for text and UI components. This file is used to define the text that is displayed on your storefront. The placeholders.json file is generated from this file and is used to replace the variables in your content files.

If you want to reuse placeholders.xlsx files from another store view, use bulk metadata (https://www.aem.live/docs/bulk-metadata). You can also create a placeholders-overrides.xlsx file to override the default text values in the original document, then add a metadata block to the page to apply the overrides file, as shown here:

To override the default behavior of loading placeholders.xlsx from the store view directory, create a metadata.xlsx file with contents similar to the following:

URLplaceholders
/en/**
/en_ca/**/en/placeholders.json
/en_ca/placeholders-overrides.json
  • URL: Defines the URL pattern for pages where metadata should be applied. Wildcards can match groups of pages to which the metadata is applied. For example, /en/** matches all pages in the /en/ (English) directory.
  • placeholders: Specifies the path to a placeholders.json file that provides key-value mappings for dynamic content replacement. You can specify a second file to act as an override, with its values taking precedence over the previously listed files.

Storefront Configuration

Folder Mapping

Product Detail Pages (PDP) are mapped to a single document at products/default. When adding a new store view, you’ll need to add a corresponding folder mapping for the new URLs.

fstab.yaml

If your project uses a fstab.yaml file, add the new store view mapping under the folders: section, like this:

mountpoints:
/: https://example.mountpoint.com/:f:/r/sites/myproject
folders:
/en/products/: /en/products/default
/en_ca/products/: /en_ca/products/default

Config Service

If your project uses the Config Service, you must update the configuration to add the new store view mapping under the folders: section, like this:

{
"folders": {
"/en/products/": "/en/products/default",
"/en_ca/products/": "/en_ca/products/default"
}
}

To learn more about the Config Service, please see aem.live’s documentation or read the api documentation to learn how to publish your updates to the Config Service for your site.

Site Config

You must update your storefront config to include configuration overrides for the new store view. In this file, you’ll define store-view specific settings, such as service headers and analytics values. The key of each overridden object must match the root folder path of the corresponding store view. These values will be merged into the default configuration.

The analytics section contains the Adobe Commerce environment variables for the store view. These variables are used by the Analytics API. For more details, see Analytics.

{
"public": {
"default": {
// default configuration
},
"/en/": {}, // inherits the default
"/en_ca/": {
"headers": {
// overrides values from the default headers
},
"analytics": {
// overrides values from the default analytics configuration
}
}
}
}

Step-by-Step

These steps show you how to add a new English Canadian store view (en_ca) similar to the default English store (en).

Add a new store

Create an en_ca store view in the Commerce Admin and perform the following steps in your project.

  1. Create the /en_ca/ folder under the project root in SharePoint or Google Drive. You can name this folder anything you want, as long as it’s unique and can be used in a web address. For example, instead of Canada (English), you can use ca_en.

  2. Copy the store switcher, placeholders, and document files from the /en/ directory to the /en_ca/` directory.

Update Content Files

Next, localize or translate the files in your project.

  1. Translate or localize content files in the /en_ca/ folders.

  2. Ensure all labels in placeholders file (SharePoint .xlsx or Google sheet) are accurately translated into the desired language.

Update Storefront Configuration

  1. Update the fstab.yaml file — or the fstab section of your site config — to include the new folder mapping for the /en_ca/ store view. This should map to the appropriate content path. For example, /en_ca/products/ should map to /en_ca/products/default.

  2. Update the config.json file - or the public section of your site config - to include a new entry under in the public object for /en_ca/. Use this section to define store-specific values such as headers, analytics, and more, if they differ from the default. Make sure the key matches the folder path of your store view. For example, the /en_ca/ key for your Canadian store). Values in this object will override those in the default configuration.

  3. If you are using the Config Service, read the api documentation to learn how to publish your updates to the Config Service for your site.

Preview and validate

Finally, preview and publish the new store view.

  1. Preview all files in the updated folder /en_ca/ with AEM Sidekick.

  2. Validate the storefront experience by accessing the new language/region and testing the rendering, navigation, and data accuracy.

  3. Publish the updated folder using the AEM Sidekick folder when ready.

  4. Update the store-switcher file (SharePoint .docx or Google sheet) to include a link to the new store view.