Eight Themes Support Documentation

Search

How to Set Up a Mega Menu

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.

 

Screen_Shot_2022-05-11_at_2.43.29_PM.png

 

Note: A Mega menu will only be possible when set up on a menu from your Main menu - if you have only added a menu to your Top bar, the Mega menu will not work.

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.

  1. Within your Shopify admin, go to Sales Channels > Online Store > Navigation.
  2. Select the menu you wish to use within your header, or create on by selecting Add menu.

 

Screen_Shot_2022-05-12_at_9.30.02_AM.png

You will then be able to view the Menu items within your selected menu.

 

Read: Shopify's help pages for Menus and links.

Step 2: Add Multiple Navigational Layers

 

A Mega menu features a menu item with multiple navigational layers to it, as signified by the arrow ▶.

 

Screen_Shot_2022-05-12_at_9.32.38_AM.png

 

These navigational layers will be reflected on your storefront as the Mega Menu extends below the header.

 

  1. Your mega menu is based on your 1st navigational layer (e.g. Shop).
  2. The menu's categories can be found on its 2nd navigational layer (e.g. Clothing).
  3. The items displayed on the menu can be found on its 3rd navigational layer (e.g. Graphic Tees & Tops).

 

Screen_Shot_2022-05-11_at_2.43.29_PM.png

Step 3: Add Mega Menu to Your Theme

 

You can locate your mega menu settings within your header section.

 

  1. Within your Shopify admin, go to Online Store > Themes
  2. Click your theme, and select Customize.
  3. On the left-hand menu, select Header.
  4. Under Navigation > Main menu, click Select menu.
  5. Choose the menu you want from the list.
  6. Click Select.
  7. Under Header, click Add mega-menu.
  8. Type the menu title from the 1st navigational layer of your chosen menu into the Mega menu entry field.
  9. 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.

 

Note: Please ensure that you type in the menu item title exactly as it reads in your Navigation settings, including the correct case.

FAQs

 

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.

Was this article helpful?