Mega menu
Add menus to build your store's navigation
How to set up a mega menu
How to customize your 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.

Create Menu

1. Go to Navigation to create a menu.
2. Click Add menu to add new or choose any items below the menu to edit.
3. Write the menu's name, then choose Add menu item.
4. Write the menu item's name and choose the item in the dropdown box > click Add.
5. To make an item to a child menu, drag it under the main item.
Menu items can also be added to create the same level as a child menu.

Add Menu to the theme

1. Go to Themes > Customize.
2. Check Header section > Menu, then edit menu and use the created menu.

Customize the Mega menu

Add a top bar to the menu

To achieve the result above, kindly follow the steps:
1. Go to Themes > Customize.
2. In the Header section, add block > choose Top bar.
3. Enable/disable 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.

Add a banner to the mega menu

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).
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).

Add products list to the menu

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).
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.

Add blog post to the menu

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.

Add collections to the menu

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.

Add custom HTML to the menu

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.
Copy link
On this page
Create Menu
Add Menu to the theme
Customize the Mega menu
Add a top bar to the menu
Add a banner to the mega menu
Add products list to the menu
Add blog post to the menu
Add collections to the menu
Add custom HTML to the menu