Rendering custom_data/metaobjects/shopify--color-pattern

Store Design
, , ,

Topic summary

A developer sought help rendering images from Shopify’s shopify--color-pattern metaobject for product variant colors. Their initial code attempted to access the metafield directly but failed to retrieve specific values from the metaobject.

Solution provided:

  • Assign the metaobject to a variable first, then access its properties (like image.url or label)
  • Loop through product options and retrieve metaobjects using variant handles: shop.metaobjects['shopify--color-pattern'][val]
  • Access the image value with color_option.image.value | image_url

Key technical detail:
The metaobject itself must be accessed before its nested properties can be rendered. The working code iterates through product.options_with_values, retrieves each color metaobject by handle, and conditionally applies CSS classes based on variant selection.

Resolution:
The issue was resolved with the corrected Liquid syntax. The developer confirmed the solution worked after adapting it to their variable names.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Anyone have any luck rendering the Image in the Variants > Colors > Image?

I had tried:

  {% if product.selected_or_first_available_variant.metafields.custom['shopify--color-pattern'] %}
    <img src="{{ product.metafields.custom['shopify--color-pattern'] }}" alt="Color Pattern" class="w-full h-auto" fetchpriority="auto">
  {% endif %}

shopify--color-patern.png
shopify--color-patern.png1798×662 20.8 KB

pdp-variant-config.png
pdp-variant-config.png1614×1022 42.1 KB

2

Please can send your store URL ?

3

@Kamaboko from what I can see, you are requesting the Metaobject but none of its values.

In this case, you could assign the object to a variable and from there pick the specific value (e.g., title or image.url)

{% if product.selected_or_first_available_variant.metafields.custom['shopify--color-pattern'] %}
{% assign variant_color = product.metafields.custom.shopify--color-pattern.value %}
{{ variant_color.label }}<----Title
{{ variant_color.image | image_url: width: 50 | image_tag: alt: variant_color.label, class: "w-full h-auto", fetchprority: "auto" }} 
{% endif %}

I hope this helps.

4

thank you @Finer ! With that snippet ofc modified to the name of my variable, it wasn’t rendering still. Does it matter if its a Category metafield vs. a Custom Metafield

5

@Kamaboko is just tried it myself (creating product with variants where options and value use standard metaobjects).

To display an assigned image to each color value, the following worked:

{%- for option in product.options_with_values -%}
  {%- for val in option.values %}
   {% assign color_option = shop.metaobjects['shopify--color-pattern'][val] %}
   {% if product.selected_or_first_available_variant.id == val.variant.id %}{% assign class = 'selected' %}{%else%}{% assign class = 'disabled' %}{% endif %}
   {{ color_option.image.value | image_url: width: 60 | image_tag : class: class }}
  {%- endfor -%}
{%- endfor -%}

We are basically getting each option value and retrieving the metaobject with each option variant handle.

You could add an if/else-clause to make sure each option value is not blank.

In this example, I added a variable class (‘selected’ & ‘disabled’) that can change depending on whether the variant is selected or not.

Generally speaking, I think most themes are already using this in some way, but I am not certain.

1 Like
6

Thank you! Was struggling to find this in the Shopify documentation and highly appreciate it. I got stuck on looking at the Variant options, where more types of variant options also open up when a product’s category is defined. Thank you so much @Finer