What is Catalyst, BigCommerce's storefront?

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 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 to the markup, comes to depend on that application's code.

How it works

BigCommerce defines it as a composable, fully customizable headless storefront 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.⁠^{[1]BigCommerce Docs. 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.⁠^{[2]BigCommerce on GitHub. bigcommerce/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.⁠^{[3]BigCommerce, press release. BigCommerce Unveils Catalyst Storefront Technology, Empowering Rapid Launches of Composable Ecommerce Experiences} 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.⁠^{[4]BigCommerce Developer Learning. Storefront APIs} To change the catalog, a product, its price or its SEO fields, you use another door, the admin catalog API, which manages products, categories and brands.⁠^{[5]BigCommerce API Reference. Catalog - 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.⁠^{[6]BigCommerce Docs. Getting started with Catalyst} The application can be hosted on any service that runs Node.js; BigCommerce's demo is on Vercel.⁠^{[1]BigCommerce Docs. Catalyst} If you use Makeswift, products sync with the editor through webhooks, a feature BigCommerce still marks as beta.⁠^{[6]BigCommerce Docs. Getting started with Catalyst}

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 sitemap, /xmlsitemap.php, to /sitemap.xml. What it does not cover: if another system generates pages with their own URLs, its XML sitemap is submitted separately.⁠^{[7]BigCommerce Docs. Sitemap (Catalyst)}

Widget regions do not exist. In a store with a theme, a BigCommerce widget goes in a region, and regions are slots declared in Stencil's template files.⁠^{[8]BigCommerce Dev Center. Widgets API} Catalyst does not load those templates: it is a Next.js application.⁠^{[1]BigCommerce Docs. Catalyst} Whatever an installed app put on the product page through a region, be it a banner or a block of 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.⁠^{[9]BigCommerce Docs. Catalyst 1.7.0 release notes} 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:

The page_title and meta_description fields exist on the catalog API's product,⁠^{[5]BigCommerce API Reference. Catalog - 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:

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 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.

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.⁠^{[7]BigCommerce Docs. Sitemap (Catalyst)}
3. Request /xmlsitemap.php and confirm it redirects to /sitemap.xml; if you submitted the old sitemap to Search Console, swap it for the new one.⁠^{[7]BigCommerce Docs. Sitemap (Catalyst)}
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.⁠^{[9]BigCommerce Docs. Catalyst 1.7.0 release notes}
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.⁠^{[8]BigCommerce Dev Center. Widgets API}

Related concept: Stencil

Stencil is BigCommerce's theme system: Handlebars templates that the platform renders and hosts, with regions where apps place widgets without touching the code.⁠^{[8]BigCommerce Dev Center. Widgets API} 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.⁠^{[1]BigCommerce Docs. 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 answers it.

To go further, the publishing by platform reading path orders the rest of the terms, and the page on Clione on headless storefronts explains how its signals reach a frontend like this.