Change product image based on selected variant (Showcase Theme)

Change product image based on selected variant (Showcase Theme)

chai0505
Visitor
2 0 0

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!

Replies 6 (6)

Propero
Shopify Partner
897 101 160

@chai0505 

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

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze

Guleria
Shopify Partner
4185 812 1168

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

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

Chris263
New Member
4 0 0

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

Joshkiwi1
Excursionist
16 0 12

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). 

Joshkiwi1_0-1705956990026.png

 

EricFromSH
Visitor
1 0 0

Is this available in the Dawn theme as well?

MRamzan
Shopify Partner
529 3 46

Here is the solution for dawn theme:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112