A Mega navigation menu displays menu links in multiple columns so customers can browse large catalogs quickly and easily. Add multiple sub-menus along with a featured image, text, and links to customize your mega nav.
Note If you have multiple languages enabled, you need to add separate mega nav blocks for each language. After adding a mega nav block in your default language, set up Multi-lingual mega navs by using translated link names for the Dropdown parent link.
Watch video tutorial
Watch the tutorial video below for a step-by-step walkthrough to set up your mega nav menus.
1. Create nested menu list
The mega navigation menu uses the Main menu selected in the Header section settings. For the mega navigation, you first need to create a nested menu with 3 levels of links.
We will look at our Stiletto Chic demo as an example:
In the Stiletto Chic demo, the top-level link is "Footwear" with two nested sub-menus. Hover over the Footwear link opens the mega navigation menu.
The 2nd-level links ("Shop by type" and "Shop by color") display as titles for each column and contains the 3rd-level links to collections.
Here's what the Main menu looks like for the Stiletto demo in the Shopify admin with the three nested link levels:
STEPS
In your Shopify admin:
Click Navigation under Online Store in the admin panel.
Select the Main menu or the menu you want to edit.
Add a top-level link (for example: "Footwear") in your Main menu that will open the mega nav and contain the nested sub-menus.
Add your 2nd-level menu links and use the drag handles ⋮⋮ to move them under the top-level link.
In the Stiletto demo, the 2nd-level links are "Shop by type" and "Shop by color".
Add your 3rd-level menu links and use the drag handles ⋮⋮ to move them under the 2nd-level links.
In the Stiletto demo, the 3rd level links are collections.
Click Save.
2. Add mega nav menus
Once you have created your nested menus, you can now add mega nav blocks to your Header in the theme editor.
Note If you have multiple languages enabled, you need to add separate mega nav blocks for each language. After adding a mega nav block in your default language, set up Multi-lingual mega navs by using translated link names for the Dropdown parent link.
STEPS
In your theme editor (Customize):
Click the arrow beside the Header section.
Click (+) Add block and choose either the Compact mega menu or Full width mega menu.
Enter the exact name of the top-level link (e.g. "Shoes") in the Dropdown parent link field.
If you have multiple languages enabled, you need to add separate mega nav blocks for each language. Duplicate the first mega nav block and enter the translated name of the top-level link for the Dropdown parent link. For step-by-step instructions, refer to Multi-lingual mega navs steps.
Use the Column count display your menu lists in 1, 2, 3, or 4 columns.
(For Compact menu.) Use the Total column width slider to expand the total width of the mega nav and the space between the menu lists and image.
Choose whether to show Column dividers.
Click Save.
3. Add promotional content
Display a feature image, promo text, and call-to-action button within the mega nav menu.
STEPS
In your theme editor (Customize):
Make sure Show promo is enabled.
Select or upload a Image to display inside the mega navigation menu. This image is not displayed on mobile.
Use the Promo width and Height sliders to change the shape and size of your promo image.
Set the Promo position to the Left or Right side of the mega nav.
Use Image focal points to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.
See our image guide to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
(Optional.) Add Promo text as a title on your image.
Select or paste a URL for the Button link.
Enter text for the Button label.
The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"
Select a Text position (above) to position your headings (and button) in one of 9 areas of the grid block.
Use the color selectors to customize the Text color.
We recommend using WebAIM's contrast checker when matching colors to make sure your text is clear and readable for everyone.
Change the Overlay color and Overlay opacity using the slider to increase the contrast between the text and slide image.
These settings help make your text clear and readable.
Set the Opacity to 100% to create a solid color slide. This helps avoid images that include text in the image itself, which are not responsive or recommended.
(Optional) Click the Overlay gradient option to add a color overlay that fades across a range of hues.
You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide ↗ to learn more.
Click Save.
Add multi-lingual mega navs
If your store has multiple languages, you need to add separate mega nav blocks for each language, and enter the translated link name for the Dropdown parent link.
For example, if your store has 2 languages (English and German), you will need 2 mega nav blocks. For the first mega nav block, use the default language for the Dropdown parent link (e.g. "Shoes"). For the second mega nav block, use the translated link name for the Dropdown parent link (e.g. "Schuhe" for German).
STEPS
In your theme editor (Customize):
Click the arrow beside the Header section.
Click on the mega nav block that uses the default language.
Click More... at the top of the block settings, and select Duplicate.
The duplicated block settings will open after you click Duplicate.
Enter the translation of the top-level link name in the Dropdown parent link field.
For example, if the default link name is "Shoes", enter the translated link name "Schuhe" for German.
You can check the exact word for the translated link by using the language selector in the theme editor preview.
If your mega nav block has promotional text, add translations in the block setting or in your translation app.
