Drop Down & Mega Menu Features

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.

Video Tutorial

Our video guide will go through how to set up the dropdowns but if you want a 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 that 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:
    Animation demonstrating dragging a menu item to the right to nest below another menu item
  6. Click Save menu.

Multi-Layer/Mega menu 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 main menu is set up.
The theme switches a dropdown menu into a full-width mode when every link inside a dropdown also has a dropdown.

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 the 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, Showcase, Canopy, Alchemy & Boost only)

  1. Head over to the theme editor >  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 to.

Why is my menu Vertical & not Horizontal?

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 the “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?

Each theme is built with a particular menu design and would require changes to the theme code. You can consider reaching out to a developer or our preferred partner Task Husky

It’s also worth exploring the Shopify App store: apps.shopify.com

  Worthwhile reading:

Image sizes Theme updates Page Speed SEO

  Looking to customise beyond our settings?

Our support covers assistance for your theme and settings as originally supplied.
If our settings don’t include a specific control you’re looking for, you can hire a developer to customise the theme code.

We recommend Taskhusky for altering your theme code:
Click here to request a custom coding quote from Taskhusky.

Be sure to read this article before changing code!