Mega Menu (Older Themes)

For Versions 7.6.0 and later

The system for setting up the Mega Menu system works differently than below, for these theme versions - please see the guide here:

For Version 7.5.2 and earlier:

If you haven’t set up your store’s Departments yet, you might want to start with the instructions here:

  1. Navigate to Online Store Navigation in your Shopify admin area.

  2. Use the Add menu button to add a new menu.

  3. Give your new menu a descriptive title, like Departments. Depending on your shop’s navigation setup, you may end up changing this title later on.

  4. Use the Add menu item button to add a new item. If you’ve set up your department pages, this is where you should link to them. For example, if you’ve created a department page called “Mens”, use “Mens” as the link title.

  5. Add links to each collection you’d like to include in that department, and using the nested navigation function, drag each item underneath the name of the department link.

  6. For another level of navigation, you can include links to your collections filtered by a product tag, and drag that item into the parent collection.

  7. Repeat steps 4–7 until you’ve added all of your departments, collections within the departments, and links to collections.

This navigation menu will be a Mega Menu used to display the list of departments in your store’s navigation menu.

You may want to name this menu Shop or Departments.

Add your Mega Menu to your homepage navigation

  1. Open up the Theme Editor (Online Store → Themes → Customize Theme)

  2. Open up the Header settings.

  3. Select “Add mega menu” underneath the Content heading, close to the bottom of the settings area.

  4. Under “Main menu item”, choose the menu item you’d like the Mega Menu to drop down from. For example, if your main menu contains “Home, Shop, About, and Contact” write “Shop” for that link to launch the Mega Menu.

  5. Under “Mega-menu” select the menu you created in the steps above.

  6. If you’d like, you can select an image to display with a link in the mega menu. We recommend a super wide image of 1288px x 250px.

We think a marketing banner or a transparent version of your store’s logo would look great in this area. More on that here:

You can create another sub-level for your department navigation by using collection filters for each product collection in a department.

Note that this navigation level requires that your products use Shopify’s product tags feature.

For more information see Shopify’s Tags article:

Shopify Help - Adding or removing tags

For example, the Mens department has now sections for boots, shoes, accessories, and boot care. But because there are many types of boots, we want to organize the boots even more.

Each menu item should link to a product collection filtered by a specific tag.

For example, for our Boots section, we want all of the menu items to link to different kinds of boots. We can set up each menu item to link to a product that has a specific tag.

  1. Use the Add menu item button to add a new menu item.

  2. Select the collection that you want to filter through.

  3. Select the Filter with tags link and type in the tag filter you wish to add. For example, work boot.

  4. Repeat steps 1–3 until you’re satisfied with the available collection filters.