Hi [email removed]Suryagoswami7,
Can you share the method that worked for you?
Topic summary
Goal: Show only images for the currently selected product variant in Shopify’s Dawn theme (Shopify’s default theme).
Proposed code approach:
- Add jQuery in theme.liquid.
- In main-product.liquid, add a custom attribute (thumbnail-color=“{{ media.alt }}”).
- In Products > Media, set each image’s Alt Text to match the variant.
- In global.js, call this.filterMedia() and implement a filterMedia() function to hide all [thumbnail-color] items and show only those whose attribute matches this.currentVariant.featured_media.alt. Screenshots and code snippets are provided to illustrate these steps.
Results/feedback:
- Original poster says this method (and a blog guide) didn’t work for them, later noting they solved it with another method but did not share details.
- Multiple members requested the working method.
- Alternative resources shared: two YouTube tutorials (one “tested up to Dawn 11”), with mixed outcomes. Some report it works on mobile but not desktop when using the thumbnail carousel; others say it didn’t work in Dawn 11.
- App-based alternative suggested: “Rubik Variant Images.”
Status: No clear consensus or final fix; mixed success depending on theme version and carousel behavior. Discussion remains open with unresolved desktop carousel issues.
1 Like