Mega menus make it easier for customers to navigate your products and collections. In Impulse 9.0, the mega menu offers more customization options to enhance your store navigation.
For older theme versions, click here to learn how to set up the mega menu.
Create a dropdown menu
First, you will need to create dropdown or nested menu in the Content > Menus section of your Shopify admin.
Follow Shopify’s guide to set up dropdown menus
To create a mega menu like the example above, make sure to set up a three-level nested menu. Each third-level navigation item will appear in its own column of links. For example, the Tops column shown above was created using the menu structure below:
Connect your menu
By default, a menu is automatically connected to the Header section. To replace it, click the menu, select Replace, and then choose one of the available menus.
Add mega menus
To add a mega menu, click the toggle beside the Header section and click Add Mega menu.
In the Menu item field, add the name of the top-level navigation link you want to use for the mega menu.
Turn on Show images for column headings if you want to display images for second-level menu links. This only works with collection links and uses the featured image assigned to each collection in the admin.
Use the Image aspect ratio setting to control the size and shape of the images.
Enable Center menu content to align the menu columns in the center of the dropdown.
Mega menu promotions
You can add up to two promotion blocks to each mega menu dropdown. These blocks can be linked to individual menu items to highlight specific promotions.
Add an image to the promotion block by uploading one or selecting one from your library. Use the Image shape setting to adjust the size and shape of the promotion image. Then fill in the Heading and Text fields, and include a Link to send customers to the appropriate page.
If you want a button to appear below the text, add text to the Button label field.
Use Promotion position on desktop to choose whether the promotion block appears before the menu items on the left or after the menu items on the right. On mobile, the promotion blocks are shown below the menu links:
FAQ
Why is my mega menu not displaying?
Make sure the menu item name entered exactly matches the link name shown under Content > Menus in your Shopify admin. Confirm that the same capitalization, spacing, and wording are used in the Mega menu block.
Why is the navigation menu fully expanded on mobile?
On mobile, navigation menus automatically expand when they contain a link to the page currently being viewed. For example, if multiple submenu items link to the homepage, those menus will all appear expanded while viewing the homepage.
To prevent this behavior, update any menu items that are linked to the homepage. If the menu item does not need to link to a specific page, you can set the link to #.
Can I use mega menus if my store has multiple languages?
Yes. When using a translation app, confirm that the menu item name entered in the Mega menu block matches the translated menu link exactly, including capitalization and spacing. If the mega menu is not appearing, review the translations in your app and update them as needed.