How to modify the main menu in Shopify: UX Guide

The navigation menu is the GPS of your online store. If a customer enters and can't figure out where to click to find what they're looking for in less than 3 seconds, they'll leave.

Many merchants make the mistake of filling their main menu with useless links ("About Us," "Blog," "Shipping Policy") before showcasing their products. Or worse, they create structures so complex that no one understands them.

In this tutorial, you will learn how to edit, order, and create dropdown menus in Shopify, applying UX (User Experience) best practices.

Step 1: Access the Navigation Editor

Unlike other platforms, in Shopify menus are not edited within the "Theme Design", but in their own section.

1. Go to your administration panel.
2. Click on Online Store > Navigation .
3. You will see two default menus:
   • Main menu: The one that appears at the top of the header.
   • Footer menu (Lower menu): The one that appears at the bottom of the page (ideal for legal and contact).
4. Click on Main menu to edit it.

Step 2: Add and link elements

Inside the editor, you will see the list of current links.

To add a new link:

1. Click on Add menu item .
2. Name: Write the text that the customer will see (e.g., "Sneakers").
3. Link: Here's where the magic happens. You don't have to copy and paste URLs. Click the box and select:
   • Collections: To link to a product category (Most common).
   • Products: To highlight a specific product (e.g., "Gift Card").
   • Pages: For "About Us" or "Contact".
   • Blogs: For your news blog.

Pro Tip: Use short, descriptive names. "Women's" is better than "Ladies' Clothing Catalog."

Step 3: Create drop-down menus

If you have many categories (T-shirts, Pants, Coats), don't put them all in the first row. Group them under "Clothing".

To create a submenu (nesting):

1. Create the main item (e.g., "Clothing") and link it to a general collection, or use `#` if you don't want it to link anywhere.
2. Create the child elements (e.g., "T-shirts").
3. Drag and drop: Click on the 6 dots (⠿) to the left of the name "T-shirts" and drag it below and slightly to the right of "Clothing".
4. You'll see that a tiered structure is created. This indicates that "T-shirts" is now inside "Clothing".

You can create up to 3 levels of depth (Menu > Submenu > Sub-submenu).

The Golden Rule: Less is More

Your main menu isn't a warehouse, it's a showcase. Follow these rules to sell more:

• Maximum 7 items: Human short-term memory collapses with more than 7 options.
• The important thing on the left: Put "Shop" or your main categories ("New Arrivals", "Best Sellers") at the top.
• Corporate information should go at the end (or in the footer): "Contact," "Shipping," and "Legal Notice" shouldn't take up prime space in your header. Move them to the footer menu or a secondary menu.

Frequently Asked Questions about Navigation

How do I create a "Mega Menu" with photos?

Shopify's native editor only allows simple text menus. If you want a visual Mega Menu with promotional images, your theme needs to support it (most Premium 2.0 themes do) or you need to install a menu app.

Can I have different menus for mobile and desktop?

Shopify natively uses the same menu ("Main menu") for both, adapting it to a hamburger format on mobile. However, some advanced themes allow you to select different menus in the header settings.

How do I create a link that doesn't lead anywhere (just a dropdown menu)?

When creating the parent element (e.g., "Catalog"), in the Link field type the symbol ># and select it. This will create a "dead" link that only serves to open the dropdown menu.