Multi-Storefront & i18n

A single BigCommerce account isn't limited to one storefront — Multi-Storefront lets one catalog and one back-office power several distinct, independently themed storefronts (a B2C site and a B2B site, or separate storefronts per region or brand). Within any one storefront, internationalization (i18n) covers serving multiple languages and currencies to different shoppers.

Channels

Each storefront under a Multi-Storefront account is called a channel. Channels can share the same product catalog while each running its own theme, domain, and configuration — useful for a business that sells the same products under different brands or to different customer segments without maintaining entirely separate BigCommerce accounts.

Translations with lang/ files

A Stencil theme's lang/ folder holds translation strings keyed by language code, referenced in templates through the {{lang}} helper rather than hardcoded text:

JSON lang/en.json (excerpt)

{
  "common": {
    "add_to_cart": "Add to Cart",
    "out_of_stock": "Out of Stock"
  }
}

Handlebars using a translation string

<button>{{lang 'common.add_to_cart'}}</button>

Adding a corresponding lang/fr.json (or any other language code) with the same keys translated is enough for BigCommerce to serve that language to shoppers who select it — no change to the templates themselves is needed, since they reference keys rather than literal text.

Multi-currency

BigCommerce can display prices in a shopper's local currency automatically, converted from the store's base currency at checkout-safe exchange rates. As with tiered pricing in the previous lesson, the conversion happens before the data reaches Handlebars — a template just outputs price.formatted.without_tax as usual and it reflects whatever currency is currently active for that shopper.

Currency selector

When multiple currencies are enabled, a theme typically renders a currency switcher that posts the shopper's choice back to BigCommerce, which then persists that preference for the rest of the session:

Handlebars a currency switcher

<select name="currency" onchange="this.form.submit()">
  {{#each currencies}}
    <option value="{{this.code}}" {{#if this.active}}selected{{/if}}>{{this.name}}</option>
  {{/each}}
</select>

Note: Multi-Storefront and multi-currency solve two different problems — Multi-Storefront is about running separate storefronts off one catalog, while multi-currency is about one storefront displaying correctly to shoppers paying in different currencies. A business can need either, both, or neither depending on how its markets are actually structured.

PreviousCustomer Accounts & B2B NextPerformance & SEO