What is BigCommerce Stencil?

(00:02)
Hey, you guys! Are you wondering, What the heck is this BigCommerce Stencil thing that everybody keeps talking about? They keep saying, You need Stencil, you need Stencil, blah blah—but what is it, right?
In this video, we’re going to talk about what it is.
Before we get started, my name is Kal. I’m a developer, store owner, and I run the Ecommerce Growth Community for store owners just like you and me. It’s a free community. I’ll have a link below if you want to join. Every week I post more videos on ecommerce, so if you find this one helpful, hit the subscribe button and the bell to see and hear more from me.

What is Stencil CLI?
(00:28)
Let’s talk about Stencil CLI—what is it?
When they refer to “Stencil,” it’s actually a couple of things bundled together under this simplified term “Stencil.”
It’s technically a combination of Stencil CLI (a command line tool) that lets developers like me run a version of your theme on our local computer. It connects to your data in the cloud so we can see what the theme looks like with your real data. This helps us develop, test, and push updates live when they’re ready.
Before Stencil CLI, things weren’t as smooth for development because we had to make changes directly on a live site, which could get messy. So Stencil CLI is a huge benefit, both for developers and store owners, because we make fewer mistakes and work more efficiently.

Handlebars JS – The Templating Engine
(01:43)
But it’s not just Stencil CLI. It also includes Handlebars JS, a templating engine built into your theme. Handlebars JS allows us to insert little curly brackets { } in the code to access database fields.
For example, here’s a category page:
{ { name } } outputs the name of this category onto the page.
{ { url } } outputs the URL of the category.
This makes it super easy to access data fields like thumbnails, product names, and more.

The Power of If Statements
(02:56)
With Stencil, we can also use if statements, which adds a lot of power to our code. For instance:
If a category has products, then show the products.
Otherwise, show a message saying, “No products in this category.”
Before Stencil, we couldn’t do this level of logic. We had simple database tags, but if statements now allow for more advanced functionality—like only showing certain content based on conditions. This ability to add custom logic really improves what we can do with your store’s design.

Why Stencil is Better than Blueprint
(04:07)
Stencil CLI is great for developers because it lets us work without messing up live sites, and Handlebars JS lets us be more complex in the code without slowing down your page.
JavaScript is useful, but too much can make a page load slowly. Handlebars allows us to do a lot at the initial page load, reducing the need for extra JavaScript, which improves performance.

Other Big Features in Stencil
(04:42)
Here are a few more big features of Stencil:
SCSS: This is a type of CSS (SASS + CSS) that allows developers to style pages more efficiently. It lets us nest styling, which is super helpful.
Front Matter: This controls things like how many products to show on a page, and it’s customizable on a per-category basis.
Stencil Utils: This is a lightweight library that allows us to do advanced things on your store without needing to create a full app for it.

Compatibility with BigCommerce Page Builder
(05:59)
One key thing to note is that Stencil CLI is required to use Page Builder in BigCommerce. The older Blueprint template system isn’t compatible with Page Builder.

Is Stencil Important?
(06:33)
So, is Stencil important to you? Well, there are still some people running Blueprint stores, and your store won’t fall apart without Stencil. But Stencil is faster, more flexible, and supports apps that depend on it. Overall, I recommend upgrading if it’s feasible for your store.

Comparison to Shopify Liquid
Stencil is similar to Shopify’s Liquid. So if you’re wondering about the comparison between the two, they’re quite alike in how they function.

Final Thoughts
(07:03)
If you found this video helpful, hit the like button and be sure to join our free Ecommerce Growth Community at ecommercegrowth.com.
If you need help with upgrading to Stencil or with your BigCommerce store, reach out to us at Epic Design Labs. I’d love to chat with you about your project.
Leave me a comment if you have any questions, and that might be my next video topic. Thanks so much, and I’ll see you next time!