Variant metafield in the dynamic sources?

kenyonkowal
Tourist
8 1 5

Hey, I have metafields for variants and I am unable to select the variant metafields, only the base product metafield for dynamic sources.

I thought maybe it was tied to the page I was viewing (eg the main product), but when I go to the variant page e.g. /product?variant=405 the dynamic sources are still the "main product".

Reason:

We have Product A with 2 Variants (Variant 1, Variant 2)

Variant 1 has different ingredients than Variant 2 so ideally the metafield would dynamically change the ingredient list when changing variants.

Does anyone know if you can target variant metadata in the dynamic sources?

Screen Shot 2021-08-05 at 3.22.30 PM.png

Screen Shot 2021-08-05 at 3.23.49 PM.png

Replies 6 (6)
samthewebb
Shopify Partner
24 3 2

I'm fairly confident that you cannot use variant metafields in dynamic sources at this time. Logically, it doesn't make sense to be able to use them.

In a sense, yes dynamic sources are tied to the page. More technically, they're tied to the object of the page. The object of a product page is a product object, not a variant object.

Another way I've seen it work is if you have a product field in a section, it seems to also allow you to pull dynamic sources from that product. Unfortunately, there is no variant field type in sections or theme settings (seen here https://shopify.dev/themes/architecture/settings/input-settings#specialized-input-settings) which again prevents you from using variant data as dynamic sources.

Finally, it just doesn't make logical sense to be able to use variant data on a product page as a dynamic source. If you have more than 1 variant how would it know which variant to pull data from. You don't select a specific object in dynamic sources, you just select the data that should be pulled from an object type.

One might say it would make sense by default for Shopify pull info from the first variant and then it can use the product.selected_variant if someone visits the page with the variant ID in the url. But that would only work for page load and you'd have to revert to old tactics anyway once someone selected another variant on the product page unless you do another page load. So even still, I don't think Shopify would implement it in that way.

For now it seems like you're going to have to continue using liquid to pull variant metafield data and JavaScript to display the correct data depending on the user's current selected variant.

Open to hear if someone else has found out something different though. But based on the above I can't think of any realistic scenario where variant dynamic sources would work.

Sam Webb
https://samthewebb.com
sam@samthewebb.com
Ardi94
Pathfinder
101 2 26

One way around this is to put that variant in a javascript variable and change it with js. but this requires a little coding.

If you're using DAWN, go to main-product.liquid, add a new block name with {% when "" %} and don't forget to add the schema. give the HTML tag a "class" or "id"  for the content.

At the bottom where it says {% javascript %} introduce a new variable and then create a for loop to go through each variant and get that metafield value and store it in the "js variable + variant id".

Now I kinda cheated and used the same function that changes the price to change this value too. Find that function in your js file and add a line that compares the selected variant id with all the variables and chooses the same one and then changes the "class" or "id" value to the new variable.

It's not extremely difficult to do this, but can be time-consuming if someone doesn't know js at all.

Don't forget to backup your theme before any changes and ALWAYS work on a draft version, not your live theme.

Shopify OS 2.0 is dynamic in the sense that you can customize it easier with theme customization instead of coding, but the codes (liquid) are rendered on the server's side before they're sent to the user. Only JavaScript is able to change that (as far as I know).

I have this option on my OS 1.0 store. I haven't switched to Shopify OS 2.0 yet but I'm in the middle of that right now. If I remember, I'll upload the full code here for everyone to use.

todayandafter
New Member
1 0 1

I'm having the same issue here where a product's values need to dynamically change based on the variant selected.  Is there a documented solution somewhere for this?

MyLUCA
Excursionist
14 0 2

Why should it not be logic?

I have 1 product in 3 different leather types. In a Variant Metafield I would like to write a short description about the used leather.
So when the user selects leather1 from the dropdown he will read that description, if he selects leather2 he will read the other description.

Stonanni
New Member
1 0 0

Actually that would be totally logic,
as you don't have more than one variant active at the same time in the product page.

I'm developing a product page that has some informations refreshing on variant selection, unfortunately I will have to code this as the feature seems to support only product metafields selection.

MyLUCA
Excursionist
14 0 2

Check this thread https://community.shopify.com/c/shopify-design/display-different-message-for-different-selected-vari... 

There is already an event listener to check which variant is active.
Now it only needs to display the content of the Variant Metafield variable instead of a fixed text.