Stencil is BigCommerce’s theme engine that allows theme developers to create beautiful, dynamic, and powerful storefronts. It powers BigCommerce’s Cornerstone theme, which serves as your framework for creating custom sites. The Cornerstone theme is available on GitHub and will be referenced throughout the course. Although Cornerstone is used as the example theme throughout the course, Stencil CLI will work with any Stencil themes from the Theme Marketplace.
Stencil incorporates industry best practices in technology, design standards, and SEO, allowing you to build a stunning storefront that engages shoppers and encourages checkout on any device.
The Stencil CLI enables developers to locally develop and customize 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 multiple devices, such as desktop, mobile, and tablet.
Stencil CLI runs on the Node.js runtime environment. Installing Node.js also provides the required npm package manager.
BigCommerce developers can customize storefront pages efficiently with the lightweight templating language, Handlebars. Handlebars allows you to embed dynamic and conditional logic onto your storefront pages.
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 Foundation framework version 5.5.3.
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 rendered with just a few keystrokes.
Stencil themes can access remote objects through event hooks, using the hooks to trigger defined events based on shopper behavior. This will allow you to collect product data and optimize a shopper’s experience. To facilitate theme-building, BigCommerce provides the stencil-utils client-side JavaScript library for managing event hooks.
Stencil allows developers to extend the features baked into Cornerstone by adding third-party JavaScript libraries.
Although this course focuses on the Command Line Interface (CLI) for advanced developers, there are three options available for editing and customizing themes.
Click the tabs below to learn more about Stencil theme customization options.
The easiest way to edit a theme is using Page Builder. Page Builder allows you to customize your theme’s elements such as colors, fonts, and product display settings to align with your brand identity. Additionally, its intuitive drag-and-drop interface lets you effortlessly construct visually appealing pages using a variety of content blocks.
For advanced users, Page Builder offers access to theme template files for granular customization.
