Multiple variant images without using apps

Store Design
1

Hello,

i am having the same problem as everyone using shopify and its really frustrating. Its something so basic but they force us to pay apps to have it. I want multiple variant images for my products. I want to select a variant and see only the images that match this variant. I have tried everything but nothing worked.

My site is https://cavero.gr/

If you could help me with the coding i would be really greatfull.

Thank you in advance

2

@MariaPoly
Here is a solution. Do it step by step:

  1. Add this code after line 26 in “theme.liquid”
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  1. Add this code after line 93 in “product-media-gallery.liquid”
{% if product.selected_or_first_available_variant.featured_media.alt != blank and product.selected_or_first_available_variant.featured_media.alt != media.alt %}style="display: none"{% endif %} thumbnail-color="{{ media.alt }}"

  1. Go to your product and change the alt text in the images to the color you want. Important that the alt text is the same like the variant

  2. Add this code after line 825 in “golbal.js”

this.filterMedia();
  1. Add this code after line 831 in “global.js”
filterMedia() {
    
         $('[thumbnail-color]').hide();
    
    var selected_variant = this.currentVariant.featured_media.alt;
    
    var selected_attribute = '[thumbnail-color="' + selected_variant + '"]';
    
    if (selected_variant == selected_variant) {
      
      $(selected_attribute).show();

    } }