Dynamic Product Variants using Shopify Buy Button

Hey everyone,

I have a client site I’m working on where I’m planning on utilizing the Shopify Buy Button as an e-commerce solution. My question is not how to integrate the buy button, but I’m wondering if anyone has some ideas on how to implement a specific feature I’m wanting to add.

Some products have multiple variants. I’ve used some custom javascript to enable the ability to change the product variant image that displays based on the option selected within the select box. CLICK HERE TO VIEW.

My issue arises from how this code works. It requires that the divs class name match that of the option “value”

I know that typically an option value matches that of it’s output. Is this imperative? Unfortunately I’m not that great at JavaScript, but the only way I am seeing to have this work is if I can go into the Shopify code and change the value of each option to match that of the dynamic div names (frame1, frame2, frame3 etc.) I have in place on each page.

Any ideas on how I could achieve this best would be greatly appreciated.

Here is my Share Link:
https://preview.webflow.com/preview/emilymihal?preview=56a89131399c0a5dbb453012493b9826

Any luck with this? How did the project go, I have a similar task!

Hey @JRT,

It may be too late at this point, but I do think it ends up working out. Feel free to check out the site at https://www.emilymihal.com to see if it’s functioning how you are wanting your to.

Sorry about the delay!

Hi @Spencer_Irwin !

The site is looking great and works perfectely !
From the chrome inspector, I could see you used foxycart instead right ?
How did the Dynamic Product Variants integration went within webflow ?

Would you have any documentations or tip regarding that matter ? :slight_smile:
Would be highly appreciated !