How to Edit Your Menu on BigCommerce

Hello, are you looking to edit your big commerce menu.

In this video, I'm going to show you a whole bunch of ways to do that.

Before we get started, my name is Kal, I am a developer, a store owner.

And I run a any community for e commerce Store owners just like you and me call ecommerce growth, I'll give you a link at the end, it's completely free if you feel like hanging out with us.

Each week, I post more ecommerce videos on this channel.

So if you do find this one useful, subscribe, hit the bell, and you'll see even more.

Alright, let me get started with my screen share.

And I'm going to show you guys all kinds of ways to edit menus and put links into your big commerce site.

Now on this one, what you're seeing here is this is just the base cornerstone, I've just taken out the stuff in the middle, haven't done anything to the actual theme.

So let me start out by just talking about the built in menu system.

And how this theme starts as well as a lot of other themes start, which is using their dynamic menu system to put links right here.

And this is actually made up of two menus.

So if I do an inspect and show you the actual code, you'll see that there are these list items right here, those are pulling from the category pages menu.

And then there's these other ones that say nav pages, item and page, these are pulling from the Pages menu.

So let me show you where those are and how to add them.

First of all.

So this is the the easiest way the built in way, which is to go into the backend of your store, which you can get to like your URL slash admin.

Go into products and product categories.

And you'll see that I have two categories here, category one, Category Two, which maps up to this right here.

Now whether your category category show up in the menu or not comes down to this green checkmark.

So if I uncheck this one, and go back to the front end and refresh, you can see category one disappeared.

So that's one way to get rid of a category from your menu.

However, if you mark this as not visible in the menu, this category is not actually going to be visible at all.

So if somebody goes to it, they're going to find a 404 page.

So keep that in consideration.

You may not want to make categories invisible.

As a result, you may want to maybe clean up your menu by nesting them.

So to nest something in big commerce, you can drag these up and down to change the order.

But if you drag it down and right, you can see it becomes a child of this other one.

So category one is a child now of category two.

And if I come back to the front end, and refresh it, then well it looks like I don't have hover showing but depending on your theme settings, this should show up as a drop down.

Now, if you can't get your theme to show dropdowns, maybe you need to talk to a developer maybe reach out to me, you can find my information down below.

But this is how you nest categories.

So we can move things around, we can change the order, like I just put category two in category one, and we can have lots of fun.

Now, the other part of the menu, this stuff over here, shipping returns contact us and blog comes from the Web Pages menu to get that kid to get to that we go to storefront and then web pages.

And we have a similar system here where we have green checkmarks.

And if I uncheck this on shipping and returns, come back to the front end and refresh, you see shipping and returns disappeared.

Now unlike the category system, if I go to the shipping and returns URL, it's not going to it's not going to mark it as a 404.

So just to show you this, there you go.

Get rid of that.

So you can see shipping returns still came up.

It's just not in the menu.

Now, similar to the category pages, you can nest in the View Web Pages menu system.

And let's see if let's see if this theme is set to show drop downs right now.

Oh, it's not.

So again, if if your theme isn't set up, it may be a checkmark somewhere in the actual theme to turn on dropdowns.

I know in Cornerstone theme, it can show subcategories by default, but it's not set to show some pages by default.

So that would be something that if you want dropdowns to show that you probably need to talk to a developer to get those put in it is a one time effort and it can totally be done and it could totally be dynamic, but that would be how you nest them.

So that's kind of how you use the main menu system.

Now there is, let's see, I'm going to show you this trick.

Let's show you this trick, right now, let's say, let's say we want to have a special category, let's call it, let's call it a sale category.

Let's call it hot, hot, let's just call it hot.

That's fun.

All right, click Save.

If I go back to categories, we'll see that there's now a category called hot.

Just like that.

And the way that this menu is set up is the categories are always on the left, and the pages are always on the right.

But let's say you wanted that hot category to not show up here, but instead to show up at the very end.

So we're going to have category category, Patriot vague page, and then category.

Let me show you a trick on how to do that.

First of all, we need to get this to be visible, but not show up in this order.

And so what we're going to do is we're going to create a Dead Parrot category.

So we're going to create a category, we're going to call it special.

And we're going to just put it right there, we're going to mark mark it as not visible in the menu.

So if I come back to the front end, you can see Nothing's different, we have the new category, and it should be here.

But it's not visible.

Now what we're going to do is we're going to nest this, we're going to nest the hotness category, under special, why we're going to do that so that it takes it out of the menu system.

But it leaves it still visible.

So if I go to view this category, you can see that I can see this category.

So it exists, it's clickable.

It's nested under special, but specialists not visible or in the menu.

So why are we doing this so that when we want to put this in the menu, we could take this URL, we're going to just take the bit after your domain name, so slash hot slash, we're gonna come back here and we're going to go to the Web Pages menu, we're going to go to storefront and then web pages, we're going to create another web page.

But we're going to instead of using the WYSIWYG to type some stuff in we're going to say, link it to another website.

And we're going to put the link slash hot in as the link and we're going to type in hot as the page name.

And that's all we got to do leave this checkmark, save and exit.

Now you can see in the Web Pages menu, now we have an extra item called hot and it's a website link.

And it basically points to that hot category.

So when I refresh now, look at that hot right at the end.

And so that's just mapping to that category, which is pretty cool.

Now, obviously, you know, you can use this link method to put links to other things.

Like maybe like, I'm not going to recommend this.

But maybe you wanted to do something like, you know, put a link to your Insta, right? If you're going to use a link that's off the site, then you need to have the full the full URL in here.

So if I come back, you'll see that save that.

Say, I do web pages, Insta Oh, it's at the end.

And there was so there it is Insta.

I don't recommend putting a menu link at all.

It's gonna point off site.

But if you were to do something crazy, that's how you do it.

Or like maybe you want to put a link to your like, you know, gift certificates.

Page, right, which I think is awesome.

Let's see.

Let me find my gift certificates page.

Oh, you know what, I don't have it turned on in the site.

So there is no gift certificates page.

Let's say we want to put a pointer to our sitemap.

We could take our sitemap link and come back in here and just change this link to the map and point it to sitemap dot php.

So whatever you want, you can add a manual link like that to your pages menu.

And you can imagine as you can imagine, you can get pretty creative doing that Alright, you can point it to whatever.

Once you get your developer to show dropdowns, you can do all kinds of stuff, putting things in Mega menus, and maybe cross referencing some categories.

Alright, so this is kind of how you leverage the main menu to do a bunch of stuff.

But on most themes, you also have some stuff up here.

So on the cornerstone theme, by default, we got these links up here that are kind of built in store links.

And they're all hard coded.

So there's nothing you can really do to them, as far as a dynamic when you goes.

But you also have like links down here in a footer, which I'm going to do that in a separate video.

So look, look in the description if you don't know how to edit your, your footer navigation, because that's kind of a whole thing.

But let's talk about how to get to these items here in the top bar.

Alright, so to do that, because these are hard coded up here in cornerstone and maybe in your theme as well, we are going to have to edit the template files.

So let me show you how to do that.

Or at least where to do that.

And you know, if it sounds scary, that's fine.

But at least you'll see how it's done.

So you can know that if you hire a developer, you know kind of what they're doing, if that makes sense.

Alright, so I'm running the cornerstone light theme.

Now, this is the base theme, this isn't a clone or anything like that, and Bigcommerce won't let you edit the base theme.

So what you actually have to do is make a copy of the theme.

So I'm just going to click Advanced, say make a copy, call it whatever you want.

I called it Cornerstone copy.

And then we are going to edit this and I'll show you how to get to those top items.

I'm gonna show you how to get those top items and where the main menu items are to actually.

Alright, this takes just a second.

So have you guys been? Alright, Cornerstone coffee.

Applause apply.

gonna apply this so that now we are using the copy and not the untouched theme because we again, we can't edit the untouched theme.

That's why it's the untouched theme.

So now that we have a cornerstone copy, and it's applied, we're going to click Advanced and edit theme files.

This takes me to the theme editor, which is one of the ways you can edit your theme files.

Now in here, it starts out showing us the homepage code, which is not what we're after.

Right now.

What we're after is in templates, components common.

And you can look in the header dot html If you want, which is the overall header file.

And you can see this calls some sub files.

Namely, this right here, the Navigation component is your top bar.

And then this stuff down here is your like main main menu system.

So the main menu is in navigation dash menu, and the top bar is in navigation.

So let's open those up.

So we're already under components comments.

So let's open up navigation, which is the theme file that represents the top bar on our site.

And so we have a search assignment or register a cart.

And so you'll see if you look in here, it's basically an unordered list with list items that represent all the all the links that we have up here, as well as some other potential links that haven't shown up yet.

So for example, the gift certificates link, which would show up there automatically if I had gift certificates enabled, and here's the search button, right, here's some social links that we don't have turned on.

And some more stuff.

Here's the login logout.

And here's the card.

So let's say we wanted to put another item up here, like to this, you know, to the left of search.

So what I'm going to do is I'm going to take the simplest list item, which is the gift certificates.

And I'm going to just go up here to the top of the list and paste another copy of it up here.

And so the reason I'm doing that is I just want to grab the code and make sure it has all the relevant classes and whatnot, so that I can easily change this to be something that is different.

So we're going to look at this and we have a list item and then end the list item we have an anchor, an anchor element.

And then within that we have the text, which is pulling some kind of gift certificate MESSAGE FROM THE Lang file.

So I'm going to change the text of this.

I'm going to just call it hotness and I'm going to take out this area label, cuz that's not relevant because we're changing this.

And I'm going to take the value of this href.

And I'm going to change it to point to this hotness page, which again, was slash hot.

So what I'm going to do, I'm going to put slash hot in there.

So I have a list item with the same class as everything else, I'm having anchored an anchor element with the same class as all the rest of them, I have an href, this point the hot with text of hotness, and I'm gonna go ahead and apply this.

The the, the online Theme Editor takes frustratingly long to save.

So you could be you know, watching the spinning wheel from 10 seconds to 25 seconds.

Sometimes when you're using the stencil file editor, it's much faster to use local editing, but you kind of have to get set up and be developer II to do that kind of stuff.

So if that's not, you just put up with a really slow save process on the theme editor.

Alright, so we saved our new list item just like that.

If we come back to the front end, then we will see hotness, and you can see that because we copied the classes and everything, it's pasted in there nicely, and it matches everything, it's got the same font the same way and all that kind of stuff.

If you paste something in there, and it doesn't match the rest, chances are you didn't paste in some of those classes.

Alright, so that's how to edit this.

This is how to edit this area up here.

But what if you wanted more, right? You can obviously hard code stuff and become a developer or hire developer.

Or let me show you one other cool thing about big commerce, which is the Page Builder.

I'm going to come into the backend under storefront, my themes, I'm going to click Customize.

This takes me to the Page Builder for big commerce.

And when you come in here, this can look different, depending on you know what theme you're on.

But in this particular theme, as it is right now, there is a couple of regions here.

And these all say drag and drop regions, some of them have this diagonal line background, and some of them are purple, and say global region.

But these are all regions.

The differences is that a global region, if you put something in it is going to apply on multiple pages, multiple templates throughout the site, wherever that region has been added.

Whereas these other ones here that just are the blue background, it's a drag and drop widgets.

If you pay us, if you put a widget into these spots, it's only going to exist on the instance of the of that exact page that you're putting it on.

So what we want to do here is we're going to use this global region.

And if you don't see a global region on your theme, and it doesn't mean that you can't have one, right.

As long as you're running a stencil theme, which all of the themes released I think since 2016, or 2017.

All of them have been stencil theme.

So as long as you're not on super old blueprint or older theme.

And if you don't know what that is, you don't have it, you probably have stencil.

Then even if you don't see regions here, you can have a developer add regions.

And it's really easy to add regions, not only in the places that I'm that you can see here, but also really wherever you can think of.

So you know, we customize top bars all the time to have maybe a region in the middle where they can drop in a free shipping message, and a region on the top left and the top right, so they can put in, you know, menus or whatever they want to put there.

Right.

So long story short on Bigcommerce, you can put a region anywhere you want.

It can be global across your whole site, it can be global across just the template that you want to be like just your category pages, for example, or just your product pages.

Or it can be something that's an individual page instance where you put a, you know, like an accordion on a product page, and it only shows up for that one product.

But you could also do a global region that shows up for all of the products at the same time.

You can go super deep with regions, they're pretty cool.

I want to show you guys these are the these are the Page Builder widgets that are available by default from big commerce.

And there's not really one in here for a menu.

You could get creative and use this HTML widget if you want to drag it in there and start writing HTML in it.

Or you can get a you can get my plugin, which my company has wrote called Epic page builder widgets.

Let me show it to you real quick and then we'll come back to this.

It's available in the App Store.

It's called Epic page builder widgets.

And at least at the time that I'm recording this, it adds all of these widgets to your store.

And the one that we're going to look at today is custom menu.

But there's lots and lots of other goodness.

And you can get this custom menu widget that we're talking about, for free in the plugin without buying anything.

So get it.

Alright, gonna go back to the customizer.

And I'm going to just scroll down to custom menu.

And I'm going to drag it into the purple region, because again, that's a global region.

So it's going to apply to all of the pages where that region exists, which I know that this is in the header, so it's going to be on all pages.

Now when I drag this in here, it looks like this.

And that's not looking that great right now, because it's vertical.

But if I come up here and go to these little three dots and go to settings, I can change this to be horizontal.

And I can center it, just like that.

And so maybe you want like an extra menu bar, for example, on your theme.

And your theme might not look like this and might not have like this main menu bar.

So maybe this becomes your main menu bar, instead of a sub menu bar, I can easily change the, you know, the font sizes of this, I can change the colors, I could change whatever, I'm going to click back and I'm going to go to the first link and call it hotness and link it to slash hot.

And I'm going to go to the second link.

And say this is my account page is going to go to count dot php, which I forget if there's a PHP on the end of it or not, but we're going to pretend like that's the right link.

And then let's say for this third one, this is going to go to the sitemap site, map dot php, I think.

But obviously, it could be whatever you want.

You know, this is just letting us have a simple menu.

There's no dropdowns available.

But if you need a simple menu, this is the easiest way to do it.

Think about the possibilities of using this custom menu widget in your footer to make your footer columns easily editable, or embedding a widget filled up here to give you a menu system up here that's easily editable or up in the top left.

No matter what using this widget is an extra way.

So you know a lot of people think that big commerce isn't that flexible.

But look at all the ways you guys that we could edit the menu.

I skipped one, which is hard coding a menu item in the main menu, which you really don't have to do because like I showed you here with the with the link method in the webpage is menu that you don't really have to do that.

But let's say you did want to do it, you can come back here to the header dot HTML, you can see that there is a call here to navigation dash menu.

And if I go into navigation menu, this is this is where the guts of that main menu system R.

And you can see that there's two URLs here unordered lists, and these represent the category.

an ordered list, which you can see, here's where it's looping through the categories.

And then the second URL is second URL is looping through the the Pages menu.

So if you wanted to come in here and say hard coded link, what you could do is you could here's the here's the pages loop, sorry, this was this was something else.

What you could do is take this list item right here, which again is just the simplest list item and paste it up here.

And just like we did in that top menu, we could change the name to be something like special link.

We're going to take out that area label and we're just going to change the href to be special, which this page doesn't exactly exist.

So I'm creating a broken page.

But there are some things to doing take all this stuff out.

We don't need to take this stuff.

This is all fine.

So if we just save that, that would give us a custom link right at the beginning of the menu.

Alright, so we went over editing the category portion of the main menu we went over editing the web pages portion of the main menu we went over using a link method to create a link to some other page type or to change the, you know, kind of change the order by putting a category at the end, instead of just the beginning, we went over how to hard code a link in the top bar.

And we went over using regions, and my, and my Custom menu widget to really unlock custom menus wherever you want to.

Hey.

So that is a lot of ways to edit menus and big commerce.

You know, this is all I do, you guys, there's a lot of ways to accomplish tasks.

And you know, a lot of figuring out the best way is just kind of knowing all the different options that you have.

These are some of them, I could probably think of even more.

But you know, it's very flexible this system.

Now, if you found this helpful, do me a favor, hit the like button.

If you're interested in joining our free community of store owners, you can do that at boom, joinecommercegrowth.com If you're looking for a dev team for your store, consider me over at https://epicdesignlabs.com And you know, I'm always looking for new ways to help you guys out sorry for hitting my table.

But you know, if you're stuck on something, or if you want to know something, if you would leave me a comment down below and that might be the topic of my next video.

I'm here to help. E-commerce is all I do.

Bigcommerce is almost all I do.

And it's a great platform and I'd love to love to help get you guys unstuck.

So leave me a comment.

Let me know what I can help you with.

And thanks so much.

I'll see you next time.