> 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. # About Stencil Stencil is BigCommerce's theme engine. It incorporates industry best practices in technology, design standards, SEO, and allows developers to build a stunning storefront that engages shoppers and encourages checkouts on any device. Stencil themes are supported on the [following browsers](https://support.bigcommerce.com/s/article/Themes-Supported-Browsers). Stencil is responsible for powering the BigCommerce [Cornerstone theme](#cornerstone). The [Page Builder](/developer/docs/storefront/stencil/content/page-builder) tool available on Stencil themes allows merchants to customize a storefront's look and feel with no coding, making customizations possible by a wide range of users. Page Builder enables quick and easy customization of a theme's colors, typography, banners, headings, carousel, and footer. It also enables customization of a storefront's layout characteristics, such as the number of products displayed in various panels, category pages, and brand pages. For details, see [Personalizing Your Theme](https://support.bigcommerce.com/s/article/Stencil-Themes?language=en_US). BigCommerce Stencil themes are responsive, mobile friendly themes, allowing shoppers to have a first class experience across any device. Each Stencil theme can contain one to four variations. You can optimize individual variations for specific markets, audiences, and styles, while still managing and distributing all of these variations as one theme. ## Cornerstone > **Note** > > With PCI 4.0, scripts now require nonce-based authorization, integrity checks, and justification. To stay compliant, upgrade your Cornerstone theme to version 6.16.0 or later, which supports this change. BigCommerce's [Cornerstone](https://github.com/bigcommerce/cornerstone) theme is the building block and starting point for rapidly developing themes for BigCommerce. Cornerstone is available open source on [GitHub](https://github.com/bigcommerce/cornerstone). Cornerstone comes in three, fully-responsive variations: * Cornerstone Light * Cornerstone Warm * Cornerstone Bold See the [Cornerstone Light theme demo](http://cornerstone-light-demo.mybigcommerce.com/) to experience a Stencil theme's capabilities. As the default theme on new stores, Cornerstone is typically the first theme to support new theme-related features and improvements. See the [BigCommerce Developer Changelog](/developer/changelog) for the latest Cornerstone news and release notes. ## Stencil CLI The Stencil CLI enables developers to locally develop and customize on any Stencil theme with no impact on a merchant's live storefront during the development process. When developing locally, developers have access to real-time Browsersync preview and testing across desktop, mobile, and tablet devices/viewports. Stencil CLI runs on the [Node.js](https://nodejs.org/en/) runtime environment. Installing Node.js also provides the required [npm package manager](https://www.npmjs.com/package/npm). ## Flexible templates Stencil's logic based templates allow BigCommerce developers to customize storefront pages efficiently with the lightweight templating language, [Handlebars.js](https://handlebarsjs.com/). Handlebars.js allows you to efficiently embed dynamic and conditional logic onto your storefront pages. ## Powerful CSS stack Stencil themes support both **Sass** and **SCSS**. Developers can use these popular CSS pre-processors to nest CSS properties, variables, and mix-ins. Cornerstone uses a BigCommerce SCSS Framework [Citadel](https://www.npmjs.com/package/@bigcommerce/citadel), which is built on top of [Foundation](https://foundation.zurb.com/sites/docs/) `v5.5.3` (Foundation `v6.x` not currently supported). Foundation assets are located in the following directories: * assets/scss/settings/foundation/ * assets/scss/components/foundation/ ## Front Matter Stencil's use of **YAML Front Matter** allows developers to request only the objects needed on the storefront, increasing page speed and allowing developers to define the content to render with just a few keystrokes. ## JavaScript event hooks Stencil themes can access remote objects through event hook and use the hooks to trigger defined events based on shopper behavior. This will allow you to collect product data and optimize a shopper's experience. To facilitate theme-building, BigCommerce provides [stencil-utils](/developer/docs/storefront/stencil/utils/reference) -- a client-side library for managing event hooks. ## Pre-rendered Checkout pages All stencil themes utilize the [Speculation Rules API](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) to pre-render checkout pages, improving performance and user experience. **Pre-rendering** means the browser begins loading a page in the background (for example, when a shopper hovers over or is likely to click a checkout link) so that it appears almost instantly when opened. ### Limitations * Currently only works for non-custom checkout pages. * Currently only works if the shopper is using Google Chrome and Edge based browsers. Check [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API#browser_compatibility) to see latest browser support. * Does not work on iOS. * The checkout won't pre-render if the shopper updates their cart on the cart page. > **Note** > > If you are hosting your own analytics you'll need to make changes to your implementation to ensure compatibility. See our [hosted analytics documentation](/developer/docs/integrations/platform-solutions/analytics-with-bodl) for more information. > **Note** > > Custom checkout pages are not supported. This includes the B2B Edition checkout and any custom checkout pages built with the [Checkout SDK](https://github.com/bigcommerce/checkout-sdk-js) or forked from [Open Checkout](https://github.com/bigcommerce/checkout-js). ## Blueprint (Legacy framework) For information on Blueprint, BigCommerce's legacy theme framework, see [Blueprint Themes](https://support.bigcommerce.com/s/article/Blueprint-Themes?language=en_US). ## Support ### [Developer Community](https://support.bigcommerce.com/s/community) This is a great place to get help from other developers who work on the BigCommerce platform. If you have BigCommerce specific questions this is the best place to ask. It’s also great for beginners to get assistance. ### [Stack Overflow](https://stackoverflow.com/questions/tagged/bigcommerce) Are you a more experienced developer or have a programming language specific question? This is a good place to ask questions and get help. The developer community is the best place to get answers about the BigCommerce platform specifically. If you need direct assistance, you can contact BigCommerce Support through [Live Chat, Phone Support, or Email Support](https://support.bigcommerce.com/s/contact). ## Resources ### Related Articles * [Page Builder](https://support.bigcommerce.com/s/article/Page-Builder) (BigCommerce Knowledge Base) * [Personalizing Your Theme](https://support.bigcommerce.com/s/article/Stencil-Themes?language=en_US) (BigCommerce Knowledge Base) ### Sample Apps * [Cornerstone Theme Demo](http://cornerstone-light-demo.mybigcommerce.com/) ### Additional Resources * [stencil-cli Repository](https://github.com/bigcommerce/stencil-cli) (BigCommerce GitHub) * [Cornerstone Repository](https://github.com/bigcommerce/cornerstone) (BigCommerce GitHub) * [Cornerstone Theme Manual](https://support.bigcommerce.com/s/article/Cornerstone-Theme-Manual) (BigCommerce Knowledge Base)