Mega Menu

Learn how to add menus to build your store's navigation

"A mega menu is an expansive dropdown menu featuring multiple levels of nested items, typically starting from a top-level category.

Implementing a mega menu enhances the browsing experience for shoppers by facilitating easy navigation through your product offerings and additional information. It's an ideal design solution, especially for websites with numerous categories and subcategories. Additionally, its design allows ample space for incorporating images (banners) and other engaging content.

Given the unique characteristics and goals of individual stores, the type of menu required may vary based on factors such as store size, nature of products, and business objectives."

1. How to create a Mega menu

1. Go to Shopify 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 add 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.

If you want to create a mega menu, you need to add third-level items.

Add a Menu to theme

1. Go to Themes > Customize

2. Click on the Header section > Menu to add the menu you have created.

The newly created menu is now shown on your storefront.

To activate the mega menu, navigate to the Header section, then select "Add block" > choose the desired Mega menu block, and enter the precise menu item name.

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, select Add block > choose Top bar.

1. Toggle the divider, transparent effect, and addons by checking or unchecking the respective boxes.

You can input a message or leave it empty if you prefer not to display one.

Add a banner to the mega menu

To achieve the aforementioned outcome, please follow these steps:

1. Navigate to Themes > Customize.

2. Within the Header section, select Add block > opt for 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).