Catalyst

Catalyst is the composable, fully customizable headless ecommerce storefront framework for BigCommerce. We’ve built Catalyst with Next.js, React storefront components, and our GraphQL Storefront API.

When you use Catalyst, you can create a fully functional storefront using our CLI and get to work without wiring up APIs or building ecommerce components from scratch that are optimized for SEO, accessibility, and performance. Catalyst is designed to take care of the essentials so you can focus your efforts on building your brand and adding those special features that take storefronts to the next level.

You can find a demo version of Catalyst at https://catalyst-demo.site/, hosted on Vercel in a US region.

Ecommerce functionality

Catalyst has a production-ready business-to-consumer (B2C) ecommerce funnel, including the following features:

Home page
Faceted search on product listing pages (PLPs) which are dynamically created for each category and brand
Full-text search
Product detail pages (PDPs) which are dynamically created for each product and published to the Catalyst storefront channel
Shopping cart
Secure redirected headless checkout page, which can be themed to match the styling of the core Catalyst storefront
Accounts logged-in customers. This currently includes address management and customer account settings.

Default state of Catalyst

Out-of-the-box, Catalyst has the following capabilities you can use to further build your storefront:

Brand or retailer experience

Platform feature support. Users’ changes made from the BigCommerce store control panel or through APIs appear on the storefront as expected.
Complex catalog support. Catalyst supports product catalogs of any size, complexity, or update frequency.

Developer experience

Scalable GraphQL implementation. Catalyst features scalable implementation of the GraphQL Storefront API.
Minimal infrastructure dependencies. Catalyst can be deployed to any hosting provider that supports Node.js.
Making the most of modern Next.js features. Catalyst uses React server components and Suspense boundaries.
Components. Catalyst provides functionally complete ecommerce components and a pre-optimized site architecture for performance, SEO, and accessibility.
Unopinionated visual design. Visually, Catalyst is a “blank sheet of paper” that’s ready to be transformed into a stellar ecommerce brand. Catalyst components use Tailwind CSS to accelerate development.

Shopper experience

Preconnect to checkout origin. Catalyst returns a rel="preconnect" link tag on the cart page allowing browsers to establish an early connection to the checkout origin, reducing latency when shoppers proceed from cart to checkout and improving the overall checkout experience.
Optimized shopping experiences. Catalyst provides a guest shopper experience optimized for speed and supports the dynamic experiences that matter to logged-in customers.
Secure checkout. Catalyst uses an optimized one-page redirected checkout on our hosted SaaS environment to simplify PCI compliance. By default, your headless storefront never collects or transmits personally identifiable information (PII) such as credit card numbers.

Customers have accounts on the store and can sign in to see orders, manage their accounts, and more. Shoppers browse the storefront but don’t have accounts.

Configuration recommendations

We expect you will prioritize some of these features over others as you make Catalyst your own. We recommend exploring the following configurations as you build:

Optimized caching performance.
- Using an external KV storage solution is recommended for optimal performance of our with-routes middleware.
- On Vercel Deployments, Vercel Runtime Cache is used automatically for optimal performance without requiring external KV storage setup.
Using microservices. Externally hosted databases and third-party APIs can expand the feature set and data persistence available to Catalyst storefronts.
Evaluating middleware. Assess the costs and benefits of the default Catalyst middleware. You may tailor the middleware for your use case or remove it altogether.
Additional catalog optimization. You can tune Catalyst’s performance based on your store’s catalog size, complexity, and update frequency. For example, a catalog with a small number of products and infrequent updates may be able to take advantage of static generation, whereas a large catalog with frequent changes may lean into an aggressive caching strategy that relies on webhooks.

Resources

You can find a demo version of Catalyst at https://catalyst-demo.site/, hosted on Vercel in a US region.

Ecommerce functionality

Catalyst has a production-ready business-to-consumer (B2C) ecommerce funnel, including the following features:

Home page
Faceted search on product listing pages (PLPs) which are dynamically created for each category and brand
Full-text search
Product detail pages (PDPs) which are dynamically created for each product and published to the Catalyst storefront channel
Shopping cart
Secure redirected headless checkout page, which can be themed to match the styling of the core Catalyst storefront
Accounts logged-in customers. This currently includes address management and customer account settings.

Default state of Catalyst

Out-of-the-box, Catalyst has the following capabilities you can use to further build your storefront:

Brand or retailer experience

Platform feature support. Users’ changes made from the BigCommerce store control panel or through APIs appear on the storefront as expected.
Complex catalog support. Catalyst supports product catalogs of any size, complexity, or update frequency.

Developer experience

Scalable GraphQL implementation. Catalyst features scalable implementation of the GraphQL Storefront API.
Minimal infrastructure dependencies. Catalyst can be deployed to any hosting provider that supports Node.js.
Making the most of modern Next.js features. Catalyst uses React server components and Suspense boundaries.
Components. Catalyst provides functionally complete ecommerce components and a pre-optimized site architecture for performance, SEO, and accessibility.
Unopinionated visual design. Visually, Catalyst is a “blank sheet of paper” that’s ready to be transformed into a stellar ecommerce brand. Catalyst components use Tailwind CSS to accelerate development.

Shopper experience

Preconnect to checkout origin. Catalyst returns a rel="preconnect" link tag on the cart page allowing browsers to establish an early connection to the checkout origin, reducing latency when shoppers proceed from cart to checkout and improving the overall checkout experience.
Optimized shopping experiences. Catalyst provides a guest shopper experience optimized for speed and supports the dynamic experiences that matter to logged-in customers.
Secure checkout. Catalyst uses an optimized one-page redirected checkout on our hosted SaaS environment to simplify PCI compliance. By default, your headless storefront never collects or transmits personally identifiable information (PII) such as credit card numbers.

Customers have accounts on the store and can sign in to see orders, manage their accounts, and more. Shoppers browse the storefront but don’t have accounts.

Configuration recommendations

We expect you will prioritize some of these features over others as you make Catalyst your own. We recommend exploring the following configurations as you build:

Optimized caching performance.
- Using an external KV storage solution is recommended for optimal performance of our with-routes middleware.
- On Vercel Deployments, Vercel Runtime Cache is used automatically for optimal performance without requiring external KV storage setup.
Using microservices. Externally hosted databases and third-party APIs can expand the feature set and data persistence available to Catalyst storefronts.
Evaluating middleware. Assess the costs and benefits of the default Catalyst middleware. You may tailor the middleware for your use case or remove it altogether.
Additional catalog optimization. You can tune Catalyst’s performance based on your store’s catalog size, complexity, and update frequency. For example, a catalog with a small number of products and infrequent updates may be able to take advantage of static generation, whereas a large catalog with frequent changes may lean into an aggressive caching strategy that relies on webhooks.