Skip to main content
Megamenus combine standard navigation links with image-based cards to create visually rich navigation experiences. They appear on desktop when hovering over a top-level navigation item, allowing you to showcase featured content alongside traditional menu links. Megamenu behavior is determined by the presence of Image and text card blocks in the Header section.

​
What this feature controls

Megamenus control the visual layout and card-based navigation for top-level menu items. They allow you to:
  • Display image cards within navigation dropdowns
  • Combine text links with visual elements
  • Create featured collection highlights
  • Build campaign-focused navigation structures

​
How megamenus work

Megamenus rely on Image and text card blocks to determine their behavior:
  • If Image and text card blocks exist, the navigation item opens as a megamenu
  • If no Image and text card blocks exist, the navigation item falls back to a standard dropdown menu
Megamenu functionality depends entirely on the presence of Image and text card blocks.

​
Requirements

To activate a megamenu layout, both of the following must be true:
  1. Megamenu settings are configured in the Header section
  2. At least one Image and text card block is added to the Header section
If no Image and text card blocks are added, the menu will not render as a megamenu and will behave as a normal dropdown.

​
Configuring megamenu settings

1

Open Theme Customizer

From Shopify admin, access the Theme Customizer.
2

Select Header section

Click on the Header section in the left sidebar.
3

Configure megamenu settings

Adjust typography, spacing, and card layout options.
These settings control the global appearance of all megamenus. They do not create cards—cards are added separately using blocks.

​
Megamenu settings

Controls the size of top-level menu item labels inside the megamenu.Available options: S, M, LControls the size of parent links that do not contain submenus.Available options: S, M, L

​
Adding image and text card blocks

Image and text card blocks define the visual content of megamenus.
1

Open Theme Customizer

Go to Online Store → Themes → Customize.
2

Access Header section

Click on the Header section.
3

Add block

Click Add block and select Image and text card.
4

Configure block

Set the block settings according to your needs.

​
Image and text card block settings

Each Image and text card block represents a single card inside a megamenu.

​
Show on

Controls which devices the card is visible on.Available options:
  • Desktop
  • Mobile
  • Both
Defines which top-level navigation item the card belongs to using a numeric system.How it works:
  • Position 1 → First tier-1 menu item
  • Position 2 → Second tier-1 menu item
  • Position 3 → Third tier-1 menu item
This numeric system ensures cards stay correctly linked even if menu labels change.
Enter a tier-1 link position to tie the block to its parent element.

​
Creating different megamenu layouts

Use this layout when you want to keep standard navigation links while highlighting selected items visually.How to set it up:
  1. Create a standard Shopify navigation menu
  2. Add submenu items as usual
  3. Add Image and text card blocks for the same menu item position
  4. Keep navigation links enabled
Result:
  • Text links remain visible
  • Image cards appear alongside navigation links
Best for:
  • Featured collections
  • Campaign highlights
  • Balanced navigation structures
Use this layout when you want the megamenu to be entirely visual.How to set it up:
  1. Create a Shopify menu with minimal or no submenu links
  2. Add Image and text card blocks for the target menu item position
  3. Do not rely on text-based submenu items
Result:
  • Megamenu displays only image cards
  • Navigation behaves like a visual catalog
Best for:
  • Visual brands
  • Product-driven navigation
  • Campaign-focused menus

​
Best practices

  • Always verify menu item positions after reordering navigation
  • Keep card aspect ratios consistent across all cards
  • Use clear, concise headings that communicate value quickly
  • Avoid overcrowding megamenus with too many cards
  • Test megamenu behavior across different screen sizes
  • Ensure sufficient color contrast between card content and backgrounds

Header section

Learn about header configuration and layout options

Navigation structure

Understand how to organize your store navigation