A mega menu is a large drop-down menu built into your theme's header that displays multiple navigation options, providing your customers quick and easy access to various pages across your store. It also offers an effective space to promote your products.
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
We'll also answer some common questions about mega menus at the end.
Part 1: Setting Up a Menu within Navigation Settings
To add a mega menu to your theme, start by creating a menu with multiple layers within the Navigation section of your Shopify admin.
- Access Navigation Settings:
- In your Shopify admin, go to Online Store and then Navigation.
- Select or Create a Menu:
- Select an existing menu (e.g., Main menu) to use as the basis for your mega menu. You can view and edit the menu from the menu page.
- Alternatively, click Add menu to create a new menu. Assign a name to your new menu and add the menu items that you want to display in the header.
Note: A Mega menu will only be possible when set up on a menu from your Main menu.
You can discover more about Menu's on your Shopify store in the Shopify Docs.
Part 2: Adding Multiple Navigational Layers to Your Menu
A mega menu contains multiple navigational layers. After setting up a basic menu in Part 1, you can now add more layers.
Adding the Second Navigational Layer
- Add Menu Item:
- While viewing your menu page, click Add menu item.
- Choose and Indent the Item:
- Choose a second-layer menu item. Drag the new item underneath its parent menu item and slide it to the right to indent it.
Adding the Third Navigational Layer
Repeat the same method to add a third layer. This is ideal for adding specific items like individual products, sub-collections, pages, or blog posts that relate to the second navigational layer.
Part 3: Adding the Mega Menu Section to Your Theme
Once your multi-layer menu is set up, add it to your theme as a mega menu:
- Access Theme Editor:
- Go to your Theme Editor.
- Select Header Section:
- On the left-side menu, select the Header section.
- Select Menu:
- Scroll down to Navigation and click Select menu. Choose the multi-layer menu you created.
- Add Mega Menu Block:
- Return to the Home page template, and click Add Mega menu under the Header section.
- Enter First-Layer Menu Item:
- Type the name of a first-layer menu item from your chosen menu into the Mega menu entry field. Ensure the title matches exactly, including the correct case.
- Add Remaining Blocks:
- Repeat the process to add all first-layer menu items.
- Save Changes:
- Click Save.
Optional: You can promote items via your mega menu by utilizing the remaining settings within the Mega menu block. Add imagery, along with a heading and subheading, to generate excitement about your promotion. You can also add a link to the product or collection page you're promoting.
Mega Menu FAQs
How do I add an image to my menu?
Open your Mega menu block, click Image, and select an image. 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, the Mega Menu may only be available in your default language option.
How many columns can my menu hold?
Your theme's mega menu can stretch across the full width of the screen and hold a maximum of five columns. Adding an image will use one of these columns.
Congratulations on creating your mega menu!