# What Is Stencil in BigCommerce? The Theme Engine Explained

> What Stencil is, BigCommerce's theme engine: server-side Handlebars, Cornerstone, regions for widgets and how it differs from Catalyst.

URL: https://clione.ai/glossary/bigcommerce-stencil/
Lang: en

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](/glossary/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.[^bc-about-stencil] A Stencil theme is written with three things:[^bc-about-stencil][^bc-stencil-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**.[^bc-stencil-stack] What the theme paints arrives already written in the source code, without waiting for JavaScript to run: it is [server-side rendering](/glossary/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.[^bc-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.[^bc-about-stencil] The latest release is 6.22.0, from September 21, 2026.[^cornerstone-repo]

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](/glossary/bigcommerce-widget/) can only be placed in a region that exists. Most themes in the marketplace come with predefined regions.[^bc-widgets]

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](/glossary/bigcommerce-catalyst/) and custom _headless_ builds separate the storefront, are hosted elsewhere and read data through the GraphQL Storefront API.[^bc-storefront-options]

## In a store

What a theme ships can be read in its templates. In Cornerstone 6.22.0, the [product page](/glossary/product-page/) includes a [JSON-LD](/glossary/json-ld/) block of [Product](/glossary/product-schema/) that is filled with catalog data. Trimmed:[^cornerstone-repo]

```handlebars
<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](/glossary/mpn/) does not carry an empty line. The [GTIN](/glossary/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`](/glossary/id-json-ld/)**, no template in the theme publishes [Organization](/glossary/organization-schema/), [WebSite](/glossary/website-schema/) or [ItemList](/glossary/itemlist/), and [custom fields](/glossary/bigcommerce-custom-fields/) are painted on the product page but do not make it into this block.[^cornerstone-repo]

The product page regions in that version are two, `product_below_price` and `product_below_content`, and the [category page](/glossary/category-page/) has `category_below_header` and `category_below_content`.[^cornerstone-repo] 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.


Confusing Stencil with Cornerstone. Stencil is the engine; Cornerstone is a theme built with it, the one that ships by default.[^bc-about-stencil] A theme bought from the marketplace or developed by an agency is Stencil too, but it brings its own templates, its own regions and its own markup, so what Cornerstone does says nothing about what yours does. The only way to know is to read its code or the HTML it generates.


## 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.[^bc-about-stencil][^bc-lab-custom-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.[^bc-stencil-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.[^bc-widgets]
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.[^bc-lab-custom-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.[^bc-storefront-options] With Stencil, BigCommerce hosts and serves the store, and the platform's apps plug into it.[^bc-storefront-options] The entries on [Catalyst](/glossary/bigcommerce-catalyst/) and [headless commerce](/glossary/headless-commerce/) explain what changes when you separate the storefront.

To keep going, the guide [from widget to published page](/guides/bigcommerce-widget-to-published-page/) follows the whole route on a Stencil store, and the [platform publishing reading path](/learn/publishing-by-platform/) orders the rest of the terms.