Add Products to the Homepage of Your BigCommerce Store
Dec, 23 2022

Add Products to the Homepage of Your BigCommerce Store

How to Add Products to the Homepage?

Hey there. In this video, I'm going to show you guys how to add products to your homepage on big commerce. And there's a couple of different ways you can do that. Before we get started, my name is Kal, I'm a developer in a store and are just like you. And if you find this video helpful, subscribe so you can see more ways to grow your store every week.

Video transcript

You guys may have like a carousel or something on here, this is just kind of the state of this store as it is basically, you can see that there's already some new products showing there. And it's just pulling whatever the newest products are, that have been loaded into my store.

So there's three feeds that are built into Bigcommerce stores right out the gate, one is the featured feed one is the new feed one is the popular products feed. Okay, so the new products feed will automatically just show whatever products were last added to the store, there's no control over it other than this is showing you the newest stuff.

So if you don't like that you should turn it off, the popular products feed will automatically show the products that have the most sales. Now if your store isn't launched yet, then none of your products have sales. So none of them can be the most popular products.

So you can't actually turn you can actually see anything with that until you start selling some stuff. The Featured Products feed super, super useful, because you can manually choose which products you want to feature, then that'll show up.

So let me start out by showing you guys how to make sure that you have these turned on and where you find the settings for them. To get there, you're going to go into the customizer, which let me go back out of here and I'll show you how to get here. So in the backend of your big commerce store, just click storefront themes, and then customize.

And this you know, these settings can be a little bit different from theme to theme. I'm showing you guys on the cornerstone theme, which is what most people in Bigcommerce use. And what most developers will recommend and most developers will build on. Cornerstone is just really, really good.

Even though it doesn't look that great either gate is very clean up a bull, if that's a word which is not but it's very clean, affable. And it's very minimal. So it runs fast right out the gate, which is really nice. Okay, so you can see that there's when I come in here, there's a bunch of you know, widget fields that I have in here and it looks crazy, you can click Preview to see what the page actually looks like.

So right now I just have a menu and I have a new products feed. Let's go back to the Design tab. And we're going to click on this little theme styles, art pallet, whatever you want to call that. And go to homepage on Cornerstone and scroll down to where it says products.

And here is where you can decide how many products you want to be showing as featured most popular and new products. So right now this is set to five. So it shows well it's the styling is showing only four, but there's total of five in that feed, which is why I can scroll over to the left. If I click Preview anyway, there's the fifth one, and then it ends after the five.

So with it's set to show for but half five, you may want to, you know show even more than that, just so that is worth the side scroller, right. And if you don't want the side scroller, right, then you can change that down to the number that actually shows which is four, and then I think the arrows will go away. At least in cornerstone, so they did.

Now again, most popular products is turned on because it's set to four, there's just none to show because nothing's been sold yet. So a lot of people were actually going to turn that off. And you can do that by just clicking on the number and then moving it to disable and number of Featured Products. Let's go ahead and leave that set to four.

And I'll show you how to feature your product real quick.
Alright, so I published it, it should be showing up to four items on the featured list on the homepage. And I clicked out of that. So I'm going to go up here to products and products view. And these little stars next to each one is how you feature product. So pretty easy. Just star all bunch of them.

There's a fancier way where you can start things where if you show like a filtered list like let's just filter this to whoops. Let's click search and say we only want to feature historical maps right? So I'm going to choose historical maps and click Search. And that has basically filter this to historical maps view.

And now I can either start On shove them, or I can click the arrow, go to bulk edit. And from the Bulk Edit screen, you can start things super, super quick Oh, I forgot to hit Confirm. But you can come here and click featured and then drag it down like a spreadsheet to start all that stuff.

And so now I have a lot of featured products that are chosen, I can't truly show that many because I think the max that will actually feed into the homepage is 25. I don't know if you can select more than 25. But 25 is more than enough, really. Okay, so I have a bunch more featured. So I'm going to call it back into storefront.

And then themes, because I want to see this actually happening. And then I'm going to show you guys one other way to get products onto the homepage that I think is a little bit cooler, potentially, the feature, the feature products is actually pretty nice. And you can feature things through the CSV, which makes it faster. There's there's a lot of good things about the future products.

And one thing about these two methods, these methods, the you know the default fields is that these product cards are styled exactly the same as all of the other product cards in your store. And so it's going to it's going to match perfectly, which is really, really nice. So you can see now that I'm showing featured products and new products, and that looks great.

But let me show you the other way to do it. So let me come in here, click on homepage. And I'm actually going to just disable both of these. So that now there's no automatic feeds showing on preview, so you can see there's nothing up my sleeve, nothing in my hat.

And I'm going to click up to go to this widgets thing appear widget thingamabobs. And one of the default widgets is called product set. Now there's additional product set, which is available in our app, which is epic page builder widgets, that adds even more widgets to your Bigcommerce store than what you see here.

I'm just going to make sure that I'm just gonna add this default one that Bigcommerce gives you for free. And you can see okay comes in, they're trying to show me four products, I guess. But they'll say like just product name, product name, product name, because this is all placeholder text. So what I'm gonna do is click add a product. And I'm going to just type in something to search for for a product.

And then I'm going to click to select it, and that will pretty well. So I'm going to click the plus sign to add a second product. And I'm going to just search for something there too. And then a fourth one or fourth one, I'm gonna learn to count the third one.

Now Now let's do the fourth one, I'm going to do the fourth one after the third one, that's what I'm going to do. And there you go. There's additional elements down here where you can say like, oh, maybe don't show the brand, you know, maybe don't show the price or something. Or maybe I want to style how the brand looks and make it you know, red or something.

There's a lot of things that you can do with this. And I really like using the widgets for this because you can, you can have as many of these rows as you want. You can I mean, you can make them look like a big grid, you can move them around, and they're completely 100% manual and your selection of which products you want to choose there. And so there's a lot that you can do really easily really quickly. And without code, which is awesome. So this is actually my favorite way. Featured widgets are my second favorite way.

And I pretty much use those two things for all of this type of stuff, period. Now, the drawback of doing it with the widgets is the styling of the cards is not exactly the same as what you get in in the other fields, because the other fields are going to match your product cards. Whereas these are nothing to do with the store wide product cards.

These are cards that were built for a widget, so they might just not match the code. Hopefully that makes sense. Actually, let me turn back on the homepage featured widget so you can see the difference and see what I'm talking about feature products right up here at the top. And then the widget product feeds right here next to it. And so you can see there, they're just different and that might be okay.

I think you're probably going to want to only use widgets if you're going to use widgets and if you're not going to use widgets and featured works pretty good. So basically side by side they're gonna look weird because they're styled different.

If the rest of your product cards inside your store styled like this in your home Big ones are stuff like that that to be honest, nobody but you and me is probably going to notice so it's probably okay all right you guys I really appreciate you guys being here. Hopefully this was helpful for you and be sure to reach out to us at Epic design labs if you need any help join our community at join ecommerce growth.com

Thanks so much and leave me a comment let me know what you guys need help with and that might be my next video. See on the next one