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.
Canopy offers two 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 Online Store > Navigation 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
- 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 FAQ section at the bottom of this page. - Set your color choices for the header and menus in Header > Style.
What are the types of mega menu?
Canopy provides two distinct types of mega menus, outlined in this section.
Note
This setup is designed to be flexible. The navigation menu could have a standard menu, both styles of mega menu, 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.
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, 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 mega menu and they can 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 both the sidebar and column mega menus. 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
'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 'Craft' which goes to /collections/craft - however tapping on Craft instead opens the submenu, rather than going to that page.
Canopy 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).
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 Online Store > Navigation 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.
How do I change the header and menu colors?
The menu and Header have their own color settings. On install they use a generic set of colors. These can be customized to suit your store in the Header section.
Steps
- Open the theme editor and in the Header Group, go to Header > Style.
- Set the menu background color and menu text color for desktop and mobile.
- Click save.
I am using a version of Canopy before 6.0.0. How do I set up a mega menu and menu promotions?
Steps
- Create a nested menu in the Shopify admin area: Online Store > Navigation. Read How to set up drop-down menus for more. Top level items can have up to two levels of nested drop-down menus.
In the Canopy theme, links with one nested dropdown level will be shown as a simple dropdown. Links with two nested dropdown levels for all items will be shown as a full width menu. - Open the Theme Editor, and click on the Header section.
- Pick the main navigation menu in the Menu setting within the Navigation area of the settings.
- Choose the Menu links alignment. Left or Center.
- An additional setting allows control of the Maximum number of links per column for menus with one nested dropdown level.
- Choose a Featured link if desired. Enter the title of a link to highlight it in a different color, for example, 'Sale'.
Menu promotions are small images that sit within the navigation grid on desktop. Use them to promote new collections, sales or announcements. They can be shown in both full width and simple dropdowns.
Steps
- Open the Theme Editor, and click on the Header section.
- Click Add Menu promotion and enter the relevant top-level Dropdown link title where the image should be shown.
- Add the Image, Text and Link to complete the menu promotion. To show more than one image in a dropdown, add a second menu promotion block.
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!
Contact us