bigcommerce

BigCommerce

Overview

BigCommerce is a hosted e-commerce platform with strong headless capabilities. Unlike Shopify, it includes more features out of the box (no app fees for basic needs), has a comprehensive REST + GraphQL API, and supports multi-storefront. Works as a backend for headless commerce with Next.js (BigCommerce's own starter is Catalyst) or any other frontend.

Instructions

Step 1: Storefront API (GraphQL)

The endpoint is https://store-{store_hash}.mybigcommerce.com/graphql for the default channel (or your storefront domain plus /graphql); other channels use store-{store_hash}-{channel_id}.mybigcommerce.com. Create a token in the control panel or with POST /v3/storefront/api-token on the management API. BigCommerce's current docs say server-side integrations created after June 30, 2026 should use private tokens rather than storefront tokens; check the GraphQL authentication page for which applies to you. Limits: query complexity 10,000, depth 16, at most 50 products per page. Try queries in Settings > API > Storefront API Playground first.

// lib/bigcommerce.ts — Fetch products via GraphQL Storefront API
const STOREFRONT_TOKEN = process.env.BC_STOREFRONT_TOKEN!
const STORE_HASH = process.env.BC_STORE_HASH!

export async function getProducts(limit = 12) {
  const query = `
    query Products($first: Int!) {
      site {
        products(first: $first) {
          edges {
            node {
              entityId
              name
              path
              prices { price { value currencyCode } }
              defaultImage { url(width: 400) altText }
            }
          }
        }
      }
    }
  `

  const res = await fetch(`https://store-${STORE_HASH}.mybigcommerce.com/graphql`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${STOREFRONT_TOKEN}`,
    },
    body: JSON.stringify({ query, variables: { first: limit } }),
  })

  const { data } = await res.json()
  return data.site.products.edges.map(e => e.node)
}