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

Solved
Alia_Makarem
Excursionist
35 0 9

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

0 Likes

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. 

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
Alia_Makarem
Excursionist
35 0 9

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

Capture.JPG

Thanks,
Alia

 

 

0 Likes

This is an 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.

diego_ezfy_0-1612278161797.png

 



Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
Alia_Makarem
Excursionist
35 0 9

Hey @diego_ezfy 

It worked, thank you so much!

I applied on theme.css.liquid.

Thank you
Alia

 

0 Likes