Hi there, The Dawn theme is new, so previous answers/code are completely different (or look to be). My css is decent but my javascript is lame, I’m a designer sorry. Does anyone know how to hide unavailable variants from the selects in Shopify 2.0 Dawn? What’s the best way to add custom text …

Thanks. Agreed. Fully hiding the variants that do not exist (if there is no plan on having them in stock ever). And then greying out the sold out variants is the best user experience. I also feel that for some stores it might be better to add a little “Sold” label to the variants that are sold out.…

Thanks @fenixk , OP here. Your continued work on this is much appreciated! Just so we’re clear on unavailable variants, it’s that they can never exist. e.g. See example on the left below… [variant-proplems-currently.jpg] Currently, visitors can choose a case for an Apple Galaxy S21. However, an …

If anyone is still looking for a way to hide unavailable options (but leave Sold Out variants alone), here’s my solution: https://github.com/JonoHall/Dawn-Enhanced [68747470733a2f2f692e696d6775722e636f6d2f776c44417554422e676966.gif]

@JonoNZ not sure what I’m doing wrong. I cant get this working by just making the two changes and then the changes to lines 37-40 in the JS. Anything else I need to do? Do i need to install the whole Dawn-Enhanced theme for just this change? Sorry, I’m a bit of a noob.

Can you post screenshots of your changes? And a link to your site if possible?

Do you know how to make this work with Prestige? This is exactly something i need.

DUDE! That’s amazing! Thank you so much for this. Took some time to find it and that screenshot definitely was very helpful. Amazing.

Hi, thanks for your help. In Dawn 15, non-existent variants are still displayed. Has there been an update? Thanks!

I’m not sure, but wouldn’t the following custom CSS code work? .product-form__input–pill input[type=“radio”]:disabled + label, .product-form__input–pill input[type=“radio”].disabled + label { display: none; }

Shopify 2.0 Dawn - How to hide unavailable variants?

Store Design

ihnom December 29, 2022, 2:15pm 30

Hi Fenix,
cold you please tell me where I should add it?
.sold-out{
opacity:0.3 !important;
}

tnks

Topic		Replies	Views
Hide Variants that has 0 stock Store Design product-page	96	2769	May 18, 2026
How to hide unavailable variants Technical Q&A troubleshooting	16	724	August 26, 2025
How to display only available options for product variants? Store Design customizations , third-party-themes , troubleshooting , product-page	3	260	July 15, 2024
Prestige theme - hide unavailable variants Store Design	29	406	August 24, 2023
How to hide unavailable product variants in Shopify with multiple options? Store Design	4	512	August 10, 2023

Shopify 2.0 Dawn - How to hide unavailable variants?

Related topics