Variant Image Grouping on Fabric Theme

Store Design
,

Topic summary

Main issue: Implement variant-based image filtering on the Shopify Fabric theme so that choosing a color shows only that color’s images and hides all others.

Key requirements:

  • Apply to all images for a variant (typically 5–6), not just the featured image.
  • Filtering logic can map images to variants via image alt-text matching the variant name.

Attempts and problems:

  • Multiple AI-generated scripts tried; some work on Desktop but break the Mobile layout.
  • Unable to achieve a stable, theme-compatible implementation that preserves layout on mobile.

Requested help:

  • A robust custom-code approach (likely Liquid + JavaScript) to reliably group and filter gallery images by variant across devices.

Status: No solution provided yet; assistance sought. No attachments or code snippets included.

Summarized with AI on December 31. AI used: gpt-5.
1

Hi everyone,

I’m looking for some help with custom code for the Fabric theme.

I am setting up a clothing store and I want to implement a feature where selecting a color variant filters the gallery to show only the images associated with that specific color, hiding the rest. I need this to apply to all images of that variant (usually 5 or 6 photos), not just the main featured image.

I know this is achievable by matching the alt-text of the images to the variant names, but I can’t seem to get it to work. I’ve tried generating code with several AIs, but none have provided a solid solution.

Some scripts I tried work fine on Desktop, but they completely break the layout on Mobile.

Any help would be greatly appreciated!

Thanks in advance.

2

@delpassorodrigo Hi, you can achieve this very easily using Rubik Variant Images without writing or maintaining custom code.

Rubik automatically filters the product gallery to show only the images assigned to the selected colour variant, and hides the rest. It works on both desktop and mobile.

The app works seamlessly with the Fabric theme, and setup is straightforward. I’ve added a short video below to show how it works in practice.

If you run into any setup difficulties, our support team will be more than happy to help you.

Wishing you a happy New Year :tada:

3

Hi,

Hope this will help

  • Make sure alt text matches the variant name exactly.
  • Add a lightweight script that filters images instead of rebuilding the whole gallery

script example

<script>
document.addEventListener("DOMContentLoaded", function () {
  const variantRadios = document.querySelectorAll("[data-option-index]");
  const galleryItems = document.querySelectorAll(".product-media-item");

  function filterImages(selectedColor) {
    galleryItems.forEach(item => {
      const alt = item.querySelector("img")?.alt?.trim();
      if (!alt) return;

      if (alt.toLowerCase() === selectedColor.toLowerCase()) {
        item.style.display = "";
      } else {
        item.style.display = "none";
      }
    });
  }

  variantRadios.forEach(radio => {
    radio.addEventListener("change", function () {
      if (this.dataset.optionIndex === "0") { 
        const color = this.value;
        filterImages(color);
      }
    });
  });
});
</script>
  • If you have product images that aren’t tied to a color (e.g., size chart), just give those an alt like: all,default or whatever you want
4

Thanks! I had to adapt it a little but it works perfectly