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.
VotraLee 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.
NoteMultiple links are separated with a comma. Avoid using a comma within the title of the menu link.
What are the types of mega menu? #
VotraLee provides three distinct types of mega menus, outlined in this section.
NoteThe 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.
NoteWe 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.
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
NoteThe 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.
VotraLee provides a unique setting to include an additional “Go to” link within submenus so that the parent link can still be visited.
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).
