Product variant displaying all the metafeilds at once.

Yshukla
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 %}
</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.

 

Yshukla_0-1708437402378.pngYshukla_1-1708437407711.pngYshukla_2-1708437410780.png

Replies 3 (3)

Sweet_Savior_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.

 

Thanks

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 !!!
Yshukla
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?

Yshukla
New Member
4 0 0

Sure, I mailed you. Thank you.