Multiple Images for a Variant (Craft Theme)

Store Design
1

Hi,

I would like to display multiple images for a specific variant. For example, for Brown, I only want to display 3 brown photos. And then when navigating to Black, I want to only display the 3 black photos.

Is there a way to do this without an app?

Thank you!

Amy

2

Thanks, but I’m really looking for a way to display it all in one product listing

3

This is how I got it to work.

1: In main-product.liquid search for render 'product-thumbnail’ . For the first one replace it with

{% render 'product-thumbnail',
                  media: featured_media,
                  position: media_position,
                  loop: section.settings.enable_video_looping,
                  modal_id: section.id,
                  xr_button: true,
                  media_width: media_width,
                  lazy_load: false,
                  image_variant:product.selected_or_first_available_variant.featured_media.preview_image.alt

The second one replace with

render 'product-thumbnail', media: media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: lazy_load,is_selected_variant:true,image_variant:product.selected_or_first_available_variant.featured_media.preview_image.alt

2: In product-thumbnail.liquid search for product__media media media–transparent gradient global-media-settings

Replace this:

With this:

3: In global.js search for onVariantChange() {

Add this line

this.filterVariantImages();

After this line

this.removeErrorMessage();

So onVariantChange() { should look like this

onVariantChange() {
    this.updateOptions();
    this.updateMasterId();
    this.toggleAddButton(true, '', false);
    this.updatePickupAvailability();
    this.removeErrorMessage();
    this.filterVariantImages();
    
    if (!this.currentVariant) {
      this.toggleAddButton(true, '', true);
      this.setUnavailable();
    } else {
      this.updateMedia();
      this.updateURL();
      this.updateVariantInput();
      this.renderProductInfo();
      this.updateShareUrl();
    }
  }

Right after this add

filterVariantImages(){
    document.querySelectorAll('[alt-name]').forEach(img => img.style.display = "none")
       const currentImgAlt = this.currentVariant.featured_image.alt
    console.log(currentImgAlt)
       const thumbnailSelector = '[alt-name="'+currentImgAlt+'"]'
    console.log(thumbnailSelector);
       document.querySelectorAll(thumbnailSelector).forEach(img => img.style.display="block")
  }

4: 4: Now you need to label the images to be displayed. On the products edit page in the Admin, select images and add a alt text to the them. Set the alt text to be the same for all images that you want to display for that variant. ie: if you have a black shirt - set the images alt-text you want to display to Black

Tiber_0-1679854166761.png
Tiber_0-1679854166761.png644Ă—767 33 KB

Tiber_1-1679854200309.png
Tiber_1-1679854200309.png1102Ă—541 9.37 KB

Make sure that you have also set the variants main image - otherwise this will not work

Tiber_2-1679854216218.png
Tiber_2-1679854216218.png619Ă—349 11.8 KB

4

Hi, did not work for me. The I wasn’t even able to find the render product thumbnail section in the main-product liquid.

5

Are you using the craft theme?

6

I would like to set up variant images as well, but I also can’t find render product thumbnail in main product liquid section. I am using Craft theme version 12. Can you advice if this is located somewhere else?

Thank you.