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.
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.
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. 'Going Out')
The items displayed on the menu can be found on its 3rd navigational layer (e.g. Footwear)
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 > Add mega menu.
To add a specific menu item within the Navigation section of your Shopify admin, simply type the menu title from the 1st navigational layer into the Mega menu entry field.
Note: Please ensure that you type in the menu item title exactly as it reads in your Navigation settings, including the correct case.
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.
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
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 only available on your default language option.
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.