Product variant displaying all the metafeilds at once.

New Member
4 0 0

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 %}
{% 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.



Replies 3 (3)

Shopify Partner
1036 82 92

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.



Don't forget to like and accept the solution to help others store owners.
Looking for an expert for your store ? Hire Me
Have any queries ? Send Here
From Less To Further !!!
New Member
4 0 0

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?

New Member
4 0 0

Sure, I mailed you. Thank you.