How to show only selected variant images in Shopify Horizon theme?

Store Design
, , , ,

Topic summary

Problem: In the Shopify Horizon (free) theme, a product with color variants (Black, Blue, Green) shows all images at once instead of filtering media by the selected variant. The user expects only the selected color’s images to display while others are hidden.

Details:

  • Each variant has its own images uploaded in the product media section.
  • The gallery does not update when a variant is selected; no variant-specific image filtering occurs.

Key questions:

  • Does Horizon support variant-linked image filtering out of the box?
  • How should images be assigned to variants so the theme recognizes them (e.g., naming/association best practices)?
  • Does implementation require alt-text conventions (e.g., color-blue), custom JavaScript listening to variant change events, or edits in main-product.liquid/related sections?
  • Is there a theme-safe approach that survives Horizon updates?

Status: No solution or replies yet; the user requests guidance or sample code for Horizon specifically.

Summarized with AI on December 24. AI used: gpt-5.
1

Hi Shopify Community :waving_hand:

I’m using the Shopify Horizon (free) theme and I have a product (example: T-shirt) with color variants such as Black, Blue, and Green.

Each color variant has its own set of images uploaded in the product media section.

Expected behavior:

  • When a customer selects Blue, only Blue variant images should be displayed

  • When Green is selected, Blue and Black images should be hidden

  • Same behavior for all color variants

Current issue:

  • All product images are visible regardless of the selected variant

  • The image gallery does not filter images based on the selected variant option

My questions:

  1. Does the Horizon theme support variant-specific image filtering by default?

  2. Is there a recommended way to assign images to variants so Horizon recognizes them correctly?

  3. Does this require:

    • Modifying product media alt text (e.g., color-blue)

    • Custom JavaScript to listen to variant change events

    • Editing main-product.liquid or related section files?

  4. Is there a theme-safe solution that won’t break during Horizon updates?

If anyone has implemented this successfully in the Horizon theme, sample code or guidance would be greatly appreciated.

Thanks in advance! :folded_hands:

1 Like
2

@siva_fds Hi, You can achieve this very easily using Rubik Variant Images & Swatch without editing theme files or writing custom JavaScript. Rubik is specifically designed to handle variant-based image filtering. Our app works very smoothly with the Horizon theme and integrates perfectly without any issues. I’m also adding a short video to demonstrate how this works

If you need any help with the setup or have questions during configuration, our support team will be happy to assist you. Just reach out, and we’ll help you get everything set up correctly. :blush:

3

Hi @siva_fds
Horizon theme has option to Hide unselected variant media in Product media settings

Screenshot 2025-12-24 at 16.52.46
Screenshot 2025-12-24 at 16.52.461920×883 218 KB

1 Like
4

Hi @siva_fds

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop: