Change product image based on selected variant (Showcase Theme)

[chai0505]

Hi,

I am currently using Showcase theme for my shop. The issue I am having is that the product page shows images for all variants and the page end up looking really messy because detail product image and variant images all show up together. I would want to change this so that the first picture in the product page changes based on the color option that the user selects and the variant image doesn't show up otherwise.

Is there any way to do this for the Showcase theme? 

Thank you!

[Propero]

@chai0505 

Kindly check this thread https://community.shopify.com/c/Shopify-Design/Display-variants-on-collection-pages/td-p/375407

[Guleria]

Hello @chai0505 ,

Yes there is way to achieve this but only when if you know liquid and JS.
Idea is you have to show hide the images depends on the selection of colors and before that initially you have to assign variant Id with each image.

Thanks

[Chris263]

was there an answere to this? I also have the same problem for showcase

[Joshkiwi1]

Hi @chai0505 

This is built into the Showcase Theme in Product Pages. 

Look for Media Grouping and tick this option. once Ticked, rearrange your images to suit the colour variant (Group all reds together, or blues together etc). 

[EricFromSH]

Is this available in the Dawn theme as well?

[MRamzan]

Here is the solution for dawn theme: