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

Technical Q&A

Topic summary

Main issue: A store using Shopify’s Supply theme wants sold-out product variants to appear greyed out in the variant dropdown so customers can see availability at a glance.

Attempt and obstacle: A suggested CSS snippet targeting .grid-product__tag–sold-out in theme.css didn’t work, and the theme only has theme.scss.liquid. The code also appears aimed at collection grid images, not variant dropdown options.

Clarification request: Another participant asked for a specific link to a sold-out product to diagnose, but there was brief confusion about relevance. No product link was provided in-thread.

Resolution: A link to Shopify’s help article for vintage themes on hiding sold-out variants was shared. The original poster confirmed this solution met their needs.

Outcome and status: The thread effectively resolved with the official guidance for handling sold-out variants in vintage themes (like Supply). No custom code changes were finalized in the thread; the documented method is the accepted approach.

Summarized with AI on February 5. AI used: gpt-5.
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