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.
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: