Author: Mitch Concannon

All our themes support the Shopify multi-level dropdown feature. You can have a double layer dropdown menu or a multilayer 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.

On this page

• Video Tutorial
• How to create a double layer drop-down menu
• How to create a multi-layer drop-down menu
• How to add images inside a drop-down menu (Symmetry, Canopy, Alchemy & Boost only)
• How to filter a collection in a menu
• FAQ

Video Tutorial

Our video guide will go through how to set up the dropdowns but if you want more theme-specific guide, we have step by step guide for each one below. 

Double Layer Dropdown Menu

Double layer dropdowns allow you to hover/click on a menu item which will then display a second menu which can contain links. In order to create one, please 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:

   

6. Click Save menu.

Multi-Layer Dropdown Menu

Multi-layer 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 the same steps as Double-layer dropdown to step 5.

2. From here you will drag another menu under again to create a 3 step stair kinda look. 

   
3. Once you have this kinda 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.  

How to add images inside drop-down (Symmetry, Canopy, Alchemy & Boost only)

1. Head over to the theme editor Customize >  Header > scroll down to the bottom of the list till 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 want it to go too. 
   
   

How To Filter A Collection In A Menu

I cover this in the last section of the video guide. You can skip ahead to the last 2 mins in the video

1. From your Shopify admin, go to Online Store > Navigation.
   
   
2. Open up Main Menu and click edit on the collection that you want to filter
   
   
3. You will now see "Filter collection with tags (optional)" field. Inside the box place the tag that you want 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 1 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?

Afraid not. Each theme was built with that menu style in mind and would require extensive changes to the theme code layout so we do not support this. If you wanted to go down this route you can consider reaching out a developer or our preferred partner Task Husky

Back to top