Mega menu

How-to guide All plans 3 min read

A mega menu opens a wide panel under a top-level item and lays out blocks side by side in columns. Use it when one dropdown list isn’t enough — for example to show several categories at once next to a promo image.

Build a mega menu

1. Pick a template

   In the editor’s Elements tree, click Add submenu under a top-level item. Point to Mega menu and click Select on a template.

   

   Start from the template closest to the layout you want — it's faster than Blank.

2. Add blocks

   Click Add block in the panel preview, choose a group in Select block, then click Select on a layout.

   

   Add block appears inside the open panel and under the mega menu in the Elements tree.

3. Fill in each block

   Hover over a block and click the pencil icon to edit it. For a link list, click Add items.

4. Size the columns

   Set each block’s Width so a row adds up to 100% — for example 25% × 4 or 50% + 25% + 25%. A block that doesn’t fit starts a new row.

5. Save and publish

   Click Save, then Publish.

Templates

Blank

An empty panel for your own blocks.

Link lists

4 link list, 3 link lists + 1 image, 2 link lists + 2 images, 1 link lists + 3 images.

Images and products

4 images, 4 products.

Product listsGrowth · Pro

4 product lists, 1 link list + 3 product lists.

CarouselsGrowth · Pro

Product carousel, Link list + product carousel, Image + product carousel.

Contact

Map + contact + address.

Locked templates show a plan badge and Upgrade to use. See Plans and billing.

Panel layout

To change the whole panel, hover over the parent item, click Edit Item and scroll to Submenu.

Submenu settings of a mega menu

TypeDefault: Mega

None hides the submenu but keeps its content, so you can switch it back later.

Width + alignmentDefault: Full width

Full width spans the menu bar. Center, Left or Right make a narrower panel under the item.

WidthDefault: 550 px

Panel width, shown when the panel isn’t full width.

Content alignment

How blocks spread when they don’t fill the row: Center, Left, Right, Space around, Space between, Space evenly.

Background colorDefault: Transparent

#FFFFFF00 uses the menu’s submenu color.

Background image

An image behind the panel, such as a seasonal banner.

Note

In a vertical menu, Height + alignment (Full height, Center, Top, Bottom) replaces Width + alignment.

Change or remove it

• Pause it — set Type to None. Content is kept.
• Switch template — set Type to None, then click Add submenu again.
• Remove a block — hover over it and click Delete Item.
• Reorder blocks — drag them in the Elements tree.

Troubleshooting

The mega menu doesn't open on my storefront

Check that Type isn’t None, the panel has at least one block, and you clicked Save and Publish. Still missing? See Why doesn’t my menu show?

Columns wrap onto a second row

The block widths in that row add up to more than 100%. Lower one block’s Width, or set them all to Auto.

Columns have different heights and leave gaps

Turn on the masonry layout to stack blocks of different heights neatly.

Related pages

• Blocks overviewAdd blocks such as links, images, products and countdowns to a mega menu or tab.
• SubmenusCompare dropdowns, mega menus, tabbed menus and masonry layouts, and pick the right submenu for each item.
• Masonry layout and Special menuStack blocks of different heights neatly in columns, or show a category list with a panel for each category.
• Tabbed menuLet shoppers switch between groups of content, such as Men, Women and Kids, inside one submenu.

Was this helpful?

Report an issue