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

adamidolls
New Member
8 0 0

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

0 Likes
suyash1
Shopify Partner
1995 206 305

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

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
suyash1
Shopify Partner
1995 206 305

@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.

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
adamidolls
New Member
8 0 0
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.
0 Likes
suyash1
Shopify Partner
1995 206 305
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
you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes