Help Center

How to create a mega menu in Shopify for Archetype themes

Updated

A mega menu is created automatically in supported themes when your navigation includes three levels of links. Once that menu is assigned to the Header section in the theme editor, the theme will display it as a multi-column dropdown.

The built-in mega menu feature is available in:

  • Expanse
  • Fetch
  • Gem
  • Impulse
  • Motion

This feature uses the menu selected in the Header section of the theme editor. You can create and edit that menu in Content > Menus in your Shopify admin.

Note: If you are using Impulse 9.0 or later, please refer to the updated mega menu guide for the newer setup.

Which themes support mega menus?

The built-in mega menu feature is available in the following themes:

  • Expanse
  • Fetch
  • Gem
  • Impulse
  • Motion

Where do I set up the mega menu?

The mega menu is based on the navigation menu assigned in the Header section of the theme editor.

To set it up:

  1. In your Shopify admin, go to Content > Menus.
  2. Create or edit the menu you want to use.
  3. Make sure the menu includes three levels of links.
  4. Open the Theme editor.
  5. Go to the Header section.
  6. Select the menu you want to use for your store navigation.

Which menu should I use?

We recommend using Shopify’s default main menu to avoid potential issues.

You can confirm that a menu is the default main menu if its handle is:

main-menu

This handle cannot be changed.

How should the menu be structured?

To trigger the mega menu layout, your navigation must include three levels of links:

  1. a top-level menu item
  2. a second-level dropdown item
  3. a third-level link nested under the second-level item

When this structure is in place, the theme will automatically display the dropdown as a multi-column mega menu.

Example menu structure:

  • Women
    • Clothing
      • Tops
      • Tunics
      • Dresses
      • Sweatshirts

In supported themes, the third-level links are used to create the multi-column layout inside the mega menu.

How are mega menu columns created?

Each set of third-level links is displayed in its own column within the dropdown.

This means that when your navigation includes a properly nested three-level structure, the theme automatically splits the links into columns to create the mega menu layout.

Can I show images in the mega menu?

Yes. In supported themes, some mega menus can display collection images for second-level links.

If a second-level menu item links to a collection that has a collection image assigned, that image can appear above the link title in the mega menu.

This can help make the dropdown more visual and easier to browse.

How do I enable mega menu images?

To enable collection images in the mega menu:

  1. Open the Theme editor.
  2. Go to the Header section.
  3. Enable Show mega menu images.

Once enabled, any qualifying second-level link that points to a collection with an assigned image can display that image in the mega menu.

Why is my mega menu not showing?

If your mega menu is not appearing, check the following:

  • Are you using a theme that supports the mega menu feature?
  • Is the correct menu assigned in the Header section?
  • Does the menu include three levels of links?
  • Are you using Shopify’s default main menu?
  • If you want images to display, do the second-level links point to collections with collection images assigned?
  • If you are using Impulse 9.0 or later, are you following the updated mega menu guide?

FAQ

How do I create a mega menu?

  • Create a navigation menu with three levels of links and assign it to the Header section of your theme. In supported themes, the mega menu will be generated automatically.

Which themes include a mega menu feature?

  • The built-in mega menu feature is available in Expanse, Fetch, Gem, Impulse, and Motion.

Do I need to build the mega menu manually?

  • No. The mega menu is created automatically when the menu structure includes three levels of links.

Where do I edit the navigation used for the mega menu?

  • You can edit the navigation in Content > Menus in your Shopify admin.

Why should I use the main menu?

  • Using Shopify’s default main menu helps avoid setup issues and is the recommended menu for theme navigation.

How do I show images in the mega menu?

  • Enable Show mega menu images in the Header section, and make sure the second-level links point to collections with assigned collection images.

 

 

 

 

 

Related articles