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

Store Design
1

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

2

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.

1 Like
3

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
Capture.JPG555×645 35 KB

Thanks,
Alia

4

@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
diego_ezfy_0-1612278161797.png1081×555 104 KB

Kind regards,
Diego

1 Like
5

Hey @diego_ezfy

It worked, thank you so much!

I applied on theme.css.liquid.

Thank you
Alia

6

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 :disappointed_face: