Introduction
Displays a navigation item and menu as a single mega menu. Add multiple mega menu items to create a robust navigation. Additional configuration is recommended.
A few important notes
Create a new menu
It is very likely that a previously-set up Shopify navigation will not work for the megamenu and a new one might need to be created.
š Protip: We recommend creating a new menu instead of editing one you already have; editing an existing menu to have the right structure get get confusing, and it's always good to have a "backup" of your previous menu in case you want to use it elsewhere, or revert your theme, etc.
Build a three level menu
To make use of the full megamenu functionality, a new three-level menu needs to be set up in the Shopify navigation settings that has all the links contained in the menu:
- The first level of the menu items is the items in the sidebar of the menu
- The second level are the headings above the menu list seen on the right
- The third level is the menu items seen on the right under the headings
Lets look at some examples to help make it a bit more clear...
The first level of a menu:
The second level of a menu:
The third level of a menu:
After setting up the three-level navigation, you need to make sure to add the "Mega menu" block to the main navigation section and assign the menu that you created!
After setting up the three-level navigation, you need to make sure to add the "Mega menu" block to the main navigation section and assign the menu that you created:
Block settings
Title
Used as the navigation item title.
Menu
Choose the menu from your Shopify store navigation settings that will populate the content of the mega menu.
For the best results and the intended use of the mega menu block, the menu you choose in this setting should only contain three-level menu items, for example, Shop > Popular > Product X, Product Y, Product Z.
If your navigation menu does not have that many levels, you might consider using the main menu block.
Show announcement bar
Displays the announcement bar under the mega menu content. The contents and design of the announcement bar are defined in the theme settings.
Show banner
Displays a banner aside of the mega menu content. Refer to banner block for more information on available banner settings
