Creating Channels

Prepare

You will need to create two API tokens for your BigCommerce store. They have different permissions required, so please pay attention to which one is used for the step you are working on. Refer to this support article (opens in a new tab) for more information on how to create API Accounts.

Create a token (TOKEN_A) with modify permissions for the following resources:
- Channel listings
- Channel settings
- Sites & routes
Create a token (TOKEN_B) with modify permissions for the following resources:
- Carts
- Storefront API tokens
- Storefront API customer impersonation tokens

Tokens are created using the API path https://{storehash}.mybigcommerce.com/manage/settings/api-account.

Also check that you have multi-storefront feature enabled and available seats.

Create the channel

Send a request to the Create a channel endpoint using TOKEN_A to create a channel for your headless platform. Note the channel ID returned in the response; you'll use it in successive steps.

Example request: Create channel

POST https://api.bigcommerce.com/stores/{store_hash}/v3/channels
Accept: application/json
Content-Type: application/json
X-Auth-Token: {{TOKEN_A}}
 
{
    "name": "<the name you want for your channel>",
    "platform": "<desired platform>",
    "type": "storefront",
    "status": "active",
    "is_listable_from_ui": true,
    "is_visible": true
}

Currently we’re working with Vercel template, and that uses NextJS (opens in a new tab).

Generate an impersonation token

Generate an impersonation token by using the next cURL as base and using TOKEN_B.

Example request: Create an impersonation token

POST https://api.bigcommerce.com/stores/{store_hash}/v3/storefront/api-token-customer-impersonation
Accept: application/json
Content-Type: application/json
X-Auth-Token: {{TOKEN_B}}
 
{
  "channel_id": <channel returned on the first request>,
  "expires_at": <Unix timestamp (UTC time) defining when the token should expire. Supports seconds, but does not support milliseconds, microseconds, or nanoseconds.>
}

Create a site for the channel

Create the site for the channel, you should use TOKEN_A.

Example request: Create an impersonation token

POST https://api.bigcommerce.com/stores/{store_hash}/v3/sites
Accept: application/json
Content-Type: application/json
X-Auth-Token: {{TOKEN_A}}
 
{
    "url": <url you want to point>,
    "channel_id": <the channel id returned on step 1>
}

Update script tag information

Add the following script tag on your application.

<script>
  type="module"
  data-storehash="{STORE_HASH}"
  data-channelid="{CHANNEL_ID}"
  src="https://cdn.bundleb2b.net/b2b/production/storefront/headless.js">
</script>

Enable headless channel on the B2B dashboard

In the B2B dashboard, go to Storefronts > Headless Storefronts and select Activate B2B for the storefront channel.

Make products available on your new channel

In the control panel, go to Products > View and select all the products you want to make available on the new channel. Then click Bulk Actions > Add to channels. Next, select the desired channels and click Add.

Did you find what you were looking for?

Reference storefront Features