Dawn theme - Select a product variant by clicking its image

Store Design
, , ,

Topic summary

Goal: Enable selecting a product variant by clicking its corresponding image in the Shopify Dawn theme (Online Store 2.0).

Context and current behavior:

  • Currently, selecting a variant updates the image, but clicking an image does not set the variant (it defaults to a specific option like “1”).

Guidance and limitations:

  • Assigning images to variants in the admin links images to variants, but does not make image clicks select variants.
  • Implementing image-to-variant selection on Dawn (OS 2.0) is non-trivial; many existing tutorials target “vintage” themes and don’t apply directly.

Suggested approaches:

  • UI tweak: switch to a thumbnail image slider (video tutorial referenced) as a base for custom behavior.
  • Custom JavaScript is needed to map image clicks to variant selection; hiring a developer or using an app is recommended.
  • App option mentioned: Rubik Variant Images (filters gallery to images of the selected variant; may not fully implement image-to-variant selection).

Status:

  • No step-by-step solution provided. The request remains open; key need is custom JS or a compatible app for Dawn/OS 2.0.
Summarized with AI on December 14. AI used: gpt-5.
1

Hi!

I am using the Shopify Dawn theme on my website. On product page, I would like to be able to select a variant by clicking on the corresponding image, At the moment, it is only possible the other way around - clicking on the variant and getting the corresponding image. Can anyone assist on this?

Thanks!

2

Hi @saitek ,

Yes, that is definitely possible. You can assign images to specific variants through the product page. Here’s how:

  1. Go to the product page in your Shopify admin.
  2. After each variant, you will see an option to add images.
  3. Assign the desired images to the corresponding variants.

If you need any further assistance, please let me know.

Best regards,

Dawood Mirza

3

Hi @Dawood_Mirza_1 , thanks for the quick reply.

Sorry for not being clear. Let me give you an example from our store. On this page https://alusitana.com.pt/products/fio-de-la-para-arraiolos-a-lusitana, we would like for customers to be able to select a color from the images and get the corresponding color reference from the dropdown menu.

At the moment, whatever picture you click on you will get the color reference “1”.

4

Hi @saitek ,

Sorry I also misunderstood your query, the thing you are wanting ( Selecting image selects the respective variant ) 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 over here.

Even I would do it for first time so many hit and trials would be there.

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

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 someone.
Or use some apps.

Hope it helps!

5

Hi!

You can try the Rubik Variant Images app. It ensures that only the images corresponding to the selected variant are displayed.

Hope this helps!

https://apps.shopify.com/rubik-variant-images/