Color swatch

This guide outlines the steps to configure color swatches on your product pages by leveraging Shopify's category metafields. By following these steps, you can ensure that color options are displayed as swatches, providing a visual representation for customers.

Step 1: Assign a Product Category

Shopify enables category metafields (e.g. Color, Size) only after a product has a category.

To assign a category:

  1. Go to Products in the Shopify admin.

  2. Click the product you want to edit.

  3. In the Category section, click Browse categories.

  4. Select a relevant category (e.g. Apparel & Accessories > Clothing > Shirts).

  5. Click Save.

⚠️ Only products with assigned categories can use category metafields.

Step 2: Configure the Color Metafield

Once a category is assigned, you can configure available values for the Color metafield.

To add/edit entries:

  1. Go to Settings > Custom data > Categories in the Shopify admin.

  2. Click the category you previously assigned.

  3. Locate the Color metafield.

  4. Click Manage entries.

  5. Add new color entries:

    • Enter a color name (e.g., Red, Blue)

    • Optionally upload a swatch image or color hex (e.g., #FF0000)

  6. Click Save.

Step 3: Connect the Color Metafield to Variant Options

Link your product’s Color option to the metafield you just configured.

Steps:

  1. Open your product in the Products section.

  2. Under Variants, click Add options like size or color.

  3. In Option name, type "Color".

  4. Click the dynamic source icon next to it (🔗).

  5. Choose the Color category metafield.

  6. Assign each variant the appropriate metafield entry (Red, Blue, etc.).

  7. Click Done and Save the product.

Step 4: Customize Swatch Display in the Theme Editor

If your theme supports it, you can customize how swatches are shown on the product page.

To configure the visual style:

  1. Go to Online Store > Themes > Customize.

  2. Open a product page template.

  3. Find the section displaying variant options.

  4. Click the Color option block.

  5. Choose display type: Swatches, Dropdown, etc.

  6. If swatches are used, select:

    • Color hex code

    • Or uploaded swatch image

  7. Save the changes.

🔍 Your theme may prioritize the swatch image metafield if it exists, then fallback to color hex, then variant image.

Resources

By following these steps, you can efficiently manage and display color swatches across your Shopify store — all from the admin, without writing code.

ℹ️ Note: The current version of the theme does not support color swatches on collection (collection grid) pages.

However, we’re actively working on this feature and plan to include it in an upcoming update. Stay tuned!

PreviousSize guide tableNextProduct tags