A mega menu is a wide panel that opens under one link in the header, in place of a plain dropdown. It shows the link's nested links with product cards from your collections, or a row of collection cards with photos. You can add one mega menu to each top-level link.
Your header menu needs a top-level link with nested links, such as Coffee with Espresso, Filter and Decaf under it. A link with no nested links opens no mega menu. Set up your store menus explains which menu the header uses.
The nested links need to point to collections. Both layouts take their products or photos from the collections the links point to.
Choose a layout
Product cards, the default, lists the nested links and shows product cards from the collection of the selected link. The first links show a small round picture of their collection. A tall promo card with Image, Heading, Text and a button fills the last column of the panel, and Policy menu adds a menu's links under the list. Use it to let customers shop a few products straight from the menu.
Collection cards shows one card per nested link, with the collection's photo and the link's title. The promo card comes first, with Heading, Text and a button but no image, and there are no extra links. Use it to show your collections as photos.
Add the mega menu
The mega menu finds its link by the link's title. If you rename the link in your menu later, change Menu item to the new title, or the link goes back to a plain dropdown.
In the editor sidebar, under Header, select Header.
Under the Header section, click Add block and select Mega menu.
In Menu item, enter the title of the top-level link exactly as it reads in your menu, such as Coffee. Upper and lower case do not matter.
Under Menu layout, select Product cards or Collection cards.
Click Save.
To check it, point at the link in the header preview. The mega menu opens under it.
Set up the Product cards layout
Each nested link that points to a collection with products shows that collection's products. Clicking the link in the panel switches the products, and a Shop all link next to them opens the collection. The first one shows when the panel opens. In the first group of links, each of these links shows a small round picture of its collection, or of the collection's first product when the collection has no image. If none of the nested links points to a collection, the products come from the collection the top-level link points to.
Setting
What it does
Maximum products
How many products show for each link, from 0 to 4. The default is 3. Set it to 0 to hide the products and show only the links.
Two link columns
Splits the list of links into two columns on screens 1800 px wide or wider. On smaller screens, the links stay in one column.
Policy menu
A menu whose top-level links show under the list. It starts with the Footer menu. Remove the menu from this setting to show no links there.
Image
The photo of the promo card. The heading, the text and the button sit on the photo. Without a photo, the card has a dark background.
Heading
Bold text in the heading starts its second line, so the heading reads as a light first line over a bold second line.
Button label and Button link
The promo card's button. It shows only when both are filled in.
If every nested link has nested links of its own, each one heads a group in the list with its links under it.
The card settings under the Product cards heading show when Maximum products is above 0. They change the cards in this mega menu only, as Product card settings in sections explains.
Set up the Collection cards layout
Each card shows the photo of the collection its link points to, or the collection's first product photo when it has none. The card's title is the link's title. When Heading or Text is filled in, or both Button label and Button link are, a promo card with them comes first. When the cards do not fit across the panel, the row scrolls sideways, with dots under it.
Mega menus on phones and tablets
On screens narrower than 1000 px, the link opens in the mobile menu as a list. With Product cards, a row of products shows under the links, one card at a time, and customers swipe to the next. They come from the collection the top-level link points to, or else from the first nested link whose collection has products. With Collection cards, only the links show.
Mega menus in other languages
If your store is translated, the menu link's title changes in each language, and the mega menu only opens where Menu item matches it. Translate Menu item to the same title as the translated link, as Translate your store describes.
A mega menu is a wide panel that opens under one link in the header, in place of a plain dropdown. It shows the link's nested links with product cards from your collections, or a row of collection cards with photos. You can add one mega menu to each top-level link.
Your header menu needs a top-level link with nested links, such as Coffee with Espresso, Filter and Decaf under it. A link with no nested links opens no mega menu. Set up your store menus explains which menu the header uses.
The nested links need to point to collections. Both layouts take their products or photos from the collections the links point to.
Choose a layout
Product cards, the default, lists the nested links and shows product cards from the collection of the selected link. The first links show a small round picture of their collection. A tall promo card with Image, Heading, Text and a button fills the last column of the panel, and Policy menu adds a menu's links under the list. Use it to let customers shop a few products straight from the menu.
Collection cards shows one card per nested link, with the collection's photo and the link's title. The promo card comes first, with Heading, Text and a button but no image, and there are no extra links. Use it to show your collections as photos.
Add the mega menu
The mega menu finds its link by the link's title. If you rename the link in your menu later, change Menu item to the new title, or the link goes back to a plain dropdown.
Coffee. Upper and lower case do not matter.To check it, point at the link in the header preview. The mega menu opens under it.
Set up the Product cards layout
Each nested link that points to a collection with products shows that collection's products. Clicking the link in the panel switches the products, and a Shop all link next to them opens the collection. The first one shows when the panel opens. In the first group of links, each of these links shows a small round picture of its collection, or of the collection's first product when the collection has no image. If none of the nested links points to a collection, the products come from the collection the top-level link points to.
If every nested link has nested links of its own, each one heads a group in the list with its links under it.
The card settings under the Product cards heading show when Maximum products is above 0. They change the cards in this mega menu only, as Product card settings in sections explains.
Set up the Collection cards layout
Each card shows the photo of the collection its link points to, or the collection's first product photo when it has none. The card's title is the link's title. When Heading or Text is filled in, or both Button label and Button link are, a promo card with them comes first. When the cards do not fit across the panel, the row scrolls sideways, with dots under it.
Mega menus on phones and tablets
On screens narrower than 1000 px, the link opens in the mobile menu as a list. With Product cards, a row of products shows under the links, one card at a time, and customers swipe to the next. They come from the collection the top-level link points to, or else from the first nested link whose collection has products. With Collection cards, only the links show.
Mega menus in other languages
If your store is translated, the menu link's title changes in each language, and the mega menu only opens where Menu item matches it. Translate Menu item to the same title as the translated link, as Translate your store describes.
If the mega menu does not open, see My mega menu doesn't open.