Some of our themes will automatically create a multi-column mega-menu dropdown for your navigation wherever your navigation includes three levels of links.
The Mega menu feature is available in Expanse, Fetch, Gem, Impulse and Motion.
This feature uses the navigation menu selected in the Header section within the theme editor. The menu itself can be edited in Content > Menus in your Shopify admin.
We recommend using Shopify’s default main menu to avoid any issues. You can confirm it is the default menu if the handle is main-menu (this cannot be changed).
-
Impulse will automatically create a multi-column mega-menu dropdown for your navigation wherever your navigation includes three levels of links.
Each third level of navigation will get split into its own column of links. For example, the layout above was created by the menu below:
To add some visual impact, any second level of navigation that links to a collection with an image will have that image shown above the title of the link. You can see this for Tops, Tunics, Dresses, and Sweatshirts in the example above.
To enable this feature, go to the Header section and turn on Show mega menu images.
-
Expanse, Fetch and Gem will automatically create a multi-column "mega-menu" dropdown for your navigation wherever your navigation includes three levels of links.
Each third level of navigation will get split into its own column of links. For example, the layout above was created by the menu below:
To add some visual impact, the first product image available in the top-level menu item link will automatically appear in the menu. In the topmost screenshot, the first product from the Lifestyle collection link is displayed on the right side of the mega menu.
To enable this feature, go to the Header section and turn on Show first product in mega menus. -
Motion includes a multi-column "mega-menu" dropdown for your navigation that also includes two promotional options. To set up a mega-mega menu dropdown for any of your top-level menu items, open the Theme Editor and navigate to Header and menus.
How does it work?
In each mega menu block, add the name of a top-level menu item you want to include a multi-column dropdown for. Please ensure this is identical to the menu name in your navigation settings, as it is case-sensitive. You can also include two promotional links with text and images in each block.
Note: promotional images with a width of 500px will work best.
How does it look?
Why doesn't the mega-menu work if I use a second or third level menu item?
The block requires a top-level menu item in order for the multi-column dropdowns to work.