# Add collections to mega menu

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FIDqZQo0ia6RlnOSL9pVB%2FFox-BG%20Light%20(12).jpg?alt=media&#x26;token=2c3b3c9a-42a6-48ac-9bb7-dfd9846fc3c2" alt=""><figcaption></figcaption></figure>

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

Make your navigation more visual and category-driven by showcasing collections right inside your mega menu. Perfect for surfacing seasonal drops, popular categories, or curated collections to drive exploration.

## How to add a collections list to the mega menu

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

1. In the **Header** section, click **Add block**.
2. Select **Collections list (Mega menu)**.
3. In the **Menu title** field, type the **exact name** of the menu item this block should appear under.
4. Choose up to **6 collections** to display.
5. Customize the card layout, text color, and dropdown settings.
6. Save your changes.
   {% endhint %}

### ⚙️ Block settings

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FxA0vleXz1ahvj7lfcGTx%2Fimage.png?alt=media&#x26;token=5afe0d5a-2277-4a14-8c51-559dde4555b6" alt=""><figcaption></figcaption></figure>

<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>Style</td><td>Choose between card styles for each collection.</td><td></td></tr><tr><td>Text color</td><td>Pick a color for the collection name + product count text.</td><td></td></tr><tr><td>Dropdown container</td><td>Inherit from header or set independent container styling.</td><td></td></tr><tr><td>Desktop menu columns</td><td>Choose how many columns are shown in the dropdown layout.</td><td></td></tr><tr><td>Width (%)</td><td>Adjust the width of the collection list relative to the mega menu.</td><td></td></tr><tr><td>Collection 1–6</td><td>Choose which collections to show (up to 6).</td><td></td></tr></tbody></table>

* Collection card style:

{% tabs %}
{% tab title="Standard" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FcKgK0xBedoA5XEyJXpcF%2Fimage.png?alt=media&#x26;token=c62f03d7-0585-411e-8855-5329de28cd21" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Content inside with overlay" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FXrKAw9F54ke8rhZrX8Hk%2Fimage.png?alt=media&#x26;token=a5da6a54-2128-4885-a230-47910cfbb01d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Content middle" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F8btck3x3Sq4DLHOG04Jm%2Fimage.png?alt=media&#x26;token=c602dfe4-8dd8-4911-be0d-fd79616df3f5" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* Each card shows the **featured image** (or first product's image), **collection name**, and **product count**.