Solved

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

Alia_Makarem
Shopify Partner
63 0 18

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

Accepted Solution (1)

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 5 (5)

DeepCode
Shopify Partner
118 19 24

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. 

banned
Alia_Makarem
Shopify Partner
63 0 18

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

 

 

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Alia_Makarem
Shopify Partner
63 0 18

Hey @diego_ezfy 

It worked, thank you so much!

I applied on theme.css.liquid.

Thank you
Alia

 

sbar
Explorer
53 0 18

Hi! Any suggestions of how to accomplish this overlay/tint on the Symmetry theme? Have been playing around in the CSS but having no luck 😞