> This page is for Developer. > For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.bigcommerce.com/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server. # Getting Started ## Kickstart your storefront build Lower time-to-launch by using storefront themes and starters we've built. #### [Move fast with a customized Stencil theme](/developer/docs/storefront/stencil/overview) Looking to launch quickly? Start by modifying Cornerstone, the default theme for our built-in storefront framework, Stencil. #### [Go headless with our composable Catalyst framework](/developer/docs/storefront/catalyst/overview) Fast track your build with Catalyst's fully customizable UI kit and comprehensive GraphQL Storefront API client, optimized for Next.js and React server components. #### [Scale your WordPress store with BigCommerce for WordPress](/developer/docs/storefront/wordpress) Already using WordPress? We built BC4WP to help brands selling on WordPress scale their ecomm sites by replacing performance hungry plugins with the advanced capabilities and security of BigCommerce. > **Note** > > Want to build a storefront with technologies you don't see here? Check out the our tools and resources section for more options from BigCommerce, our partners, and our developer community. --- ## Choosing the right storefront BigCommerce provides developers multiple ways to build and customize ecommerce storefronts catering to different developer needs and use cases. This makes it crucial to understand their differences and similarities when choosing the right approach for your project. This guide will walk you through choosing between our primary storefront options, [Stencil](/developer/docs/storefront/stencil/getting-started) and [Catalyst](/developer/docs/storefront/catalyst), as well as a custom headless implementation. ### What is Stencil? Stencil is BigCommerce's traditional storefront option, 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 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 reference architecture for building modern, high-performance storefronts. Catalyst leverages Next.js, React, and BigCommerce's GraphQL Storefront API, enabling flexibility and speed while maintaining full control over the frontend experience. Catalyst is also integrated with the [Makeswift Visual Builder](https://www.makeswift.com), which allows users to fully customize the layout and design of their storefront without needing to get developers involved. > **Note** > > Catalyst is built with the [BigCommerce GraphQL Storefront API](/developer/docs/storefront/guides/graphql-storefront-api) which does not support all BigCommerce platform features. For a list of features and whether or not they are supported and to what extent in Catalyst, see the [Supported Features](/developer/docs/storefront/catalyst/getting-started) page. **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 - **Requires hosting** - you are reponsible for hosting your deployed storefront code \*\* Limitations of Catalyst:\*\* * **GraphQL Storefront API Limitations:** - The GraphQL Storefront API that Catalyst depends on does not support all BigCommerce platform features which means some features are not supported out of the box in Catalyst * **Hosting:** - You are responsible for hosting your deployed storefront code * **App Marketplace** - Apps from the App Marketplace are not all supported * **Themes:** - Catalyst does not provide a theme marketplace to choose from. However, you can customise the existing theme in code or by using Makeswift ### Custom Headless While Catalyst is a headless implementation, if you'd like to build a storefront using a different tech stack, you can do that as well. 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 Differences | 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 | Hosted with [Storefront Hosting](/developer/docs/storefront/catalyst/deployment/storefront-hosting/overview) (closed beta), or external (Vercel, etc.) | External (Vercel, AWS, etc.) | | API Usage | Directly integrated with BigCommerce backend | Storefront API (GraphQL) | Storefront API (GraphQL/REST) | | Customization | Limited customization | Fully customizable | Fully customizable | | Performance | Optimized via BigCommerce's CDN | Optimized via caching | Manual optimization | | Development Workflow | Theme customization via CLI | Git, CI/CD, and modern tooling | Git, CI/CD, and modern tooling | | Integration Support | Supports BigCommerce apps and some third-party integrations | Integrate with external APIs and third-party services | Integrate with external APIs and third-party services | ### 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 **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 --- ## Extend a storefront Leverage our APIs to craft unique experiences within any storefront tech stack. #### [GraphQL Storefront API](/developer/docs/storefront/guides/graphql-storefront-api) Use GraphQL for custom shopping experiences, efficiently querying all the data to render each part of the experience to effectively move shoppers through their journey, from cart to checkout. #### [Widgets](/developer/docs/admin/widgets-and-scripts) Create reusable content blocks for storefront pages, accessible for edits by non-technical users. #### [Multi-storefront](/developer/docs/admin/multi-storefront) Maintain multiple sites while centrally configuring a distinct look, feel, and pricing configuration for each shopping experience. --- ## Create a custom checkout experience When you need to go beyond our standard cart and checkout settings, we give you the ability to build your own. #### [Cart and checkout overview](/developer/docs/admin/checkout-and-cart) Learn how to create a custom checkout experience with our APIs and SDKs. --- ## Build a custom storefront Want to start from scratch? We'll show you how our platform can do that too. #### [Guide to headless commerce](/developer/docs/storefront/headless) Learn about which pieces of our platform will be used if you build a completely custom storefront from the ground up, along with examples and existing headless starters you can use as a reference. --- ## Additional Resources * [Catalyst Documentation](/developer/docs/storefront/catalyst) * [Stencil Documentation](/developer/docs/storefront/stencil/getting-started) * [BigCommerce API Reference](/developer/api-reference/about-our-apis)