> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Megamenu

> Enrich top-level navigation items with visual cards to highlight collections and key categories.

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**

<Note>
  Megamenu functionality depends entirely on the presence of Image and text card blocks.
</Note>

## 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

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin, access the Theme Customizer.
  </Step>

  <Step title="Select Header section">
    Click on the Header section in the left sidebar.
  </Step>

  <Step title="Configure megamenu settings">
    Adjust typography, spacing, and card layout options.
  </Step>
</Steps>

<Note>
  These settings control the global appearance of all megamenus. They do not create cards—cards are added separately using blocks.
</Note>

## Megamenu settings

<Tabs>
  <Tab title="Typography">
    ### Parent link size

    Controls the size of top-level menu item labels inside the megamenu.

    **Available options:** S, M, L

    ### Parent without submenu link size

    Controls the size of parent links that do not contain submenus.

    **Available options:** S, M, L
  </Tab>

  <Tab title="Card layout">
    ### Spacing between cards

    Controls the spacing between Image and text card blocks inside the megamenu.

    **Available options:** No, S, M, L, XL

    ### Card aspect ratio

    Controls the aspect ratio of Image and text card blocks on desktop.

    **Available presets:** Auto, Square, Portrait, Landscape

    ### Card aspect ratio for mobile

    Controls the aspect ratio of Image and text card blocks specifically for mobile devices.

    **Available presets:** Auto, Square, Portrait, Landscape
  </Tab>
</Tabs>

## Adding image and text card blocks

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

<Steps>
  <Step title="Open Theme Customizer">
    Go to Online Store → Themes → Customize.
  </Step>

  <Step title="Access Header section">
    Click on the Header section.
  </Step>

  <Step title="Add block">
    Click **Add block** and select **Image and text card**.
  </Step>

  <Step title="Configure block">
    Set the block settings according to your needs.
  </Step>
</Steps>

## Image and text card block settings

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

<Tabs>
  <Tab title="Visibility & Position">
    ### Show on

    Controls which devices the card is visible on.

    **Available options:**

    * Desktop
    * Mobile
    * Both

    ### Menu item position

    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.

    <Tip>
      Enter a tier-1 link position to tie the block to its parent element.
    </Tip>
  </Tab>

  <Tab title="Appearance">
    ### 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, Auto
    * **Square**
    * **Landscape**
    * **Portrait**

    Some aspect ratio groups include multiple size presets.
  </Tab>

  <Tab title="Content">
    ### Content alignment

    Controls horizontal alignment of text content.

    **Options:** Start, Center, End

    ### Content position

    Controls vertical alignment of text content.

    **Options:** Top, Center, Bottom

    ### Heading

    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.
  </Tab>
</Tabs>

## Creating different megamenu layouts

<AccordionGroup>
  <Accordion title="Megamenu with navigation + cards" icon="list">
    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
  </Accordion>

  <Accordion title="Card-only megamenu" icon="images">
    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
  </Accordion>
</AccordionGroup>

## 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

## Related guides

<CardGroup cols={2}>
  <Card title="Header section" icon="arrow-up-from-bracket" href="/themes/release/header">
    Learn about header configuration and layout options
  </Card>

  <Card title="Navigation structure" icon="sitemap" href="/themes/release/header">
    Understand how to organize your store navigation
  </Card>
</CardGroup>