Thank you so much!
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.