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
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 :
Megamenu settings are configured in the Header section
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.
Open Theme Customizer
From Shopify admin, access the Theme Customizer.
Select Header section
Click on the Header section in the left sidebar.
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.
Parent link size 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, LSpacing between cards Controls the spacing between Image and text card blocks inside the megamenu. Available options: No, S, M, L, XLCard aspect ratio Controls the aspect ratio of Image and text card blocks on desktop. Available presets: Auto, Square, Portrait, LandscapeCard aspect ratio for mobile Controls the aspect ratio of Image and text card blocks specifically for mobile devices. Available presets: Auto, Square, Portrait, LandscapeAdding image and text card blocks Image and text card blocks define the visual content of megamenus.
Open Theme Customizer
Go to Online Store → Themes → Customize.
Access Header section
Click on the Header section.
Add block
Click Add block and select Image and text card .
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.
Visibility & Position
Appearance
Content
Show on Controls which devices the card is visible on. Available options: 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.
Color scheme Controls the background and text colors of the card using Shopify’s color scheme system. Image Selects the image shown on the card.
Optional
If left empty, the card uses the selected color scheme background
Card aspect ratio Controls the card’s aspect ratio on desktop only. Available groups:
General : Same as Section, AutoSquare Landscape Portrait Some aspect ratio groups include multiple size presets. Content alignment Controls horizontal alignment of text content. Options: Start, Center, EndContent position Controls vertical alignment of text content. Options: Top, Center, BottomHeading Main title displayed on the card.
Supports rich text
Allows bold, italic, and links
Subheading Secondary text displayed below the heading.
Supports rich text
Allows bold, italic, and links
Link Defines the destination URL for the card. When set, the entire card becomes clickable.
Megamenu with navigation + cards
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
