How to Set Up The Mega Menu

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.

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.

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

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.

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.

Still need help?

Email our friendly support team with your query: [email protected].

So that we can best help, please ensure you provide key details including:

  • What your query is about

  • Which theme you are using

  • Your .myshopify.com URL

  • Your .myshopify.com password (if the shop is locked for visiting customers)

  • Any screenshots that may help us resolve your query as quickly as possible.