> 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-override-collection-menu-images.md).

# How to override collection menu images

The mega menu can show a thumbnail next to each collection link. By default it uses the collection's featured image. Use the `modutheme.menu_image` metafield to set a different image per collection — for the menu only, without changing the collection's main image.

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

![Collection thumbnails shown next to menu links in the mega menu](/files/eu7Yg48pWzeaPl8YXGkQ)

{% 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 image`
   * **Namespace and key** — `modutheme.menu_image`
   * **Type** — File — Image, one value
3. Click **Save**.

![Creating the Menu image collection metafield definition](/files/7yHHXEBYZyk4qfly9To1)

**Step 2 — Assign an image to a collection**

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

![Uploading a menu image to a collection's metafield](/files/AOQT0vbfNcGTD9B50u7w)

**Step 3 — Turn on menu images**

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 second-level menu images** and/or **Show third-level menu images**.
3. Set the image ratio to control the thumbnail shape.
4. Click **Save**.

![Mega menu showing collection images next to menu links](/files/p8lUU32c6pAKVTCCYFSy)

{% hint style="info" %}
**Tip:** When a collection has no `modutheme.menu_image` metafield, Helix falls back to the collection's featured image. Only links that point to a **collection** show an image — product, page, and external links render nothing.
{% endhint %}