Multi-storefront overview

Introduction

The multi-storefront feature allows you to use multiple websites across several domains. Each storefront can have different catalogs, products, brands and customers that all come from a single BigCommerce Store.

ℹ️ To learn more about this feature in BigCommerce, check out their Introduction to Multi-Storefront documentation (opens new window) in the BigCommerce Dev Center.

Supported features

The Vue Storefront 2 integration for BigCommerce supports the following multi-storefront features:

Feature	Support	Additional comments
Displaying categories for specific storefront	✅
Displaying products for specific storefront	✅
Login and register user for specific storefront	✅
Support global logins	✅
Using cart for specific storefront	✅
Creating and displaying orders for specifics storefront	✅
Storefronts on different domains	✅
Storefronts on the same domain with different paths	❌
Multiple currencies	✅
Setup script for multiple storefronts	❌

Multi-storefront configuration

One Vue Storefront application can handle multiple storefronts. However, each storefront need to have its own unique domain. You can add these domains and their channel configurations inside storefront.config.ts file.

const DEFAULT_BIGCOMMERCE_CHANNEL = 1;

const storefrontsConfig: MultiStorefrontConfig = {
  default: {
    name: 'Default storefront',
    channelId:
      Number(process.env.DEFAULT_CHANNEL_ID) || DEFAULT_BIGCOMMERCE_CHANNEL
  },
  'my-first-storefront.io': {
    name: 'First storefront',
    channelId: YOUR_FIRST_CHANNEL_ID
  },
  'my-second-storefront.io': {
    name: 'Second storefront',
    channelId: YOUR_SECOND_CHANNEL_ID
  }
};

export default storefrontsConfig;

Your VSF app will know which storefront to use based on the domain, the current storefront's channelId will be used to communicate with the BigCommerce API. The name property can be used to generate user-friendly links to other storefronts in your application. The default configuration will be used in case that domain is not matching any other configuration entries.

Reference: MultiStorefrontConfig.

Using storefront information

Storefronts configuration is added to nuxt publicRuntimeConfig and can be retrieved from nuxt context:

import { defineComponent } from '@nuxtjs/composition-api';

export default defineComponent({
  setup() {
    const { $config } = useContext();
    const storefrontsConfig = $config.storefronts;
  }
});

To load information about the current storefront, like SEO meta data, available currencies, and more, you should use the useChannel composable. Loaded data is stored in channelsStore, which is a standard Pinia store.

import { defineComponent, useAsync } from '@nuxtjs/composition-api';
import { storeToRefs } from 'pinia';
import { useChannel } from '~/composables';

export default defineComponent({
  setup() {
    const channelStore = useChannelStore();
    const { channel: activeChannel, seoMeta } = storeToRefs(channelStore);
    const { load, availableChannels } = useChannel();

    const storefrontsConfig = $config.storefronts;

    useAsync(async () => {
      await load();
    });

    return {
      storefrontsConfig, // whole storefronts configuration
      availableChannels, // computed channel information that include links to each channel
      activeChannel, // currently used channel
      seoMeta // SEO meta data of currently used channel
    };
  }
});

Adding new storefronts

Adding a new storefront to the project is similar to configuring the app for the first time (see Configuring BigCommerce and Configuring Vue Storefront):

1. Create a new custom channel,
2. Create a site for the new custom channel,
3. Create site routes for the custom channel's site,
4. Add a new entry to configuration in storefronts.config.ts file.

ℹ️ Manipulating custom channels requires usage of BigCommerce API Reference (opens new window).

Running multiple storefronts locally

The VSF app needs each storefront to have a domain where it should be accessible. For development, there are many tools that can help make domains available locally which will point to specific port i.e. localhost:3000. For UNIX systems, we suggest using the /etc/hosts file, that allows you to map certain domains to other domains. For example example: 127.0.0.1 www.mydomain.com will map www.domain.com to localhost.

Domains set up for local development need to be added as config entries in storefront.config.ts file.

const DEFAULT_BIGCOMMERCE_CHANNEL = 1;

const storefrontsConfig: MultiStorefrontConfig = {
  default: {
    name: 'Default storefront',
    channelId:
      Number(process.env.DEFAULT_CHANNEL_ID) || DEFAULT_BIGCOMMERCE_CHANNEL
  },
  'my-first-storefront.io': {
    name: 'First storefront',
    channelId: YOUR_FIRST_CHANNEL_ID
  },
  'my-second-storefront.io': {
    name: 'Second storefront',
    channelId: YOUR_SECOND_CHANNEL_ID
  },
  'localhost:3000': {
    name: 'First storefront',
    channelId: YOUR_FIRST_CHANNEL_ID,
    protocol: 'http'
  },
  'my-alias:3000': {
    name: 'Second storefront',
    channelId: YOUR_SECOND_CHANNEL_ID,
    protocol: 'http'
  }
};