For the complete documentation index, see llms.txt. This page is also available as Markdown.

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.

Color swatches shown next to third-level links in the mega menu

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.


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

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

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

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.


headset

Need help?

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

Chat with us Submit a ticket

Last updated