The Mega menu is a menu within a menu; a large drop-down feature built into your theme's header. It displays a greater number of navigation options, giving your customers quick and easy access to many pages across your site.
Step 1: Set Up a Menu Within Navigation Settings
In order to add a Mega menu to your theme, this menu first needs to exist within your Shopify admin settings.
- Within your Shopify admin, go to Sales Channels > Online Store > Navigation.
- Select the menu you wish to use within your header, or create on by selecting Add menu.
You will then be able to view the Menu items within your selected menu.
Step 2: Add Multiple Navigational Layers
A Mega menu features a menu item with multiple navigational layers to it, as signified by the arrow ▶.
These navigational layers will be reflected on your storefront as the Mega Menu extends below the header.
- Your mega menu is based on your 1st navigational layer (e.g. Shop).
- The menu's categories can be found on its 2nd navigational layer (e.g. Clothing).
- The items displayed on the menu can be found on its 3rd navigational layer (e.g. Graphic Tees & Tops).
Step 3: Add Mega Menu to Your Theme
You can locate your mega menu settings within your header section.
- Within your Shopify admin, go to Online Store > Themes
- Click your theme, and select Customize.
- On the left-hand menu, select Header.
- Under Navigation > Main menu, click Select menu.
- Choose the menu you want from the list.
- Click Select.
- Under Header, click Add mega-menu.
- Type the menu title from the 1st navigational layer of your chosen menu into the Mega menu entry field.
- Click Save.
By typing your chosen menu item into the entry field, your Mega menu will appear underneath your header to display its full range of navigation options.
How do I add an image to my menu?
To add an image, go to Image > Select 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.
How many columns can my menu hold?
The 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.