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.