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.

Step 1 — Create the metafield definition
In Shopify Admin, go to Settings → Metafields and metaobjects → Collections.
Click Add definition and configure:
Name —
Menu colorNamespace and key —
modutheme.menu_colorType — Color, one value
Click Save.

Step 2 — Assign a color to a collection
Open a collection that appears in your menu.
Scroll to Metafields → Menu color and pick a color.
Click Save.

Step 3 — Turn on menu colors
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.
Enable Show third-level menu colors.
Click Save.

Last updated