Displaying product variant metafields on Expanse theme 2.0.1

markatia
Visitor
3 0 0

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

 

 

Replies 5 (5)

LitExtension
Shopify Partner
4860 1002 1145

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. 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
markatia
Visitor
3 0 0
Hi,

Thanks for your help.

I had to loop through the variant like so product.variants[forloop.index0].metafields.variant.shade to get the right metafields value.
LitExtension
Shopify Partner
4860 1002 1145

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
arslanfakhir
Shopify Partner
4 0 0

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>

 

 

Keen to bring smiles
mpaule1004
Visitor
3 0 0

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