What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Display variant metafields for each variant

Solved

Display variant metafields for each variant

sspacey
Visitor
2 0 3

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! 

Accepted Solution (1)

EYCB
Shopify Partner
70 5 13

This is an 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.

banned

View solution in original post

Replies 14 (14)

EYCB
Shopify Partner
70 5 13

This is an 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.

banned
sspacey
Visitor
2 0 3

Thanks Coddvila, that's worked great! 😊

AutomateMyTech
Shopify Partner
1 0 1

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

VukVuckovic
Tourist
3 0 3

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

 

emwoo80
Visitor
1 0 0

Hi, 

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

Zrzut ekranu 2023-05-22 o 09.32.13.pngZrzut ekranu 2023-05-22 o 09.31.55.png

purwajmiyani
Tourist
11 0 2

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

praveen995
Shopify Partner
5 0 0

Screenshot 2023-06-12 172732.png

 

<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
Excursionist
22 0 27

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
Excursionist
28 4 7

{% for variant in product.variants %}

{{ variant.metafields.spec.pri_volt }}

{% endfor %}

Daniel_Ward_CC
Shopify Partner
28 0 13

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? 

Screenshot 2023-12-07 at 09.41.30.png

Yshukla
New Member
4 0 0

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
Visitor
1 0 0

where will we paste these codes?

defp
Tourist
3 0 0

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
Shopify Partner
1 0 0

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:

Screenshot 2024-09-30 at 18.00.04.png

 

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

 

 

elegantpage team