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.
17

hey yanceyr,

i am not able to find the section you mentioned, please help i am stuck with this for days.