How to grey out sold out variants in the product drop down?

Technical Q&A
1

Hi @NCCShop

I am wanting to make items that have variants have “greyed out” variants in the product drop down, when the variants are sold out so that customers know which items are available.

Code suggested doesn’t work with my theme:

Go to Assets > theme.css and paste this at the bottom of the file:

.grid-product__tag–sold-out+.grid-product__link .grid__image-ratio {
opacity: 0.5;
}

I can not get this code to work on my theme: Supply

Under Assets, the option is theme.scss.liquid and not theme.css

Please can you help?
Our website is www.discgolf.london

Many Thanks,

Oliver

2

For this specific case what is a specific link to a sold out product.

3

@PaulNewton Discount codes has nothing to do with my question about greying out sold out variants.

4

Hi @LondonDGC ,

You can refer https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/hide-sold-out-variants

Hope it helps!

1 Like
5

Thank you @LitExtension That’s perfect!

1 Like