ShopifyやEコマースに関連することを話してみよう
商品が完売した際に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
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025