Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I am currently having an issue checking and displaying product variant metafield with the below syntax. Any help would be great!
{% if variant.metafields.variant.shade != blank %}
<p>Hex: {{ variant.metafields.variant.shade }}</p>
{% endif %}
Hi @markatia,
Please change the code:
{% for variant in product.variants %}
{% if variant.metafields.variant.shade != blank %}
<p>Hex: {{ variant.metafields.variant.shade }}</p>
{% endif %}
{% endfor %}
You need to display product variant metafields.
Hope it is clear to you.
If you find my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.
You can also check with variant.title. Ex:
{% for variant in product.variants %}
{% if variant.metafields.variant.shade != blank and variant.title == 'Red' %}
<p>Hex: {{ variant.metafields.variant.shade }}</p>
{% endif %}
{% endfor %}
With this you can filter out all metafields of variant.
If my answer can help you solve your issue, please mark it as a solution. Thank you.
Hi @LitExtension
For the Expanse theme, I've added variant metafield for each variant and want it to be displayed when the variant is selected, but it's not happening on selection, it's happening on refreshing the page.
Please can you provide suitable script of JS or jQuery or any other solution which can make the metafield updated on variant selection.
Here's what i'm trying:
{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<strong> Grid ({{variant.title}}) Comes with {{ variant.metafields.custom.quantiry_per_box }} Units</strong>
{% endif %}
{% endfor %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".no-js-hidden").on("click", function(){
var refreshint = setInterval(function(){
location.reload();
}, 1000); }); });
</script>
I'm using the same theme, and here is my code
{% for variant in product.variants %}
<div class="variant__description" data-variant-id="{{variant.id}}" {% if product.selected_or_first_available_variant.id == variant.id %} style="display: block;" {% endif %}>
{% if variant.metafields.custom.variant_size %}
<p><span class="font-body-bold">Dimension:</span>{{ variant.metafields.custom.variant_size }}</p>
{% endif %}
{% if variant.metafields.custom.variant_cubage %}
<p><span class="font-body-bold">Cubage:</span>{{ variant.metafields.custom.variant_cubage }}</p>
{% endif %}
</div>
{%- endfor -%}
the code is ok, but it's not updating on Expanse theme, it need to refresh the page. trying to configure theme.js but don't know the right code
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025