Access metaobjects from product variants

[ridhi01]

Hi, im trying to access this hex code which is using category metafields created by Shopify to create swatches on the collections page. How do i access this? Im trying numerous liquid syntax. I am using Dawn theme.

I am trying to use this code to create the swatches but I'm not sure if its working as i found it on another community thread. Please help. 

{% assign keys = "Metal_Type,Metal Type" | split: ',' %}

{% for key in keys %}
{% if card_product.options contains key %}
<div class="product_tile_color_holder">

{% for color_option in card_product.options_by_name[key].values %}

{% for variant in card_product.variants %}
{% if variant.options contains color_option %}

{% if variant.metafields.color.values %} 
{% assign background_style = variant.metafields.color.values %}
{% endif %}

{% endif %}
{% endfor %}

<input
type="radio"
name="{{ card_product.id }}_card_color"
id="{{ card_product.id }}_color_{{ forloop.index }}"
style="background: {{ background_style }}; background-size: cover;">

{% endfor %}

</div>
{% endif %}
{% endfor %}

[rajweb]

Hey @ridhi01 ,

To display swatches for your products on the collections page, you need to properly access and render the metafield data from Shopify. Based on the code you've shared and the metafield setup visible in your images, I'll guide you through troubleshooting and refining the Liquid code.

1. Refining the Code Below is the corrected and optimized Liquid code snippet to achieve swatches:

{% assign keys = "Metal_Type,Metal Type" | split: ',' %}

{% for key in keys %}
  {% if card_product.options contains key %}
    <div class="product_tile_color_holder">
      {% for color_option in card_product.options_by_name[key].values %}
        {% assign background_style = '' %}
        {% for variant in card_product.variants %}
          {% if variant.options contains color_option %}
            {% assign color_metafield = variant.metafields['color-pattern'] %}
            {% if color_metafield and color_metafield.color %}
              {% assign background_style = color_metafield.color.value %}
            {% endif %}
          {% endif %}
        {% endfor %}
        
        <input
          type="radio"
          name="{{ card_product.id }}_card_color"
          id="{{ card_product.id }}_color_{{ forloop.index }}"
          style="background: {{ background_style }}; background-size: cover;">
      {% endfor %}
    </div>
  {% endif %}
{% endfor %}

CSS for Swatches:

Add relevant CSS to style the swatches. For example:

.product_tile_color_holder input[type="radio"] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #ccc;
}

Let me know if you encounter issues or need further clarification!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[ridhi01]

Hi Rajat,

The hex code is not picking up from the metaobject entries (2nd picture) and styling the background color. The output it showing this:

(Output)

(Metaobject Entries)

Up till this line of code "{% if variant.options contains color_option %}" where {{ color_option }} output is showing in words but not the hex code: