Supply theme - Update metafield display on variant select

threed
Explorer
46 7 11

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 was able to help you, please help me by liking my comment and marking it as an accepted solution.
If you're feeling extra nice, you can throw a coffee at me through Venmo @scoducks :)

I am open to new business partnerships.
0 Likes
Mircea_Piturca
Shopify Partner
1459 39 284

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
0 Likes
threed
Explorer
46 7 11

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 was able to help you, please help me by liking my comment and marking it as an accepted solution.
If you're feeling extra nice, you can throw a coffee at me through Venmo @scoducks :)

I am open to new business partnerships.
0 Likes
Mircea_Piturca
Shopify Partner
1459 39 284

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
0 Likes
threed
Explorer
46 7 11

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

If I was able to help you, please help me by liking my comment and marking it as an accepted solution.
If you're feeling extra nice, you can throw a coffee at me through Venmo @scoducks :)

I am open to new business partnerships.
0 Likes