How to fade out image on SOLD OUT items - Dawn

[JP1704]

Hi does anyone know the code so I can make SOLD OUT product images fade out on collection pages? Im using Dawn theme. TIA 🙂

[Lucid_Polygon · Accepted solution]

@JP1704  YOu can achieve it with a little bit of coding.

• Go to theme code Online Store > Themes > Actions > Edit Code 
• Find Assets > base.css
• At the bottom add the following three lines

.fade_img{
  opacity: 0.5;
}

• Find Snippets > card-product.liquid 
•  Find the line

<div class="card__media">

• And replace it with

<div class="card__media {%- if card_product.selected_or_first_available_variant.available -%} {% else %} fade_img {%- endif -%} ">

Find attached screenshots for reference

[Lucid_Polygon · Accepted solution]

@JP1704  YOu can achieve it with a little bit of coding.

• Go to theme code Online Store > Themes > Actions > Edit Code 
• Find Assets > base.css
• At the bottom add the following three lines

.fade_img{
  opacity: 0.5;
}

• Find Snippets > card-product.liquid 
•  Find the line

<div class="card__media">

• And replace it with

<div class="card__media {%- if card_product.selected_or_first_available_variant.available -%} {% else %} fade_img {%- endif -%} ">

Find attached screenshots for reference

[bayouglassarts]

I love this! Could you modify it for the Story theme? We've been looking for a way to do this for awhile now. Thank you!

BGA

[KetanKumar]

@JP1704 

can you please share store url so i will check and let you know 

[Lucid_Polygon · Accepted solution]

@JP1704 Did the solution, I posted above work for you?

[DippingMyToe]

hi mate, i tried just now and didn't work for Dawn12.0.

I'll keep looking. thank you though

[KetanKumar]

@DippingMyToe 

oh sorry for that issue 

can you please share your store url and issue image