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 a mega menu can help customers easily find the desired products or collections and should help with conversions.
Mode has two menu layouts and the option to show promotional images and text in the menu.
How to set up the menu
Mode has two different menu layouts: a horizontal/inline menu and a drawer menu. The drawer menu style will be used for longer menus, when the links do not fit onto one line, and on mobile.
Steps
- If you have not already done so, create a nested menu in the Shopify admin area Content > Menus. Read How to set up drop-down menus for more.
- Open the Theme Editor, and click on the Header section.
- In the Navigation settings, select the menu to be used in the Menu setting.
- Choose the Menu alignment.
- If desired, select a different menu to use for the Drawer menu. This drawer layout is used on smaller screens and for longer menus. If no menu is selected then the menu selected in Navigation > menu will be used instead.
- Within the Drawer navigation settings, a carousel layout for menu promotions and products to show in a Featured products collection can be selected.
How to set up a separate drawer menu
Mode has a drawer menu which is used for longer menus and on mobile. Choosing a different menu for the drawer/burger menu allows merchants to change the customer navigation experience to suit the drawer layout.
Steps
- If you have not already done so, create a menu in the Shopify admin area Content > Menus. Read How to set up drop-down menus for more.
- In the Navigation settings, select a Drawer menu.
How to add menu promotions
Promotions are a great way to highlight certain products, collections, or special sales. They can be added to a mega menu and they will also be shown on mobile.
Steps
- Open the Theme Editor and click on Header.
- Click on Add block and select either a Small menu promotion or Wide menu promotion.
- In the menu promotion settings, add the Link name, which should be an exact copy of any top level link in the menu.
- Choose the Background color, Text color, Title, Text and Link URL.
FAQs
Why isn’t my menu promotion showing?
Double check that the link name 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 show menu promotions?
Yes. If you are using a translation app, check that the translation for the Link name in the menu promotion block matches the menu link exactly. It may be necessary to review or refresh the translations in your app. Alternatively, add a menu promotion block for each language ensuring that the Link name matches the translated menu link. In this way the theme can pair the menu promotion 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!
Contact us