Mega menu
Header
Last updated
Header
Last updated
A Mega menu displays menu links in multiple columns to make browsing large catalogs easy.
Before adding the mega menu block, you will need to create a menu with three levels of nested links.
The top-level link appears in the header and opens the mega menu.
The 2nd-level links appear as column headings inside the mega menu.
The 3rd-level links appear in columns below the second-level links.
From your Shopify admin, go to Content > Menus. Choose a menu item to be the 'parent' or top-level link that will open the mega menu from the header. To create 2nd-level and 3rd-level links, use the drag-and-drop handles ⋮⋮ to move links under other links to nest them.
Once you have created your nested menu, you can now add mega menu blocks to your Header in the theme editor.
Click the arrow next to the Header section, and click (+) Add Mega menu.
Click the Mega menu block to open the settings.
Enter the exact name of the top-level link (e.g. "Shop") in the Dropdown parent link field.
Click Save.
Change the number of columns and choose to display 2nd-level links without nested links in a single column.
Click Mega menu block to find settings
Column count
Set the number of columns. If there are more submenus than columns, then submenus will appear in multiple rows.
1-4 Default: 4
Condense solo categories
Conserve space by stacking consecutive 2nd-level links without nested links.
Change the font used for the headings (2nd-level links) and submenu (3rd-level links).
Click Mega menu block to find settings
Heading text style
Choose the font for the heading as set in the theme settings.
Heading Default Body Overline
Submenu text style
Choose the font for the submenu text as set in the theme settings.
Heading Default Body Overline
Add up to four promotion blocks in the mega menu.
You can create a mega menu with only promotions like the one below.
In Content > Menus, click to open the menu used for the header.
Add a top-level link to your header menu without any nested links.
In the Mega menu block settings, add the top-level link name to Dropdown parent link.
Enable and set up between 2 to 4 promos and add Links for each.
Click Mega menu block to find settings
Enable
Show promo feature in the mega menu.
Image
Select or upload an image for the promo block.
Heading
The title of the promo.
Text
Add multiple lines of text to describe the promo.
Link
Select or paste a link to redirect visitors when they click the image.
Change the promotions' layout, position, and image shape.
Click Mega menu block to find settings
Image aspect ratio
Select an aspect ratio to crop images to be a uniform shape, or select Natural to display images in their original shape.
Natural Portrait (2:3) Portrait (4:5) Square (1:1) Default Landscape (5:4) Landscape (3:2)
Position on desktop
For desktop screens, place promotions before or after the menu links.
First Last Default
Position on mobile
For mobile screens, place promotions before or after the menu links.
First Last Default
Show promos on mobile
Display promos on mobile devices.
Layout on mobile
Display promo features as a list or in a single rotating row.
Slider Default List
When translating your theme, make sure the "Dropdown parent link" text from the mega nav settings is not translated.
If you've auto-translated your theme, the parent link text may have been translated, which will break the mega nav for other languages.
If you're using the Translate & Adapt app ↗, go to Section groups > Header Group. In the default language column, find the name used for the dropdown parent link. Delete all translations for the parent link and click Save.
