THOUGHTS
Sold-out VS does-not-exist
@Ben31 has an important point. There are 2 types of unavailable variants. Sold-out variants and does-not-exist combinations. I recommend hiding does-not-exist and greying out sold-out variants to solve the issues mentioned by @Ninthony
How many variants?
If there’s one variant the it’s simple. We’ll hide the unavailable ones.
If there are 2+ variant levels (e.g color and size) we need a hierarchy. First level (color) is only greyed out / hidden if all sizes for that color are unavailable. If blue does not have any sizes, we can grey out blue.
Otherwise we will show the first level (color) and available sizes for chosen color like this
Greying out
Pills can be greyed out. Dropdown variants can’t. Pills require less clicks and show availability without clicking. I recommend using pills.
I suggest reducing opacity instead of editing background color like
.sold-out{
opacity:0.3 !important;
}
Dropdowns
Dropdowns are harder than pills because unavailable variants can’t be “greyed out” or styled using CSS. Dropdown items can be hidden completely but not styled.
I recommend hiding does-not-exist combinations and adding a text after for sold out ones like this
You could disable sold-out dropdown items to make them look “greyed out”. Disabled out-of-stock variant can’t be clicked. If you have an app like Back In Stock which will notify the customer when a variant is back you’ll want customer to be able to click on a sold out one and be notified. If you’re not using back in stock or similar, you can hide does-not-exist ones and disable (grey out) out of stock variants like this
FREE OPTIONS
I shared a free snippet @King-Kang . It will work for Dawn using single variant. The code is too long to add here so here’s a link to a gist in Github.
Other good free options are hard to find. There are tons of code snippets in these forums, blog posts and stackoverflow.com but as themes develop, they’re often outdated and it’s not possible to get support. For non technical users it’s ususally not possible to fix them or edit them to work for another theme.
This tutorial on Shopfify Forums is perhaps the best starting point for editing or hiring a Shopify Expert to implement it. Googling will find more free tutorials like this one.
I wasn’t able to make any of them work however.
PAID OPTIONS
I sell my own code snippet which does this all. Hide, grey out, strikethrough. Options for pills and dropdowns, multiple variants. Different styles for does-not-exist combinations and sold-out. One time payment. It supports Dawn and many other themes.
Camouflage seems like one of the best Shopify Apps. It works in the front end which is good as it allows flexibility for custom CSS. This does not differentiate between does-not-exist and sold-out which I think is imporant. Currently free for 1 variant, $7/month 2-3 variants.
Autohide Plus is another app. It seems to work in the backend so it will not have as much flexibility in terms of designs. No greying out or strikethrough. Just hide. Also does not seem to differentiate between sold-out and does-not-exist. No free plan currently.
Feel free to dm me if my answer was helpful and you’d like more info 1-on-1. I love solving Shopify variant problems 