How to Use Body Classes in BigCommerce

Hey, there are you coding on big commerce and you're trying to figure out how to target your CSS or

JavaScript to a specific page or category or whatever, you're in luck. In this video, I'm gonna go over body classes that I think are key and killer for big commerce. This will be a little bit Cody, but if this is what you're looking for, you're in the right place.

Before we get started, my name is Kal, I'm a developer, a store owner. And I run the E commerce growth community for store owners just like you and me. Come join us if you're a developer.

And you know, every week I post more ecommerce videos. So if you find this one helpful, like or subscribe or hit the bell so that you can see more stuff like this. We're not you know, I'm not coding every every, every video with this one, we're going to be a little bit code here and show you guys a little bit of what is possible. All right, let me share my screen. And oh, yeah, that's me, I'm tell.

Alright, let me share my screen for real now. Okay, so I'm logged into this store here. And I want to premade theme, want to show you how to add these body classes. And first, let me actually show you the body classes that we're going to use. So these are them. So there's several different things that I commonly target.

And I want to be able to target like the type of page this is like, is it a page? Or is it a post? Or is it a category, this right here will tell me that as a body class, and it's gonna make sense when I show you this on the page, now, I prepend all of my body classes with something that talks about the type of body class that it is. So this is for to two reasons. Number one that I can really easily and clearly see from the body class itself, what type of class it is, but also to prevent it from conflicting with, you know, code that may already be there. For example, if I just put a page type in as a body class, then on a product page is going to give you a body class of product. But guess what, there's already classes on that page called product. And so the CSS can go a little bit haywire when now the body is classed as product as well as something else on the page.

And so by adding these pre pins, it just really reduces the chances of anything existing, conflicting with what we're putting on the page, while making it a little bit easier for you to see, you know, what this type of data is anyway, so take it from my experience and prepend it with this or something like this. So this will output the type of page that, you know, category product, default home page page, you know, that kind of stuff, that this is what's going to be put on the page when that happens.

Now, the rest of these are a little bit more conditional. And they're only going to come up in certain scenarios. And so I've surrounded these with if statements to say, like in this first one, if there's a customer group name present, meaning that if there is no customer group name present, if they're not logged in as something with a customer group, then this body class isn't going to show up at all just kind of makes it a little bit cleaner.

Because if there wasn't a customer group name president, then when this piece of it fires, it would just say customer group dash and then have nothing after it, which looks kind of weird. So by putting the if statement and just makes a little bit more elegant, and we'll only put the customer group name in there, if they have a customer group name.

Now, that's that explains the if statement here this, you know the before and after, here's the actual body class that we're putting in.

So this one says customer group dash, and then we have stencil code, and within that stencil code is going to fire the customer group name. Now technically, the customer group name is not this, it's this right here. So customer dot customer group name is what outputs the customer group name. But let's say we have a customer group name called retail space customers, right?

So when we ended up having this pre pin there, and adding it, adding this to it, it's gonna say customer group dash retail with a capital R space customers so this customers isn't technically part of the class, it's just going to be a separate class hanging off the end of you know, dot customers which that's not good and this could again conflict but it's also going to make it a little bit weird for you to target because you're going to be targeting customer group dash retail when the customer group was really called retail dash customers. And if you had, you know, another group that was like retail, you know, other customers then that's going to say, you know, customer group,

dash retail, other customers. And so you can see that these two groups will be targeted under the same class. So that's where our friend dash case comes into play, what it's going to do is it's going to take this retail customers, and it's first of all going to translate it all to lowercase. So it just takes the caps out of the equation, and it takes the space and it turns it into a dash. And so what this would do is put that on the page as customer group, dash retail dash customers.

And, you know, the other one would be customer, customer group, dash, retail dash, other customers like that.

So you can see that makes it all part of one long customer, I'm sorry, one long body class.

But it's, you know, it's only one body class is not split out, because the spacing, fixes the spacing fixes the caps, and makes it just kind of all nice and clean. So that's what that dash case does.

So by putting, you know, each one of these scenarios, in an if statement keeps it nice and clean only shows up when it's when it should show up. And using dash case takes out any, you know, caps and spaces, making it just really, really nice. Now, there's also, you know, other types of casing and Bigcommerce, like camel casing.

You know, we've just arrived at dash case as the easiest and best solution consistently. So these are the classes that I that I use. So we first of all have page type, we have the customer group name, if President, we have the product ID if present. So this is only going to fire on a product page, because you know, category pages are gonna have a product ID neither What is it about page, for example, page dot title.

So this is only going to fire on? Well, a couple of templates, really, I think it'll fire on like the contact template or the I think it's called the contact template. And also, obviously fire on the page template.

It's not going to fire on your category, templates or your product page templates. So basically, you know, for most of your store, if it's not a category page, or product page or cart page, this is going to totally fire and put it in the title of the page. And again, this dash case, now we don't have dash case in the product ID one because that's actually going to be a number, not no letters. And there's no need for space or capitalization with numbers. So we just don't need dash case.

If if there's a category name presence, so this is only going to fire the category name, and it's going to output category dash category name index case, I always put this one in here to the category ID, I typically will target most of my anything off of the category ID because your IDs not going to change. Whereas you may at some point change the name of a category slightly, which could throw off anything that's targeted the category name, but I usually put both of these on here.

Anyway, because these are just like my my standard things I like to see after doing this for a dozen years. And then we have one more here for if brand dot name. And that's gonna say brand dash, wherever the brand name is, you can obviously do more than these. These are the ones that I do. And also one other thing to note here is I include a little space here inside the if statement so that if it does fire, it automatically adds a space after whatever the last.

The last guy is. So let's take out let's make this all be one line. And yeah, all right, so we're going to copy this in, we're going to come back here to our stencil file editor. So we again, I opened this stencil up, feels like an hour and a half ago, before he started explaining what the classes are. The place where we're going to put this in your theme, there should be the same file in every big commerce theme. And it's under templates layout base dot HTML. So this is your parent most container.

And you're going to come in here to where it says body and this stuff isn't usually here by default. And so I'm just going to pretend like it wasn't here you guys didn't see anything. You'll type body class equals quote quote and then paste in that digest here and save and apply once this is done saving, we'll go look at it on the front end and see what we see we're gonna inspect

So we're looking at the body here, and it says, class, class equals page type dash default. So that's the, that's the page type of the homepage, specifically, let's go to a category page. And now we have a couple more, a couple more body classes. So it says class equals page type dash category. So if you were going to target, you know, all of the category pages specifically, you could target that and say, background equals pink. And then this would be something that hits all of the category pages at the same time. Now this categories as category, dash, the dash basics, so you can see that's the one that outputs the title on the line. And then there's an additional class here for Category dash 43.

So that's the category ID. So if we typed page type dash category, that's going to target all of the category pages, whereas if we type just cat category, Dash 43, this would make just this one category pages, background be pink, so you can see, you know, there's some pretty fine targeting you could do with this.

Now if you're not Cody, I know that I've been super coding up to now. But this is what you need to know is that whatever theme that you're on, if you add these body classes, you know, look at all the different ways that you can target you know, your CSS or JavaScript or whatever, you could identify which individual category we're looking at, and say treat just the basics category different by targeting this class or this class.

Now, let's say we go into sanitation, you know, and you can see same thing page type dash category so that was common across all categories. But now category dash sanitation brings in the title and category dash 50 means that this is a different category ID if we go into let's go to a product page now you see here on this product page, page type dash product is targetable and, and product ID dash 6121 would be the ID for just this one product which is pretty cool. Let's see what else I mean.

Really, like that's it, that's that's the category I mean, that's the that's the body classes you need pretty much I wish they were all standard like that on all themes but they're not those don't really come on any themes but once you put them in there you know if you know a little bit of CSS and a little bit of you know JavaScript man you can you can target just about anything you know, anything on any page with this so, you know, I hope that this was helpful to you guys.

Hopefully this you know, made it really easy. I will try and paste these body classes that I use into the the YouTube description here below the video.

Hopefully remember if I don't leave me a comment, let me know to put them in there. But yeah, hope take that use of you know, make it really easy on yourself.

By the way, join our community here at join ecommerce growth.com. And if you need a developer, feel free to reach out to me at Epic design labs.com I really appreciate your time. Leave me a comment. Let me know what you guys are going to do. Let me know what you're struggling with. And maybe that'll be my next video.

Thank you so much. Bye