Megamenu and Rich Submenu Navigation

This article will show you how to set up your megamenu and rich submenu.

Jewelry Madore Megamenu

The header menu is a critical component of any online store, as it allows users to navigate throughout the site. With the Booster Theme, you can customize the header menu. You are not limited to a basic menu; you can also create a mega menu that displays images(1) and rich submenus that contain icons, titles, and descriptions(2).

In this article:

  1. Megamenu and Rich Submenu
  2. Setting Up the Megamenu
  3. Setting Up the Rich Submenu

Megamenu and Rich Submenu

1. Megamenu

Mega menu

2. Rich submenu

Rich submenu

Setting Up the Megamenu

Step 1. Create a Menu

Go to your Online StoreNavigationAdd menu.

Shopify Navigation Page

Step 2. Add Sub-items

In order to trigger the mega-menu layout, you'll need to add a submenu item that is a collection or a product with an image. 

Menu sub-collection

Step 2. Enable the Megamenu Option

Go into the Header settings and check the "Enable megamenu" option.

Enable Megamenu setting

Setting Up the Rich Submenu

In the ABOUT item, you can see that it's different, this is a way do to it for the rich submenu features. The complete item is set up like this:

desc: Learn more about our core values and the team behind Madore | icon: users-alt | text: Our commitment

Rich Submenu Nav Item


Here is the logic to follow to set up the rich submenu:

  • "icon:" You need to use the icon names from this library (in this example: users-alt)

IconScout Name

  • "text:"  This is for the title.
  • "desc:" (optional) This is the description.

Note: Make sure to add a "|" between each element.

Step 3. Assign your menu in the Header Settings

Selecting a Menu


You know everything now about the menu! You can now use the megamenu and the rich submenu features easily. There is so much more to discover inside Booster Theme!