Getting Started
About Stencil
Transitioning to Stencil
Installing Stencil
Authentication & Tokens
Running Stencil Locally
Advanced Installation Options
Template Files
Templates Directory
Custom Templates
Customize Stencil Checkout
Handlebars and Stencil
Handlebars.js
Handlebars Helpers
Stencil Object Model
Stencil Objects

About Stencil

What is Stencil?

Stencil is BigCommerce’s theme engine. It incorporates industry best practices in technology, design standards, and SEO, and allows you to build a stunning storefront that engages shoppers and encourages checkouts on any device. Stencil themes are supported on the following browsers.

In addition to the features listed below, Stencil allows merchants to customize a storefront’s look and feel with no coding, making it accessible to a wide range of users.

Stencil powers BigCommerce’s Cornerstone theme, which serves as your framework for creating custom sites. Cornerstone is available on Github and will be referenced throughout the documentation in order to demonstrate Stencil’s capabilities. See the Cornerstone theme demo.

Related Links:


Stencil Development Features and Technology Stack

Stencil provides the following features, allowing BigCommerce theme developers to create beautiful, dynamic, and powerful storefronts.

Stencil Command Line Interface (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, you will have access to real-time Browsersync preview and testing across desktop, mobile, and tablet devices/viewports.

Stencil CLI runs on the Node.js runtime environment. Installing Node.js also provides the required npm package manager.

Logic-Based Templates

Stencil’s logic based templates allow BigCommerce developers to customize storefront pages efficiently with the lightweight templating languge, Handlebars.js. Handlebars allows you to efficiently embed dynamic and conditional logic onto your storefront pages.

CSS and Design Assets

Stencil’s Sass and SCSS support allows developers to nest properties, variables, and mix-ins. Cornerstone uses a BigCommerce pattern library called Citadel, which is built on top of the ZURB Foundation framework, version 5.5.3.

Note: Stencil does not support Foundation 6.x, due to incompatible updates introduced between versions 5.x and 6.x.

Foundation offers the framework for creating a responsive theme. You have the option of swapping out Foundation for another framework, although doing so would require significant work.

Foundation assets bundled with Cornerstone are located in these subdirectories:

  • Cornerstone/assets/scss/settings/foundation/
  • Cornerstone/assets/scss/components/foundation/

Page-specific Resource Definition

YAML front matter allows you to request only the objects you need on the storefront, increasing page speed and allowing you to define the content to render with just a few keystrokes.

Javascript Event Hooks

Stencil themes can access remote objects through event hooks, using 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 the stencil-utils client-side JavaScript library for managing event hooks.

For more information, see the Event Hook Overview.


Store Design

Store Design is a browser-based tool that enables merchants to rapidly customize a theme’s look and feel with no coding.

Theme developers’ can customize the configuration of the Store Design tool. A developer’s configuration choices determine the customizable theme aspects and the range of choices that exists for each customizable aspect using the Store Design tool. For example, a developer can grant access to customization to colors, fonts, display of page features, and number of products to display per feature with the Store Design tool.

Stencil Theme Variations

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 comes with 3 variations: Cornerstone Light, Cornerstone Warm, and Cornerstone Bold.

Responsive, Mobile-Friendly Themes

BigCommerce stores powered by Stencil allow shoppers to have a first class experience across any device.


Key Components: Video Demo

Watch Stencil senior developer’s tour of Stencil’s key components:


Blueprint (Legacy Framework) Documentation

If you are looking for information on Blueprint, BigCommerce’s legacy theme framework, you can access that here.