Mega menu
Learn how to add menus to build your store's navigation
How to set up a mega menu
A mega menu is a drop-down menu in which the top-level item has two levels of nested drop-down menus. A mega menu affects how shoppers discover your product offerings and other information, which lets them browse easily and seamlessly. It is a perfect design choice when building a website with multiple categories and subcategories. The design also provides sufficient space for images (banners) and other rich content.
Different websites require different kinds of menus, depending on the size, nature, and objectives of your store. This article shows you how to create and customize your own suitable menu.
1. Go to Navigation to create a menu.
.png?alt=media&token=f7f73021-6f5d-4f9a-b074-45d97eced6dc)
2. Click Add menu to add new or choose any items below the menu to edit.
.png?alt=media&token=5b022033-5402-4cd5-9f75-65f7880bce59)
3. Write the menu's name, then choose Add menu item.
.png?alt=media&token=773022a3-c6b9-4c37-94be-1d28c0ee095e)
4. Write the menu item's name and choose the item in the dropdown box > click Add.
.png?alt=media&token=b7e5fc88-f890-4051-8649-4fd4f436ed54)
5. To make an item to a child menu, drag it under the main item.
.png?alt=media&token=e3c756cd-ef71-4533-92cc-dc9257f0ee12)
Menu items can also be added to create the same level as a child menu.
.png?alt=media&token=b7d36326-9800-4ba0-8418-12b449d0d252)
If you want to create a mega menu, you need to add third-level items.
1. Go to Themes > Customize.
.png?alt=media&token=d10f8b1f-1348-438f-b991-47356b90dda0)
2. Check Header section > Menu, then edit menu and use the created menu.
.png?alt=media&token=a974524d-48c3-4f8a-8818-5fea6928d42e)
The newly created menu is now shown on your storefront.
To enable the mega menu, in the Header section, click Add block > add any Mega menu block you want and fill in the exact menu item name.
To achieve the result above, kindly follow the steps:
1. Go to Themes > Customize.
.png?alt=media&token=01c4e123-bb0c-4936-afbf-1765655821ff)
2. In the Header section, add block > choose Top bar.
3. Enable/disable a divider and addons by checking the boxes. You can add a message or leave it blank if you do not want to show it.
You must enter the text for the For item element that matches with the menu item they have set up in the navigation. For example, the menu item namely "All products" then the For item element must be "All products" as well.
.png?alt=media&token=5f82003a-6437-4164-a219-e9d626aa949c)
To achieve the result above, kindly follow the steps:
1. Go to Themes > Customize.
2. In the Header section, Add block > choose Banner (Mega menu).
.png?alt=media&token=1871e9af-47b7-42e3-b5e9-2154ab510c19)
3. Match the text in For item element with the corresponding menu item you want to add a banner.
Select container wrapper width: use header' container, default, full width, or use container box.
4. In Settings, add an image and insert a link, title, subtitle and button label (optional).
.png?alt=media&token=a82a3b7f-ee10-45de-bac7-1b14d649f21c)
To achieve the result above, kindly follow the steps:
1. Go to Themes > Customize.
2. In the Header section, Add block > Choose Products list (Mega menu).
.png?alt=media&token=4890e028-17f2-41be-a7b5-250ec153d76d)
3. Match the text in For item element with the corresponding menu item you want to add products list.
Select a collection for this section, set the number of products and columns to show.
Select container wrapper: use header' container, default, full width, and use container box.
.png?alt=media&token=442a413c-37af-4420-90a2-b27ee034978d)
To achieve the result above, kindly follow the steps:
1. Go to Themes > Customize.
2. In the Header section, Add block > Choose Blog posts (Mega menu).
3. Match the text in For item element with the corresponding menu item.
Select a Blog for this section and select container wrapper width: use header' container, default, full width, or use container box.
To achieve the result above, kindly follow the steps:
1. Go to Themes > Customize.
2. In the Header section, Add block > Choose Collections (Mega menu).
3. Match the text in For item element with the corresponding menu item you want to display collections.
Select container wrapper width: use header' container, default, full width, or use container box.
4. In the Collections list, choose the collection and add its featured image.
1. Go to Themes > Customize.
2. In the Header section, Add block > Choose Custom HTML (Mega menu)
3. Match the text in For item element with the corresponding menu item you want to add custom HTML.
Select container wrapper width: use header' container, default, full width, or use container box.
