Example: Creating a meganav drop-down menu

This example is for Menus created before Shopify's new Nested Menus. See link below for updated instructions on how to create a meganav with Nested Menus.

In this example, we will convert our Shop menu into a two-column drop-down which will display two categories of items.

In our example, the Main Menu will have a listing of items like:

Home
Shop
Pages
Blogs
Contact  
Account

We want our Shop to display two columns: Men and Women and include items for each category.

To do that create/modify your Shop menu and only have two menu items:

Men
Women

It's important to note that only two menu items should be in the Shop menu. Additional links will not format well. If you're building a third column, then you can create a third item. For our example, we'll only use two columns and we don't want to have additional links/menu items under Shop. Also make sure the Shop handle is shop. If the handle is shop-1, this won't work. If you don't already have a Shop menu, then use Add Menu to create a new menu. 

Next, create a new menu called Men. In the Men menu, add menu items that relate to the men category like:

Shirts
Jackets
Pants
Shoes

Then, create a new menu called  Women. In the Women menu, add menu items for the women category like:

Tops
Dresses
Jeans
Shoes

The links you choose for the menu items have no dependancy on how the meganav works. In the Shop menu, links for Men and Women can point to a collection or even just a hashmark "#" for nothing. 

Our Shop drop-down is now complete. We can even add a meganav image for promotions:

Notes:
The meganav image is found in the Header section settings of the theme editor (Customize theme). Currently, only one meganav image can be used. Future versions of Pipeline will include support for multiple images. 

Still need help? Contact Us Contact Us