Hi community, I am working with the Horizon theme (v4.1.3) on my Shopify store (Slow Strokes). On my product page ("Cart Path Golf T-Shirt"), I have a two-column media layout. When a customer selects a specific color variant (e.g., Asphalt or Navy), the

[Orlando_O]

Hi community,

I am working with the Horizon theme (v4.1.3) on my Shopify store (Slow Strokes).

On my product page (“Cart Path Golf T-Shirt”), I have a two-column media layout. When a customer selects a specific color variant (e.g., Asphalt or Navy), the product page gallery displays multiple images side-by-side, even though each color variant has a specific featured media mapped to it (variant.featured_media).

Goal: When a customer selects a color variant (e.g., Asphalt), I want the main product media gallery grid to filter dynamically so it renders ONLY the single image assigned to that active color variant. Size variant changes should not trigger or alter image filtering.

Technical Details & Constraints:

• Theme: Horizon v4.1.3

• Integration: Syncing products via Printify

• Requirement: Presentation-layer modification only (e.g., Liquid/JS filter in main-product.liquid or product-media.liquid) so native Printify backend fulfillment mappings remain unaffected.

• Behavior: Must work using Shopify’s native variant.featured_media mapping without hardcoding image URLs.

Could someone please guide me on where to add or modify the Liquid loop or JS listener in Horizon to ensure non-matching variant images are hidden when a color is selected?

Thank you!

[Maximus3]

Sometimes all that is needed is to browse theme settings, and perhaps ask Sidekick.

[Orlando_O]

Thanks for the reply, @Maximus3!

To clarify, switching the media gallery type to Carousel does hide the side-by-side layout, but I am specifically trying to maintain the Grid layout while keeping variant images filtered correctly.

Currently, even with “Hide unselected variant media” enabled, selecting a color variant in the Grid view displays multiple images side-by-side because secondary/lifestyle images remain unassigned in the product gallery.

I’ve attached screenshots showing my current Grid setup and how the extra image bleeds through on variant selection. Is there a Liquid or CSS tweak for Horizon v4.1.3 to strictly isolate the selected variant’s image within the Grid view?

[Ploqo]

I tested on a Horizon store, 2-column Grid with Hide unselected variant media on. Before, the color showed its tee plus an unassigned lifestyle image.

After, only the tee, and switching color swaps to that color’s single image.

Reasons:

• Horizon’s Hide unselected variant media only hides images that are attached to another variant.
• Any image you leave unassigned (your lifestyle shots) counts as shared, so it keeps showing in the grid next to the variant image.

That is why Asphalt still renders two.

Fix:

Add the filter

• Online Store > Themes > … > Edit code.
• Open snippets/product-media-gallery-content.liquid.
• Near the top, inside the {% liquid %} block, find this:

  else
    assign sorted_media = selected_product.media
  endif

• Paste these lines right after that endif:

  # 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

• Save.

What it does

• The grid renders only the single image mapped to the active color.
• Uses variant.featured_media, no hardcoded URLs.
• Size changes leave it alone. Each size keeps its color’s image.
• Only touches Grid, and only while Hide unselected variant media is on.

Notes

• This edits a theme file, so duplicate the theme first and re-apply after a Horizon update.
• It shows the one featured image per color. If a color has extra images you want kept, that needs a wider filter.

[Orlando_O]

Thank you so much @Ploqo!

Your code snippet worked perfectly. Pasting those three lines right after line 120 in snippets/product-media-gallery-content.liquid completely resolved the issue on the Grid view. I really appreciate you taking the time to test this on a Horizon store and sharing such a clean fix!

[Orlando_O]

Hi, Steve

Thank you for taking the time to explain the logic behind this!

I was able to get it resolved using the Liquid filter snippet shared by @Ploqo above, which isolated selected_variant_media directly in product-media-gallery-content.liquid. Really appreciate your help and detailed explanation!

[Ploqo]

I am glad it worked. Could you please mark it as solution so that it helps others find the right answer