What is 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.

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.

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

Read: Shopify's help pages for Navigation settings.

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.

  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. 'Going Out')
  3. The items displayed on the menu can be found on its 3rd navigational layer (e.g. Footwear)

Step 3: Add a 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 > 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.