Need to seamlessly switch between thumbnails, product variant and main product image

[barnettexchange (Rachel Barnett)]

I need the coordination when clicking back and forth between product thumbnails and the product variant selection for shirt color to be more seamless.

Currently, when the first thumbnail of the product is selected and you go to the color dropdown to select a shirt color, the main image will change to the color you select. But when you choose another thumbnail and go back to the variant dropdown with the colors, the thumbnail at the top will change, but not the main image. The client I’m working with wants the product page to closely match the user experience with her Etsy. If you look at the product page on Etsy, for example, you can choose the thumbnail of the maroon shirt but then select teal from dropdown list of colors and it will change the main product image to teal.

---

Here is my site Read-Only: LINK
Here is my site preview: LINK

[MINDFUL_LLC]

Hi, I am having the same issue. The help would be appreciated!

[drungsea (Derek)]

In your navigator, you need to add the “add to cart” element, which corresponds to the variants. The one currently being used is just a static design element. This looks like it came with the theme?

You can see in the screenshots that the add to cart element I placed on top is different than the one you have, which is just a regular div.

Delete the div wrapper, replace with “add to cart” element, restyle, and you should be good to go.

Hope this helps!