Product variant displaying all the metafeilds at once.

[Yshukla]

I am trying to display the metafields assigned to the product variants. It has five size and five colors. I have assigned "single line text" type metafield only to small size of five color. When I print it by this code:

{% for variant in product.variants %}
<div class="custom-color-name-meta">
{% if variant.metafields.custom.variant_color %}
{{ variant.metafields.custom.variant_color }}
{% endif %}
</div>
{% endfor %}

then it is displaying all the fields. I want to display one by one whenever I click a on a color. Also I haven't assigned the data to other sizes but it still showing on all the sizes when clicked. Need Help.

[Sweet_Savior_3]

Hello @Yshukla 

The liquid code you added is for all the metafields. Thus by default you have to use below code:

{%- assign selected_variant = product.selected_or_first_available_variant -%}

{{ selected_variant .metafields.custom.variant_color }}

and on variant change you have edit the swatch code using JS.

Thanks

[Yshukla]

I tried this, it is now displaying the first field 'coral' on coral color but not changing when I select other size or color. I tried doing js as well but it's not working. Can you help me with that?

[Yshukla]

Sure, I mailed you. Thank you.