How to automatically reduce opacity for sold out items?

Technical Q&A
1

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.

2

Hi @NCCShop ,

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

3

https://bogntvw3qxst1nyz-54968811584.shopifypreview.com

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

Thank you!

4

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!

5

Thank you SO SO much!! That worked. :slightly_smiling_face:

1 Like
6

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

7

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.

8

Posted and tagged you in it. Thank you

9

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