What is Stencil in BigCommerce?

If your store is on BigCommerce and you do not have a separately built headless storefront, your store runs on Stencil, whether you know it or not. Stencil is not a particular theme but the engine the themes are built with for the store BigCommerce hosts: the thing that turns the catalog into the pages the customer sees. It matters to you because it is the theme, not the catalog, that decides what reaches each page's HTML: the title, the structured data, the specifications and the gaps where an app can add something.

How it works

BigCommerce defines Stencil as its theme engine, and it is what powers Cornerstone, its reference theme.⁠^{[1]BigCommerce Dev Center. About Stencil} A Stencil theme is written with three things:⁠^{[1]BigCommerce Dev Center. About Stencil}⁠^{[2]BigCommerce Dev Center. Stencil Technology Stack}

• Handlebars templates. Handlebars.js is a templating language: a file that looks like HTML with expressions in curly braces that insert data or decide what is shown. The data arrives as Stencil objects (the product, the category, the banners), and each template can ask for the ones it needs with a YAML front matter block at the top of the file.
• Styles in Sass or SCSS. Cornerstone uses Citadel, a BigCommerce framework built on Foundation 5.5.3.
• JavaScript, with a library of its own, stencil-utils, to react to what the customer does.

The sentence that matters most for SEO is in the technical documentation: in production, Handlebars instructions run on the server and generate the HTML the browser receives.⁠^{[2]BigCommerce Dev Center. Stencil Technology Stack} What the theme paints arrives already written in the source code, without waiting for JavaScript to run: it is server-side rendering.

To edit a theme without touching the live store there is Stencil CLI, a command-line tool on Node.js that spins up a local preview. For people who do not code there is Page Builder, which changes colors, typography, banners and the layout of some pages without code. Each theme can have from one to four style variations.⁠^{[1]BigCommerce Dev Center. About Stencil}

Cornerstone is the default theme of new stores, open source on GitHub, with three variations (Light, Warm and Bold), and BigCommerce offers it as a starting point for developing themes. Because of the PCI 4.0 rules on scripts, BigCommerce asks you to use version 6.16.0 or later.⁠^{[1]BigCommerce Dev Center. About Stencil} The latest release is 6.22.0, from September 21, 2026.⁠^{[3]BigCommerce on GitHub. Cornerstone, the default Stencil theme (release 6.22.0)}

Stencil themes also decide where outside content can come in. Regions are gaps the theme declares in its templates with {{{region name="..."}}}, and a BigCommerce widget can only be placed in a region that exists. Most themes in the marketplace come with predefined regions.⁠^{[4]BigCommerce Dev Center. Widgets API}

BigCommerce has three ways to build a storefront, and Stencil is the traditional one. According to its own comparison: Stencil is monolithic, BigCommerce hosts it with caching and a CDN included, it integrates directly with the backend and it supports BigCommerce apps, in exchange for a level of customization that the table itself calls limited. Catalyst and custom headless builds separate the storefront, are hosted elsewhere and read data through the GraphQL Storefront API.⁠^{[5]BigCommerce Dev Center. Getting Started: choosing the right storefront}

In a store

What a theme ships can be read in its templates. In Cornerstone 6.22.0, the product page includes a JSON-LD block of Product that is filled with catalog data. Trimmed:⁠^{[3]BigCommerce on GitHub. Cornerstone, the default Stencil theme (release 6.22.0)}

<script type="application/ld+json">
  { "@context": "https://schema.org/", "@type": "Product", "name":
  {{{JSONstringify product.title}}},
  {{#if product.sku}}"sku": "{{product.sku}}",{{/if}}
  {{#if product.mpn}}"mpn": "{{product.mpn}}",{{/if}}
  {{#if product.gtin}}"gtin{{length product.gtin}}": "{{product.gtin}}",{{/if}}
  "url" : "{{product.url}}", ... }
</script>

It reads like this. Each {{#if}} writes the property only if the product has that value, so a product without an MPN does not carry an empty line. The GTIN is written under the name that matches its number of digits: gtin13 for a 13-digit code, for example. And what is not there counts too: the node carries no @id, no template in the theme publishes Organization, WebSite or ItemList, and custom fields are painted on the product page but do not make it into this block.⁠^{[3]BigCommerce on GitHub. Cornerstone, the default Stencil theme (release 6.22.0)}

The product page regions in that version are two, product_below_price and product_below_content, and the category page has category_below_header and category_below_content.⁠^{[3]BigCommerce on GitHub. Cornerstone, the default Stencil theme (release 6.22.0)} They are the gaps where an app can place its widgets in a store running Cornerstone. Clione uses that route: on BigCommerce, its structured data graph is published with the Widget API and rendered on the server.

How to check it

1. See which theme you use and its version in the admin, under Storefront › Themes. If it is Cornerstone, compare the version with the 6.16.0 BigCommerce asks for.⁠^{[1]BigCommerce Dev Center. About Stencil}⁠^{[6]BigCommerce Developer Learning. Mini Use Case: Create a Customized Field}
2. Open the source code of a product page (Ctrl+U in Chrome) and search for application/ld+json. What you find there is what the theme writes on the server.⁠^{[2]BigCommerce Dev Center. Stencil Technology Stack}
3. Search for data-content-region on the same page to see the regions your theme declares; or query them with the Widgets API for the page template you care about.⁠^{[4]BigCommerce Dev Center. Widgets API}
4. Check that your custom fields show up in the HTML by searching for the value of one of them.
5. Before editing a theme file, make a copy. BigCommerce asks for it in its own exercises: always customize and test on the copy.⁠^{[6]BigCommerce Developer Learning. Mini Use Case: Create a Customized Field}

Related concept: Catalyst

Catalyst is the other way BigCommerce offers to build a storefront, and the difference is architectural. Stencil lives inside BigCommerce; Catalyst lives outside. Catalyst is a headless storefront built with Next.js and React, with server-side rendering, which reads products and the cart through the GraphQL Storefront API and is laid out with Makeswift. You host it yourself, and that API does not cover every platform feature, so some features and marketplace apps do not work out of the box. It does not have a theme marketplace either.⁠^{[5]BigCommerce Dev Center. Getting Started: choosing the right storefront} With Stencil, BigCommerce hosts and serves the store, and the platform's apps plug into it.⁠^{[5]BigCommerce Dev Center. Getting Started: choosing the right storefront} The entries on Catalyst and headless commerce explain what changes when you separate the storefront.

To keep going, the guide from widget to published page follows the whole route on a Stencil store, and the platform publishing reading path orders the rest of the terms.