Change Image Opacity on Sold out Products | Prestige Theme

Store Design
1

Hey guys,

Just wanting to change the opacity of sold out images on collection pages for Prestige theme.

Been trying with this code but had no luck.

    <a href="{{ product.url | within: collection }}" class="ProductItem__Image" {% unless product.available %}style="opacity:0.2;"{%- endunless -%}>

Here’s a preview link if anyone is able to help. Thanks heaps.

https://0g97un4f5wpx8bd4-9962029107.shopifypreview.com/collections/leggings

2

Hi @brazier10 .

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can go to Online store => themes => actions => edit code and add this code on file base.css

.Image--fadeIn{
opacity: 0.2 !important;
}

Hope this answer helps.

Best regards,

Richard | PageFly

3

Thanks Richard, this works but changes the opacity for all images. Wanting it to only change opacity on images if the product is sold out. Would you know how to change that?

Thanks heaps in advance.