Product Variant Images displayed on Variant Button Select for Product Pages

Technical Q&A
1

Howdy!

I’m looking to code my Product Media Carousel at the top of my Product Pages to change the currently displayed image in the slider on click when a user selects their preferred product variant. Is this possible within the Dawn theme by default or do I need a custom solution?

Thanks!

2

Hi @Chase_Bemis ,

Dawn theme currently doesn’t support this. If you create Product Media Carousel you can check out this tutorial: https://www.youtube.com/watch?v=ZbDOiC9T3Ik

Hope it helps!

3

I noticed in the video there isn’t much explanation about the variant button connections to the slider. They say it works and show it works at the end in terms of locating and displaying the correct image in relation to their color swatches, but I’m not sure how the images are being correctly targeted in relation to their assigned variant.

4

Hi @Chase_Bemis ,

If you want to connect variant and slider, it will be complicated requirement and you need to change a lot with javascript. It will be difficult to get detailed instructions for it, you can just hire an expert or install the app. Refer https://apps.shopify.com/variant-image-wizard?surface_detail=merchandising-product-variations-color-swatches&surface_inter_position=1&surface_intra_position=7&surface_type=category or https://apps.shopify.com/browse/merchandising-product-variations-color-swatches

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

5

Hi,

If you have Dawn theme or Any Shopify 2.0 FREE themes, this should work. No APPs or EXTERNAL library needed. The code is made to call all the variant options related images. You can have multiple variants options. Works with the Dawn product settings too, that includes thumbnail carousel and even the media size settings.

See video for more information.

6

As far as I understood what you want to achieve is to display only relevant variant images when variant picker buttons are clicked. You can solve this problem by using Rubik Variant Images & Swatch app. It works with Dawn theme. For the transparency I am developer and founder of the app.