The menu or navigation in a commerce store is like a roadmap for customers. If it’s clear and well-structured, shoppers can quickly find what they need without frustration. A confusing or cluttered menu drives them away. Good navigation improves user experience, boosts sales, and keeps people on your site longer. It also helps with SEO, making your store easier to find online.

We currently have 2 menus in the store that consist of your primary and secondary menus. The primary menu is located in the navigation. You will most likely add a link to your homepage, shop page, category links, and other core pages.

The secondary menu will be located to the right of the search bar and consist of the “My Account”, ”Customer Help” and “Checkout” page. Now that you know about the location of each menu, let’s edit it.

First, go to your dashboard and then click on “Menus” under “Store Appearance”. Wait for the page to load.

Under “Edit Menus” make sure that your primary menu is selected because we want to edit it first. When you scroll down a bit, you will see all the different links that were added to your menu.

Remove, Re-order a link from your menu

To remove a link, you can click on the down arrow within its tab to open it up and then click on the red “Remove” link to delete it. You can do this to any of the links that you want to remove.

To move it around, you can click on the tab and move it to the desired position. You can also create a submenu under a different link by moving the tab underneath any of the links. You can have as many subcategories as you want.

Add a Link to the Menu

There are many different types of links that you can add and the most common are pages and product categories. Let’s add the sale category to the end of the menu. Click on “Product Categories” and then click on “View All” to see everything.

Select “Sale” and then click on “Add to menu”. Wait for the page to load and then click on the arrow icon to open it up. You can change the navigation label to something else like “Discounted Products”, but in this case, let’s leave it as “Sale”. Remember we do not want to clutter our menu.

Click on the “Save menu” for the change to take effect.

Creating a Mega Menu

A mega menu works great when you have a larger store with many categories, sub-categories, and featured products. You can also organize your menu in a way to display all of this in a more organized manner.

You do not have to use a mega menu if you have a smaller store, but we believe it will help with navigation once your store has grown a bit. Let’s see how the mega menu is going to look like on the frontend of the website.

We have created one for you under the “Women” category and you will see its effect once you hover over the link. The mega menu will open with all the sub-categories to the left and some of the featured products to the right.

Let’s edit the menu.

Go to your menu section again under “Store Appearance”. Scroll down to where you can see the tab or link called “Women” which is on the first level and let’s click on the arrow icon to open it up.

You will notice that under CSS Classes we have added the text labeled “full-width” which will turn any link on the first level of the menu into a mega menu. We have then added exactly the same category also labeled as “Women” under the main one into the second level. 

Creating Multiple Columns

Every link that you add to the second level will create an additional column on the mega menu. Let’s move all the subcategories to the second level so you can see what it is going to look like on the front end.

Go to the front page of the website and notice how you have created multiple columns. 

Add Subcategories Into One Column

To add the subcategories underneath each other in the same column, you need to add them to the third level which is under the second level.

To do that, you just simply have to move the links that you want to move to the third level to the right. Let’s save it and see how it is going to look on the front page. Notice how everything is not under the first column which is exactly how we want it.

Add Featured Products To Each Column

To add featured products to the mega menu you need to add a custom link to the second level under “Women”. Remember to Add the “#” icon (shift+3) to the URL before adding it to the menu otherwise, it is not going to move.

Under the navigation label, you need to add the following shortcode

. To find the product shortcode, you need to go to “Products”  and then click on “All Products”. Hover your mouse over any of the products that you want to add and copy the product ID. When you are finished, then paste the id into the shortcode. 

(Please make sure to use the straight quotation marks (“) instead of the curly quotation marks (“) otherwise, it will not pull the correct products)

Last, we want to add the class name “menu-item-product” into CSS Classes to turn it into a product.

You can add as many products as you want but we recommend keeping it to a maximum of 4 products otherwise it will start to get cramped. You should also remember to add additional products as custom links into the second level so that each one has its own column.

Editing Secondary Menu

Let’s edit the secondary menu. The secondary menu can be edited by selecting the secondary menu from the dropdown and then clicking on the “select” button. Wait for the page to load and the secondary menu.

You can also edit it the same as the primary menu where you can remove some of the links. Overall, we recommend that you leave the secondary menu as it is to improve customer navigation in the store.