Choosing the right storefront for your business
Choosing between Stencil, Catalyst, or a custom headless implementation can be an intimidating fork in the road. This guide will walk you through how to make the right choice and what to consider as you’re building.
BigCommerce provides developers multiple ways to build and customize ecommerce storefronts, with two storefront styles officially supported and maintained by BigCommerce: Catalyst and Stencil. Both solutions cater to different developer needs and use cases, making it crucial to understand their differences and similarities when choosing the right approach for your project. Additionally, BigCommerce is well suited to building your own custom headless storefront with the tech stack of your choice.
Catalyst and Stencil each serve distinct purposes in the BigCommerce ecosystem. If you’re looking for modern, API-first development with maximum flexibility, Catalyst is the way to go. On the other hand, if you prefer a more traditional, theme-based approach with minimal setup, Stencil remains a solid choice.
Understanding the strengths and limitations of your options will help you make an informed decision when building your next BigCommerce storefront.
Let’s dive into the details!
What is Stencil?
Stencil is BigCommerce’s traditional theme engine, used for customizing storefronts within the BigCommerce platform. It’s an integrated, template-based design system that allows developers to build and modify themes using Handlebars.js templates, SCSS, and JavaScript.
Key Features of Stencil:
- Theme-Based Architecture – Uses predefined templates and layouts for easier customization
- Fully Hosted – Runs directly on the BigCommerce platform without requiring external hosting
- Uses Handlebars.js for Templating – Simplifies frontend development with logic-less templates
- Integrated with BigCommerce's Backend – Handles checkout, cart, and product rendering without needing API calls
- Optimized for Performance – Includes built-in caching and CDN delivery for fast load times
What is Catalyst?
Catalyst is BigCommerce’s headless and composable Next.js-based reference storefront architecture, designed to provide developers with a modern, high-performance framework for building composable ecommerce experiences. Catalyst leverages Next.js, React, and BigCommerce’s GraphQL Storefront API, enabling flexibility and speed while maintaining full control over the frontend experience. Catalyst leverages Makeswift Visual Builder, which allows users to fully customize the layout and design of their storefront without needing to get developers involved.
Key Features of Catalyst:
- Built on Next.js – Uses React and server-side rendering (SSR) for optimized performance
- Composability – Decouples the frontend from the backend, offering flexibility in design and functionality
- Makeswift Visual Builder – Allows you to customize the layout and design of your storefront
- Uses the GraphQL Storefront API – Fetches product data, categories, and cart details via GraphQL
- Fully customizable - Developers have full control over storefront design, UI/UX, client- and server-side functionality
- Supports modern development workflows – Works seamlessly with Git-based version control, CI/CD, and composable commerce architectures
What does a custom headless build look like on BigCommerce?
Building a headless storefront with BigCommerce’s GraphQL APIs enables a fast, flexible, and scalable ecommerce experience. By decoupling the frontend, you can use your preferred frameworks to create a dynamic, SEO-friendly site while BigCommerce powers commerce operations. The GraphQL Storefront API optimizes data fetching, improving performance and enabling seamless integrations. This modern, API-first approach allows for personalized experiences, custom checkout flows, and easy third-party integrations.
Key Features of Headless Builds:
- Numerous apps, integrations and plugins available and provide expanded functionality
- We recommend minimizing your plugin volume and keeping in mind that the most performant integration into BC isn’t going to be a plugin, but rather a direct integration into the platform (which is available with Catalyst)
Key Differences Between Catalyst and Stencil
| Feature | Stencil | Catalyst | Custom Headless |
|---|---|---|---|
| Architecture | Monolithic | Headless (Next.js) | Headless (Any framework) |
| Frontend Tech | Handlebars.js, SaaS, JavaScript | React, Next.js, GraphQL | Any (React, Vue, Svelte, Angular, etc.) |
| Hosting | Fully hosted by BigCommerce | External (Vercel, AWS, etc.) | External (AWS, GCP, Vercel, Netlify, etc.) |
| API Usage | Directly integrated with BigCommerce backend | Requires GraphQL Storefront API for data | Requires Storefront API (GraphQL/REST) for data |
| Customization | Limited to custom templates and client-side functionality | Fully customizable | Fully customizable, but requires more development effort |
| Performance | Optimized via BigCommerce’s CDN | Optimized via SSR/ISR | Depends on implementation and hosting |
| Development Workflow | Theme customization via CLI | Git, CI/CD, and modern tooling | Custom CI/CD setup based on tech stack |
| Integration Support | Supports BigCommerce apps and some third-party integrations | Easier to integrate with external APIs and third-party services | Fully flexible, but integrations require manual setup |
Choosing between these options
Choose Stencil if you need:
- A fully hosted, traditional BigCommerce storefront
- A quick time to market using theme-based development
- Built-in performance optimization without extra configuration
- Easier maintenance without managing external hosting
Choose Catalyst if you need:
- A modern, composable approach with React and Next.js
- Complete control over the entire frontend application
- A flexible API-driven architecture
- Close alignment between marketing and development teams
- A fast time-to-market for a well-architected composable storefront
Choose a custom headless build if you need:
- You want to build on a tech stack other than Next.js/React
- You want to build your own front-end from the ground up
Additional Resources:
- Catalyst Documentation (opens in a new tab)
- Stencil Documentation (opens in a new tab)
- BigCommerce API Reference (opens in a new tab)