Icon Theme: Setting up the Navigation & Mega Dropdown Menu

The Icon theme will show dropdown menus up to 2 levels and also offers the display of a Megamenu as well as dropdowns with featured products.
When planning your navigation items, it helps to create an outline showing the navigation hierarchy.

For this example, the navigation hierarchy we will be set up is as follows:

  • Shop (level 1 with mega  dropdown )
    • Tops (level 2)
      • Bras & Bandeaus (level 3)
      • Long Sleeves (level 3)
      • Tanks (level 3)
    • Bottoms (level 2)
      • Yoga Shorts (level 3)
      • Yoga Pants (level 3)
      • Capri Pants (level 3)
      • Leggings (level 3)
    • Other (level 2)
  • Blog (level 1)
  • Contact Us (level 1 with normal dropdown)
    • Shipping Policy (level 2)
    • Return Policy (level 2)

Navigation setup

In your Shopify admin go to Online Store > Navigation click on Main Menu
First, add your Level 1 menu items, followed by your Level 2 menu items, carefuly positioning them inside the Level 1 items using the drag and drop interface. 
If you have Level 3 menu items, create them and position them inside the Level 2 items using drag and drop.

Click Save... Your nested navigation should now match your planned navigation hierarchy.

Megamenus

A megamenu is simply a 3 level dropdown menu ( as shown above ) but styled to display a multi-column layout.

Level 1 is your top-level navigation, Each Level 2 link represents a column, and each Level 3 link represents the links within that column.
If your navigation does not have 3 levels of links then the megamenu is not going to work for your needs and should not be added.

  1. In your Shopify admin go to Online Store > Themes click the Customize theme button next to your theme to load the Shopify theme editor. 
  2. In the Shopify theme editor click on the Sections tab and select Header.
  3. In the Content, area select Add mega menu
  4. In the Menu Item field enter the title of the menu item from which you would like to see a megamenu dropdown - this must match the case used when entering this into your store admin.
    In the below example we entered Shop. As the menu contains a link named Shop the mega dropdown will appear when this is hovered.
  5. Optionally upload a featured image which will be displayed and add a link to it. 
  6. Click save when comeplete