How to use If Statements in BigCommerce Stencil

(00:02)
Hey, you guys! Are you trying to figure out how to use if statements or what the heck if statements are in BigCommerce? Well, you’re in luck. In this video, I’m going to show you how.
Before we get started, my name is Cal. I’m a developer, store owner, and I run the eCommerce Growth Community for store owners like you. I’ll have a link at the end. Each week, I post videos about eCommerce, so if you find this one helpful, subscribe and hit the bell to see more.
Okay, I’m going to share my screen now.
(00:30)
We’re going to talk about if statements on BigCommerce. So, first of all, in this storefront, I have a theme. To customize a theme, you have to make a copy first. So if you’re working on an original theme, click “Make a Copy,” make that active, and then click “Edit Theme Files” to get into the Stencil editor.
If statements are the foundation of programming. They can be very basic or very advanced, depending on what you want to do. I’m going to show you the basics of how they work and how the syntax looks on BigCommerce.
To do this demo, we’re going into my theme and navigating to templates > components > common > header—just to give us a place to show off some if statement goodies.
(01:07)
An if statement says, “If this is true, then do this.” You can also add an “else” statement to say, “Or else do this other thing.”
The way this works in Stencil code is:
You start with curly braces, then type {{#if condition}}.
Then you put what happens when the condition is true.
Finally, you close it with {{/if}}.
Anything between those two lines will only run if the condition is true.
(01:58)
Let’s try it out. We’re going to say:
If the category name is “Apparel,” we’ll display “This is the apparel category.”
Here’s how that looks in code:
html
Copy code
{{#if category.name == "Apparel"}} <p>This is the apparel category.</p> {{/if}}
Now, let’s see it in action. Refreshing the frontend, you can see it output that sentence: “This is the apparel category.” If we go to a different page, like “Campsite,” it doesn’t show up because the category name isn’t “Apparel.”
(04:04)
Now, let’s add something else. We can include an else statement to display a different message when the condition isn’t met. Here’s how that looks:
html
Copy code
{{#if category.name == "Apparel"}} <p>This is the apparel category.</p> {{else}} <p>This is not the apparel category.</p> {{/if}}
On the “Apparel” category page, it still shows “This is the apparel category.” But on the “Campsite” page, it now says “This is not the apparel category.”
(05:09)
Obviously, I’m targeting just one thing by checking if the category is “Apparel.” But you could also say something like, “If the page type is ‘category,’ do this.” This would apply to all category pages but not to product pages or the homepage.
For example, on product pages, we might check, “If there’s a custom field, do this other thing.” Once you understand the basics of the if statement, there’s a lot of flexibility in what you can do with it.
(05:44)
To summarize, an if statement checks if something is true ({{#if condition}}) and then runs the corresponding code. You can add an else statement ({{else}}) to run different code if the condition isn’t met.
(06:23)
That’s the basic structure of an if statement. I’ll create more videos showing specific ways to use it, but this is a good starting point. If you’re just getting started with BigCommerce, this is pretty nifty.
Remember:
Start with {{#if}} to check a condition.
Use {{else}} for the alternative.
That’s about it! I hope this was helpful. Be sure to join our community at [join ecommercegrowth.com](https://join ecommercegrowth.com). If you need a developer, come to us at Epic Design Labs—we can do so much more than this. This is just scratching the surface.
(06:55)
Give me a comment, let me know what you’re going to do, and tell me what you’re stuck on. Every week, I’ll make more videos to help you guys get further with BigCommerce. Let me know what you’d like to see next. Thanks so much, and I’ll see you next time!