Introduction - Mega menus
A mega menu is a large drop-down menu built into your theme's header that displays a greater number of navigation options. A mega menu gives your customers quick and easy access to multiple pages across your store and offers an effective space to promote your products.
Mega menu example:
In this guide, we'll break down the process of setting up a mega menu into three parts:
- Setting up a menu within Navigation settings
- Adding multiple navigational layers to your menu
- Adding the Mega menu section to your theme
At the end of this article, we'll also answer some common questions about mega menus.
Part 1. Setting up a menu within Navigation settings
In order to add a Mega menu to your theme, you must first create a menu with multiple layers. This is done within the Navigation section of your Shopify admin.
To begin, we'll set up the foundations of the mega menu - a basic menu with one navigational layer.
Part 2. Adding multiple navigational layers to your menu
To recap, a mega menu contains multiple navigational layers. In Part 1, you selected a basic menu to use as the first navigational layer of menu items. Now you can build upon it to complete your mega menu.
Adding the second navigational layer
To add your second navigational layer:
Step 1: While viewing your menu page, click Add menu item.
Step 2: Choose a second-layer menu item (in the example below, we're adding the collection Jackets & Coats to the Shop menu).
Step 3: Drag the new menu item underneath its parent menu, then slide the menu item to the right so it becomes indented.
For example:
Adding the third navigational layer
Just like the second navigational layer, you can add a third layer using the same method. This is ideal for adding specific items, such as individual products, sub-collections, pages, or blog posts that relate directly to the second navigational layer.
In the example below, we've added a product under a collection within the Shop menu:
Part 3. Adding the Mega menu block to your theme
Now that your multi-layer menu is set up, you can add it to your theme as a mega menu:
Step 1: Go to your Theme Editor.
Step 2: On the left-side menu, select the Header section.
Step 3: Scroll down to Navigation and click Select menu.
Step 4: Choose the multi-layer menu you created from the list.
Step 5: Return to the Home page template, and click Add Mega menu under the Header section.
Step 6: Type the name of a first-layer menu item from your chosen menu into the Mega menu entry field. In the example below, Shop, About us, and Contact all have multiple layers. Your Mega menu will appear underneath your header to display its full range of navigation options.
Step 7: If applicable, add the remaining Mega menu blocks and repeat this process - until all of your first layer menu items have been added.
Step 8: Click Save.
Step 9 (optional): You can choose to promote items via your mega menu by utilizing the remaining settings within the Mega menu block. You can add imagery, along with a heading and subheading, to generate excitement about your promotion.
Additionally, you can add a link to the product or collection page you're promoting to help your customers reach it faster!
For example:
Congratulations on creating your mega menu!
Mega menu FAQs
How do I add an image to my menu?
To add an image, open your Mega menu block, click Image, then select an image. You can link this image to another page by pasting its URL or selecting an option from the drop-down menu under Link.
Can the anchor link be translated?
If you're utilizing Flow version 35.0.0 or later, you have the capability to translate fixed theme wording into over 30 languages. For more information, check out our article on Supported theme languages.
However, if you're using an earlier version of Flow, it's not possible to translate the anchor link.
How many columns can my menu hold?
Your theme's mega menu is coded to always stretch across the full width of the screen and can hold a maximum of five columns across. Adding an image will create and use up one of these columns.
Step 1: Within your Shopify admin, go to Online Store and continue to Navigation.
Step 2: If you want to use an existing menu as the basis for your mega menu (e.g. Main menu), then you can select it. You will be directed to the menu page where you can view and edit the menu.
For example:
Alternatively, click Add menu and create a new menu. On the Add menu page, assign a name to your new menu and add the menu items that you want to display in the header.
For example: