FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

SOLD OUT時にTOPに表示される画像をグレーアウトさせる方法

SOLD OUT時にTOPに表示される画像をグレーアウトさせる方法

COLA-KUN
Shopify Partner
20 0 4

商品が完売した際にTOPや一覧に表示された時、画像をグレースケールさせたい。

方法はコード編集でもAppでもどちらでも良いのですがご教示頂けますでしょうか。

1件の返信1

株式会社フルバランス
Shopify Partner
1722 607 790

SOLD OUTかどうかの判定は{% unless product.availavle %}~{% endunless %}で可能です。

 

多くのテーマでは商品一覧に共通のモジュールを使用しているかと思います。

例えばデフォルトのDawnの場合、以下の箇所にクラス名を追加し、そのクラス名に対してgrayscaleのcssをあてる形ではいかがでしょうか。

 

card_product.liquid 55行目

 

class="motion-reduce"

 

を以下に変更

 

class="motion-reduce {% unless card_product.available %}grayscale{% endunless %}"

 

 

これでSOLD OUTの商品の画像にだけ.grayscaleというクラスが割り振られますので、CSSで

 

.grayscale{filter: grayscale(1);}

 

などと追加して頂ければ売り切れの商品にだけgrayscaleCSSをあてることができます。

 

参考:grayscale

https://developer.mozilla.org/ja/docs/Web/CSS/filter-function/grayscale