(00:01) Introduction
Hello! Are you looking to edit your BigCommerce menu? In this video, I’m going to show you various ways to do that.
Before we get started, my name is Kal. I’m a developer, a store owner, and I run a community for ecommerce store owners called Ecommerce Growth. It’s completely free, and I’ll share the link at the end.
Each week, I post more ecommerce videos on this channel, so if you find this one useful, please subscribe and hit the bell to see even more.
(00:33) Overview of Menu Editing
Let me share my screen and show you different ways to edit menus and add links to your BigCommerce site.
What you’re seeing here is the Cornerstone theme with its default setup. I haven’t made any major changes to the theme, except removing some content in the middle. Let’s start with the built-in menu system that many themes, including Cornerstone, use.
The menu system is dynamic and made up of two parts:
Category Pages Menu: Displays links to your categories.
Pages Menu: Displays links to your website pages.
(01:48) Editing Product Categories in Your Menu
To start, you’ll want to navigate to your store’s admin dashboard by visiting your URL followed by /admin. Once there, head over to Products and select Product Categories.
Here, you can see I have two categories: Category 1 and Category 2, which map directly to the front-end links you see here.
Whether a category shows up in the menu is determined by this green checkmark. For example, if I uncheck Category 1 and refresh the page, it disappears from the menu.
However, be cautious! Hiding a category will make it completely inaccessible, resulting in a 404 error if someone tries to visit it.
(02:23) Nesting Categories for a Cleaner Menu
If you don’t want to hide categories, but still want to clean up your menu, you can nest categories. To nest a category in BigCommerce, simply drag one category beneath another.
For instance, I’ve nested Category 1 under Category 2. If I refresh the page, depending on the theme settings, it will display as a dropdown menu.
If you have trouble displaying dropdowns, it might be an issue with your theme. In that case, you may need to consult a developer, or feel free to reach out to me for assistance.
(03:36) Editing the Web Pages Menu
On the other side of the menu, items like Shipping & Returns, Contact Us, and Blog come from the web pages menu. To access these, go to Storefront > Web Pages in your admin dashboard.
Similar to categories, these web pages are managed through a green checkmark system. If I uncheck Shipping & Returns and refresh the page, it disappears from the menu.
Unlike categories, however, these pages will still be accessible through direct URLs even when removed from the menu.
(04:01) Visibility vs. 404 Errors for Categories vs. Pages
It’s important to note that removing a category from the menu makes it completely inaccessible (resulting in a 404 page), while removing a web page only hides it from the menu — the page remains accessible.
(05:14) Creating Special Categories (Example: Hot Category)
Let’s go through an example where you create a special category. I’m going to create a sale category called Hot.
Go to Categories, create a new category, and name it Hot. This will add it to the category list.
But what if you don’t want it to show up in the category section but instead want it at the end of the menu? Here’s a trick:
Create a “Parent” Category: Make a new category called Special and mark it as not visible.
Nest Your Special Category: Nest the Hot category under Special. Now, it remains visible and accessible, but hidden from the main category list.
To display the Hot category in the pages section of the menu instead, go to Web Pages, create a new page, and link it to /hot/. Now the Hot category appears at the end of your menu.
(06:04) Rearranging Categories and Creating Custom Menu Links
The way the menu system works is that categories appear on the left, and pages appear on the right.
If you want to change the placement, for example, to place the Hot category at the end of the menu instead of in the category section, you can create a dead parent category that hides the category from the main menu while keeping it accessible via URL.
(09:33) Linking to External Sites (e.g., Instagram)
You can also use the link method to add external links to your menu. For instance, you might want to link to your Instagram.
In this case, go to Web Pages, create a new page, and add the full URL to your Instagram. Make sure to use the full URL if you’re linking to an external site.
(11:15) Editing Hardcoded Menu Items in the Top Bar
Some themes, like Cornerstone, have hardcoded links at the top of the page. These are not part of the dynamic menu system and need to be edited in the theme files.
To do this, create a copy of your theme. Go to Advanced > Make a Copy, name the new theme, and apply it. Then go to Advanced > Edit Theme Files.
Look under Templates > Components > Common and open the header.html file. Here, you’ll see the top bar code and the main menu code. For example, you can add a new link next to the Search link by copying one of the existing list items and modifying it as needed.
(17:30) Using the BigCommerce Page Builder to Customize Your Menu
BigCommerce has a Page Builder tool that allows you to visually customize parts of your site. Go to Storefront > My Themes, and click Customize to access the Page Builder.
Here, you can drag and drop widgets into different regions of your site.
There are two types of regions:
Global Regions: Changes here apply across multiple pages.
Page-Specific Regions: Changes here apply only to the page you’re currently editing.
If your theme doesn’t include a global region, you can ask a developer to add one for you. Global regions are useful for adding consistent elements like menus or messages across your entire site.
(19:38) Adding Custom Menus with Widgets
You can also use a custom menu widget from the BigCommerce App Store to add and customize menus easily.
One example is the Epic Page Builder Widgets plugin, which includes a Custom Menu widget. This widget allows you to create custom menus and position them wherever you like on your site.
(23:09) Hardcoding Menu Items in the Main Menu
If you prefer hardcoding a menu item directly into the main menu, you can do that too. For example, go into the header.html file, find the navigation-menu code, and manually add new list items.
Just be sure to follow the structure of existing menu items to ensure consistency with the design.
(25:12) Recap of Menu Editing Techniques
To summarize, today we covered:
Editing the category portion of the main menu.
Editing the web pages portion of the main menu.
Using links to create custom menu items.
Hardcoding menu items in both the top bar and the main menu.
Using the Page Builder and custom widgets to create dynamic, customizable menus.
If you found this helpful, please hit the like button. If you’re interested in joining our free community, visit ecommercegrowth.com.
If you need a dev team for your store, consider us at Epic Design Labs. And if you’re stuck or need help, leave a comment below, and I may cover it in my next video. Thanks for watching!
