Mega menu

Header

Mega menus display menu links in multiple columns so customers can quickly browse large catalogs. Add multiple sub-menus along with a featured image, text, and links to customize your mega menu.

Why is the mega menu not working in other languages?

If you've translated your store using an app, make sure the "Parent dropdown link" name is not translated, as this will break the mega nav. See instructions below for fixing translated mega navigations.

Create nested menu in admin

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.

STEPS

In your Shopify admin:

  1. Go to Content > Menus.

  2. Select the main menu used for your header.

  3. Add a top-level link that will open the mega menu and contain the nested sub-menus.

  4. Add your 2nd-level menu links and use the drag handles ⋮⋮ to move them under the top-level link.

  5. Add your 3rd-level menu links and use the drag handles ⋮⋮ to move them under the 2nd-level links.

  6. Click Save.

Add mega menu block

Once you have created your nested menu, you can now add mega menu blocks to your Header in the theme editor.

  1. Click the arrow next to the Header section, and click (+) Add Mega menu.

  2. Click the Mega menu block to open the settings.

  3. Enter the exact name of the top-level link (e.g. "Shop") in the Dropdown parent link field.

  4. Click Save.

Customize menu layout

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

Setting
Description
Options

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 text styles

Change the font used for the headings (2nd-level links) and submenu (3rd-level links).

Click Mega menu block to find settings

Setting
Description
Options

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 promotions

Add up to four promotion blocks in the mega menu.

Create menu with only promotions

You can create a mega menu with only promotions like the one below.

  1. In Content > Menus, click to open the menu used for the header.

  2. Add a top-level link to your header menu without any nested links.

  3. In the Mega menu block settings, add the top-level link name to Dropdown parent link.

  4. Enable and set up between 2 to 4 promos and add Links for each.

Click Mega menu block to find settings

Setting
Description

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.

Customize promotion styles

Change the promotions' layout, position, and image shape.

Click Mega menu block to find settings

Setting
Description
Options

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

Translating mega menus

When translating your theme, make sure the "Dropdown parent link" text from the mega menu settings is not translated.

If you've auto-translated your theme, the parent link text may have been translated, which will break the mega menu for other languages.

If you're using the Translate & Adapt app ↗:

  1. In the Shopify admin, click Translate & Adapt to open the app.

  2. Go to Theme > Section groups.

  3. Click Header Group in the side panel.

  4. Scroll down to find the "Meganav Parent link" that's used for the dropdown parent link.

  5. Delete any translations of the parent link in the secondary language column.

  6. Click Save.

Last updated

Was this helpful?