How to automatically reduce opacity for sold out items?

[NCCShop]

Hello,

I have been searching and cannot find a code that works. I am wanting to have item photos for products that do not have variants and are sold out to automatically be reduced in opacity. 

I also am wanting to make items that have variants have "grayed out" variants in the product drop downs so that customers know which items are available. 

I am using the Impulse theme and I have tried several codes and none of them have worked. 

[LitExtension]

Hi @NCCShop,

Please send your site and if your site is password protected, please send me the password. I will check it.

[NCCShop]

https://bogntvw3qxst1nyz-54968811584.shopifypreview.com

Here is a preview of my password protected website. If this doesn't work let me know. 

Thank you!

[LitExtension · Accepted solution]

Hi @NCCShop,

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;
}

Hope it helps!

[NCCShop]

Thank you SO SO much!! That worked. 🙂

[LondonDGC]

Hi @NCCShop 

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?

Many Thanks,

Oliver

[LitExtension]

Hi @LondonDGC,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

[LondonDGC]

Posted and tagged you in it. Thank you

[s4m]

Thank you! I am currently trying to achieve the same with a custom theme. Can someone help me to implement this functionality to gray out sold out products on the homepage?

https://a1r9snlxn6pa8j57-45477658773.shopifypreview.com