How to fix variant selection errors in the Shopify Horizon theme

If the variant selector is not working in your Shopify Horizon theme, the usual suspects are a small set of predictable issues: the selection does not register, the wrong image shows when you pick a color, sold-out options still look available, or the variant buttons stack in a way that looks broken. Horizon is Shopify’s flagship free theme, so it gets the most searches and the most of these reports. This post walks each symptom and the fix.

Most of these are configuration or display issues, not deep bugs, and several are fixable in minutes. Where the fix is an app-level one (like showing the right images per variant), we will be specific, since that is what Rubik Variant Images handles. For the general setup on this theme, our Horizon theme variant images guide is the companion read.

In this post

• Selection not registering when you click
• Wrong image shows for the selected variant
• Variant buttons stacking or misaligned
• Sold-out variants still selectable
• The quick diagnostic checklist
• Frequently asked questions
• Related reading

Selection not registering when you click

You click a color and nothing happens: the price, image, and add-to-cart do not update. On Horizon, this usually traces to one of three things:

• A JavaScript conflict. Another app or a custom snippet threw an error that halted the theme’s scripts. Open the browser console (right-click, Inspect, Console) and look for red errors. Disable recently added apps or code one at a time to find the culprit.
• A leftover from a theme update. If you customized the variant picker and then updated Horizon, the old code can clash with the new. Re-check any custom edits to the product template.
• Duplicate variant pickers. An app that injects its own picker alongside Horizon’s native one can cause clicks to fight each other. Pick one picker, not two.

The fastest diagnostic is the console. A dead variant selector almost always has a matching error message that names the file or app causing it.

Wrong image shows for the selected variant

The selection registers, but the gallery jumps to the wrong photo, or shows the product’s default image instead of the color you picked. This is the most common Horizon variant complaint, and it is not really an error: it is Horizon following Shopify’s native rule of one featured image per variant.

If a variant has no featured image assigned, Horizon shows the default. If you want a shopper to see several photos of the selected color, native Horizon cannot filter the gallery that way. The fix is to assign the right images per variant and filter the gallery on selection, which is exactly the job of a variant image app. With Rubik Variant Images, picking olive shows the olive photos and nothing else, on Horizon, with no theme code.

“I installed this app about 2 hours ago. There was a short video explaining how to set it up, and set up was super easy. However it didn’t quite work. The developer proactively reached out to me, saying there was an issue with our Shopify theme and that he would try to fix it. Less than 2 hours later he had a fix. This is the best customer service I’ve ever experienced!”

NØRSE CØDE, US, 2025-02-09. Rubik Variant Images on the Shopify App Store

Variant buttons stacking or misaligned

Sometimes the variant buttons render fine functionally but look off: sizes stacking vertically one per line instead of sitting in a neat row, or swatches overflowing the container. This is a CSS layout issue, usually from long option values (a color named “Deep Forest Green Heather” is a lot wider than “Green”) or a section width setting.

• Shorten option labels where you can, or switch that option to swatches so the label is not the width driver.
• Check the section width in the theme editor; a narrow product info column forces wrapping.
• Use swatches for color, buttons for size so each option displays at its natural size instead of one giant button row.

Sold-out variants still selectable

A shopper selects a size that is out of stock and only finds out at add-to-cart. Horizon can show unavailable variants, and whether they are greyed out or hidden depends on your settings. If you want sold-out options clearly marked or hidden, that is a display choice: mark them as unavailable so shoppers see it up front, or hide the sold-out swatches entirely. A variant image app can hide sold-out swatches so the picker only shows what a shopper can actually buy.

The quick diagnostic checklist

1. Open the browser console and look for red JavaScript errors naming a file or app.
2. Test on a duplicate of your theme with recently added apps disabled, to isolate a conflict.
3. Confirm each variant has the right featured image assigned.
4. Check whether a custom edit survived a Horizon update and now clashes.
5. If the issue is images-per-variant or sold-out display, solve it at the app layer rather than editing theme code.

Horizon is a solid theme, and most “variant errors” on it are either a conflict from another app or the native one-image-per-variant limit doing what it always does. For the broader theme picture, the craftshift guide to color swatches on Horizon is a good next read. See the fix live: the demo store, the Horizon video, or the supported themes docs.

Frequently asked questions

Why is my Horizon theme variant selector not working?

Usually a JavaScript conflict from another app or a custom snippet, a leftover from a Horizon theme update, or two variant pickers fighting each other. Open the browser console and look for red errors that name the file or app. Disabling recently added apps one at a time isolates the cause.

Why does the wrong image show when I select a variant on Horizon?

Horizon follows Shopify’s native rule of one featured image per variant, and shows the default image if a variant has none assigned. To show several correct photos per color, assign images per variant and filter the gallery with a variant image app, which Horizon cannot do natively.

How do I stop variant buttons from stacking on Horizon?

Button stacking is a CSS width issue, often from long option labels or a narrow product column. Shorten labels, widen the section, or switch the color option to swatches so the label is not forcing the width. Using swatches for color and buttons for size keeps each option at a natural size.

How do I hide sold-out variants on Horizon?

Mark unavailable variants so shoppers see they are out of stock, or hide the sold-out swatches entirely with a variant image app so the picker only shows buyable options. Which you choose depends on whether you want shoppers to know a size exists but is sold out, or not see it at all.

Do I need to edit theme code to fix these?

Often not. Conflicts are resolved by finding the offending app, and image-per-variant and sold-out display are handled at the app layer. Rubik Variant Images works on Horizon with no theme code, so most variant display issues are fixed in the app rather than by editing Liquid.

Related reading

• Horizon theme variant images guide
• Variant images not showing: the fix
• Rubik Variant Images FAQ
• Color swatches on the Horizon theme
• Combined listings explained

When a Horizon variant selector misbehaves, resist the urge to start editing Liquid immediately. Open the console first. Nine times out of ten the “error” is another app’s script, or the native one-image-per-variant limit behaving exactly as designed, and both have cleaner fixes than theme surgery.