# Add custom cards to mega menu

<figure><img src="/files/LSkuOn594jFt1zAqcsJD" alt=""><figcaption></figcaption></figure>

{% embed url="<https://youtu.be/vH1Saf0X_TA>" %}

Make your mega menu more engaging with fully customizable content cards. Use this block to feature seasonal promotions, highlight collections, or create visually rich navigation that goes beyond links.

## How to add Custom cards to the mega menu&#x20;

{% hint style="success" %}
Steps:

1. In the **Header** section, click **Add block**.
2. Select **Custom cards (Mega menu)**.
3. In the **Menu title** field, type the **exact name** of the menu item this block should appear under.
4. Add images, text, links, and styling for each card.
5. Customize layout, width, and color scheme.
6. Save your changes.
   {% endhint %}

### ⚙️ Block settings

<table><thead><tr><th width="240">Setting</th><th>What it does</th><th data-hidden></th></tr></thead><tbody><tr><td>Menu title</td><td>Determines which main menu item this banner belongs to. It must exactly match the menu title.</td><td></td></tr><tr><td>Container</td><td>Inherit from header or apply independent layout rules.</td><td></td></tr><tr><td>Desktop menu columns</td><td>Set how many columns are shown in the dropdown layout.</td><td></td></tr><tr><td>Width (%)</td><td>Adjust the horizontal space the card section takes in the mega menu.</td><td></td></tr><tr><td>Color scheme</td><td>Choose the background + text color theme for the card</td><td></td></tr><tr><td>Image</td><td>Upload an image that appears on the card.</td><td></td></tr><tr><td>Card content</td><td>To each image, add text content and a button.</td><td></td></tr></tbody></table>

<figure><img src="/files/Pqcdc9XBTZYnI0OVdvI1" alt=""><figcaption></figcaption></figure>

### 💡 Pro tips

* This block is perfect for mixing **image + copy + CTA** inside your dropdown.
* You can add **up to 6 custom cards** in one block for a grid-like layout.

> ✅ Want to show multiple products or collections instead? Try **Products list** or **Collections list** blocks.

{% content-ref url="/pages/5sqazIVBJHfwimFesWmh" %}
[Add products to mega menu](/zest-theme/pages-global-sections/menu/add-products-to-mega-menu.md)
{% endcontent-ref %}

{% content-ref url="/pages/bpZcrJ798hJl3CIUcoLb" %}
[Add collections to mega menu](/zest-theme/pages-global-sections/menu/add-collections-to-mega-menu.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/zest-theme/pages-global-sections/menu/add-custom-cards-to-mega-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.