(00:01)
Hey guys, are you looking to add a “Shop All” to your eCommerce store? In this video, I want to show you how to do it.
Before we get started, my name is Kal. I’m a developer, store owner, and I run the eCommerce Growth Community for store owners just like you and me. Each week, I post more videos, so if you find this one helpful, subscribe and hit the bell… blah blah blah. Let’s go!
(00:36)
Alright, let me share my screen. This is the Cornerstone theme.
First, let’s look at the theme. This is just completely unvarnished right here. I’m going to take a screenshot so I can draw on it.
This is made up of two sections:
This section over here is your categories.
And this section over here is your pages.
Now, your pages are turned off by default in Cornerstone and many themes. I have another video showing how to turn that on. It’s in the settings.
I guess I could show you how to do it again real quick, but let’s say you want to add a “Shop All” link over here. Let me show you how to do that without breaking your awesome dynamic menu.
(01:20)
So first of all, what a lot of people do — or what a lot of people want to do initially — is go to product categories, create a “Shop All,” and then move everything under it.
The problem with that is now only “Shop All” is actually going to show in the menu, right? So, you just lost this cool descriptive menu that you had. Now people have to click to get into it, and you have to worry about how the dropdowns look.
(02:05)
As you can see, they don’t look great the 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. I’m going to delete the “Shop All” I just created — oops, I think I clicked the wrong thing — okay, now it’s deleted. Let me show you something many people don’t know.
(02:40)
There is a default parent-most category in BigCommerce already without you doing anything. It’s located at /categories, and this exists no matter what.
You can have your categories set to show products, show just the items in the current category, or even change the way the code shows category thumbnails. But today, we’re focused on getting the “Shop All” link in the menu.
(03:19)
Since we know that /categories already exists, we don’t have to create a “Shop All” parent category and move everything into it. The real question is how to get it to show up in the menu next to the other items like “Main Cat,” “Pond Maintenance,” “Fish and Plant Care,” etc.
Let me show you how to do that.
(03:55)
First, let me quickly show you how to enable web pages if they’re turned off in your theme. Go into Themes > Customize. Click on the palette icon (I forget the word for it), then go to Header > Footer, and uncheck the “Hide Links and Web Pages” option. That brings the web pages back.
(04:27)
Now, to add the “Shop All” link, the first half of your menu is dynamic categories, and the second half is dynamic pages. You could add a “Shop All” link in the web pages section and link it to /categories, but the problem is it’ll show up with the web pages, which looks awkward.
You want it at the beginning of the menu, right? So it appears with the categories.
(05:05)
To do that, I’m going to delete the link we just created and show you how to hardcode it into the menu. It’s a little bit of coding, but not too bad. You can always show this video to your developer, or come see my team!
Go into the theme, click Edit Theme Files > Advanced, and find the component folder. Inside that folder, you’ll see the header file, which contains the navigation menu.
(05:43)
In the navigation menu file, you’ll find where it loops through categories to build the first half of the menu and loops through pages to build the second half. What we need to do is insert an extra menu item at the very beginning.
I’m going to copy a list item from the pages section and paste it at the top of the categories section. Let’s fix the indentation to make it nice and clean.
(06:23)
Now, I’ll take out some of the unnecessary code, like the active page condition. Let’s set the class as nav-pages-item, and for the URL, we’ll hardcode /categories. For the link text, let’s call it “Shop All.”
This aria-label is for accessibility, so screen readers can interpret the text correctly. Now, let’s save the changes.
(07:14)
All we’re doing is hardcoding one list item at the beginning of the list, and that’s it! Everything else in the menu is dynamic. The “Shop All” link will stay there forever, and you probably won’t need to change it.
(09:04)
Now, let’s refresh the page. After a minute, you’ll see the “Shop All” link is now in the first position. You still have your dynamic category menu and dynamic pages menu intact.
(09:32)
Hopefully, you found this helpful! If you did, please subscribe, hit the bell, give me a like, leave a comment, or just tell me your cat’s name. I’d appreciate anything that shows you’re watching these videos.
Also, don’t forget to join our free community of store owners at jointecommercegrowth.com. See you next time!
(10:06)
Thank you!
