Shopify Horizon Theme: Master Product Variant Images in Grid Layout

Hey there, fellow store owners! As a Shopify migration expert and someone who loves digging into the community forums, I often see common challenges pop up that have elegant, community-driven solutions. Today, I want to share a fantastic example that came up recently regarding product variant images on the popular Horizon theme.

Picture this: you've got a beautiful product, say a "Cart Path Golf T-Shirt" from a store like Slow Strokes, using the Horizon theme (v4.1.3). You've set up your product variants with different colors (Asphalt, Navy, etc.), and each color has its own featured image. You're using a sleek two-column grid layout for your product media, and you want it to be super clean: when a customer picks "Asphalt," you want to see ONLY the Asphalt shirt image. Simple, right?

Well, as Orlando_O discovered, it's not always that straightforward. Even with the "Hide unselected variant media" setting enabled, extra "lifestyle" images were still showing up alongside the selected variant's featured image. This is a classic head-scratcher, and it's exactly the kind of thing the Shopify community excels at solving!

Understanding the Horizon Theme's Product Gallery Logic

When Orlando_O first posted, the initial responses, including one from the AI Theme Code Editor and Steve_TopNewYork, quickly clarified the core issue. Horizon's product gallery, by default, is designed to display the full media set. While Shopify's native variant.featured_media *identifies* which media belongs to a selected variant, it doesn't automatically *filter* the gallery to show only that image. Unless the theme explicitly implements that behavior, all product media will continue to be rendered.

This is where the "Hide unselected variant media" setting comes in. It sounds like it should solve the problem, doesn't it? But as ajaycodewiz brilliantly explained after testing on a Horizon store, this setting only hides images that are attached to *another* variant. Any images you've left unassigned (like those general lifestyle shots that apply to all colors) are considered "shared." Because they're shared, they keep showing up in the grid right next to your specific variant image. That's why Orlando_O's Asphalt tee was still rendering two images!

Orlando_O also clarified that while switching the media gallery type to "Carousel" might hide the side-by-side layout (as suggested by Maximus3), the goal was specifically to maintain that crisp "Grid" layout. So, a deeper dive into the code was needed.

The Community's Clean Code Fix for Grid View

This is where ajaycodewiz came in with a really clean and effective Liquid code snippet. The beauty of this solution is that it's a presentation-layer modification, meaning it won't affect any backend integrations like Printify's fulfillment mappings, which was a key constraint for Orlando_O.

The fix works by adding a targeted filter to the sorted_media variable within the theme's product media gallery snippet. This filter ensures that when the "Hide unselected variant media" setting is active and the gallery is in "Grid" mode, sorted_media is reassigned to contain *only* the `id` of the currently selected_variant_media. This means only that single, specific image gets rendered.

Step-by-Step Instructions to Implement the Fix:

Before you touch any code, ALWAYS duplicate your theme! This creates a backup, so if anything goes wrong, you can easily revert. Go to Online Store > Themes > Actions > Duplicate.

1. Navigate to your theme code: From your Shopify admin, go to Online Store > Themes. Find your Horizon theme (or your duplicated version), click Actions > Edit code.
2. Open the correct snippet: In the file editor, open snippets/product-media-gallery-content.liquid.
3. Locate the insertion point: Near the top of the file, inside the {% liquid %} block, find this specific code snippet (it's often around line 120, but might vary slightly depending on minor theme updates):

     else
       assign sorted_media = selected_product.media
     endif
   

4. Paste the new filter: Immediately after that endif, paste the following 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 ajaycodewiz on where it goes:

   

5. Save your changes: Click "Save" in the top right corner.

And that's it! Orlando_O confirmed this snippet worked perfectly, resolving the issue on their Grid view. Now, when a customer selects a color variant, only that specific color's featured image will display, creating a much cleaner and more focused product presentation.

Here's what it looks like before and after, courtesy of ajaycodewiz's testing:

Before: The grid shows the color tee plus an unassigned lifestyle image.

After: The color shows only its own tee, and switching colors swaps to that color's single image.

Important Notes for Theme Customization

A couple of key things to remember:

• This modification directly edits a theme file. If you update your Horizon theme in the future, you'll need to re-apply this custom code. That's why duplicating your theme before making changes is so important!
• This fix is designed to show the *one* featured image per color. If you have a scenario where a color variant should display *multiple* dedicated images (not just one featured and some shared lifestyle shots), this specific filter might be too restrictive. You'd need a wider filter that accounts for all images assigned to that specific variant.

It's always inspiring to see how the Shopify community collaborates to solve these nuanced technical challenges. This particular thread is a fantastic example of experts diving in, explaining the "why," and providing actionable, tested solutions. It just goes to show that if you're ever stuck on a tricky customization, chances are someone in the community has faced it too, or has the expertise to help you find that perfect Liquid tweak!