はじめに このカスタマイズ方法はShopifyデフォルトテーマ「Dawn（11.0.0）」をベースに紹介しております。 別バージョンのDawnや他テーマの場合は構造が異なりますので、ご利用のテーマに併せてカスタマイズしてください。 スニペットファイルを編集 商品カードのバッジを出力するファイルを探して開きます。Dawn（11.0.0）の場合は「card-product.liquid」が該当します。 「セール」のテキスト出力される部分を探し、以下の用に編集します。 {% comment %} {{- 'products.product.on_sale' | t -}} {% endcomment %} {{ card_product.compare_at_price | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price | round | append: '%OFF' }} 元の出力部分をコメントアウトまたは削除し、すぐ下にLiquidコードを配置します。割引率は以下のの計算式で出力し、「round」で小数点以下を四捨五入しています。 （割引前価格 ー 価格）× 100.0 ÷ 割引前価格 = 割引率（四捨五入） Dawn（11.0.0）は同ファイル内に2箇所ありますので、同様に編集します。 「card__product」部分は、Dawnの場合は「product」が定義されていますが、テーマに合わせて編集してください。 以上です。 おまけ かなり簡単なカスタマイズなので、よりお得感の出る「バクダン」で割引率を出力させる方法もご紹介します。 HTML + Liquid <span class="badge badge-sale"> <span class="badge-inr"> {{ card_product.compare_at_price | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price | round | append: '%' }} <small>OFF</small> </span> </span> バッジのコンテナにクラス「badge-sale」を追記し、上記の構造にします。 CSS .badge-sale { position: relative; display: grid; place-content: center; width: 4em; height: 4em; padding: 0; border: none; border-radius: 0; background: none; } .badge-inr { display: grid; place-content: center; font-size: 1.5em; z-index: 1; } .badge-sale::before, .badge-sale::after, .badge-inr::before, .badge-inr::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; background: #c00; } .badge-sale::before { transform: rotate(22.5deg); } .badge-sale::after { transform: rotate(-22.5deg); } .badge-inr::before, .badge-inr::after { z-index: -1; } .badge-inr::before { transform: rotate(45deg); } CSSでスタイリングします。Dawnの場合は「base.css」の「.badge{}」以降に入れてください。他テーマの場合はテーマに合わせて編集してください。 ↓こんな感じで出力されます。
