Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Select a product variant by clicking its image - Dawn theme

Solved

Select a product variant by clicking its image - Dawn theme

misstilly
Tourist
6 0 6

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. 

 

misstilly_0-1645485125306.png

 

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

Accepted Solution (1)

LitCommerce
Astronaut
2860 684 754

This is an 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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 3 (3)

LitCommerce
Astronaut
2860 684 754

This is an 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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
misstilly
Tourist
6 0 6

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
Shopify Partner
24 0 0

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.

umidaydemir_0-1730722042193.png


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