Mega menus

Mega menus display 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.

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.

Create nested menu in admin

---

Before adding the mega menu block, you will need to create a menu with three levels of nested links.

• The top-level link appears in the header and opens the mega menu.

• The 2nd-level links appear as column headings inside the mega menu.

• The 3rd-level links appear in columns below the second-level links.

From your Shopify admin, go to Content > Menus. Choose a menu item to be the 'parent' or top-level link that will open the mega menu from the header. To create 2nd-level and 3rd-level links, use the drag-and-drop handles ⋮⋮ to move links under other links to nest them.

STEPS

In your Shopify admin:

1. Go to Content > Menus.

2. Select the main menu used for your header.

3. Add a top-level link that will open the mega menu and contain the nested sub-menus.

4. Add your 2nd-level menu links and use the drag handles ⋮⋮ to move them under the top-level link.

5. Add your 3rd-level menu links and use the drag handles ⋮⋮ to move them under the 2nd-level links.

6. Click Save.

Add mega menu block

---

Once you have created your nested menu, you can now add mega menu blocks to your Header in the theme editor.

1. Click the arrow next to the Header section, and click (+) Add Mega menu. Choose either the Compact mega menu or Full width mega menu.

2. Click the Mega menu block to open the settings.

3. Enter the exact name of the top-level link (e.g. "Shop") in the Dropdown parent link field.

4. Click Save.

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.

Customize menu layout

---

Change the number of columns, change the total column width, and choose to show dividers.

Click Mega menu block to find settings

Setting	Description	Options
Column count	Set the number of columns. If there are more submenus than columns, then submenus will appear in multiple rows.	1-4 Default: 4
Total column width	(For compact mega menu) Use the slider to expand the total width of the mega nav and the space between the menu lists and image.
Show column dividers	Display dividing lines between the menu columns.

Add promotions

---

Display a feature image, promo text, and call-to-action button within the mega nav menu.

STEPS

In your theme editor (Customize):

1. Make sure Show promo is enabled.

2. Select or upload a Image to display inside the mega navigation menu. This image is not displayed on mobile.

3. Use the Promo width and Height sliders to change the shape and size of your promo image.

4. Set the Promo position to the Left or Right side of the mega nav.

5. 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.

6. (Optional.) Add Promo text as a title on your image.

7. Select or paste a URL for the Button link.

8. 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?"

9. Select a Text position (above) to position your headings (and button) in one of 9 areas of the grid block.

10. 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.

11. 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.

12. (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.

13. 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):

1. Click the arrow beside the Header section.

2. Click on the mega nav block that uses the default language.

3. Click More ... at the top of the block settings, and select Duplicate.

   The duplicated block settings will open after you click Duplicate.

   
4. 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.

5. If your mega nav block has promotional text, add translations in the block setting or in your translation app.

6. Click Save.

---

Related links

Header