BigCommerce’s Stencil CLI is a fundamental means of conducting high-performance, full storefront customization development. Whether you are building a theme entirely from the ground up or modifying Cornerstone, the Stencil CLI allows you to control your front-end development process. You are able to develop locally, preview your changes immediately and deploy your themes with ease – all of which provides for a smooth developing experience.

In this guide, we will take you through everything you need to know to begin with Stencil CLI. This will consist of installation and configuration, theme management and deployment techniques.

What Is Stencil CLI?

Stencil CLI (Command Line Interface) is BigCommerce’s local development environment built on the Stencil frame, which is their modern theming engine. The Stencil CLI aims to allow developers to take considerable advantages in customization by managing the structure, pieces and code logic of their theme.

In using Stencil CLI, developers are able to:

• Build and customize storefront themes locally
• Preview their changes in real-time without deploying them to a live store
• Use modern developing processes like SCSS, modular JavaScript and Handlebars
• Easily bundle and upload their themes to the BigCommerce control panel

This makes it the best solution for developers looking to create completely optimized and branded experiences.

Why Should You Use Stencil CLI for Theme Development?

Stencil CLI offers a real development environment compared to editing inside BigCommerce’s admin or a theme editor. You are able to:

• Work offline
• Use version control tools like Git
• Run automated build tools
• Execute more complicated customizations than you might be able to via the admin
• Establish scalable and maintainable code structure

Most importantly, it will improve your development and deployment speed significantly by allowing you to test and preview changes in real time.

What You Need to Get Started

You will need a few technical configurations to use Stencil CLI:

• Node.js installed on your machine (with a version compatible from BigCommerce)
• Git, which will be used to clone your theme repositories and their management
• Access to a BigCommerce store sandbox or production instance
• API permissions (Client ID, Access Token, Store Hash) from the store’s control panel to interact with the theme securely

These elements all create your Stencil CLI environment foundation.

Setting up your theme and Local Development

Once everything is set up you can start to download a theme—likely starting with Cornerstone, which is BigCommerce’s base theme, and also the most powerful. Cornerstone is a great foundation to build most eCommerce projects and can be further customized.
Once set up, Stencil CLI allows you to start a local server and carry out the following:

• Visually navigate through your theme
• Test changes to your templates, styles, and scripts
• Confirm responsive design and performance
• Find issues with layout or functionality

Everything you update in the local server shows immediately and gives you a living preview without impacting your live store. This can be beneficial for client reviews/approvals, internal proofer reviews, and debugging.

Making Customizations the Right Way

With Stencil CLI you have access to the entire theme file structure:

• Templates that control how the layout/structure of pages are created using Handlebars
• SCSS files that determine the styling and responsive design
• JavaScript modules that manage interactivity and UI behavior.

This model lets you create a fully custom, business branded design that matches your business goals, as well as utilize third-party services, custom widgets, and marketing automation tools that are located in the theme folder itself.
It is not just a matter of changing fonts and colors—it is about building an eCommerce storefront that is faster

Theme packaging and deployment

Now that you have finished customization and testing, it’s time to package your theme for deployment. Stencil CLI includes several complete packaging commands and packages your project into a zip file, ready for production where you can upload to BigCommerce using the standard process via the admin interface.

Once your theme is uploaded, it’s ready to:

• Set the storefront theme as the default
• Duplicate the theme for an A/B test
• Share the theme across multiple stores in multi-site environments

By controlling the entire packaging and upload process, you can ensure that deployment to your production site is clean, controlled, and repeatable.

We Can Help You with BigCommerce Theme Development

At Empirical Edge Inc., we are experts in BigCommerce theme development using Stencil CLI. If you want to build a high performance, best practice theme or change the stock layout, let our team of developers help you maximize your use of the Stencil framework.

Our BigCommerce theme development services include:

• End-to-End BigCommerce theme design and development
• Speed & mobile performance optimization
• Conversion-centric UI/UX improvements
• Integrating custom functionality, third-party tools, and marketing scripts
• Theme and ongoing support and maintenance.

From design to deployment, our focus is building BigCommerce sites that are scalable, SEO-compliant and do the job better!

In Conclusion

Stencil CLI is an excellent tool for BigCommerce developers who want to create custom, fast performing storefronts. Local development with the ability to preview in real-time, and an another area of flexibility for customizations, can greatly improve your workflow, while making it easy to go to market faster.

If you are looking to take your BigCommerce store to the next level – better speed, more performance, and a unique brand experience – Stencil CLI is the first step. Use this guide to help you start or let our experts create it for you!

Contact us to get started customizing your BigCommerce store today!