Need Help Integrating Variant-Specific Image Display on Product Page

Shopify Discussion
, , , ,

Topic summary

A developer needed to implement variant-specific image filtering on a Shopify product page, where selecting a color variant would display only images associated with that variant.

Key Challenge:

  • Shopify natively stores one image set per product, not per variant
  • The client purchased the Concept theme which supports this feature, but integration into the existing site was unclear

Solutions Provided:

  • The Concept theme requires variant metafield setup to associate images with specific variants
  • Alternative approach: organize product images in a specific sequence where unassociated images are grouped with the nearest associated variant image
  • “Variant Image Automator” app was mentioned as a potential tool
  • A reference implementation was shared at www.kpsclothing.in

Resolution:
The issue was successfully resolved, with the developer confirming the functionality now works as intended.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

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

2

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.

3

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.

4

Its done thank you so much brother :hugs:

1 Like