Multiple Images for a Variant (Craft Theme)

[aelitzer]

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

[aelitzer]

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

[Tiber]

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:

<div class="product__media media media--transparent gradient global-media-settings" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
    

 With this:

<div class="product__media media media--transparent gradient global-media-settings" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;{% if image_variant != media.preview_image.alt %} display:none; {% endif %}" alt-name="{{ media.preview_image.alt | escape }}">
    

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

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

[teambnb]

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

[Tiber]

Are you using the craft theme?