Supply theme - Update metafield display on variant select

threed
Shopify Partner
129 17 47

Hello all,

Each of my products has a set of metafields specific to that model's attributes. These metafields show on the product page as a table in the description.

Let's say I have three umbrellas, each with a separate product page. The only differences are color, barcode, and warranty, but these differences are important and must show up in the description table.

I want to merge these three umbrellas into one product page, with each color being a variant.

How can I ensure that when the customer selects a different variant, the metafield table will update to match that particular variant? For example, if they change from the "Black" variant to the "Pink" variant, the table's Color row will automatically update accordingly? (For example, the metafield is {{ product.metafields.specs.color }} )

There is no possibility for us to use an app for this.

Thank you for any help!

If I helped you, please help me by marking my comment as an accepted solution.
I am open to work and have been working with the Shopify system for several years.
Replies 4 (4)

Mircea_Piturca
Shopify Partner
1547 44 345

Hey there,

You will need first to create an object containing a kay pair of your variant IDs and your metafield values.

In the theme code, you would need to identify the variant change callback. On variant change, get the Id, pull the metafield value from your object, and update the description element. 

Hope it helps

Finally—Add variant descriptions to your products
threed
Shopify Partner
129 17 47

Hello,

Thank you for your reply! It has good insight.

If possible, can you elaborate on what the code needs to look like and where to put it?

Thank you 🙂

If I helped you, please help me by marking my comment as an accepted solution.
I am open to work and have been working with the Shopify system for several years.
Mircea_Piturca
Shopify Partner
1547 44 345

I am afraid that this is not a step-by-step implementation. 

That would be the way I see doing this but It would really depend on your codebase.

Finally—Add variant descriptions to your products
threed
Shopify Partner
129 17 47

Thank you for the help. It is a start for me to see if I can figure it out.

If I helped you, please help me by marking my comment as an accepted solution.
I am open to work and have been working with the Shopify system for several years.