Template Files
Templates Directory
Custom Templates
Customize Stencil Checkout
Handlebars Syntax and Helpers
Handlebars.js
Handlebars Helpers
Stencil Object Model
Stencil Objects

Transitioning to Stencil

Choosing a Development Path

Are you approaching Stencil from a different theming framework, like Blueprint, BigCommerce’s legacy framework? Or moving to the Stencil templating environment from a pure HTML and CSS-based design?

You have four (non-mutually exclusive) options for developing Stencil themes:

  • Find a Design & Solutions Partner
  • Light Customization using the Theme Editor
  • Light Customization using HTML and CSS
  • Adapting a Stencil Theme or Developing from Scratch

Find a Design & Solutions Partner

If you prefer to have an expert collaborator customize your theme, we recommend working with one of our certified BigCommerce Design & Solutions Partners. Reference the following resources to do so:

Light Customization with Stencil Theme Editor

Stencil can be customized without the use of any specialized development tools or techniques by using of the Stencil Theme Editor. The Stencil Theme Editor still enables customization of a theme’s colors, typography, banners, headings, carousel, and footer. It also enables customization of broader layout characteristics, such as the number of products displayed in various panels, category pages, and brand pages.

For details, see the following support resources:

Light Customization with HTML and CSS

If you are most comfortable working in HTML and CSS, Stencil’s Edit Theme Files feature allows you to directly edit most of your theme’s files from the Control Panel. For details, see the following resources:

Adapt a Stencil Theme, or Develop from Scratch

For complete control over a theme’s appearance and logic – including the ability to edit all theme configuration files – you will want to use the Stencil Command-line interface, also known as the Stencil CLI.

To learn Stencil CLI’s templating conventions, see Installing Stencil CLI. Also take a look at BigCommerce’s Getting Started with the Stencil Framework video playlist.


Front-Matter Quick Start

Stencil templates start with a section of “front matter” where you can and concisely customize each page’s design and layout details.

This front-matter section uses conventions from YAML, a simple, widely used markup language. If you haven’t used these conventions before, refer to our Front-Matter Overview.


Handlebars Quick Start

Stencil uses Handlebars.js to assemble dynamic content into the storefront pages that are displayed to shoppers. The dynamic content can be drawn from a few sources, like the store’s catalog.

Handlebars’ syntax is quite simple, and it allows you to accomplish powerful JavaScript operations with minimal JavaScript code. To learn more about Handlebars.js, see these third-party tutorials:


SEO Tips and Best Practices

Search-engine optimization (SEO) helps translate an elegant theme into a successful, high-conversion storefront. Because so many shoppers reach online stores through a search engine, a search-optimized site will be more visible – attracting more traffic.

The Stencil framework is designed for high SEO performance. However, you will want to keep SEO in mind as you build out each theme and storefront. For guidelines, please see these BigCommerce support articles (which are a series of intermediate to advanced chapters in our Guide to SEO):

Also checkout our Guide to Keyword Research.


Blueprint-to-Stencil Features Map

This following support and video resurces are designed to help you identify the Stencil counterparts to familiar Blueprint components.


Interacting with the BigCommerce API

Interacting with the BigCommerce API BigCommerce’s growing API resources enable application developers to create private scripts or apps that support a single store, or to create public apps offered to multiple stores via BigCommerce’s App Marketplace.

As a theme developer, you can rely on apps to enhance your themes’ capabilities, and to extend or complement the storefront features built into the BigCommerce platform. Popular app areas include inventory management, email marketing, coupons, reviews, shipping, tax accounting, and security. For more information, see BigCommerce’s:


Partnering with BigCommerce

Do we belong together? No formal business relationship is required to develop themes on the BigCommerce platform. However, consider applying to become a BigCommerce Design & Solutions Partner (DSP), in order to accelerate your development of new business and revenue. For details, see our:

  • Overview of BigCommerce Partnerships
  • Design & Solutions Partners – basics and application links
  • Technology Partners – basics and application links
  • Partnership Application