Separate product variation images

Store Design
, , , ,
1

Hi,

mt website - www.kulaindia.com

theme - horizon

Issue - Currently in the product page…When you make multiple variations based on color for me..I can only upload a single image for that variation which is clubbed with default variation.

I’m looking at an option where the customer can select the variation and only the images related to that variation are shown. the entire gallery should change to the images related to the variation selected.

currently, I’ve included a button that redirects you to a collection that showcases different variations to tackle the issue but I’m not happy with it. If someone can help me out with this, I’d be grateful. Thanks.

2

Hi @SNAP_SHOT

Yes, but add the color option to the product and create separate variants for each color.

image
image1334×577 141 KB

3

@devcoders when I do that..I can only add 1 image per variant. and when i select the variant from the product page. one image of that variant shows up along with all other images of other variants as well in the same gallery.

4

@academy-international-selling for example https://gullylabs.com/products/gully-number-001-baaz-baadal-blue check how this site’s variant images change entirely.

5

Hi @SNAP_SHOT

Yes, please add it to the same gallery and add the variant name to the image alt tag. After that, we’ll need to add custom code for hide/show functionality.

Best regards,
Devcoder :laptop:

6

Hi @SNAP_SHOT :raising_hands:

To ensure that when customers select a product variant (for example, a color), only the images related to that variant are displayed and the entire product image gallery switches to the corresponding image set of the selected variant - you can do this using Easify Product Options by assigning a URL link to each color.

Here’s an example I’ve created so you can see how it works:

  • This is the result:

image
image1200×1404 194 KB
image
image1200×1404 190 KB

  • This is the app setting:

image
image2048×1035 126 KB

First, create a Color option as usual in the app’s Custom Options section (for example, Pink, Blue, etc.). This step simply sets up the color choices for the product the same way you normally would, so no complex configuration is needed.

image
image1672×828 137 KB

Next, enable the URL option for each color value and paste the corresponding product link for that color. For example: Pink → link to the Pink product, Blue → link to the Blue product. When customers select a color, the product page will automatically redirect to the correct product, and the image gallery will update to match that variant.

This approach helps the product page display images clearly and accurately based on the customer’s selection, creating a more intuitive shopping experience. If you need help setting this up or would like us to double-check your configuration, just let us know!:smiling_face_with_three_hearts: