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:
- Editing Stencil Theme Files
- Getting Started with the Stencil Framework (Video overview of copying and editing a theme’s files)
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.
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):
- SEO Do’s and Don’ts
- Developing a Keyword Strategy
- SEO Success Essentials
- Advanced SEO on BigCommerce
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