Masonry theme support

Drop down and mega menu features

All our themes support the Shopify multi-level dropdown feature. You can have a double layer dropdown menu or a multi-level dropdown menu appear on your site which will work across all devices.

Note – Each theme has its own unique style of dropdown based on the main menu layout.

Video tutorial

Our video guide will go through how to set up drop-down menus but if you want a more theme-specific guide, we have step by step guide for each one further down the page.

 

Steps to create a ‘double layer’ dropdown menu

Double layer drop-downs allow you to hover/click on a top-level menu item which will then display a second menu containing a second layer of links. In order to create a double layer drop-down menu, follow the steps below:

  1. From your Shopify admin, go to Online Store > Navigation.
  2. Click the main menu or if one does not exist you can create one.
  3. Choose one of the menu items to be the header for your drop-down menu, or add a new menu item to be the header. If you don’t want the header to link to anything, then you can enter # in the Link field when you add the menu item.
  4. Add menu items to include in the new drop-down menu. Click ‘Add menu item’, enter the name of the menu item and enter or select a destination for the link.
  5. Click and drag the menu items to nest below the header item and save your changes:
    Animation demonstrating dragging a menu item to the right to nest below another menu item

Example ‘double layer’ dropdown menu

Steps to create a multi-level menu (or ‘mega menu’)

You don’t need to touch any code, or even change any theme settings, to get a menu to show like this. It is all down to how your Navigation area is set up. The theme switches a dropdown menu into full-width mode when every link inside a dropdown also has a dropdown.

Multi-level drop downs are the same as double layer, except for the second layer will display another set of menu options. This gives you more freedom to display more info and guide the customer to where they want to go.

  1. Follow our ‘Double-layer Dropdown Menu’ guide above, to step 5.
  2. From here you will drag another menu under again, with your three layers creating ‘3 step staircase’ look which you can see an example of below:

Three layers of links in Shopify

Once you have this set up, click “Save” and your menu should be complete.

Note – If you add another menu into the first dropdown layer without following the same steps above. Your menu will display as a double dropdown instead of a multi-layer. See our video for more in-depth information on this.

Example ‘multi-level menu’ (or ‘mega menu’)

How to add images inside your dropdown menu (Symmetry, Showcase, Canopy, Alchemy & Boost only)

  1. Head over to the theme editor and select your ‘Header‘ section, then scroll down to the bottom of the list until you reach ‘Content‘.
  2. Click ‘Add Menu Promotion’ if one is not already added and open it.
  3. Inside “Dropdown link name” put the menu title you want it to appear under.
  4. From here, select the image, place the text you would like to appear, under it.
  5. If you want to add a link you can give it a title and select the link you wish for it to point to.

Why is my menu stacked vertically rather than horizontally?

You must ensure that all of your top level navigation links have three layers added if you wish to trigger individual columns to display. If you don’t do this, some of your columns will be stacked on top of each other, shown in the video example below:

Example of incorrect layout

Example of correct layout

How to filter a collection in a menu

We cover filters in the last section of this video guide. You can skip ahead to the last 2 mins of the video for the relevant portion.

  1. From your Shopify admin, go to Online Store > Navigation.
  2. Open up “Main Menu” and click “Edit” on the collection that you wish to filter.
  3. You will now see the “Filter collection with tags (optional)” field. Inside the box, place the tag that you would like to filter the collection with.
  4. Once you place the tag, you can click save and test it out.
  5. If done correctly, now when you select that collection in the menu, it’s only going to show products with that tag.
  6. You can add more than one filter here, but please note this means that the product has to have both tags in it and not just one. If it doesn’t have both, the products will not show up. 

F.A.Q

Can I use a menu style from another theme that I like?

Each theme is built with a particular menu design and would require changes to the theme code if you wish to alter your theme’s default layout. You can consider reaching out to a developer or our preferred Partner Task Husky for this kind of alteration.

It’s also worth exploring the Shopify App store for additional layout options: apps.shopify.com