Mega menu

A mega menu turns a plain navigation dropdown into a wide panel with columns of links, product rails, or featured images. In the theme you build it from blocks inside the Header section, and each panel attaches to one top-level item in your store navigation.

A mega menu needs two things to work together:

A navigation menu in your Shopify admin with items nested under the top-level item (two levels give you the columns, three levels fill them with links).
A mega menu block in the Header section that names the same top-level item so the theme knows which dropdown to replace.

If the name in the block and the menu item do not match, the panel does not appear and the link falls back to a plain dropdown.

Build the navigation menu first

The link structure comes from your Shopify navigation, not from the theme. Set it up before you add the block.

In your Shopify admin, go to Online Store, then Navigation.
Open the menu your header uses. By default this is Main menu. (You can confirm which menu the header reads in the Header section under Menu.)
Add a top-level item, for example Oils & Vinegars.
Add items nested under it. Each second-level item becomes a column heading in the panel, and the heading is itself a link to that item.
Add items nested under those. Each third-level item becomes a link inside that column.

Two levels are enough to produce a panel: you get a row of linked column headings with nothing under them. The third level is what fills the columns.

The column layout and link text always come from this menu. The blocks below control the panel style and any extra content.

Add a mega menu block

In the theme editor, open the Header section.
Click Add block.
Choose one of the mega menu blocks (described below).
In the block settings, find the Binding heading and the Parent menu item field.
Type the name of the top-level menu item you want this panel to attach to, for example Oils & Vinegars.

The theme is forgiving about capitalization, spacing, and punctuation, so Oils & Vinegars and oils & vinegars bind to the same item. It is not forgiving about wording. Typing Oils and Vinegars where the menu says Oils & Vinegars does not match, because "and" is a word you added, not punctuation the theme ignores.

You can add several mega menu blocks, one per top-level item, to give different parts of your store different panel styles.

Choosing a panel style

When you click Add block, the theme offers the mega menu in several starting layouts. The editor lists each one as Mega menu followed by the layout name. They share the same binding field and differ in what content they include.

Links: columns of navigation links only, taken from your menu.
Feature: link columns plus a media card for a featured image or video.
Collage: link columns plus an arrangement of media cards.
Editorial: link columns plus a captioned landscape image card.
Showcase: a two-card image gallery with headings, for an image-led panel.

The five layouts above are presets of the one Mega menu block. After you add one you can add, remove, or rearrange the child blocks inside it. (For how presets and blocks work, see Sections, blocks, and groups.) The tabbed layout is a separate block with its own settings, covered below.

Mega menu block settings

This is the panel container. Its own settings are short because most content lives in the child blocks.

Binding

Parent menu item: the name of the top-level navigation item this panel attaches to. Type it as it appears in your menu. The panel then replaces the plain dropdown for that item.

The child blocks you can add inside this panel:

Menu links: the link columns. See its settings below.
Collage: a group of Media card blocks arranged into a layout.
Any other content block, most often a Media card for a featured image or promotion.

Menu links block settings

Add this block inside a mega menu panel to render the link columns. The columns and link text come from the bound menu item; these settings control how they look and add optional extra text.

Intro text: a short line of text shown above the columns.
Button label: text for an optional call-to-action link below the columns. Leave it empty to hide the button.
Button link: where the call-to-action link goes.
Heading size: the size of the column headings. Choose Small, Base (the default), or Large.
Link gap: the vertical space between links within a column, from 0 to 32 pixels. The default is 8.
Column gap: the horizontal space between columns, from 0 to 48 pixels. The default is 24.

Tabbed mega menu block settings

This is a separate block, listed in the editor as the Mega menu tabs layout. It binds to a top-level menu item the same way and holds Tab blocks instead of link columns. Because its content comes from the tabs you build, it ignores the nesting under the bound menu item.

Binding

Parent menu item: the top-level menu item this tabbed panel attaches to. Type it as it appears in your menu.

Other settings on the tabs panel:

Intro text: a short line of text shown above the tab list.
Button label: text for an optional call-to-action link in the tab rail. Leave it empty to hide the button.
Button link: where that call-to-action link goes.

Tab block settings

Add a Tab block inside the tabs panel for each tab. Each tab is a row in the rail on the left and a content panel on the right.

Tab title: the tab name shown in the rail.
Tab description: a short line under the tab title in the rail.
Products heading: a heading shown above the product rail in the tab panel.
Collection: pick a collection to fill the product rail with its products. A collection takes priority over hand-picked products.
Products: hand-pick up to six products for the rail. Used only when no Collection is set.

Each Tab ships with a Media card for a featured image beside the products. You can edit it, and you can add more media cards to the tab.

Tips

If a dropdown still looks plain, the words in Parent menu item do not match the menu item. Recheck them against your navigation in the Shopify admin.
A Menu links panel needs the menu item to have child items. A top-level item with no nesting has nothing to fill the columns. A tabbed panel does not: it builds its content from its own Tab blocks.
Whether dropdowns open on hover or click is set once for the whole header under Open menu on in the Header section, not per panel.
Mega menus are a desktop feature. Below 950 pixels wide the header switches to the hamburger menu, and the panels are replaced by the mobile menu's nested lists.