What is BigCommerce Stencil?

Hey guys, are you wondering what the heck is this BigCommerce stencil thing that everybody keeps talking about? They keep saying you need a stencil, you need a stencil, blah, blah, blah.

But what is it right? In this video, we're gonna talk about what it is.

And before we get started, my name is Kal, I'm a developer store owner.

And I run the E-commerce growth community for store owners just like you and me, a free community, I'll have a link below, you can join I feel like every week I post more videos on E-commerce.

So if you find this one helpful, hit the subscribe and hit the bell.

And you can see and hear more of me if you like.

Alright, so let's talk about stencil CLI.

What is it? Well, stencil, when they refer to stencil, it's actually a couple of things that they're kind of conglomerating into this simplified terms stencil.

It's technically a combination of stencils CLI, which is a command line tool.

This lets developers like me run a version of your theme on our individual computer that connects to your data in the cloud, to let us see what it looks like the thing that we're working on combined with your real data so that we can develop it, test it and then push it live when it's tested and ready to go.

That's a really nice tool.

And I remember before we had this, it was not as pretty doing development because you would have to do things in a way that just tried not to make a mess on a live site.

But you were doing it.

So stencil CLI is a huge, huge benefit to developers and to you as store owners because it means we're not going to make as big of a mess when we work on your site, which is great.

So it's not just stencil CLI though.

It's also handlebars, J S.

And so this is a type of code, a type of JavaScript that is inherent in your theme now is a templating engine.

And it lets us put these little curly brackets whenever we want to access database fields.

So let me show you the code and what that looks like.

This is a category page, for example.

And we have a field right here where it says bracket, bracket name, bracket, bracket, and that's basically going to output the name of this category onto the page, this is going to output the URL.

And so we can access all these database fields just like that.

And there are tons of them that we can access.

So here's the thumbnail for this category, for example.

And we could do something similar to that when, you know before stencil came out, when blueprint, the prior framework was out, we had simplistic database tags that we could do.

But what we couldn't do is something like this, an if statement.

And what this says is, if this category has products, then do this, otherwise do this.

So in this situation, what this means right here is if the category has products, then call this component in order to show all the products and if it doesn't have products then show this message that says there are no products in this category.

Now, this is a pretty simple thing, but there's so much stuff that we can do.

If statements, we can say, you know, if a custom field is present, then you know, output this table or whatever, if you know if the category name contains this, then you know change the page to look like this or, or whatever man it is.

There's so much stuff that we can do now that there are if statements and I say now that there are if statements as if it just happened, this was in 2016 with this came out.

But if statements and you know to be able to like, you know loop code-wise over all of your custom fields and pick out certain ones, very, very advanced stuff compared to the prior framework, which was called blueprint.

So stencil CLI is huge for us developers is huge for you to store owners because we make a class mess.

Handlebars, J S lets us just be more complex in the code and it lets us do a lot more stuff without putting more JavaScript on the page too.

Now, JavaScript isn't bad.

But having a ton of JavaScript can make your page really slow.

So being able to do things and handlebars that load at the time that the page loads as opposed to doing things with JavaScript which comes in after the page loads and alters the page.

It reduces delay on the page and reduces extra page load which is great for performance.

These are the two big things that you know where are the core components of the stencil? What we call stencil, so it's stencil CLI plus handlebars.

There are a couple of other big features that are part of the stencil framework that we didn't have before, namely, a type of or format of CSS called SCSS, which is, SASS plus CSS, that's, you know, that just refers to how we style things.

And we can nest styling, which is pretty cool as developers.

And I know that's, you know, super tech speak.

But it's cool.

Let's just say that.

It also includes front matter.

So this is what we use to say, you know, how many products can show on a page.

And we could specify that on a per-category basis.

And we got stencil utils, which is kind of like an API light library that we can use to do some pretty advanced things in your store.

Without having to make a whole app for it, which is pretty cool.

So that's the stuff.

That's all part of it.

In addition, you have to have stencil CLI to use the Page Builder in big commerce.

So it just wasn't compatible at all, with the blueprint, or template system.

And so, hopefully, you've learned a little bit about what everyone's talking about when they say stencil.

Is it important to you, I mean, there are still people who run a blueprint store, but your store is not going to fall apart.

But again, stencils faster.

There are more things that you can do with it.

There are apps that depend on it.

And it's just a lot better in every way.

So I recommend upgrading if it's at all feasible for you.

And I wanted to just kind of shed a light on what this thing is a man because like everybody just says stencil because of stencil and stencil.

And it's like well, what is this? And then what is Shopify liquid? Well, here's a hint Shopify is liquid and stencils are very similar to each other.

So yeah, I'll just say that.

Alright, if you found this helpful, hit the like button and be sure to join our community of store owners free community store owners at econ joinecommercegrowth.com.

If you guys need a developer for your site, or if you're considering moving over to stencil, you need somebody to help you get there.

Reach out to us at EPA design labs.

I'd love to chat with you about your project.

I'm always looking for new ways to help you guys out so whatever questions you have, or whatever you're stuck on with big commerce, leave me a comment below and that might be my next video.

Thanks so much, and I'll see you next time.