Mega menus – User Guides

A mega menu is a navigation menu that neatly organizes many links and categories.

What is a mega menu?

A mega menu is a navigation menu that neatly organizes many links and categories and is a great way to organize complicated menu structures. Using the correct type of mega menu will allow your customers to easily find the desired products or collections and should help with conversions.

Enterprise offers three different types of mega menu and provides the ability to add product and collection imagery, as well as promotional imagery and link badges.

How to set up a mega menu

Steps

If you have not already done so, create a nested menu in the Shopify admin area's Content > Menus section. Read How to set up drop-down menus for more.
Open the Theme Editor, and click on the Header section.
Pick the main navigation menu in the Main menu setting within the Navigation area of the settings.
Select Add block under the Header section and choose the type of mega menu to use (see What are the types of mega menu? for more).
Assign the mega menu to a link in the main menu by entering the name of the link into the Link name setting.
Click Save in the Theme Editor, and hover over the link entered in Step 5. The mega menu should show. If it doesn't, refer to the Mega menu FAQs section at the bottom of this page.

Note

Multiple links are separated with a comma. Avoid using a comma within the title of the menu link.

What are the types of mega menu?

Enterprise provides three distinct types of mega menus, outlined in this section.

Note

The navigation menu could have more than one mega menu and even the same type of mega menu (e.g. sidebar) on multiple links.

Column mega menu

A conventional layout with columns of links and added versatility of having up to three badges and up to three promotions. The column mega menu works best when you have a limited number of categories, each of which has a roughly equal amount of links.

Button mega menu

This shows the last level of links as buttons and is great when you have a lot of menu items within each category. This layout supports up to three promotions and does not support badges.

Sidebar mega menu

The sidebar mega menu shows one set of links at a time, and has the added benefit of being able to show collection or product images within the child links (right hand side) of the menu. If you're keen to showcase your collection or product imagery, you may want to use this layout. This mega menu can have up to three badges and does not support promotions.

Note

We think the sidebar mega menu works best with no more than eight second level menu links shown in the left hand sidebar. Too many links in the sidebar can mean the customer has to scroll to see the third level links.

Note, on mobile the products and collections images will still show as images rather than text.

For example:

How to add a promotion

Promotions are a great way to highlight certain products, collections, or special sales. They can be added to the column and button mega menus and they will also be shown on mobile.

Keep promotions short, snappy and contextually relevant to the menu they're being shown in.

How to add a badge

Badges are small colored labels that can show next to last level menu links.

They can assist in conversions by drawing customer's attention to specially labelled menu items and are available in the sidebar and column mega menu. For the best user experience, badges will be hidden on smaller screens.

Badge Settings

Color: Chose a color that stands out over the background color of your mega menu
Link: Enter the name of the link to assign the badge to
Badge text: The badge text, e.g. ‘Reduced’ or ‘New In' etc

Note

The Link setting also allows you to add the same badge to multiple links by separating each link name with a comma.

How to add a circular collection image

Collection images can be displayed as a circle in Column and Sidebar mega menus. This feature is available in version 1.6.0 and above.

In the Column mega menu settings, go to Headings and select Crop images as circles. In the Sidebar mega menu settings, go to Left hand side links and select Crop images as circles.

'Go to' links

Menus with child links can often create a frustrating experience when the parent menu is also a link to a page or collection. For example, on mobile you may have a parent menu called 'Activities' which goes to /collections/activities - however tapping on Activities instead opens the submenu, rather than going to that page.

Enterprise provides a unique setting to include an additional “Go to” link within submenus so that the parent link can still be visited.

1680108616080-Enterprise%2Bgo%2Bto%2Blinks.gif

Steps

Open the Theme Editor, and click on the Header section.
Find the Navigation area and enable the 'Go to' links to submenus setting.

This will add a 'Go to' link on mobile where needed, and also on desktop on in standard menus (not mega menus).

FAQs

Why isn’t my mega menu showing?

Double check that the link name you’ve entered exactly matches the name of the link as it appears in the Content > Menus page of the Shopify admin area. Sometimes link names could be in a different case, or have a space at the end or beginning, both of which would need to be reflected in the theme settings.

My store has multiple languages, can I still use mega menus?

Yes. If you are using a translation app, check that the translation for the menu item in the Mega Menu block matches the Link name or names exactly. It may be necessary to review or refresh the translations in your app.

Alternatively, add a Mega Menu block for each language ensuring that the Link name matches the translated menu link. In this way the system can pair the Mega Menu block to the correct top level menu item.

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!