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.
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’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:
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.
For more information, see the Event Hook Overview.
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: