Shopify Horizon theme variant button issues: complete fix guide (2026)

May 6, 2026
Variant Images
14 min read
Shopify Horizon theme variant button issues: complete fix guide (2026)

The Shopify Horizon theme launched in mid-2025 as the successor concept to Dawn. It is fast, blocks-based, and looks great out of the box. The variant picker is the part most merchants spend a Saturday afternoon fighting with. Buttons that will not stack vertically. URLs that pin a variant ID even on products with no variants. Images that refuse to swap when a customer changes a color. Quick-add buttons that grey themselves out because the first variant is sold out. We get the support questions on this every week.

This is the hub guide. Eleven of the most common Horizon variant button and selector issues in one place, with the actual CSS, Liquid, or theme-setting fix for each. The fixes here come from the Shopify community threads and developer forum posts where these issues have been reported and resolved. Where the issue is a Horizon bug that has no clean fix without an app, we say so honestly and point at the simplest workaround.

We are Craftshift. We build Rubik Variant Images and Rubik Combined Listings, both of which work on Horizon out of the box across 350+ themes. We will mention them where they actually solve a specific problem. Where the fix is a 3-line CSS edit you can do yourself, we just give you the CSS.

In this post

Quick reference: 11 issues, 11 fixes

IssueFix typeSection
Buttons stack horizontal, want vertical3 lines of CSSVertical stacking
Sharp or rounded button cornersTheme settingCorner radius
Dropdown instead of buttons or swatchesTheme block settingDropdown to button
Variant slug in URLLiquid edit (advanced)Variant slug
OOS first variant auto-selectedLiquid edit or appOOS auto-select
Image does not change on clickVariant image assignmentImage not changing
Multiple images per variantApp (RVI)Multiple images
Picker broken on featured-product blockKnown Horizon bug, workaroundNon-product page
Hide or grey out sold-out variantsTheme setting + CSSHide OOS
Collection filter does not change imageKnown Horizon limit, app fixCollection image
Button sizingCSS variablesButton size

Variant buttons will not stack vertically

Default Horizon lays variant buttons in a horizontal flex row. For long option labels (sizes like “Tall Regular Slim Fit”) the row wraps, and the wrapping is ugly. The clean fix is to force a column layout.

Where to add CSS: Theme editor > Theme settings > Custom CSS (or Edit code > Assets > base.css).

fieldset.variant-option {
  flex-direction: column;
  align-content: flex-start;
}

That is the entire fix. Three lines. This is Tim_1’s exact CSS from the Shopify community thread that solved this for several merchants on Horizon 3.x. The reason it works: fieldset.variant-option is the parent container Horizon uses for each option set; flipping its flex-direction stacks the buttons.

Why other CSS approaches fail: .variant-option--buttons with flex-wrap: nowrap does not stack, it just stops wrapping. Targeting the input element directly does not affect layout because the parent’s flex-direction wins. Use the fieldset selector.

Buttons have rounded corners and you want them sharp (or vice versa)

This one is a built-in setting. No code required.

  1. Open theme editor > Theme settings (gear icon at the bottom).
  2. Click Variant pickers.
  3. Adjust Corner radius. 0px for sharp corners, higher numbers for pills.
  4. Save.

Our deeper guide on this exact topic: make Horizon variant button corners sharp.

Horizon’s default for new option sets sometimes drops a dropdown menu instead of buttons. Fix:

  1. Theme editor > product template.
  2. Click on the variant picker block.
  3. Find the Selector style setting (or Display style depending on Horizon version).
  4. Choose Buttons or Swatches instead of Dropdown.
  5. For color swatches specifically, you also need the option to be named “Color” exactly (case-sensitive in some Horizon versions). Mismatched naming is a common source of “swatch not appearing.”

For image-based swatches (where the swatch is a thumbnail image of each variant), you need either Horizon’s variant images feature configured per variant, or an app like Rubik Variant Images that adds image swatches without theme code.

Step-by-step Horizon-specific guides on switching the picker:

Variant slug appears in URL even on products without variants

Reported and confirmed Horizon bug: the theme appends a ?variant=12345 query string to product URLs even when the product has only one variant or none. The result: ugly shareable URLs and a cosmetic SEO concern (canonical handling is fine, but the URLs look noisy).

Fix (Liquid edit, advanced): Edit snippets/card-gallery.liquid and change the link rendering to use product.url instead of product.url_without_origin | append: '?variant=' | append: variant.id.

Caveat: this fix sometimes regresses the Quick Add functionality, because Horizon’s Quick Add modal expects the variant ID in the URL. If Quick Add is critical to your store, leave the URLs alone and accept the variant slug. Cosmetic, not functional.

For SEO, the canonical tag on every product page still points to /products/handle without the variant slug, so Google does not index the slugged versions. The user-visible URL is the only thing affected.

First variant is out of stock and gets auto-selected (with a greyed-out Add to Cart)

Horizon’s logic on collection cards and quick-add picks the first variant by index, not the first available variant. If your “Small” or your “Black” is sold out, the customer lands on the page with Add to Cart greyed out. Many bounce.

Workaround 1 (theme setting where available): Horizon 3.x adds a setting in some product blocks called Default to first available variant. Enable it. Confirms the variant picker pre-selects an in-stock option.

Workaround 2 (Liquid): If your Horizon version does not have the setting, edit snippets/product-card.liquid to use product.selected_or_first_available_variant instead of product.variants[0]. Note: this is a Liquid object Shopify already provides; you are just swapping which variant the card shows by default.

Workaround 3 (hide variants entirely): If you want sold-out variants to disappear from the picker rather than show as disabled, that is the next section.

Variant image does not change on click

Three causes, in order of frequency:

  1. No image is assigned to that variant. Open the product in admin, click each variant, check that “Image” is set under each. Shopify’s native UI assigns one image per variant; if blank, the gallery shows the first product image regardless of which variant is selected.
  2. The variant has the same image as another variant. If “Black” and “Charcoal” both point to the same image, clicking between them produces no visible change. Solution: assign distinct images.
  3. JavaScript conflict from a third-party app. Some upsell, review, or visual builder apps inject scripts that interfere with Horizon’s variant change event. Test by previewing your store with the conflicting app temporarily disabled. If the issue clears, the app is the cause.

Hard refresh after fixes: Cmd+Shift+R on Mac, Ctrl+F5 on Windows. Browser caches Liquid output aggressively during preview.

Multiple images per variant (lifestyle plus on-white plus detail)

Shopify natively supports one image per variant. If you want each color to have a lifestyle shot, an on-white shot, and a detail shot (so customers can swipe through three images per color), Horizon does not handle that natively. Workarounds:

  • Manual workaround: Group images by color in the product gallery (3 black, then 3 white, then 3 charcoal). On variant selection, manually filter via Liquid customizations to show only the matching set. This requires custom Liquid in main-product.liquid and is fragile to maintain.
  • App workaround: Rubik Variant Images assigns multiple images, videos, and 3D models per variant on Horizon (and 350+ other themes). It uses Shopify’s gallery order with featured-image boundaries to define which media belong to which variant, with no theme code edits.

Our deeper guide: show multiple images per variant in Horizon.

Variant picker broken on featured-product blocks

Reported Horizon bug: the variant picker inside the featured-product block on a homepage or landing page does not function correctly. Clicking a variant button moves the radio selection but does not update the price, image, or add-to-cart link.

This is a Horizon limitation, not a misconfiguration. The featured-product block is rendered with limited JavaScript wiring outside of the actual product template. Workarounds:

  • Use a “Buy now” button that links to the product’s actual page where the picker works.
  • Hide the variant picker on featured-product blocks via CSS: section[data-block-type='featured-product'] .variant-option { display: none; }
  • Wait for a Horizon update. Shopify is aware. The fix has been requested in the developer forum but no shipped resolution as of writing.

Hide or grey out sold-out variants

Two patterns most stores want:

  • Strikethrough on sold-out buttons (the default Horizon style). Customers see the option exists but cannot select it.
  • Fully hide sold-out variants. Customers do not see the option at all. Cleaner UI but customers may not realize a color usually exists.

For full hiding (no native Horizon setting), CSS:

.variant-option__button-label:has(input[disabled]) {
  display: none !important;
}

Note that this CSS uses :has(), which is supported in all modern browsers as of late 2023 but may not work for users on very old Safari versions. The vast majority of users are fine.

Detailed walkthrough: hide sold-out variants in Horizon.

Collection page filter does not update the variant image

On Horizon 3.0.x, when a customer applies a color filter on a collection page, the product cards do not switch to show the variant image matching the filter. Cards continue to show the default product image. Reported and acknowledged in the Shopify developer forum.

This is a fundamental Horizon limitation that requires either:

  • Custom JavaScript that listens for the filter change and swaps card images to the matching variant. Doable but maintenance-heavy across theme updates.
  • An app that handles collection page swatch behavior. Rubik Combined Listings renders collection swatches that update the card image on click without filter intervention. The card stays in place; the swatch changes the photo. Many merchants prefer this UX over filter-driven swaps anyway.

Variant buttons too big or too small

Horizon exposes a few CSS variables that control button dimensions. Override them in custom CSS:

.variant-option__button-label {
  --variant-button-padding-x: 18px;
  --variant-button-padding-y: 10px;
  font-size: 14px;
  min-width: 60px;
}

Tweak the values to taste. min-width is useful when buttons collapse too narrowly on short labels like “S” or “M”. For larger button targets on mobile, you can also bump padding-y to 14px.

For the full set of swatch design controls (size, shape, spacing): change swatch size and shape in Horizon.

When to give up and use an app

Most of the issues above are fixable with theme settings or short CSS. Three cases where an app actually saves time:

  • Multiple images per variant (lifestyle + on-white + detail per color). Custom Liquid is fragile; Rubik Variant Images handles it without theme edits.
  • Collection page swatches that update product card images. Horizon does not do this natively. Custom JS is brittle. An app is cleaner.
  • Linking separate-product-per-color setups together. Horizon has no native combined listings. Rubik Combined Listings does this on every plan, including Basic.

For everything else (corner radius, vertical stacking, button size, dropdown to button), the CSS or theme setting fixes above are faster than installing anything.

Try Rubik Variant Images free
Try Rubik Combined Listings free

Frequently asked questions

How do I stack Horizon variant buttons vertically?

Add this CSS to Theme settings > Custom CSS:
fieldset.variant-option { flex-direction: column; align-content: flex-start; }
This targets the fieldset that wraps each option’s buttons and flips its flex-direction to column.

Why do my Horizon variant images not change on click?

The most common cause is missing variant image assignments. Open the product in Shopify admin, click each variant, and confirm an image is set. Other causes: identical images on multiple variants, or a third-party app’s JavaScript conflicting with Horizon’s variant change handler. Disable suspect apps to isolate the cause.

Can I have buttons on the product page and swatches on the collection page in Horizon?

Yes, the two contexts are configured separately. Product page picker style is set in the product template’s variant picker block. Collection page swatch behavior is set under collection card settings. Horizon supports color swatches on collection cards but does not natively change the card image when the swatch is clicked. For that, you need an app like Rubik Combined Listings.

Does Horizon support multiple images per variant?

Not natively. Shopify’s variant data structure assigns one image per variant. To show multiple images per variant (lifestyle, on-white, detail), you need either custom Liquid that filters by gallery order, or an app like Rubik Variant Images that supports multiple media per variant.

Why does my Horizon URL show a variant slug even on products without variants?

This is a known Horizon bug. The theme appends ?variant=ID to product URLs even when the product has only one variant. Cosmetic only: the canonical tag still points to the clean URL, so Google indexes the right page. To strip the slug from card links, edit snippets/card-gallery.liquid to use product.url instead of the variant-appended version. Caveat: this can break Quick Add.

How do I hide sold-out variants entirely in Horizon?

Add this CSS:
.variant-option__button-label:has(input[disabled]) { display: none !important; }
This hides any variant button whose underlying input is disabled (which Horizon uses for sold-out variants). Modern browser support is universal except very old Safari.

Does the variant picker work on Horizon homepage featured-product blocks?

It is partially broken in current Horizon versions. The radio selection moves but price, image, and add-to-cart do not update. Workarounds: hide the picker on featured-product blocks with CSS, or replace the block with a “Buy now” button that links to the actual product page where the picker works correctly.

If a Horizon issue is not on this list, it is either too niche to be common or actually a Shopify-platform issue rather than a Horizon-specific one. Drop a comment or ping us on the support channel of either app and we will add it to the next revision.

Co-Founder at Craftshift

You may also like