Horizon Theme – Show only relevant variant images based on selected options (color) – Shopify

April 10, 2026
Shopify Tips
10 min read
a Horizon theme product page filtering images by selected color option

Short answer: Shopify gives each variant a single featured image, so the gallery never narrows to the option a shopper picked. Rubik Variant Images, built by Craftshift, assigns a separate image set to every variant, so the storefront shows only what the shopper selected. Free to install, 5.0 stars across 420 reviews.

The Horizon theme on Shopify looks great out of the box, but it has the same problem every Shopify theme has: when a customer picks “Red,” they still see all 40 images from every color in the gallery. Showing only relevant variant images based on the selected color is the single biggest product page UX fix you can make on Horizon, and it’s not built in.

I get why this frustrates people. You spent hours photographing each colorway from six angles. You uploaded them carefully, put them in the right order. Then a customer clicks “Navy” and scrolls through 8 photos of “Sage” before they even find the Navy shots. That’s not a minor annoyance. It kills conversions.

There are two paths here: a Liquid/theme code hack that kinda works for simple products, and an app-based approach that handles the full range of product complexity. Both have tradeoffs. I’ll walk through each one honestly.

On this page

The actual problem with Horizon’s gallery

Horizon uses Shopify’s standard product media gallery. Every image, video, and 3D model you upload to a product shows in one flat gallery regardless of which variant is selected. Shopify’s native variant system only supports one image per variant. One. If your Red t-shirt has a front view, back view, detail shot, and lifestyle photo, only one of those can be the “variant image.” The other three float in the gallery unfiltered.

This isn’t a Horizon bug. It’s a Shopify platform limitation that affects every theme. Horizon just makes it more visible because its gallery layout is prominent and image-forward.

So how do you show only the images that match the selected color? Two approaches.

Native Liquid workaround (free, limited)

Shopify lets you assign one image per variant natively. When someone selects a variant, the gallery scrolls to that variant’s assigned image. It doesn’t hide the other images, but at least the right one is shown first.

  1. Open the product in Shopify admin.
  2. Scroll to the Variants section.
  3. Click each variant. In the Media section, pick the primary image for that variant.
  4. Save.

Now when a customer clicks “Red,” the gallery jumps to the Red image. But they can still scroll left and see “Blue” and “Green” shots. It’s better than nothing, but it’s not filtering.

For products with one or two images per color, this might be enough. For products with 6-8 images per colorway? Not even close.

Alt text filtering method (free, fragile)

Some developers use a Liquid hack: put the color name in each image’s alt text, then write custom JavaScript to hide images whose alt text doesn’t match the selected variant’s option value. You’ve probably seen this approach in forums.

Does it work? Sort of. Here’s the issue. It requires editing Horizon’s theme code directly. Every time the theme updates, your customization might break. And if your alt text serves an image SEO purpose (which it should), stuffing color names into it creates a conflict between accessibility, SEO, and filtering logic.

I’ve seen stores where the alt text reads “Red” on every image. That’s terrible for screen readers and Google Image Search. You lose SEO value for a fragile filtering hack. Not a great trade.

App-based method (reliable, scales)

The approach that actually works across product complexity levels: use a variant image app that assigns multiple images to each variant and filters the gallery when the variant changes.

That is the job Rubik Variant Images does: a separate image set per color, and the Horizon gallery narrows to it when the shopper switches. It works with Horizon out of the box, it’s free to install for one product, and it holds 5.0 stars across 420 reviews. It’s one of several variant image apps available, but it specifically supports 350+ themes including Horizon. There’s a longer setup FAQ on the Rubik site if you want the detail before installing anything.

How it works on Horizon:

  1. Install the app and open a product.
  2. Assign multiple images (or videos, or 3D models) to each variant. Drag and drop.
  3. The app stores these assignments in metafields. No theme code editing.
  4. On the storefront, when a customer selects “Red,” the gallery shows only Red images. Everything else is hidden.

The rendering uses Shadow DOM, meaning the app’s CSS can’t conflict with Horizon’s styling. That was a problem with older approaches that injected global CSS. Horizon has some opinionated gallery styles, and Shadow DOM sidesteps all of them.

Rubik Variant Images showing only the relevant variant images for the selected color on a Shopify product page

Horizon-specific quirks to watch

Horizon has a few gallery behaviors that affect variant image filtering, no matter which method you use:

  • Horizon uses a thumbnail strip below the main image. When images are filtered, the thumbnail strip needs to update too. Native Liquid hacks often miss this, leaving ghost thumbnails visible.
  • Horizon’s mobile gallery becomes a swipeable carousel. Filtering needs to work in swipe mode, not just desktop grid mode.
  • If you use Horizon’s “quick view” on collection pages, variant image filtering typically doesn’t apply there since quick view loads a simplified product card, not the full product page.

Check the theme store ID list to verify you’re running the latest Horizon version. Older versions had different gallery markup that could cause issues with any customization.

What about products with multiple options?

This is where things get interesting. What if your product has Color AND Size? Should the gallery filter when Color changes, Size changes, or both?

For most stores, filtering on Color only makes sense. A “Medium Red T-shirt” and a “Large Red T-shirt” look identical in photos. But a “Red T-shirt” and a “Blue T-shirt” look completely different. So you want images tied to color, not size.

The native Liquid approach falls apart here because Shopify’s one-image-per-variant limitation means each Color+Size combination gets one image. If you have 5 colors and 4 sizes, that’s 20 variants, each needing a separate image assignment. You can’t say “all Red variants share these 6 images.”

Apps like Rubik Variant Images handle this by letting you assign images at the option level (Color = Red gets images 1-6) rather than the individual variant level. Huge difference when you have hundreds or thousands of variants.

If your products go beyond Color + Size into three or more options (Color + Size + Material, for example), you might also want to look at combined listings as a way to split the product into separate entries per material, each with its own color variants. That keeps individual product pages manageable while giving each version its own URL and image set.

But honestly? For 90% of Horizon stores, a variant image app covering Color filtering on the product page handles the job. Don’t over-engineer it.

FAQ

Which Shopify app should I use for horizon theme variant images?

Rubik Variant Images, built by Craftshift, is the app we build for this. It assigns a separate image set to every color and filters the Horizon gallery down to the selected one, through product metafields rather than theme file edits. It holds 5.0 stars across 420 reviews and carries the Built for Shopify badge. GLO Color Swatch and Bundles and StarApps Variant Image Automator are the two obvious alternatives, and both have been on the App Store longer than us with more reviews, so weigh them if track record is what you value most.

Does Horizon theme natively support showing only relevant variant images?

No. Horizon, like all Shopify themes, shows the full product gallery regardless of which variant is selected. Shopify’s platform only supports one image per variant natively, which scrolls to that image but doesn’t hide the others.

Can I filter variant images on Horizon without editing theme code?

Yes. Variant image apps like Rubik Variant Images work with Horizon without any theme code changes. They store image assignments in metafields and render filtered galleries using Shadow DOM.

Will the alt text filtering method break when Horizon updates?

It can. Any approach that edits theme Liquid code directly is at risk when the theme updates. If Horizon changes its gallery markup or JavaScript, your custom filtering code may stop working.

Does variant image filtering work on Horizon’s mobile gallery?

With the alt text method, it depends on your implementation. With app-based solutions, yes. Apps designed for Horizon handle both desktop thumbnails and the mobile swipe carousel.

Can I filter by Color and Size at the same time on Horizon?

Most stores only need to filter by Color since size doesn’t change the product’s appearance. Apps that support multi-option products let you choose which option triggers the image filter, keeping things simple for the customer.

Doing this on Horizon without editing theme files

Horizon hands you the swatch. It does not hand you the filter, which is the part this whole post is about. Rubik Variant Images filters the Horizon gallery down to the selected colour using product metafields, so there are no theme file edits to redo the next time Horizon updates. It runs natively on Horizon and 350+ other themes, and it is free for one product if you want to try it on a single item first.

“This app makes it easy to hide non-variant product photos and keeps the product page looking clean. It also helps to show clean custom swatches. Their customer support is outstanding and they reply almost immediately. They were able to fix a bug for me with minimal weight time.”

Anonymous merchant, February 2026, Rubik Variant Images on the Shopify App Store

You can also see it running on a live Horizon store on the demo store, or read the getting started guide, before installing anything.

Try Rubik Variant Images free →

Co-Founder at Craftshift

You may also like