What is BigCommerce Stencil?

What is BigCommerce Stencil?

If you are still using the BigCommerce Blueprint theme framework, it’s high time that you switched over to their new STENCIL framework. I’ll show you how it works in this video!

The BigCommerce Stencil Framework

Blueprint, BigCommerce’s legacy theme framework, was built on a rigid, proprietary codebase, making it difficult for developers to customize and extend theme functionality. Stencil themes are built on non-proprietary, open-source code to minimize the learning curve for developers and to provide access to the best developers in the industry using BigCommerce Best Practices.

Basically, STENCIL improves the overall storefront experience for merchants and their customers. With enhancements in speed, security, and updates to your themes, this framework provides a more streamlined process for the everyday maintenance and tasks required to run a store.

Watch the full video below to learn:

  • How Stencil CLI helps developers create and test custom themes locally without affecting your live site.
  • The advantages of using Handlebars JS to access data fields and write custom logic directly in your theme’s code.
  • Key differences between Stencil and the older Blueprint framework.
  • The extra features in Stencil like SCSS (advanced styling) and Stencil Utils (a lightweight library for advanced functions).
  • Why upgrading to Stencil can improve your store’s performance and allow for greater flexibility in design and functionality.

Key Takeaways from the Video

To help you get a better understanding of what’s covered, here are the top takeaways from the video with timestamps:

  1. What is BigCommerce Stencil? – Stencil is a combination of Stencil CLI and Handlebars JS that allows developers to build, test, and implement themes more effectively. (00:02)
  2. How Stencil CLI Works – The Stencil CLI tool lets developers run a local version of your theme connected to real store data, ensuring that development and testing happen without impacting the live store. (00:28)
  3. Handlebars JS and Advanced Logic – With Handlebars JS, developers can easily access and manipulate store data fields, and use conditional logic like “if statements” to customize the display of content. (01:43, 02:56)
  4. Stencil vs. Blueprint – Stencil provides improved performance, better coding flexibility, and fewer mistakes compared to the older Blueprint framework. (04:07)
  5. Additional Features of Stencil – Stencil includes SCSS for advanced styling, Front Matter for customizing page content, and Stencil Utils, which allows developers to implement advanced functions without building an app. (04:42)

Why You Should Watch the Video

If you’re running a store on BigCommerce or considering a move to the platform, understanding Stencil is essential. Whether you’re a developer looking to optimize your workflow or a store owner curious about what goes on behind the scenes, this video will give you the knowledge you need to make informed decisions about your store’s theme and performance.

In just a few minutes, you’ll gain insight into how Stencil CLI and Handlebars JS can help create a faster, more flexible, and more reliable store. Watch the video above and see how upgrading to Stencil could be a game-changer for your business!

If you’re looking for a BigCommerce Development Agency with a lot of stencil experience, please reach out.

Full Transcript

(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!