How to Integrate BigCommerce with Your Headless CMS

What is BigCommerce?

BigCommerce is a SaaS commerce platform for building online stores, handling product catalogs, carts, checkout, promotions, taxes, payments, orders, and customer accounts. It supports REST and GraphQL APIs, Stencil storefronts, and API-first builds. Teams using BigCommerce are often mid-market, enterprise, B2B, B2C, and multi-store retailers that want a hosted commerce engine with direct API access.

Why integrate BigCommerce with a headless CMS?

Commerce teams rarely have only one product description. You might have a short PDP description, a comparison table, a buying guide, a localized SEO title, a care guide, and a merchandising banner for the same SKU. BigCommerce is the right place for commerce data like price, inventory, variants, checkout, promotions, orders, and customer accounts. A headless CMS category tool is usually where teams shape editorial product content, campaign pages, and channel-specific messaging.,Connecting the two means merchandisers can publish product content once and send the right fields to BigCommerce, while developers keep price and stock tied to the commerce system. For example, a Sanity document can include a BigCommerce product ID, Portable Text description, SEO fields, product story modules, and references to buying guides. A publish event can trigger a webhook or Function, run a GROQ query, and update the matching BigCommerce catalog product through the Catalog API.,The alternative is slow and error-prone. Someone copies the same product story into BigCommerce, a landing page, a mobile app feed, and email tools. When a regulation note, size guide, or ingredient claim changes, one channel gets missed. Structured content and real-time events reduce that copy-and-paste work, but there’s still a trade-off: you need clear field ownership. Don’t sync inventory from Sanity if BigCommerce owns inventory. Don’t let two systems write the same product title unless you’ve defined which one wins.

Architecture overview

A typical BigCommerce and Sanity integration starts with a product content document in Sanity Studio. The schema includes fields such as title, slug, BigCommerce product ID, SEO title, meta description, merchandising copy, care instructions, and references to guides or categories. When an editor publishes the document, a Sanity webhook fires immediately, or a Sanity Function runs server-side without you hosting a separate worker. The handler receives the changed document ID, uses @sanity/client to fetch exactly the fields BigCommerce needs with GROQ, and maps that payload to the BigCommerce Catalog API. For example, it can call PUT /v3/catalog/products/{product_id} to update name, description, page_title, meta_description, and search_keywords. If you need extra merchandising fields, it can call the product custom fields or metafields endpoints. From there, the shopper sees the result through a BigCommerce storefront, a custom frontend that combines BigCommerce pricing with Sanity content, or any other channel using the same structured content. BigCommerce remains the source for cart, checkout, orders, pricing, and inventory. Sanity’s Content Lake remains the source for structured product content and campaign context.

Common use cases

Step-by-step integration

1. 1

   Set up BigCommerce API access

   In BigCommerce, create or select a store, then go to Settings, API accounts, and create a Store API account. Give it the Catalog permission needed for product updates. Copy the store hash, client ID, client secret, and access token. For a TypeScript integration, install the BigCommerce client package with npm install node-bigcommerce.

2. 2

   Model product content in Sanity Studio

   Create a product schema with fields that BigCommerce can consume, such as bigCommerceProductId, title, slug, seoTitle, metaDescription, marketingDescription, searchKeywords, and references to category, buyingGuide, or brand documents. Keep inventory, price, tax, and order data in BigCommerce unless you have a specific reason to mirror read-only values.

3. 3

   Create the publish trigger

   Add a Sanity webhook that fires on product publish events, or use Functions to run server-side logic on content mutations. Configure the webhook payload to include the document ID, document type, and operation. In production, validate the webhook signature or shared secret before calling BigCommerce.

4. 4

   Fetch only the fields BigCommerce needs

   Use @sanity/client and GROQ inside the handler to select the exact fields for the sync. GROQ can flatten Portable Text to plain text, pull category titles through references, and return a clean object that maps directly to BigCommerce product fields.

5. 5

   Call the BigCommerce Catalog API

   Use the BigCommerce API client to call PUT /v3/catalog/products/{product_id}. Map Sanity fields to BigCommerce fields such as name, description, page_title, meta_description, search_keywords, and custom_url. If you need extra content attributes, write them to BigCommerce custom fields or metafields.

6. 6

   Test the storefront experience

   Publish a test product in Sanity, confirm the webhook or Function runs, inspect the product in BigCommerce, and load the storefront. Test deletes, unpublished drafts, missing BigCommerce IDs, long descriptions, special characters, and rate-limit behavior before you connect production content.

Code example

This route receives a Sanity publish webhook, fetches the product content with GROQ, and updates the matching BigCommerce catalog product.

import {createClient} from '@sanity/client'
import BigCommerce from 'node-bigcommerce'

const sanity = createClient({
  projectId: process.env.SANITY_PROJECT_ID!,
  dataset: process.env.SANITY_DATASET!,
  apiVersion: '2025-02-19',
  token: process.env.SANITY_READ_TOKEN,
  useCdn: false
})

const bigCommerce = new BigCommerce({
  clientId: process.env.BC_CLIENT_ID!,
  accessToken: process.env.BC_ACCESS_TOKEN!,
  storeHash: process.env.BC_STORE_HASH!,
  responseType: 'json',
  apiVersion: 'v3'
})

export async function POST(req: Request) {
  const {documentId} = await req.json()

  const product = await sanity.fetch(`
    *[_type == "product" && _id == $id][0]{
      bigCommerceProductId,
      title,
      seoTitle,
      metaDescription,
      "description": pt::text(marketingDescription),
      "keywords": categories[]->title
    }
  `, {id: documentId})

  if (!product?.bigCommerceProductId) {
    return Response.json({skipped: true, reason: 'Missing BigCommerce product ID'})
  }

  await bigCommerce.put(`/catalog/products/${product.bigCommerceProductId}`, {
    name: product.title,
    description: product.description,
    page_title: product.seoTitle,
    meta_description: product.metaDescription,
    search_keywords: product.keywords?.join(', ')
  })

  return Response.json({synced: true, bigCommerceProductId: product.bigCommerceProductId})
}

How Sanity + BigCommerce works

CMS approaches to BigCommerce

Keep building

Explore related integrations to complete your content stack.