How do I make sold out products opaque on my website?

[adamidolls]

I tried using this code but it did not work:

<div class="product__title product__title--card text-center">
<a href="{{ product.url | within: collection }}">{{ product.title }} <class="product-card" {% unless product.available %} <style="opacity:0.2;"{%- endunless -%}> </a>
</div>

I also tried pasting this in my theme.css.liquid

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

www.adamidolls.com

I am using the Simple Theme

[suyash1]

@adamidolls - can you please share a product link which is already sold out?

[adamidolls]

https://www.adamidolls.com/products/brown-waterfall-coat?variant=37164599410851

[suyash1]

@adamidolls - you want entire product to go opaque? because the code depends on the variant, hence if you try to deactivate it just because one variant is not availble then even if others are available it will show opaque.

[adamidolls]

Is there a way to do it only of all variants are sold out? My badge only
appears if all of them are sold out.

[suyash1]

there is one way but it needs custom coding, you will need to add me to
staff, it will take an hour or 2 to do it