Mega Menu (Recent Themes)

For Versions 7.5.2 and earlier

The system for setting up the Mega Menu system works differently than below, for these theme versions - please see the guide here:

Overview

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.

A mega menu displaying under a header once the user's cursor makes contact.

In order to add a Mega menu to your theme, this menu first needs to exist within your Shopify admin settings.

Steps

  1. Within your Shopify admin, go to Sales Channels > Online Store > Navigation.

  2. Select the menu you wish to add.

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

These navigation options have the purpose of taking your customers to their desired destination on your site, and some menus take multiple steps to get to certain destinations within your site as they fall into specific categories.

Within your Navigation section, these multiple layers are signified by the arrow ▶.

Multiple layers of menu items, as signified by the arrow ▶.

Therefore, the more steps available within your Menu items, the greater the range of your navigation options - and this is when the Mega menu becomes a great solution to help your customers find where they need to go.

You can edit the Navigation section of your Shopify dashboard to change your menu options at any time - your live site will be updated.

Mega Menu

To add a Mega menu, you can add this through your Header section - read our guide to learn more:

Steps

  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.

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

Your Mega menu is based on your 1st navigational layer, the menu's categories can be found on its 2nd navigational layer, and the items displayed on the menu can be found on its 3rd navigational layer.

The 1st, 2nd, and 3rd navigational layers with your Shopify admin.

Example:

  • 1st navigational layer = 'Bicycles'. This is what you would type into the entry field under Header > Add Mega menu.

  • 2nd navigational layer = 'Single Speed'. This is what would be displayed as a title within your Mega menu.

  • 3rd navigational layer = 'Adults & Children'. These are the menu items within your Mega menu

Typing in the Menu Item Title

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.

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.

Example:

If one of your menu items with multiple navigational layers is called Bicycles, type 'Bicycles' into the Mega menu entry field.

Before and after the mega menu has been activated.

By typing in your chosen menu item to create a Mega menu, you have the power to choose which individual menu items have a Mega menu and which have the standard drop-down 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.

🌟 We recommend experimenting with your layout, as the Mega menu is not coded with a precise limit on how far you can stretch down the page. Therefore, breaking your larger menu into sub-menus may make your site's navigation much clearer for your customers.

Enable mega-menu image

To upload an image to your menu, go to Image and click Select Image. To save this choice, click Select.

You can choose up to two images for your menu, as signified by IMAGE 1 and IMAGE 2 within your Mega menu settings - these images will take up one column each, and each menu can hold up to five columns in total.

Image Link

In order to link your image to another page within your store, click on the Link bar and select one of the page options - alternatively, you can also paste a link of your choice.

Please note that the anchor link cannot be translated. As such, 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.

🌟Tip: You also have the option of adding layers of navigation and extending the overall functionality by using an app, such as: - Mega Menu - Buddha Mega Menu - Meteor Mega Menu