BigCommerce Catalyst Storefront
BigCommerce is a Software-as-a-Service (SaaS) platform that provides flexibility and scalability for companies of all sizes looking for a modern e-commerce solution. The BigCommerce platform fits nicely into a composable architecture and can integrate seamlessly with other headless integrations.
In 2024, BigCommerce released its Catalyst storefront, which helps development teams quickly get a modern, composable e-commerce storefront running. The storefront itself is fully customizable and developer friendly out of the box. Catalyst was built using Next.js and React Server Components, utilizes the BigCommerce GraphQL Storefront API, and is deployed to the Vercel cloud.
Technology Stack
At its core Catalyst is built on Next.js, a popular React Framework. Next.js has a ton of great features for building high-quality web applications, including route handling, asset optimization, data fetching, middleware, React Server Components, and more.
To power the e-commerce functionality, the BigCommerce GraphQL Storefront APIs add high-performance catalog, customer, and checkout functionality to the Catalyst Storefront. Built-in session management and the BigCommerce CDN, which powers asset hosting and image optimization, ensure that the Catalyst Storefront is fast anywhere in the world.
Catalyst can be easily deployed to Vercel, a popular and powerful Frontend Cloud. Vercel’s platform has been built to include many products, but at its core Vercel is a scalable, high-performing frontend-as-a-service provider. Vercel’s global network allows the Catalyst storefront to be hosted and delivered worldwide while also giving teams the flexibility to add webhooks, run serverless functions at the edge, and integrate via a command line interface (CLI) and API.
Other great features include extensive documentation and the Catalyst UI Component Library. This gives dev teams a set of components built on best practices. Out of the box, Catalyst delivers Lighthouse scores of 100 for performance, accessibility, and SEO, making Catalyst a great performance-centric starting point for any e-commerce project.
Using the Storefront
Out of the Box
Without any customizations, the Catalyst Storefront is a great jumping-off point for an e-commerce site. The homepage has a few basic components (hero slider, featured products grid, and newest products slider). The header has your basic components (logo, search, account, cart, and menu), while the footer pulls in fragments from your storefront (contact information, social media links, copyright information, and payment icons).
There are 33 pre-built components in the Catalyst codebase. This is an excellent foundation for a component library. Developers can customize these components or add new components for additional features.
Search
Search is powered by BigCommerce out of the box, with typeahead and a search results page.
Product List Page
There is a Product List Page with filters, sorting, and many other common features.
Product Detail Page
The Product Detail Page has most of your basic functionality, including an image carousel, variant pickers, add to cart, wishlist, discounted pricing, description, details, reviews, and related products. When you add to a cart, there is a built-in toast-style notification as well.
Cart
The cart page has basic cart item information, as well as the ability to update the quantity of each item or remove it from the cart. The storefront also includes a shipping cost estimator and coupon code form.
Checkout
Catalyst utilizes the default optimized one-page BigCommerce hosted checkout. This ensures the Catalyst Storefront never collects or transmits personal identifiable information, simplifying PCI compliance. There is a guest checkout flow as well as an authenticated checkout flow. Frontend error handling is set up and working out of the box, and the coupon/gift certificate form persists to checkout as well.
Lighthouse Analysis
BigCommerce states that its storefront has Lighthouse scores of 100 for performance, Accessibility, and SEO out of the box. We only performed testing using the Mobile Device option. This option usually provides the lowest scores, as it’s a worst-case scenario for the network connection (slow 4G throttling down to under 2 Mbps).
Below are the results of our testing on the test site we set up. As you can see, the Catalyst Storefront scored very close to 100 for the performance, accessibility, and SEO tests.
Homepage
Product List Page
Product Detail Page
Cart
Composable Options
As we’ve discussed, the Catalyst storefront provides a fairly robust feature set out of the box. A team of developers could start with this codebase to quickly ramp up and customize the storefront to their set of designs and requirements. To make the Catalyst Storefront more business user-friendly, there are plenty of options to add to a composable architecture that could enable a business team to manage and update a site beyond what is available in BigCommerce itself.
In future posts, we will integrate and analyze each of the following options. This should provide more insight into their feature set, how difficult they are to integrate, and also the value they could provide to a business.
Contentful
Contentful is a popular headless Content Management System (CMS) that can be integrated with the Catalyst Storefront. Developers can build components to render content from the CMS in a structured way. This keeps your design consistent, and business users know what to expect when they add content to a page. Using a headless CMS also allows a business to use these components across channels, so the content can be delivered not only to a website, but also used in an iOS or Android app, blog, and many other channels.
Algolia
While the default BigCommerce search is built into the Catalyst Storefront, teams may opt to integrate a more advanced search product like Algolia to improve their site search. Algolia is an advanced product search tool that helps shoppers find what they need quickly. Algolia provides AI features and advanced browsing, merchandising, analytics, and recommendations.
Makeswift
Makeswift is a page builder that can be integrated with many platforms, including BigCommerce and Contentful. Makeswift enables developers and business users to edit page layouts, components, and content. Business teams can build engaging shopping experiences using content from their existing systems with less reliance on development teams.
Limitations
Missing Features
While Catalyst is feature-rich out of the box, there are some limitations to be aware of. The project began in early 2023 but has not reached parity with the Stencil Framework yet. The following features that are included in the Stencil Framework are missing from Catalyst:
Internationalization -- Full support for Internationalization is still in progress, with no date specified on the product roadmap. This includes both language and currency localization.
B2B -- There is no full B2B support at this time, but it is expected in a future release (no date specified)
Full coverage of customer-specific features -- BigCommerce is currently prioritizing the logged-in Customer My Account area, including but not limited to order history, customer profiles, etc. Other features that do not yet have full coverage in Catalyst are price lists, customer groups, and checkout for logged-in customers.
Optional Configurations
BigCommerce recommends users prioritize other configurations as well, including but not limited to the following:
A caching backend -- For example, using Vercel KV may improve the performance of the with-routes middleware.
The with-routes middleware overrides the default Next.js file-based routing behavior to support certain BigCommerce features in a way that allows user changes with the store control panel and APIs to have the expected effect on the storefront. The tradeoff is that this is a blocking API request required to render site pages, which has a performance penalty. Path-entity relationships are very cacheable, but Next.js middleware cannot use typical cache() functionality, so sites must use an alternative caching backend. Currently, there is a caching implementation that uses Vercel KV, which is automatically enabled when you connect a Vercel KV instance to a Catalyst storefront. BigCommerce plans to support other caching backends in future releases, such as a generic adapter for traditional Redis backends.
If you don't want to use the control panel or API-configured URLs on your Catalyst storefront and don't want to support storefront status checks, you can remove the with-routes middleware and gain a performance improvement.
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 benefit from static generation, whereas a large catalog with frequent changes may benefit from an aggressive caching strategy that relies on webhooks.
Set up a Demo Store
If you want to try the Catalyst Storefront yourself, there are a few ways to get started. If you are not hosting your storefront on the Vercel platform, you can use the CLI with prompts to create your project from the apps/core Next.js application directory of the Catalyst Monorepo, or you can fork the entire monorepo if you want more than just the Next.js project (things like docs, the storybook instance, Playwright functional tests, etc). If you are using Vercel, you have the option to deploy directly to Vercel using the Deploy button in the README.md file. This is the easiest path forward if you just want to play around with the storefront.
Prerequisites
If you don’t already have a Vercel account, you can sign up for one. It’s free. You’ll also need a git repository connected. For the purposes of this demo, we’ll be using a Github account. Connect that, and you should be ready to go.
Configure and Deploy Project
Once you’re signed up, logged into Vercel and have Github connected to your Vercel account, use the Deploy button to start the process of quickly adding a Catalyst Storefront to your Vercel projects. You’ll see a screen that looks like this:
Create Git Repository
If you want to change the git repo name, do that and then click the Create button to add a new repo with the Catalyst code. If that completes successfully, you’ll see this:
Add Integrations
Next you’ll need to connect Vercel with your BigCommerce account. If you don’t already have a BigCommerce Sandbox, you can follow these instructions to set one up. Click the Add button in the BigCommerce box under Add Integrations. A new window will open where you can log into your BigCommerce account. When that’s successful, that window will close, and you’ll see this screen
Deploy
The Deploy step should update to the Deployment queued… step. If it doesn’t, refresh the page.
Eventually, the deployment process will start.
This process will fail after a few minutes. If you open the Building accordion and scroll to the bottom, you’ll see some errors. You’ll probably also get some emails from Vercel saying the deployment failed.
Click on the Projects link in the top left of the window next to the Vercel logo.
Click on your project
Click on the Settings tab
Click on the Environment Variables tab.
Here we’ll need to add some environment variables so the deployment can complete successfully. If you look in the codebase, you’ll see a .env.example file. In there you can find the environment variables necessary to connect the Catalyst Storefront hosted on Vercel with the BigCommerce sandbox. Most of the environment variables were set up automatically by the BigCommerce Integration step, but there are two still missing from the Vercel project: AUTH_SECRET and TURBO_REMOTE_CACHE_SIGNATURE_KEY. To generate these values, run openssl rand -hex 32 in your terminal, but do not use the same value for both environment variables. Add the key-value pairs to the Environment Variables in Vercel.
Click the Deployments tab near the left side of the header, then click the 3-dot context menu near the top-most deployment.
Click Redeploy in the menu, check the Use existing Build Cache option, and click the Redeploy button.
That build should complete successfully. You can click the Project tab near the left side of the header, then click the Visit button. That will take you to your Catalyst Storefront!
