Opacité de l'image d'un produit sold out

[magalivegas]

Bonjour à tous,

J'aimerais griser l'image d'un produit lorsque celui ci est sold out. 

Pour le moment , il m'affiche un TAG. Voici le code. Que dois-je modifier dans le code ? 

Product grid item liquid : 

 {%- unless product.available -%}
<div class="grid-product__tag grid-product__tag--sold-out">
{{ 'products.product.sold_out' | t }}
</div>

theme.css.liquid 

.grid-product__tag.grid-product__tag--sold-out{
background-color:{{ settings.color_body_bg | default: "#fff" }};
background-color:var(--colorBody);
color:{{ settings.color_body_text | default: "#1c1d1d" }};
color:var(--colorTextBody);
}

Merci beaucoup 

Magali

www.circularclothingparis.com

[InitiativeMedia · Accepted solution]

Bonjour Magali, 

Voici la marche à suivre afin de griser l'image produit lorsque celui est sold out sur votre site:

Il vous suffira d'ajouter le petit bout de code ci-dessous dans votre fichier theme.css.liquid

.grid-product__tag--sold-out~.grid-product__link .grid-product__image-mask {

opacity: 0.25 !important;

 }

A noter que si vous souhaitez supprimer le tag "vendu" en question, il vous faudra remplacer le code de votre theme.css.liquid que vous avez indiqué dans votre question par celui-ci (une seule ligne de code à été ajouté à la fin): 

.grid-product__tag.grid-product__tag--sold-out{
background-color:{{ settings.color_body_bg | default: "#fff" }};
background-color:var(--colorBody);
color:{{ settings.color_body_text | default: "#1c1d1d" }};
color:var(--colorTextBody);

display: none !important;
}

J'inclus un screenshot de chaque possibilité vous permettant de constater que cette solution fonctionne ainsi que son rendu. 

Image grisée avec le TagImage grisée sans le Tag

Très bonne journée à vous, 

Grégoire 

[magalivegas]

Merci beaucoup 

C'est parfait ! 

Magali 

[InitiativeMedia]

Top, ravi d'avoir pu vous aider! 

Grégoire