Community forum for knowledge and support

Updated 12 months ago

Changing Main Product Image Based on Variant Selection

At a glance

The community member is creating an ecommerce site for golf hats and has set up two variants of the same product in different colors. The issue is that when the color option is changed, only the "More images" change to reflect the color, but the main product image on the left remains static. The community member is seeking a solution to make the main product image change colors as well to match the variant option.

Useful resources

RE: Product Header 2 Ecommerce
I'm creating an ecom site for golf hats. Customer has one style (baseball cap style) but in two different colors or variants.
I setup the item on the ecom product CMS setup as two variants because it comes in two colors.
I have both variants of this product setup the same way with a "variant image" and several "More images".

Issue:
When I change the color options from the product page only the images pulled from the "More images" cms changes and reflects the color options. The main image on the left remains static.
Does anyone here know how I could fix this? I want the bigger image on the left to change colors as well to reflect the variant option.

Here's a video of this issue: https://www.loom.com/share/89c5ed2c8dcf47398fc78352b60d9bb2?sid=0513902e-ceac-49f0-a3af-ac66cc76fd5e

Add a reply
Sign up and join the conversation on Slack