What is a mega menu?
A mega menu is a full width navigation menu that neatly organizes many links and categories. It is a great way to organize complicated menu structures and helps customers to find their desired products and collections quickly and easily. Showcase supports a full-width mega menu and menu promotions as well as standard dropdown menus.
For further information about the header behavior - choosing whether the header sticks on scroll, or changes color - see our guide How to set up the header section.
How to set up a mega menu
Steps
- Create a nested menu in the Shopify admin area's Content > Menus section. Read How to set up drop-down menus for more information.
- Ensure all of the links in that menu have 3 levels. If only some of the links have three levels, the menu will be displayed as a standard dropdown rather than a full width mega menu. On larger screens the second level is displayed as a column heading.
- Open the Theme Editor, click on the Header section and select the menu to use.
How to add images to the menu
Showcase has the ability to add promotional images to two layer dropdown menus and mega menus. Promotions are a great way to highlight certain products, collections, or special sales. Keep promotions short and snappy and contextually relevant to the menu they're being shown in.
- Steps
- Open the Theme Editor and select the Header section.
- Choose Add menu promotion to add a menu promotion block.
- Enter the top level Menu item under which you show an image, or, to show the image on the first level of the burger menu popup, leave the Menu item field blank.
- Add your promotional images, text and links.
Note
FAQs
Why is my menu not showing as a full width mega menu?
If the menu is showing a standard dropdown instead of a full width mega menu then it's worth checking that every link in the menu item has child links. If only some of the menu items have 3 layers and some only two layers then a standard dropdown menu is used instead.
The burger menu is shown on smaller screens where there isn't enough space to show a horizontal line of links. This may be the layout seen in the Theme Editor as the settings sidebar takes up screen space.
Why isn't my promotional image showing?
Double-check that the link name you’ve entered matches the link's name 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 settings.
My store has multiple languages, can I still show promotional images?
Yes. If you are using a translation app, check that the translation for the Menu item 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 Menu item matches the translated menu link. In this way the system 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