Product color swatches

[vitaliy-bobrov]

I've updated the hydrogen to the latest 2024.10.1 and tried to use new product options (Skeleton template-based), so I updated the product query to include product option swatches:

options {
      name
      optionValues {
        name
        firstSelectableVariant {
          ...ProductVariant
        }
        swatch {
          color
          image {
            previewImage {
              url
            }
          }
        }
      }
    }

How to add actual swatches to product variants in Shopify Admin UI? So far I linked color options to Shopify default Color metaobject and configured actual color values, but Storefront API always returns swatch as null. I searched for any docs about the setup but haven't found any, what I'm doing wrong?

[wizardlyhel]

1. From your admin (left navigation panel), click on Content > MetaObjects

2. From the list, you should see an entry for Color
   

3. Add an entry. You can define the swatch image and color here
   

4. Assign that color in your Product variant
   

5. Swatch information should also appear from querying the product optionValues swatch information

[vitaliy-bobrov]

@wizardlyhel , thanks for the clarification! Does it work only with the Combined Listings app (which is Plus-only members)?

I have a similar setup without the Combined Listings app and probably that's why swatch data is null (I guess they might have a different metaobjects naming).

[meisbellajack]

I ran into this same issue with the 2024.10 Storefront API. The null return is usually because the swatch data exists in the Metaobject but hasn't been 'activated' through the Shopify Standard Taxonomy yet.

Here is the fix in the Admin UI:

Assign a Specific Category: At the top of your Product page, you must select a category from the Shopify Taxonomy (e.g., Apparel > Clothing > Shirts). This is the 'handshake' that tells the API to look for Category Metafields.
Connect the Option Value: Scroll to Variants and click the 'Color' option. You’ll see a small dynamic source icon (link icon). You must connect this to the Category Metafield, not just a generic metaobject.
The Swatch field: Ensure the entry in the Metaobject has a swatch.color or swatch.image defined. If the taxonomy category isn't set, the Storefront API defaults the swatch object to null because it lacks the context to map the attribute.

The Bigger Picture: Smart Logic
While Hydrogen is great for speed, managing complex options natively in the Admin can get messy once you go beyond basic colors.
If you find yourself needing Conditional Logic (e.g., showing a specific engraving field only when a variant is selected) or bypassing the 3-option limit, this is exactly why we built Misk Smart Product Options.
It’s a native App Embed that handles the 'Smart Logic' layer on top of your theme. It keeps your Hydrogen backend 100% clean while giving you a professional, interactive UI that updates variant data (like images and prices) instantly without the null API headaches.