How to Add a Shop All to Your Menu on BigCommerce

So first of all, when we look at the theme, this is just completely unvarnished. Right here, I'm gonna just take a screenshot so I can draw on this. So this is made up of two sections. First of all, this section over here is your categories. Right, and this section over here is your pages. Right? Now your pages are turned off by default in cornerstone and in many themes, I did another video showing you guys how to turn that on, it's in the settings.

I guess I can show you how to do it again, real quick. But let's say you want to add a shop all over here like this, right?
Let me show you how to do that without breaking your, you know, your awesome dynamic menu. So first of all, what a lot of people do, or what a lot of people want to do initially, is to go to product product categories.
And then they create a shop all.

And then they move everything under it. Right. But the problem if you do that is that now only your shot ball is actually going to show in the menu. So now you just lost this cool descriptive menu that you had, and people have to click to get in it. And now you got to worry about how does, how do those dropdowns look. And you can see they don't look that great way I have them at the moment.

So what's a better way to do it? First of all, you don't have to do it like this at all. So we can, I'm going to just take this away, I'm going to delete that shop all that I just created. Oops, I think I clicked the wrong thing. I'm going to click it and then delete it. There we go. All right, so now it's gone. Let me show you something that a lot of people don't know, which is that there is a default parent most category on Bigcommerce. Already without you doing anything.

So the place that that is at on every single big commerce store is slash categories.
This exists no matter what you can have your category set to show products, you can have it set set to show just the items in the current category. Even if there's nothing there. You can also change the way that the code is to show subcategory thumbnails to force people to drill down.

That's a whole separate video. But what we're talking about today is how to get this shop all here. So if we know that slash categories already exists, then we don't have to create a shop all parent category and then move everything into it as well as its current location. Then really the question is just how to get it to show up in the menu. You know, next to the stuff that's already there. So it'll say shop all made cat pond maintenance fish and plant care, right? So let me show you how to do that.

Oh, and first of all, let me show you where to enable those.
Those web pages if you don't have those turned on, you just go into themes, customize. Click on the little art easel. What do you call this, like the art like the palette, I don't remember the word for it. But you go into let's see Header Footer.

And then under this you would uncheck Hide links in webpages, that's what makes the webpages come back. So let me show you how to get the shop all link now that we know that the category already exists, it's just a question of how to get a link in there, right? Because the first half of your menu is all dynamic categories. And the last half of your menu is you know, dynamic pages now we could say, you know, put a sharp all link in your web pages menu and say just send that to a link and make that link categories.

But the problem with that is it's gonna it's not going to show up at the beginning of the whole menu is going to show up at the beginning of the web pages. So if I come back here and refresh it, you see it says here which looks stupid, right? It's not what we want, we want it over here.

So it's the first thing. So people are seeing the parent category, and then some of the child categories, and then pages, right. So let's go out of here. And I'm just going to delete this link that we created. And I'm going to show you guys how to actually hard code it into the menu. This is little bit, Cody, but not too bad, you can always show this video to your developer, or, you know, come and see my team.
Let's see. So we're gonna go to we're going to go into the theme, and we're going to go to edit theme files under Advanced.

And all of your pages reference components. And then within the, the common components folder, there is a header, and the header references a navigation menu. So we go to navigation menu, and then navigation menu references. Right here, you can see this is where it's actually looping through all the categories to build the category half the menu. And this is where it loops through all of the pages to make the pages half of the menu.

So what we actually need to do is we actually just need to stick an extra menu item right up here. And so what I'm going to do is I'm going to actually copy this code, that's one of the list items from the Pages menu. And I'm going to paste that right up here. We're going to fix the indenting. For my developer Enos, I gotta, I gotta have things lined up.

All right, so now it's roughly lined up.
And I'm just going to take some of this stuff out, because I don't want all of this stuff like I don't need this whole active pages thing.

So I'm going to make it say class href equals URL, I'm going to keep the, I don't know why like spread this out over so many lines. So area label, let's just name this shop all. So this is for people with disabilities and their readers that read it. Now, because we're not in the context of a loop, we need to change this name and this URL. So we already know that URL.

We're just going to hard code this and say, slash categories. If I can spell.
And we know what name we want to put, which is sharp off. So now let's leave.
Let's just call this something else. So now pages item, we're just going to call it shuffle. Alright, so we have our list item here, it's at the very beginning of the list. So it's going to show up in first position. And it says nav pages item. I like to leave this in here so that it doesn't mess up any potential styling. This one right here was really just designed to help us tell between what's a category what's a page and since this is really neither, I just made up made up my own little class.

Okay, so when I targeted later, we didn't add any classes here. Actually, we should add this we should add this class back in which is Neff pages dash action, just so we don't break any styling. So we have an anchor tag nav pages styling as the class href equals, and then there's the link, area label equals shop all I had an extra bracket there. So let me take that out.

We have the text of it. And here's where we closed the anchor. And here's where we close the list item. So if we do that, we just hit save now. So all we're doing is basically we're just hard coding one list item at the beginning of the list. That's it. Everything else in the menu. It's completely dynamic.

And this is a link that I mean, really, we're never going to need to change anyway. Because when would you want to not have your shop all link there. So I think it's perfectly okay to hard code this one link and have the rest all dynamic. So let's go back to the front end, we'll refresh it might take a minute because usually when you make a stencil change, it could take up to you know, a minute or two. And you see now that we have our shop also we can click into main cat. We got something we can click in the shop Hall. We've got everything else and we still have our dynamic category menu. We still have our dynamic Pages menu.

All right. Hopefully you guys found this helpful. If you did, subscribe and hit that bell and give me a like or something. Give me a comment. You know, tell me what your cat's name is something. Anything around and show me that you guys are watching these and be sure to Join our free commerce our free community of store owners at joint ecommerce growth.com. And I'll see you guys next time

Thanks