How to Edit the Homepage on BigCommerce

Hey guys, in this video, I'm going to show you how to edit your big commerce homepage. Before we get started, my name is Kal, I am a store owner just like you, and a developer. I've been building big commerce stores since 2010, about 1000s. And I'm here to help you guys figure this out. So let me share my screen, and I'll show you guys where you're gonna get started. Now Bigcommerce This is the cornerstone theme that you're looking at, this is what most people use, if you're using a third party theme, you know, the settings may be a little bit different, your site's probably going to be a little bit slower, is Cornerstone is super minimal. It's a little bit ugly out the gate, but you can do a lot with it with very little effort. So let me show you guys where to get to the main stuff.

In the back end, you go to storefront and customize. And you can get into the code and Bigcommerce. And you can you know code away on the homepage if you want. But with the customizer, aka the Page Builder, you know, there's a lot that you can do really easily. So when you come in here, you're on the Design tab by default, and you can click the Preview tab to see like a more accurate rendering of this. This is technically a preview though this is a render of what it looks like on the live store. But it's a render is not the actual front end. So if you click on the Design tab, there's all these page builder regions here that show up and purple and blue. And these are places where you can drag items here from the Page Builder like this image widget, if you guys wanted to put an image right here on your homepage, just like that. Now there are some elements on the homepage before you even do anything. Namely, there's this carousel.

There's some Featured Products row, there's are featured products row a new products row, there's technically a top products row that doesn't show up until you've actually made some sales. But this is like what's there by default. Doesn't look great. I really kind of hate their their built in carousel. But you can turn these things off and replace them with whatever you guys want. So if you want to change the the items that are in your carousel, first of all, let's show you where to do that. You go under storefront and then homepage carousel just like that. And here's where you can add, you can click into like slide to add a different image, slide three and a different image. Now, I'm not a big fan of homepage carousel.

So I would just turn this off altogether. But if you want to use it, then this is where you would do it. Just upload whatever images you want put in your heading, text, button, text and link. And then you'll have more stuff right there in your in your carousel, you could change your logo right here, by clicking to upload a new logo and then upload it, you can change your favicon right here as well. You could change where your social media links point to right here.

So there's a couple of different things that you can get to pretty easily just from this menu. But let's go back for the rest by going back into themes and then clicking into the Customize button again. So this brings us back into the customizer as mentioned. So the next place that I'm gonna recommend you go to is this right here where it says theme styles. And this is where we can set things like you know, maybe we want the header to be a different background color, right, but we want it to be a little bit gray, for example. Yeah, you can do stuff with like with the footer background stuff, too, let's make that gray to just a slight gray. So it's already starting to look a little bit better. Let's remove the Power BI big commerce and remove the brands that show in the footer, show some payment icons. So you can see like, there's just some things that you can turn on really easily right here in this you know, in this window.

So I'm showing my payment icons and stuff there now too, which is pretty cool. There's a lot of things that you can change color on right here. There's a homepage tab with a bunch of different color settings. And most importantly, this show carousel thing that I can uncheck. So now I don't have to see the the built in carousel anymore. Which as I mentioned, I'm not a huge fan of I don't like I don't like JavaScript. I don't like loading, you know more images than I have to because it's just gonna slow down my page. And there's lots and lots of you know, a B tests that have been done out there and result and studies that have been, you know, put out there to show that carousels just reduce your conversion rate so why have it so, I can also come down here to where it says number of featured products, number of popular products, number of new products, and I'm usually going to actually disable at least the most popular and the new products Just because if I want to show a bunch of products, I want to either use the Featured Products and maybe show a little bit more of them like eight. And then it's going to show me, you know, two rows of four instead of just one, row four, or I'll just replace them with widgets altogether.

So if you wanted to, you know, increase what's showing there, you could do that, just like that. And I'll just leave that there for a second. So what we have now is we have you know, header, that's header color change, we've had a footer with that we've modified slightly, we've removed some of the elements here from what's in between, if we click the Preview, this is basically how it looks right now. Now, it's nice to have a product grid, but we need some kind of hero, right, right up right up at the top. So let's click back into the design tab, we're going to go back up here to this top tab that says widgets.

And you can easily drag in an image from here, and let's just change this image, you can click Upload right there, and then upload here to upload a new image, I'm just going to pick one that I already have uploaded in the past though. Let's see, I'm going to choose this guy right here. And this is gonna be my hero. All right, so now I have a click on preview. Now I have a header, I got some kind of hero, I got featured products, it's looking better, I can do other stuff, like maybe adding a spacer in here just to kind of give it a little bit of space. Now the Featured Products, as I mentioned previously, you know, I have a whole video about feature products, there's pros and cons to using it, you may want to use it or you may want to just go fully manual. So let me show you how to go full manual. So if we go back into styles, go back onto the homepage, I'm going to scroll down and actually disable that.

Okay, so now I just have the hero and that's it. But maybe we still want to have products in here. So I'm going to click back into the widgets tab, click into the product set, and I'm going to drag that in there. And then I'm just going to manually pick out some products to show. Now the reason that I like this is because I could have 100% full control over, you know what exactly shows here. And this one doesn't seem to have a pictures, I'm gonna take that one out. And I'm just gonna, I'm just gonna add a couple here right now, this is fully manual. So I'm, I'm doing a search here for every product that I want to have. And once they're in here, I can drag them up or down to get them into exactly the order that I want them to be in just like that, which is pretty cool. So I really liked the widgets. You can also like drag in the text widget, or if you want to get my app epic page builder widgets app from the App Store.

There's a lot of free widgets in here. And you can you can put this heading widget in here and say something like hot products, right, or whatever you wanted to say. And I'm going to make that an h2. Just like that, Oh, I forgot to say that's why it still says you can use this widget products. Okay, click Save. You can get as fancy as you want with a widget. So maybe we want to drag a layout in here. And we can put an image on this side. And you know, text on the other side. Brings example, there's, there's an HTML block that you can use in here. I mean, there's just all kinds of stuff that you can do with the widgets. So really, you know, what I suggest is get in here, you know, get my app epic page builder widgets, it'll add like an extra dozen or so free widgets to what you can use. There's other widgets that are in there for a small upgrade if if you don't have a one time upgrade.

And you know, there's so much stuff that you could do here once you start playing with the widgets. So this is just a little bit of an introduction as to how you edit your homepage. We went over a little bit for you know, Header Footer colors, and you know how to get content in between. Obviously, like I could keep on going here. You know, all day long. Oh, you can. You can also use this hero banner here. And that's pretty cool. That gives you an image with some text, man. There's just all kinds of stuff that you can do with it. Yeah, so hopefully that's hopefully you guys found this helpful. Be sure to reach out to me if you need a developer with your store. So if you're playing around with this and you're just not getting it the way you want, or if you want someone to actually design this and make it look amazing, I'm just showing you guys how to use the tools. But knowing what to put in here and what size and getting the images, all that kind of stuff is an art and that's what I do. So reach out to me if you need somebody at Epic design labs and leave me a comment let me know what you guys are stuck on. I appreciate it. See on the next one.