# What Is Catalyst, BigCommerce's Headless Storefront?

> What Catalyst is, BigCommerce's Next.js frontend, what the Stencil theme stops doing and what to check so search engines and assistants can read your store.

URL: https://clione.ai/glossary/bigcommerce-catalyst/
Lang: en

There are several Catalysts in software, and this is not Apple's, the one for bringing iPad apps to the Mac. Here Catalyst is **the frontend BigCommerce publishes for building a [_headless_ commerce](/glossary/headless-commerce/) store**: an application of its own, in Next.js, that replaces the usual theme. It matters to you if an agency proposes "moving to Catalyst". The store can gain in design and speed, but everything the theme did for your SEO, from the title of each [product page](/glossary/product-page/) to the markup, comes to depend on that application's code.

## How it works

BigCommerce defines it as a composable, fully customizable [headless storefront](/glossary/headless-commerce/) _framework_, built with Next.js and React components for the store. It uses React Server Components and Suspense boundaries, and **requests data from the GraphQL Storefront API**.[^bc-catalyst] The code is open source, under an MIT license, and a new store is created from the command line with `pnpm create @bigcommerce/catalyst@latest`. You need a BigCommerce account and Node.js 24.[^gh-catalyst]

It arrived on February 8, 2024. BigCommerce presented it as a reference architecture so developers and agencies could launch stores faster, with a GraphQL client optimized for the latest version of Next.js and for React Server Components. It said it was designed from **more than 4,000 existing _headless_ implementations**, with the goal of scoring 100 in Google Lighthouse out of the box, and with Makeswift, the visual page editor it had acquired in late 2023, as a central piece.[^bc-catalyst-press] A starting goal is not a measurement of your store: as soon as the team adds code, the score is its own.

The store has two halves. **BigCommerce holds the data and does the commerce work**; Catalyst requests it and paints the pages. To request it, it uses BigCommerce's storefront APIs, which the platform itself describes as built for the shopper's actions in the store: browsing the catalog, logging in, the cart and the checkout.[^bc-storefront-apis] To change the catalog, a product, its price or its SEO fields, you use another door, the admin [catalog API](/glossary/catalog-api/), which manages products, categories and brands.[^bc-products]

Setting it up is different too. You need a BigCommerce store or sandbox and permissions to create channels and install apps, and the process creates **a Catalyst channel** in the store.[^bc-catalyst-start] The application can be hosted on any service that runs Node.js; BigCommerce's demo is on Vercel.[^bc-catalyst] If you use Makeswift, products sync with the editor through [webhooks](/glossary/webhook/), a feature BigCommerce still marks as beta.[^bc-catalyst-start]

## What changes for SEO

**Catalyst does not write the sitemap.** When someone requests `/sitemap.xml`, Catalyst asks BigCommerce for the index, at the channel's own URL, and returns it as if it were its own. The index is served from your store's domain, the sitemaps it links to are on a permanent `mybigcommerce.com` URL and the page URLs inside use the domain you configured. BigCommerce also redirects the old [Stencil](/glossary/bigcommerce-stencil/) sitemap, `/xmlsitemap.php`, to `/sitemap.xml`. What it does not cover: **if another system generates pages with their own URLs, its [XML sitemap](/glossary/xml-sitemap/) is submitted separately**.[^bc-catalyst-sitemap]

**Widget regions do not exist.** In a store with a theme, a [BigCommerce widget](/glossary/bigcommerce-widget/) goes in a region, and regions are slots declared in Stencil's template files.[^bc-widgets] Catalyst does not load those templates: it is a Next.js application.[^bc-catalyst] Whatever an installed app put on the product page through a region, be it a banner or a block of [structured data](/glossary/structured-data/), has nowhere to land until someone builds it into the frontend.

**The page language.** Since version 1.7.0, the `lang` attribute of the `<html>` tag reflects the store's active language instead of defaulting to English.[^bc-catalyst-170] If your store sells in a language other than English and runs an earlier version, its pages declare English.

## In a store

A **fictional example**: a tripod store on BigCommerce that moves from its Stencil theme to Catalyst. This is the list of who does what before and after, with what to check:

| Piece                                                       | With a Stencil theme                                           | With Catalyst                       | What to check                               |
| ----------------------------------------------------------- | -------------------------------------------------------------- | ----------------------------------- | ------------------------------------------- |
| Product data                                                | BigCommerce                                                    | BigCommerce, served by API          | Nothing changes                             |
| Product [page title](/glossary/meta-title/) and description | The theme, with the `page_title` and `meta_description` fields | The frontend code, if it reads them | That they show up in each page's HTML       |
| [JSON-LD](/glossary/json-ld/) markup                        | The theme or a widget in a region                              | The frontend code                   | That it is not lost in the switch           |
| Sitemap                                                     | BigCommerce                                                    | BigCommerce, served by Catalyst     | Page URLs that do not come from BigCommerce |
| Page language                                               | The theme                                                      | Catalyst, correct since 1.7.0       | The `lang` attribute                        |

The `page_title` and `meta_description` fields exist on the catalog API's product,[^bc-products] so the data is not lost when you change frontends: what can be lost is someone painting it. The check fits on one line, with the URL of a product page from that made-up store:

```bash
curl -s https://tripods-example.com/travel-tripod/ | grep -E "<html lang|<title>|name=\"description\"|application/ld\+json"
```

If any of the four does not show up, the HTML a [crawler](/glossary/web-crawler/) that does not run JavaScript receives does not carry it. Clione, on a BigCommerce store with a theme, publishes its structured data graph with the Widget API and it is painted on the server; on Catalyst, its signals reach the frontend through a package of its own that is configured with each store.


**Seeing `mybigcommerce.com` in your sitemap does not mean your pages are indexed on that domain.** The `/sitemap.xml` index links to sitemaps hosted on the channel's permanent URL, but the URLs of the pages they contain use your store's domain, and the Catalyst documentation says so in those very words.[^bc-catalyst-sitemap] The opposite mix-up is costlier: treating Catalyst as just another theme. It is not applied to the store the way you switch themes: it creates a channel of its own and is a different application, with its own hosting, so whatever the theme solved has to be solved again in code.[^bc-catalyst-start][^bc-catalyst][^bc-widgets]


## How to check it

1. **Request a product page without running JavaScript**, with `curl` or with "View source", and look for the title, the description, the JSON-LD and the price in the HTML that arrives from the server.
2. **Open `/sitemap.xml`** and check that the page URLs use your store's domain. The index pointing to `mybigcommerce.com` is expected.[^bc-catalyst-sitemap]
3. **Request `/xmlsitemap.php`** and confirm it redirects to `/sitemap.xml`; if you submitted the old sitemap to [Search Console](/glossary/google-search-console/), swap it for the new one.[^bc-catalyst-sitemap]
4. **Look at the `lang` attribute** of the `<html>` tag on a page in a language other than English. If it says `en`, check your Catalyst version: the change arrived in 1.7.0.[^bc-catalyst-170]
5. **Take inventory of the apps that touched the theme** before migrating: everything they placed in Stencil regions has to be rebuilt in the frontend.[^bc-widgets]

## Related concept: Stencil

[Stencil](/glossary/bigcommerce-stencil/) is BigCommerce's theme system: Handlebars templates that the platform renders and hosts, with regions where apps place widgets without touching the code.[^bc-widgets] Catalyst is not a more modern Stencil theme but **another way of building the store**: a separate application that talks to BigCommerce through APIs and that you, or your agency, host and maintain.[^bc-catalyst] With Stencil, the theme and the platform are the same piece; with Catalyst, they are two, and the border between them is exactly where things get lost in a migration. Whether the HTML is generated on the server or not is another question, and [server-side rendering](/glossary/server-side-rendering/) answers it.

To go further, the [publishing by platform reading path](/learn/publishing-by-platform/) orders the rest of the terms, and the page on [Clione on headless storefronts](/works-with/headless/) explains how its signals reach a frontend like this.