> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/how-to-guides/how-to-show-colors-for-collection-menu-items.md).

# How to show colors for collection menu items

Instead of an image, the mega menu can show a small color swatch next to a third-level collection link — useful for color-themed collections such as "Black", "Gold", or "Rose". Use the `modutheme.menu_color` metafield to set the swatch color per collection. This works independently of menu images.

This guide covers the metafield setup only. For the mega menu's own layout and options, see [Mega menu](/helix/header-group/header/mega-menu.md).

{% embed url="<https://www.youtube.com/watch?v=IDuNAlsMqWc>" %}

![Color swatches shown next to third-level links in the mega menu](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-eec1170dd534276deaadcb7030fbf41d716f5f1e%2Fhow-to-show-colors-for-collection-menu-items-overview.png?alt=media)

{% hint style="info" %}
**Before you start:** This applies only to menu items that link to a **collection**. Go to **Content → Menus**, open the menu assigned to your header and mobile menu (set in the **Menu** option of the Header / Mobile menu block), and make sure the collection is added as a menu item.
{% endhint %}

***

**Step 1 — Create the metafield definition**

1. In Shopify Admin, go to **Settings → Metafields and metaobjects → Collections**.
2. Click **Add definition** and configure:
   * **Name** — `Menu color`
   * **Namespace and key** — `modutheme.menu_color`
   * **Type** — Color, one value
3. Click **Save**.

![Creating the Menu color collection metafield definition](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-f5bbeee84231478cf2fa2ea85af9df7b2b312c55%2Fhow-to-show-colors-for-collection-menu-items-metafield.png?alt=media)

**Step 2 — Assign a color to a collection**

1. Open a collection that appears in your menu.
2. Scroll to **Metafields → Menu color** and pick a color.
3. Click **Save**.

![Picking a menu color on a collection's metafield](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-f965574b51cbd100831d5da979c1088321c09694%2Fhow-to-show-colors-for-collection-menu-items-assign.png?alt=media)

**Step 3 — Turn on menu colors**

1. In the theme editor, open the **Header** section and select your mega menu block — **Mega menu: Collection images**, **Mega menu: Banners**, or **Mega menu: Product list**.
2. Enable **Show third-level menu colors**.
3. Click **Save**.

![Mega menu showing color swatches next to third-level links](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-9d5a340ea0fd45ebac3476e6059b6492fb328f8d%2Fhow-to-show-colors-for-collection-menu-items-enable.png?alt=media)

{% hint style="info" %}
**Tip:** **Show third-level menu colors** and **Show third-level menu images** are independent toggles. When a collection has a `modutheme.menu_color` value, its swatch shows; collections without one fall back to their image (if images are enabled) or show nothing.
{% endhint %}

***

{% hint style="info" icon="headset" %}
**Need help?**

Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.

<a href="https://go.crisp.chat/chat/embed/?website_id=6c25581e-794a-41b4-8552-52f3de1dd1f7" class="button secondary" data-icon="comments">Chat with us</a> <a href="https://modutheme.ticksy.com" class="button primary" data-icon="ticket">Submit a ticket</a>
{% endhint %}