How to add a mega menu

This page guides you through adding a mega menu on desktop. If you're looking for sidebar menu promotion blocks (mobile), read our guide for sidebar menu promotion blocks.

A mega menu is a way to display dropdown links in a more visually engaging way. Use mega menu blocks when you wish to create hierarchy or draw attention to certain links on your site with imagery in addition to text.

Mega menu with the horizontal header layout (Primavera)

Mega menu with the vertical header layout (Savoir)

Follow these steps to convert a regular dropdown to a mega menu and achieve the same look as the above screenshots:

• Under Admin > Content > Menus, create a menu that has three levels. For example, to achieve the Shop mega menu for Savoir (top right), we have the following menu structure:

Three-tier menu structure for the Savoir demo store

• In the Customizer, add a new mega menu block under Header:

Add a new mega menu block

• Type the name of the menu item you wish to be a mega menu in the menu item field, e.g. "Shop". This must match exactly, including whitespace and casing. The dropdown items for this link will be used to populate the mega menu.

  

  Here, we're telling the Mega menu block to appear under the "Shop" menu item on the Savoir demo store

• Choose a color scheme

• There are two different layout options for the mega menu, which only apply if an additional color scheme is used. When the fade layout is selected, the mega menu will fade to match the new color scheme. When the split layout is applied, the mega menu will be split in half, with one half using the original color scheme and the other using the new color scheme.

• When using the vertical header and the fade mega menu, there is a chance that you may have color contrast issues with your original logo. In that case, upload a logo with a different color scheme under Settings > Logo > Alternate logo and enable the use alternate logo checkbox to switch logos when the mega menu is active.

• Add up to 3 promotion blocks. For each promotion:

  1. Image

  2. Image ratio

  3. Label

  4. Link

Megamenu layout options

Megamenu with nested submenus and promo blocks

Choose which images, labels and text you want for your promo blocks. You can add up to three promo blocks per mega menu on desktop.

Settings for promo block 1

Megamenu with nested submenus (available in v1.5.0+)

If you don't add any promo blocks submenu items will be spread across several columns. Second level menu items will be the headings, and third level menu items will be grouped under the second level items.

Megamenu with single level menu (available in v1.5.0+)

If you don't add any third level menu items, menu items will be spread across the menu. This is great for a menu with a single hierarchy of items, such as a long list of brands.