Display variant metafields for each variant

[sspacey]

Hello,

I'm using Shopify theme Dawn 2.0.

Basically, I have many products with lots of different variants (including Finish and Colour) for which I want to display different information. I've filled out all the variant metafields, but I can't find any way of displaying these on the product page (I can only display the product metafield).

Does anyone know how I can display 3 key pieces of information for each variant? I'd like to have information about the finish, dimensions, and product care.

Any help would be greatly appreciated! 

[EYCB · Accepted solution]

Hello there,

In order to display variant metafields on the product page in the Shopify theme Dawn 2.0, you will need to edit the product-template.liquid file in the theme's code. You can access this file by going to Online Store > Themes > Actions > Edit code.

Once you have the product-template.liquid file open, you will need to locate the section of the code that displays the variants. This can typically be found within a for loop that iterates through the product's variants.

You can then insert the code to display the desired metafields for each variant. For example, if your metafields are named "finish", "dimensions", and "product_care", you can use the following code:

{{ variant.metafields.global.finish }}
{{ variant.metafields.global.dimensions }}
{{ variant.metafields.global.product_care }}

You can place the code in the appropriate place on product-template.liquid file, where you want the information to display on your product page.

It's worth noting that you should have created the metafields before and should have the right namespace and key, otherwise, these codes will not work.

[sspacey]

Thanks Coddvila, that's worked great! 😊

[AutomateMyTech]

Omg! I have been at THIS issue for hours! Thank you for the save! 

[VukVuckovic]

Hi, i use that theme but i don't have product-template.liquid. Do you have any advice for me, please 🙂

[emwoo80]

Hi, 

I am trying to do that with my variant metafileds but I keep receiving the error that dynamic sources are invalid:

[purwajmiyani]

@emwoo80  @praveen995 I also facing the same problem. Anyone get the solution?

[praveen995]

<div class="product_additional_information mb-30 mt-10">
<p><span class="font-body-bold">Voltage:</span>
{{ variant.metafields.custom.product_voltage }}</p>
</div>

I am trying to retrieve the product variant meta field value with the above code, but I don't get any value its empty.

[edcorusa]

I am also having that same issue. I try the code and get nothing back. I have tried it in the product templet liquid code and in a by adding a templet liquid block. I can get a product metafield to show, but not a variant metafield. I have check to make sure I have a value in the metafield and triple checked the name and key. The "Primary Voltage:" show up just fine.

<b>Primary Voltage:</b>
{{ variant.metafields.spec.pri_volt }}

[meganatmetro]

{% for variant in product.variants %}

{{ variant.metafields.spec.pri_volt }}

{% endfor %}

[Daniel_Ward_CC]

This worked but it is displaying all the variant meta fields at the same time. How do I make it only display the meta field for the variant selected? 

 

[Yshukla]

I am having the same issue. Working on it since last 2 days, it is displaying all the fields. Did you find any solution for this? Please help me if yes.

[galleon]

where will we paste these codes?

[defp]

Hi, is there a way to do the same for Impact theme? This really seem to be the solution to what i'm trying to achieve, but I just can't proceed after finding the "main-product.liquid" file I'm not sure where to place the code

'in the appropriate place on product-template.liquid file, where you want the information to display on your product page.'

Also I don't understand this part as well..

'It's worth noting that you should have created the metafields before and should have the right namespace and key, otherwise, these codes will not work'

Is there a "right" namespace and key? can't it just be default, after the name I've entered for the variant metafield?

I initially followed these steps but it didn't work as the description block (variant description) didn't show on the page.

https://halosoft.gitbook.io/ella-documentation/product-page/product-information/how-to-set-up-produc...

Thank you so much in advance for your clarification

[elegantpage]

Step 1: Go to Settings then click Custom data choose Variants, then Add definition, write the name to Namespace and key, example (custom.mydescription) on Select type  choose Single line text and Save.

Step 2. Go to Online store, click Customize, Select product and add Custom Liquid with this code:

{{ product.selected_or_first_available_variant.metafields.custom.mydescription }}