Only show images based on what variant is chosen?

Store Design

Topic summary

Goal: show only images for the selected variant on a Shopify product with 26 letter variants; currently all variant images appear regardless of selection.

Recent actions: a preview link initially 404’d; product was made live. A product-level metafield and an if-condition were added to the template but didn’t work; one reply referenced updating code but provided an empty snippet. Others asked where to place code and what metafield to create.

Proposed solutions:

  • JavaScript: assign unique classes per variant image and use a change event on the variant selector to show/hide matching images. Requires adapting selectors to the theme; provided example had minor typos.
  • Metafield/CSS: create a product metafield, conditionally hide .slideshow-thumbnails in the template (e.g., main-product.liquid or product-template.liquid). Mixed results; implementation details unclear.
  • Tutorials: multiple YouTube guides, including one using alt tags as filters. Counterpoint: using alt tags this way may conflict with ADA accessibility requirements; suggestion to keep descriptive alt text and append color/variant names.
  • App solution: Rubik Variant Images recommended to automatically show only images for the selected variant; demo video and app links provided.

Status: no clear resolution; guidance varies, and some users still face issues. Attachments (screenshots, videos) are relevant to implementation.

Summarized with AI on December 14. AI used: gpt-5.
21

Hi,

I know this is an old question, and I hope you’ve already solved it. However, I wanted to share it here in case others are experiencing the same issue.

To easily resolve this, you can use the Rubik Variant Images app. It ensures that only the images corresponding to the selected variant are shown and it’s very user-friendly.

Check here: https://apps.shopify.com/rubik-variant-images/

I hope this helps both you and others facing a similar issue!

1 Like