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.
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.
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.
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.
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 Change 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 more 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!
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?
The anchor link cannot be translated - if you are planning to use multiple languages on your storefront, you'll need to add multiple mega menus with the anchor link of choice translated for each.
Without this step being taken, you may notice the Mega menu is only available on your default language option.