[P] Mega-menu

All our themes support mega-menu. Mega menus allow you to create rich menus with multi-columns and optional images.

Best practices

Do

  • Use mega-menu to show a large number of links organized in multiple columns.
  • Use mega-menu to show up to two promotional images.
  • Split your navigation into multiple mega-menu to avoid menus being too complex.

Don't

  • For simpler navigation needs, use dropdown navigation without mega-menu. Mega-menus can create extra complexity for users.
  • Avoid more than 4-5 columns of links per mega-menu. If you need more links, consider splitting the navigation into multiple mega-menu, or try to re-think your navigation structure. For instance, consider grouping several links.

Setting up mega-menus

Creating a mega-menu involves several steps. This guide will go through each one. We recommend you follow each step in the given order.

Step 1: setting up menu navigation

Before creating the mega-menu, you must create the menu's structure. Mega-menus work best with three-level menus (for instance, "Shop" > "Bags" > "Shoulder bags").

The menu you create must contain the entire navigation structure, including the first-level links. Said otherwise, you must only have a single navigation menu (if you create one new menu for each mega-menu, this won't work).

Here is an example of the structure being used in our demo store Allure:

Here is an example of how the mega-menu created for the "Women" link looks like and how each level are related to each other:

Step 2: creating the mega-menu

The second step involves creating a mega-menu:

1/ Open the theme editor, click on the "Header" section, and click on "Add mega-menu" button:

2/ The most important setting to fill is the "Menu item" setting. It must match exactly the name of the first-level links you want to create a mega-menu.

A common mistake is entering a menu item that does not match any first-level links. If you do not see any mega-menu, double-check the menu item setting, and ensure it matches precisely a first level link.

Step 3: configuring the mega-menu

After adding the mega-menu block to your header, you can customize it by adding images and configuring their position. This is entirely optional, and you can decide to show links only.

Step 4: using mega-menu for multi-languages stores

Mega-menus are compatible with multi-language stores but require an extra setup.

1/ Translate your menu in the translation app.

2/ Once you have translated the menu, go back to the theme editor, select the mega-menu you have created, click on the three dots, and select "Localize":

You need to have the Shopify Translate & Adapt free app installed on your store. If you are using a different translation app, reach the app's developer for instructions.

Inside the translation app, locate the menu item setting, and translate the setting to match your translated menu item.