Codinative

Catalyst & Headless

The modern, React-based way to build BigCommerce storefronts. This is an orientation module - know what each approach is and when it's the right call; the BigCommerce docs carry the deep implementation detail.

Catalyst

Catalyst is BigCommerce’s official reference composable storefront and the recommended starting point for new modern builds. It’s a Next.js app (App Router) built on React Server Components, shipping with a provided React UI kit, a typed GraphQL Storefront API client, and CLI scaffolding. It is technically headless, but “batteries-included” - you get a working, performant storefront to customise rather than a blank page.

Makeswift comes pre-integrated as the recommended visual page builder, so merchants get drag-and-drop editing on top of your React components - the Catalyst answer to Page Builder.

Fully headless

“Headless” means you build the frontend on any stack and talk to BigCommerce purely through the Storefront APIs (GraphQL Storefront preferred; Storefront REST for carts/checkouts). Catalyst is the opinionated reference; rolling your own is the same idea without the scaffolding. Key concerns you own: data fetching, session syncing (keeping cart/customer state aligned between your frontend and BigCommerce), routing, and the channel the storefront maps to.

The GraphQL Storefront API is the heart of a headless build - its details (read-only products, token types, the Blueprint limitation, s2s deprecation) are covered by the GraphQL Storefront API course in the Guided Coursework and the official GraphQL Storefront API guide.

Multi-storefront

Multi-storefront (MSF) runs several storefronts - channels - from a single store and catalog, each with its own domain, theme or headless frontend, currency, and content. Whether you build with Stencil, Catalyst, or headless, design content and integrations to be channel-aware so the right data shows on the right storefront.

WordPress

The BigCommerce for WordPress plugin embeds BigCommerce catalog and checkout into a WordPress site - a headless pattern where WordPress is the frontend. Niche for us, but worth knowing it exists for content-led / blog-first merchants.

When to use which

  • Traditional theme, hosted, merchant-editable → Stencil.
  • Modern React build, want a head start + visual editing → Catalyst.
  • Existing custom frontend, an unusual framework, or maximum control → fully headless. (Multi-storefront works with Stencil and Catalyst too, so “many channels” on its own isn’t a reason to go headless.)
  • WordPress-centric content site → the WordPress plugin.

Read the BigCommerce docs