Configure multiple stores

A single instance of Front-Commerce can handle several stores simultaneously. This guide explains how to configure a multi-store application.

What is a store in Front-Commerce

A store in Front-Commerce has the same meaning as in Magento. Usually, the goal of a store is to display your catalog in multiple languages. If you want to adapt the prices depending on your language, you should use the websites feature.

Configuring multiple stores

A single of Front-Commerce can handle several stores at the same time. This is configurable in app/config/stores.js.

note

However, if you need multiple websites, you will need to deploy as many Front-Commerce instances as there are websites. Feel free to contact us if you need more information about this.

Configuration file example

The configuration file will look like this:

app/config/stores.js

export default {
  // the key is the code of your store
  default_en: {
    // language used in the store (useful for react-intl)
    locale: "en-GB",
    // currency code ISO 4217
    currency: "GBP",
    // country code ISO 3166-1 (used for preselecting the country in an address input for instance)
    default_country_id: "FR",
    // The url used for this store
    url: process.env.FRONT_COMMERCE_EN_URL || "https://en.fallback.com",
    // an optional URL that will be used to serve static assets, if not defined assets are served from the url above.
    assetsBaseUrl: "http://a.cdn.mybrand.com",
  },
  default_fr: {
    locale: "fr-FR",
    currency: "EUR",
    default_country_id: "FR",
    url: process.env.FRONT_COMMERCE_FR_URL || "https://fr.fallback.com",
  },
};

Its main goal is to tell your application how to fetch the correct translations and languages.

A few pointers about URLs

A store is always associated with a single URL. Store is not based on cookies or session but on the fetched URL. This means that you can have either a set of subdomains (fr.example.com, en.example.com, etc.) or base paths per stores (www.example.com/fr, www.example.com/en, etc.).

These URLs should be defined in the url key of the store object specified above. Since you will most likely have a local environment, a staging environment and a production environment, we encourage you to use environment variables.

In addition, it's possible to configure Front-Commerce to serve static assets from a different domain .To optimize caching, all stores can share the same domain.

How should I get the URL in another store?

URLs may change between stores. This is the case for the base url of your store but also for the actual path of your page. For instance a /shirts.html URL would be changed in /chemises.html in french. This can be done by executing the following GraphQL query:

query StoreViewUrlQuery($url: String!, $otherShop: ID!) {
  shop {
    id
    translatedUrl(url: $url, otherShop: $otherShop)
  }
}

It will return in translatedUrl the correct URL in the other store for platforms supporting this feature.

warning

Please contact us if you need this feature for your platform. If it isn't yet supported, we will work to make it possible!

Multiple currencies

This feature has been added for Magento 1. Please contact us if you need it for another platform.

With Magento1 it is possible to handle multiple currencies for a single store. To do so, you need to define the availableCurrencies key for the stores using multiple currencies. This will add a button in your shop's header that lets the user choose which currency to use. By default, a user will be using the currency specified in the currency key.

export default {
  // the key is the code of your store
  default_en: {
    // ...
    currency: "GBP",
+   availableCurrencies: ["GBP", "EUR"]
    // ...
  },
}