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