Display multiple images for each Product Color option, without app!

Demo

How to do? Step by Step

Requirements:

1. The product must have a Color option
2. The Color option must have at least 2 variant values.
3. Product media must have group images for each color.

Setting up:

• Step #1

Prepare all images for all colors. Then, upload them into Product.

• Step #2

1. Click on each Image
2. Click to the Add alt text link in the Right Sidebar
3. Add the image alt with syntax color COLOR_VARIANT_VALUE
4. For example, if you want the image to appear in the listing of Pink color, you need to input the tag Color Pink
5. Click to save alt text
6. Close the popup and continue for another image.

• Step 3

From Shopify Admin Dashboard > Online Store > Themes > ... button > Edit code

• Step #4

Search or Scroll the file list on the left to find the file name "product-media-gallery.liquid" within Snippets. (Depending on your store's theme, it will have different files. We will guide based on Dawn theme structure) .

- Add new code line #88

{% assign current_variant_alt = product.selected_or_first_available_variant.featured_image.alt | replace: 'Color ','' | handleize %}

- Add new code line #99

{%  assign color_alt = media.src.alt | replace: 'Color ','' | handleize %}

- Update line #101 to #104 to:

<li id="Slide-{{ section.id }}-{{ media.id }}" class="color-el color-{{ color_alt }} {%  if current_variant_alt == color_alt %}show{% endif %} product__media-item grid__item slider__slide{% if single_media_visible %} product__media-item--single{% endif %}{% if product.selected_or_first_available_variant.featured_media == nil and forloop.index == 1 %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">

• Step #5

- Open Assets / global.js

- Add new code line #1010

const color_el = document.querySelectorAll('.color-el');
for (let i = 0; i < color_el.length; i++) {
  color_el[i].classList.remove('show');
}
const color_pick = ".color-" + value.toLowerCase();    
const color_pick_active = document.querySelectorAll(color_pick);
for (let i = 0; i < color_pick_active.length; i++) {
   color_pick_active[i].classList.add('show');
} 

• Step #6

- Open Assets/component-product-variant-picker.css or any Stylesheet file that works on PDP

- Add new CSS:

.color-el.show{
  display:block;
}
.color-el{
  display:none;
}

Refer Edited Files:

- product-media-gallery.liquid -> https://justpaste.it/8dya5

- global.js -> https://justpaste.it/g72zf

- component-product-variant-picker.css -> https://justpaste.it/evrcp