How can I dynamically update variant metafields in my ecommerce store?

I’m trying to get variant metafields to update on the front-end based on the selected variant.

This is apparently not native.

My theory is to try and store all the variables as JS object array and then find the corresponding sku/id and populate based on a eventlistener.


On testing on the front end the array remains undefined.

Any advice would be appreciated.

That theory is sound. What’s stopping you from reference the vairant metafield and adding that to your js object? Are you just stuck on how to reference the metafield or something else?

Sometimes the theme (if you’re using an existing one) might already had made a js object of the product. In that case there’s less value to add another so I usually just make a standalone metafields object with whatever context i need - making sure the property keys are something that will match the variant.

Be mindful of using the json filter though - you’re already wrapping the liquid in quotes but the filter will also add it’s own when needed (eg, if a string var the value will be in quotes so you’ll double up). Just check the source of your output and you’ll see what I mean.

Hi Jason,

Testing the theory with price first and then will expand on metafields as and when.

The theme is a bit of a frankenstein’s monster so am trying to create a clean object to work from.

The issue I’m having is that the js array is not being created/remaining undefined.