Select a product variant by clicking its image - Dawn theme

[misstilly]

Hi there

Products in Dawn with multiple variants using the thumbnail layout, you are not able to select the product variant by image, it remains static on the previously selected variant button/dropdown.  As a result, a customer will think they are purchasing the item in the main photo, add it to cart, then subsequently receive the wrong product variant.

I want to use the thumbnail layout with the hide other variants media… option un-ticked. 

This video details the problem  Select Variant By Clicking Their Image - 2022 Free Shopify Tutorial @ 1:43  he also provides instructions and code however they don't work with Dawn.

Shopify support responded to my request - "I just checked our information and this customisation is only for our vintage themes which does not include Dawn"  They have also suggested that I try some apps, however these are paid for apps.

Is anyone able to assist, is there code that will work with Dawn to allow variant selection by image?

Thanks

[LitCommerce · Accepted solution]

Hi @misstilly,

As far as I know, all current tutorials only support vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

And this is a complex request, so you will need a lot of steps to change it, it will be difficult for someone to guide you in detail.

First you need to change it to show thumbnail image slider, refer video: https://www.youtube.com/watch?v=ZbDOiC9T3Ik

Next, you need to add custom JS to help change the variant, for this I recommend hiring a professional, refer group: https://community.shopify.com/c/Shopify-Ecommerce-Jobs/bd-p/shopify-job-board

Hope it helps!

[misstilly]

Hi @LitCommerce 

Thanks for the response, I couldn't find any other posts that gave clear answers, so I appreciate you taking the time to give some more definitive solution requirements.

[umidaydemir]

Hi, I know it's been a while since your question and I hope you were able to resolve your issue. But I wanted to answer for those who have the same problem.

Showing only variant-specific images can make a big difference in customer experience, especially if you sell products in multiple colors, sizes, or styles.

We realized that many people were experiencing this problem and developed an app to solve it. Rubik Variant Images app solves this problem and ensures that only the images belonging to the variant option are displayed when it is selected.

You can check the demo store by clicking here before installation.

We've also created a demo video to simplify installation. You can watch it below.