Hide unused variants in Horizon

Technical Q&A
, ,
1

I just switched to the Horizon theme and am wanting to hide variants that are not used/do not exist. These are not sold out- they just do not exist on the backend.

For example, in the screenshot below the 14 mm only come in 2 styles. The other styles have been removed from the product, but they still show as if they are sold out. How can i hide these without hiding sold out variants on other variant combinations?

**NOTE: I do NOT want to use an app! Please do not suggest an app.

Screenshot 2026-05-06 101001
Screenshot 2026-05-06 101001408Ă—715 35.7 KB

2

The easy way is to add this CSS code to the “Theme settings”-> “Custom CSS”:

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

Basically it will remove all crossed out buttons on your screenshot.

The code will hide all unavailable variant selection buttons – both for sold-out and for non-existing combinations.

Current theme code does not make distinction between those and the only reason to want sold-out options combinations to show is to allow for “back in stock” notifications apps.

If you do not have those, then code above should work, otherwise it would require theme code modification, which is possible, but would make your future theme updates problematic.

if my post is helpful, please like it via ♡ button and mark as a solution -- this will help others find it
3

@Momsstitchetti … add below css in the base.css

{% style %}
     .variant-option__button-label {
  display: inline-flex;
}

.variant-option__button-label:has(button[aria-disabled="true"]),
.variant-option__button-label:has(input[aria-disabled="true"]),
.variant-option__button-label:has([disabled]) {
  display: none !important;
}
    {% endstyle %}

image (2)
image (2)1788Ă—912 71.8 KB

image (1)
image (1)1781Ă—728 112 KB

4

Hey @Momsstitchetti Welcome to Shopify Community can you please share the Website URL

5

This should solve the issue

6

I do not want to hide sold out, only the variants that don’t exist at all on the backend.

What kind of customization would it require?

7

https://www.momsstitchetti.com/

9

this also hides sold out variant options, not just the variant options that do not exist on the backend. I want sold out variants to show so customers know we carry them.

10

Try this CSS to hide unavailable (but keep sold out visible) is:

css

.variant-option__button-label:has(input[data-option-available="false"]:not([data-variant-id])) {
  display: none;
}

This hides any label whose input is unavailable AND has no data-variant-id meaning the combination doesn’t exist at all while leaving sold-out options (which do have a data-variant-id) visible with their strikethrough.

11

Where should i paste this? into the base.css?

12

yes you should paste this in base.css

13

THANK YOU!! this worked!