Header & Mega Menu

This guide will help you create beautiful, easy-to-navigate multi-level menus for your Shopify store.

Quick Start

1. Log in to your Shopify admin
2. Go to Online Store > Navigation
3. Click on Main menu
4. Start adding menu items
5. Drag items to create sub-menus
6. Click Save menu

Creating Your Menu

Adding Menu Items

1. Click Add menu item
2. Enter a Name (what appears in the menu)
3. Choose a Link (collection, product, page, blog, policy, or custom URL)
4. Click Add

Common top-level items: Shop, Collections, About, Contact, Blog, Sale

Creating Sub-Menus

1. Add a new menu item
2. Click and hold on the item
3. Drag it to the right under the parent item
4. Release when you see it indent

You can create up to 3 levels of nesting:

Shop (Level 1)
  └─ Women (Level 2)
      ├─ Dresses (Level 3)
      ├─ Tops (Level 3)
      └─ Bottoms (Level 3)

Best Practices

Recommended Item Counts

• Top-Level: 5-7 items (max 9)
• Sub-Menus: 4-6 items per section (max 10)
• Third-Level: 3-5 items (use sparingly)

Naming Guidelines

• Keep names clear and concise
• Use consistent capitalization
• Avoid vague names like “Click Here” or “Products”
• Put important items first (New Arrivals, Best Sellers, Sale)

Example Menu Structures

Fashion Store:

Shop
  ├─ Women (Clothing, Shoes, Accessories)
  ├─ Men (Clothing, Shoes, Accessories)
  └─ Sale
New Arrivals
About Us
Contact

Home Goods Store:

Shop by Room
  ├─ Living Room (Furniture, Decor, Lighting)
  ├─ Bedroom (Furniture, Bedding, Decor)
  └─ Kitchen (Appliances, Cookware, Decor)
Shop by Style (Modern, Traditional, Rustic, Minimalist)
Best Sellers
Sale

Mobile Menus

On mobile devices, your menu automatically transforms:

• Horizontal menu becomes a hamburger icon
• Tapping opens a full-screen or side menu
• Sub-menus expand/collapse with a tap

Mobile tips:

• Limit top-level items to 7 or fewer
• Keep names short for narrow screens
• Don’t go deeper than 3 levels
• Test on actual mobile devices

FAQ

How many levels of menus can I create? We recommend stopping at 3 levels. Deeper menus become hard to navigate.

Can I have different menus for desktop and mobile? No, the same structure is used for both. The theme automatically adapts the display.

How do I delete a menu item? Click on the item, then click Remove in the edit popup. Click Save menu to confirm.

Can I link to external websites? Yes. In the Link field, select Other and enter the full URL including https://.

How do I change which menu appears in navigation? Go to Themes > Customize > Header section, and select which menu to display.

Troubleshooting

Can’t drag items: Try Chrome or Firefox, clear cache, disable browser extensions.

Items in wrong order: Drag to reorder, check indentation level, save menu.

Menu not showing on live site: Check you clicked “Save menu”, verify correct menu is selected in Theme Customizer > Header, and ensure theme is published.

Menu looks broken on mobile: Shorten long item names, simplify to 2-3 levels, clear phone cache.

Tips for Success

1. Start simple — 5 main items with a few sub-items, refine over time
2. Think like a customer — Organize by how customers shop, not how you categorize internally
3. Use analytics — Check which items get clicks and adjust accordingly
4. Update seasonally — Refresh for holidays, new collections, and promotions
5. Less is more — A simple menu is easier to use than a complex one