How can I only display variant images when the specific color is selected?

Store Design

Topic summary

A merchant seeks to display only variant-specific images when a color option is selected, rather than showing all variant images in the product gallery simultaneously. The issue causes cluttered product pages with numerous thumbnails.

Proposed Solutions:

  • CSS hiding: Simple approach to hide thumbnail gallery, but removes all thumbnails including non-variant images
  • Liquid code filtering: Use image.attached_to_variant object or alt-tag identification to conditionally display images. Requires editing product-template.liquid file with code like {% if image.attached_to_variant == false %}
  • Third-party apps: Rubik Variant Images and Multiple Variant Images apps offer no-code solutions
  • Custom JavaScript: Community member Hey_Jak provides a tutorial and code solution, though zoom functionality requires additional custom development

Key Challenges:

  • Shopify lacks native bulk deletion for variant images; CSV export/import workaround required
  • Implementation requires Liquid/HTML knowledge or Shopify’s 60-minute complimentary Theme Support (available with paid plans)
  • Custom themes may have different file structures than standard Shopify themes

Status: Multiple participants report varying success with code-based solutions. The discussion remains active with ongoing requests for implementation guidance and feature additions like image zoom.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
26

@ironhouse

[IMAGE DATA] is a place holder representing the normal image output in your themes code that you wrap with the given logic.

What that code is varies wildly by theme

The other approach is to look for the image loop and skip images used with variants with the {%-continue -%} tag

{% for image in product.images offset:index_offset %}
    {%- if image.attached_to_variant == true -%}
        {%- continue -%}
    {%- endif -%}
...
....