Core Issue:
Users need to display variant-specific metafield content that updates dynamically when customers select different product variants. The main challenge is handling cases where variants lack metafield data—the code incorrectly shows information from other variants instead of fallback messages (in stock/out of stock).
Technical Details:
Original poster (Majit) shared Liquid code that loops through variants and checks metafields, but it fails when metafield data is missing
Multiple users suggest debugging approaches: verifying metafield values with .value property, outputting variant properties to check logic
The solution requires combining Liquid templating with JavaScript event listeners to detect variant changes
I am working with metafield to display a different message when a variant changes. I have the code to change messages based on metafield when users use a different variant. But the problem is when there is no metadata for a variant in a product the code still shows messages from another variant. Rather I want to show the in stock message or out of stock message when there is no data added in the metafiled. I will be happy to send some $$ if you find me the solution. Here is my code:
{% for variant in product.variants limit:1 %}
{% if variant.metafields.my_fields.shipping != blank and variant.inventory_quantity <= 0 and variant.inventory_policy == 'continue' %}
will be shipped:
{% capture 'meta_data' %}
{% for variant in product.variants %}
{{variant.id}}:{{ variant.metafields.my_fields.shipping | json }}{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endcapture %}
{% elsif variant.inventory_quantity > 0 %}
in stock
{% elsif variant.inventory_quantity <= 0 and variant.inventory_policy != 'continue' %}
out of stock
{% endif %}
{% endfor %}
Can it be modified just to show a simple text that is inside a variant metafield?
I have defined it as variant_description and would like to display the text in it. When the customer changes the variant, the new variant description should be displayed.
I tried to play with your code. But not sure how I can display the variable (text of the metafield).
@r8r simply display the content of a variant metafield on the product page.
Preferably as a custom liquid so it can easily be used and arranged in the theme editor.
I do have a Variant Metafield with some text, but do not know how to display it.
I think part of the code above can be helpful. It actually works when included via a custom liquid.
But the code above only displays fixed text and not content coming from a Variant Metafield.
Yes I think so. Is this the liquid code to display something?
I think with a combination of the event listener script posted by Majit, it would be able to display a unique information that changes with every variant?!
I think this is something many people are looking for. Here in the community and on Facebook many people want to display Variant Metafields information on the variant product page.
My last time coding was 20 years ago with Visual Basic. But I will give it a try with the fragments.
I too am running into this problem. I have setup variant metafield that I would like to change depending on the variant selected. I am running Dawn 2.0 and can get the dynamic PRODUCT metafields to show - but I can’t get it to dynamically change when a product has multiple variants.
Any posts I have found regarding this topic is very confusing and I even have coding experience. However, I don’t know JS or liquid that well.
Here is the code I want to work and dynamically update when a certain variant is selected:
{%- if product.metafields.my_fields.case_size.value >0 -%}
Case Size: {{ product.metafields.my_fields.case_size.value }} x {{ product.metafields.my_fields.container_volume | metafield_text }}/{{ product.metafields.my_fields.container_type.value }}
{%- else -%}
Product not sold in cases
{%- endif -%}
Any help you can provide would be greatly appreciated!
If it’s still relevant, I decided to write a step-by-step guide on how to render variant metafield values on product pages dynamically–this means when a customer selects a different product variant. The guide includes code snippets, including JavaScript that allows for dynamically updating the values: https://ecommercepot.com/shopify-qa/variant-metafield/
Yep. This is a basic feature and should exist already without coding anything in the liquid theme. Sadly, it’s not not implemented and it’s already end of 2024.