Need Help Integrating Variant-Specific Image Display on Product Page

[Maxian]

Hello Shopify Community,
I hope you all are doing well.

I need one functionality on the product page: when I click on a color variant, only the images related to that specific variant should be displayed — no images from other variants should be shown. This kind of functionality is already available in many Shopify themes, and the client has even purchased a theme that supports this feature. I’m attaching a video of that theme as a reference.

However, I’m having trouble understanding how to integrate this feature into the existing website. While this is a theme-specific functionality, Shopify by default allows only one set of images per product, not per variant.

Please help me out with this. I would be very thankful for your support.

You can also review the theme:-
https://themes.shopify.com/themes/concept/styles/harmony/preview
Plus the video of the functionality which i want to achieve 
https://drive.google.com/file/d/1U9567-Ej0lrxUBUNFCGwX8L8Epa_V4WB/view?usp=sharing

Thank you for your time

[tim · Accepted solution]

Some themes need a variant metfaield setup, Concept is one of them https://roartheme.co/blogs/concept/can-i-have-multiple-images-associated-with-one-option.

Others may need you to sort product images in a special way.

If I am not mistaken, there was an app called like "Variant Image Automator".

The idea is that first you position images which will shown always, then you position image associated with first variant. All "unassociated" images afterwards considered to belong to the same variant until there is an image associated with another variant. "unassociated" images afterwards considered to belong to the second variant and so on.

Code on front-end will show only subset of the product images accordingly.

[Maxian]

Its done thank you so much brother🤗

[Shadab_dev]

Great from the video it's understandable that you need only to show the product images similar to the selected color variant. 

Reference site: www.kpsclothing.in

Here's a reference site of a client which has this functionality on the product page.