Getting Started
Template Files
Templates Directory
Custom Templates
Customize Stencil Checkout
Handlebars Syntax and Helpers
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.

Stencil Theme Editor & Store Design

The Stencil Theme Editor is a browser-based tool that enables merchants to rapidly customize a theme’s look and feel with no coding.

Note: In October 2018, we launched an update for the Stencil Theme Editor experience. The new experience is called Store Design. You can easily make the switch from the Theme Editor to the Store Design experience. See our support Store Design article for more information.

BigCommerce theme developers’ configuration choices determine which theme aspects merchants can customize, and the range of choices for each aspect.

Stencil’s Theme Editor graphical interface enables merchants and store administrators to make styling changes to the theme currently applied to their storefront.

As a theme developer, you have the capability to define which style settings appear in the Stencil Theme Editor. You can grant access to colors, fonts, display/hiding of page features, and number of products/entries to display per feature.

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.