Debut theme: Adding opacity for sold out items on product list

[Alia_Makarem]

Hi @diego_ezfy 

Looking for a solution to fadeout products once they become out of stock.

Currently on Debut theme, there is a box that say "Sold Out", I want to keep it but still have the product image faded out.

Please can you help me find a solution for this.

Appreciate your help,

Thank you,
Alia

[DeepCode]

Hi @Alia_Makarem 

Looks like it is already faded out based on the theme code 

.is-sold-out .product--image {
    opacity: 0.5;
}

if you like it to be more faded out, you can lower the opacity. 

[Alia_Makarem]

Hello @DeepCode 

If you take a look at this screenshot from the website, below, the opacity doesn't seem to be applied, please can you tell where should I see this code?

We are using Debut 16.5.4

Thanks,
Alia

[diego_ezfy · Accepted solution]

@Alia_Makarem 

Do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

.grid-view-item--sold-out .product-card__image-with-placeholder-wrapper{
    opacity: 0.1 !important;
}

You can adjust the 0.1 value as per your wish. It goes from 0.01 to 1.00

Please let me know whether it works.

Kind regards,
Diego

[Alia_Makarem]

Hey @diego_ezfy 

It worked, thank you so much!

I applied on theme.css.liquid.

Thank you
Alia