A developer encountered an issue displaying product variant color swatches on collection pages in a custom Shopify theme. Despite correctly looping through product options and values, the swatch.color property returned null, even though the color option was properly configured using Shopify’s recommended category metafield.
Root Cause:
The problem stemmed from the order of operations when creating product variants. When color options were created before linking to the category metafield (or when using Shopify’s auto-generated metafield initially), the swatch property failed to populate correctly—appearing to be a Shopify bug.
Solution:
Deleting and recreating the Color variant option while connecting it to the existing metafield resolved the issue. The swatch data then became accessible as expected.
Verification Method:
Testing with Shopify’s Dawn theme confirmed whether the issue was code-related or a setup problem—if Dawn didn’t display swatches, the variant configuration was at fault rather than custom code.
Summarized with AI on October 30.
AI used: claude-sonnet-4-5-20250929.
I am building a custom Shopify theme and I want to display product variant color swatches on the product cards shown on the collection page. Below is a very simplified version of the liquid code I’m using within my product card liquid file:
{%- for product_option in product.options_with_values -%}
{%- for product_option_value in product_option.values -%}
{{ product_option_value.name }}
{{ product_option_value.swatch.color }}
{%- endfor -%}
{%- endfor -%}
In theory this should be showing the option value name (which it is so I know the loops are working correctly) and the associated color swatch hex value which it is not. I can confirm that all other properties of the product_option_value object work fine (name, id, variant, etc.) but no matter what I try, the swatch property is just missing. My test product variant is set up using a category metafield which is what is now recommended by Shopify (screenshot below) and I can confirm that my code above is seeing all four variant options (one for each color).
I’m pulling my hair out and worried that I’m missing something simple. Is it possible that swatches are only available on the product templates and not when accessing product objects elsewhere? I really hope not since that would just be a stupid limitation but since this is a relatively new feature, I just don’t know. If anyone has run into this or can shed a little light on what I’m missing, it would be greatly appreciated.
When I created my test product, Shopify detected the product category and added the color metatfield automatically. I then created the Color variant option using that metafield so if this color metafield was setup incorrectly, that feels like a Shopify Bug that needs to be fixed, not something I did. Also, everything appears to be set up as it should as per Shopify’s documentation When I go into the metafield, the delete option is disabled so I can’t delete/recreate it. I’m guessing this is because it was autogenerated by Shopify.
I had the problem similar to yours when I first created an option, added color values and then assigned category and linked this option to metafield. It looked properly, but the swatch property was null.
Then I’ve removed the option and re-created it “from” metafield and the code started working.
A simple test – if Shopify-developed theme (say Dawn), does not show swatches on this option (it did not in my case, but started after I’ve re-created the option), then problem is not in your code, but in a way your option is set up.
You are a legend. You were 100% correct. Definite Shopify bug here. When I created the product and used the autogenerated color category metafield (which has never been used before), it didn’t work. I delete the variants/option as you suggested and recreated the exact same variant option for the color, connecting it back to the metafield and poof, everything works. Well done.
