Headless with Catalyst

Everything so far in this course assumes a Stencil theme rendering pages through Handlebars, inside BigCommerce's own frontend system. Catalyst is BigCommerce's answer to going headless without abandoning platform support entirely — a full storefront framework, built and maintained by BigCommerce itself, that replaces Handlebars templates with an ordinary Next.js application.

Why this exists alongside Stencil

Stencil covers most stores well — it's fast to launch, fully hosted, and needs no separate frontend infrastructure. Catalyst is a deliberate trade in the other direction: it gives a team complete control over the frontend, at the cost of managing that frontend's hosting and build pipeline themselves rather than letting BigCommerce run it. It tends to make sense for teams that already build in React and Next.js, or that need frontend flexibility Stencil's Handlebars/widget model doesn't comfortably provide.

What Catalyst actually is

A Catalyst project is a standard Next.js application using React, pre-configured with components and data-fetching logic for common storefront pages — product, category, cart, and so on — wired to pull their data from the GraphQL Storefront API rather than anything Stencil-specific:

query ProductDetail($entityId: Int!) {
  site {
    product(entityId: $entityId) {
      name
      prices { price { value currencyCode } }
    }
  }
}

Visual design in Catalyst is deliberately unopinionated rather than theme-based — it ships with Tailwind CSS as a styling foundation instead of a fixed set of look-and-feel settings a merchant configures through a Theme Editor, closer to starting from a well-organized component library than from a pre-designed theme.

Hosting and deployment

Because a Catalyst project is just a Next.js app, it isn't tied to running on BigCommerce's own servers the way a Stencil theme is — it can be deployed to any hosting provider that supports Node.js. BigCommerce's own reference deployment runs on Vercel, which is also the most common choice in practice given how closely Vercel and Next.js are integrated, but nothing about Catalyst requires that specific host.

Choosing between Stencil and Catalyst

The honest framing: Stencil trades some frontend flexibility for having almost everything (hosting, cart behavior, checkout, SEO defaults) already built and managed for you. Catalyst trades that managed simplicity for full control over the frontend, in exchange for taking on real, ongoing engineering responsibility — deployments, hosting costs, and keeping a Next.js application maintained over time. Neither is a strict upgrade over the other; the right choice depends on whether a team's constraint is speed-to-launch or frontend flexibility.