Streamlining Shopify Product Galleries: How to Show Only Relevant Variant Images in Horizon Theme

Hey there, fellow store owners! As a Shopify expert and someone who spends a lot of time diving into the community forums, I often come across really insightful discussions that highlight common challenges we all face. Recently, I saw a fantastic thread that tackled a super specific, yet incredibly annoying, product page issue in the popular Horizon theme. It’s the kind of thing that makes you scratch your head, but thankfully, the community swooped in with a brilliant fix.

The Tricky Product Gallery: When "Hide Unselected" Isn't Enough

The discussion kicked off with Orlando_O from Slow Strokes, who was using Horizon theme v4.1.3. Orlando had a common goal: when a customer selected a specific color variant for their "Cart Path Golf T-Shirt," they wanted the product gallery to display ONLY the single image assigned to that active color variant. Sounds simple enough, right?

The snag was that even with the theme's "Hide unselected variant media" setting enabled, the two-column grid layout on the product page was still showing multiple images side-by-side. Why? Because secondary, general lifestyle images, which weren't specifically tied to any particular variant, were "bleeding through." They weren't "unselected" in the theme's eyes; they were "shared," and Horizon's default logic kept them visible. This was especially tricky because Orlando was syncing products via Printify and needed a presentation-layer fix that wouldn’t mess with backend fulfillment mappings.

Community Brainstorm: Initial Thoughts & The Real Problem

Right away, the community jumped in. The initial advice from ai-theme-code-editor pointed out that Horizon’s gallery displays the full media set by default. Achieving Orlando’s goal would require a small theme customization, not just a toggle. The general idea was to associate each media item with its related variant using Shopify’s native variant.featured_media and then use JavaScript to listen for variant changes, showing only the matching media.

There was also a suggestion to check theme settings or use Sidekick, but Orlando clarified that while switching to a 'Carousel' layout would hide the side-by-side issue, they specifically wanted to maintain the 'Grid' layout. This confirmed that the built-in settings weren't quite cutting it for this specific scenario.

Steve_TopNewYork provided some excellent clarification, explaining that variant.featured_media identifies which media belongs to a variant, but doesn’t automatically filter the gallery. The theme itself needs to implement that filtering behavior. This was a crucial piece of the puzzle, emphasizing that a custom code tweak was indeed the way to go.

The Winning Solution: A Clean Liquid Filter

The real breakthrough came from @ajaycodewiz, who not only understood the nuanced problem but also tested a solution on a Horizon store! Ajay explained that Horizon’s "Hide unselected variant media" setting only hides images attached to other variants. Any images left unassigned (like those lifestyle shots) are considered shared and will continue to show up alongside your variant-specific images. This was the core reason Orlando's grid still rendered multiple images.

Ajay then provided a super clean, three-line Liquid snippet that Orlando confirmed worked perfectly. This snippet directly filters the media to display only the selected variant’s featured image when in the grid view and when the "Hide unselected variant media" setting is active. Best of all, it keeps your Printify integration happy by only touching the presentation layer!

Here's How to Implement the Fix:

Before you dive into any code edits, please, please, duplicate your theme first! This is your safety net. If anything goes wrong, you can always revert to your working version. Seriously, don't skip this step!

Here are the steps to add the Liquid filter:

1. Navigate to your Theme Code:
   • From your Shopify admin, go to Online Store > Themes.
   • Find your active Horizon theme (or the duplicated version you're working on).
   • Click Actions > Edit code.
2. Open the Relevant Snippet:
   • In the code editor, open the file named snippets/product-media-gallery-content.liquid.
3. Locate the Insertion Point:
   • Near the top of the file, inside the {% liquid %} block, find this specific section:

       else
         assign sorted_media = selected_product.media
       endif
     

4. Paste the Code:
   • Immediately after that endif line, paste these three lines of Liquid code:

       # Grid: show only the selected variant's featured media
       if block_settings.hide_variants and selected_variant_media and media_presentation == 'grid'
         assign sorted_media = selected_product.media | where: 'id', selected_variant_media.id
       endif
     

     Here's a visual from the community thread to help you locate the spot:

     

5. Save Your Changes:
   • Click Save.

What This Code Does (and Doesn't Do)

This small but mighty snippet ensures that:

• When your product gallery is set to 'Grid' view and "Hide unselected variant media" is enabled, it will now render only the single image mapped to the active color variant.
• It intelligently uses variant.featured_media, so you don't need to hardcode any image URLs.
• Crucially, it leaves size changes alone. If a customer switches sizes but the color remains the same, the image won't re-filter unnecessarily.
• It only applies this strict filtering when you're using the 'Grid' layout and have "Hide unselected variant media" turned on.

Here's a look at the "before" state, where an unassigned lifestyle image still shows:

And here's how it looks "after" the fix, showing only the selected variant's image:

A Quick Word on Theme Updates

Just a friendly reminder: since this involves editing a theme file, you'll need to re-apply this customization if you ever update your Horizon theme. Keep a note of it! Also, this specific fix shows only one featured image per color. If you have a specific need for a color to have multiple associated images (beyond just one featured), you'd need a slightly wider filter, but for the common "show only the primary image for this color" scenario, this is golden.

It's always amazing to see the Shopify community come together to solve these kinds of challenges. It really highlights the power of shared knowledge and reminds us that we're all in this together, building awesome stores and making the most of what Shopify has to offer. If you're considering starting your own online journey, remember that a strong platform like Shopify, combined with a supportive community, can make all the difference. You can start your Shopify store today and tap into this incredible ecosystem. Happy selling!