Stencil is BigCommerce’s theme engine. It incorporates industry best practices in technology, design standards, SEO, and allows developers to build a stunning storefront that engages shoppers and encourages checkouts on any device. Stencil themes are supported on the following browsers. Stencil is responsible for powering the BigCommerce Cornerstone theme.
The Store Design tool available on Stencil themes allows merchants to customize a storefront’s look and feel with no coding, making customizations possibble by a wide range of users. Store Design enables quick and easy customization of a theme’s colors, typography, banners, headings, carousel, and footer. It also enables customization of a storefront’s layout characteristics, such as the number of products displayed in various panels, category pages, and brand pages. For details, see Personalizing Your Theme (BigCommerce Knowledge Base).
BigCommerce Stencil themes are responsive, mobile friendly themes, allowing shoppers to have a first class experience across any device. 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.
The Cornerstone theme comes with three style variations that are each fully responsive and ideal for a large catalog. The variations include:
- Cornerstone Light
- Cornerstone Warm
- Cornerstone Bold
See the Cornerstone Light theme demo to experience a Stencil theme’s capabilities.
As the default theme on new/trial stores, Cornerstone is typically the first theme to support new theme-related features and improvements. See the BigCommerce Developer Changelog for the latest Cornerstone news and release notes.
Stencil Development Features
Stencil contains features that allow 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, developers 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 language, Handlebars.js. Handlebars.js 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. Foundation assets are located in these subdirectories in the base Stencil theme, Cornerstone:
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. Stencil does not support Foundation 6.x, due to incompatible updates introduced between versions 5.x and 6.x.
Edit HTML and CSS Files from the BigCommerce Control Panel
If you are more comfortable working in HTML and CSS, Stencil’s Edit Theme Files feature allows you to directly edit many of your theme’s files from the Control Panel. See Edit Theme Files to learn how (Youtube).
Page-specific Resource Definition
Stencil’s use of 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.
Blueprint (Legacy Framework)
If you are looking for information on Blueprint, BigCommerce’s legacy theme framework, you can visit Blueprint Themes.
This is a great place to get help from other developers who work on the BigCommerce platform. If you have BigCommerce specific questions this is the best place to ask. It’s also great for beginners to get assistance.
Are you a more experienced developer or have a programming language specific question? This is a good place to ask questions and get help. The developer community is the best place to get answers about the BigCommerce platform specifically.
If you need direct assistance, you can contact BigCommerce Support through Live Chat, Phone Support, or Email Support.