Megamenu
Learn how to set up the megamenu (desktop) and the mobile menu
In this guide, we’ll explain how to set up the main desktop megamenu. The same logic also applies to the mobile menu, which we’ll cover later in this guide.
Setting up the menu
Start by opening the Menus section in your Shopify admin. You can either select the existing Main menu or create a new menu if you prefer. If you create a new menu, make sure to select it later in the Header section settings, as shown in the screenshot below.
As you may already know, Shopify allows up to three levels for menu items. While some may see this as a limitation, we think it’s a good balance—going deeper usually creates confusion in a store’s navigation hierarchy.
Below, you can see the exact menu structure used in our demo store (click the screenshot to zoom in).
How the megamenu is triggered
The megamenu is triggered automatically as soon as a menu item contains three levels. For example, our “Shop” menu item uses three levels, so it displays as a megamenu.
If a menu item only has two levels, like the “Pages” menu item in our demo, a standard dropdown menu will be shown instead.
Showing images inside the megamenu
If you want to display images inside the megamenu, simply add a menu item without children. In our demo, this is done with the last two items: “Latest arrivals” and “Best selling”.
As soon as a menu item has no child items, it will automatically be displayed as an image with its title shown below it. This makes it very easy to build a rich megamenu without dealing with complex configurations.
You may also notice text such as “| New #b38970” in the screenshot. These are used to add custom badges to menu items. We’ll cover this feature in more detail below.
Mobile menu
Although you can use the same menu for both desktop and mobile, we recommend creating a separate menu for mobile with a slightly different structure.
On desktop, it makes sense to group most product and collection links under a main “Shop” menu item. On mobile, however, usability is often better if those collections are added directly as top-level menu items, as shown in the screenshot below.
This structure is usually easier to browse on smaller screens. That said, if your store structure is simple and you don’t have many collections or products, you can still use the same menu for both desktop and mobile.
Just like with the desktop menu, if you create a new menu for mobile, make sure to select it in the Header section settings.
Custom badges
As mentioned above, both the megamenu and the mobile menu now support custom badges. You can display badges on both parent and child menu items.
To add a badge, simply append the badge text to the menu item title using a pipe (|) character. For example:
“Sandals” → Menu item title
“New” → Badge text
“#000000” → Badge color
You may omit the color, in which case the Accent color defined in your theme will be used.
This allows you to add badges to any menu item. However, we recommend using them sparingly, only on selected items, to highlight promotions or important content without cluttering the menu.
Last updated