> 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).

![Color swatches shown next to third-level links in the mega menu](/files/8MBlizcLefPa99uK2NOm)

{% 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](/files/4S2P5LmpO3l1wT1YGW8c)

**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](/files/S9RBzbur5qGhDXdLEFMg)

**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](/files/JY6WZpWj82mB7GER2PNK)

{% 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 %}