Mega menu

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:

  1. The first level of the menu items is the items in the sidebar of the menu
  2. The second level are the headings above the menu list seen on the right
  3. 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:

First level menu item

The first level of a mega menu

The second level of a menu:

Second level menu item

The second level of a mega menu

The third level of a menu:

Third level menu item

The third level of a mega menu

Add the block

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!

Showing a menu in the admin and it's related place in the frontend of the megamenu

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:

Shopify editor showing menu

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

Align theme

Leave a comment

Please note, comments need to be approved before they are published.