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アカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023Shopifyの管理画面では、商品ごとや配送元のロケーション(倉庫)ごとにカスタム配送料を設定することができます。特に購入金額による送料無料設定は、顧客の購買意欲を高める効果的な手...
By Alex06 Nov 5, 2023