How to reduce opacity of sold out product without hovering in collections page ?? (debut theme)

sel9
Excursionist
31 0 2

Hello there, I need to reduce the opacity of  the sold out products without having to hover over those products in debut theme, please help?

 

Screenshot_2020-06-03 MEN(1).png

0 Likes
w3trends
Shopify Expert
154 17 28

You can add the following to your themes stylesheet to change the opacity for sold out products:

.grid-view-item--sold-out{
opacity: 0.5!important;
}
W3trends is one of the leading app developers in the Shopify ecosystem. We can handle anything E-commerce or App related for your business. Feel free to message me if you need any work done!
0 Likes
sel9
Excursionist
31 0 2

Hello there,

 

I succeeded in reducing the  opacity for the sold out products but i ended up reducing the opacity of the sold out badge too!! i dont want to reduce the opacity of the sold out badge..  what should i do?

 

Screenshot_2020-06-04 MEN.png

0 Likes
volantben
New Member
1 0 0

Hi, i'm using the debut theme and i want too reducing the opacity for all the solde out products in the list and grid. Can you telle me where i have to put the code for that ?

0 Likes
emmebom99
Tourist
9 0 0

just put this in the bottom of theme.scss.liquid

.grid-view-item--sold-out .grid-view-item__image {
    opacity: 0.5;
}

 

0 Likes
emmebom99
Tourist
9 0 0

this code is only working on products that I have no variants on, I have changed my code so that all variants shows up as different products in collections, now I want this opacity overlay on all variants that go out of stock. 

someone that can help me?

0 Likes