商品が完売した際にTOPや一覧に表示された時、画像をグレースケールさせたい。
方法はコード編集でもAppでもどちらでも良いのですがご教示頂けますでしょうか。
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);}
などと追加して頂ければ売り切れの商品にだけgrayscaleのCSSをあてることができます。
参考：grayscale
https://developer.mozilla.org/ja/docs/Web/CSS/filter-function/grayscale