FROM CACHE - jp_header

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

COLA-KUN
Shopify Partner
20 0 3

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

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

1件の返信1
株式会社フルバランス
Shopify Partner
1282 459 603

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

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ECの技術・実務・成長、お悩みのことがあれば、気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス