Liquid Snippets by ALSEL
🛍️ 商品表示初級

商品カードの価格表示

商品カード向けの価格表示スニペット。セール時は比較価格(定価)に打消し線、現在価格を強調表示する。通常時は現在価格のみ表示する。

用途
コレクションページや関連商品セクション、検索結果など、商品カードで価格を表示するあらゆる場面に対応。セール品と通常品の価格訴求を視覚的に区別できる。
設置場所
snippets/product-card-price.liquid に配置し、product-card.liquid や商品リスト表示の該当箇所で `{% render 'product-card-price', product: product %}` で呼び出す。
注意点
比較価格の判定は `compare_at_price > price` で行われるため、Shopify 管理画面で各バリアントに定価を設定していることが前提。`money_without_trailing_zeros` フィルタは小数第2位が 0 なら省略するため、0.99 円など端数が必要な場合は `money` フィルタに変更する。スクリーンリーダー用に `visually-hidden` クラスで価格ラベルが非表示になっているため、CSS で `.visually-hidden { position: absolute; clip: rect(1px); }` 等の非表示化が必須。
タグ:productpricesalecompare-pricemoney

コード

31 行 / liquid
{% comment %}
  Renders the price paragraph for the product card, but it may be used on other parts when
  there is a product list

  Accepts:
  - product: {object} The product object

  Usage:
  {% render 'product-card-price' product: product  %}
{% endcomment %}

<p class="product-card-price product-price mb-4">
  {% if product.compare_at_price > product.price %}
    <s class="product-card-price-compare">
      <span class="visually-hidden">
        {{ 'product.regular_price' | t }} 
      </span>
      {{ product.compare_at_price | money_without_trailing_zeros }}
    </s>
    <span class="product-card-price-final product-price-final-sale">
      <span class="visually-hidden">
        {{ 'product.sale_price' | t }} 
      </span>
      {{ product.price | money_without_trailing_zeros }}
    </span>
  {% else %}
    <span class="product-card-price-final">
      {{ product.price | money_without_trailing_zeros }}
    </span>
  {% endif %}
</p>

出典・ライセンス

License:
MIT

このコードは kondasoft 著作の MIT ライセンスソースです。 原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。

関連項目

🛍️ 商品表示上級

商品ブロック内のLiquid実行

セクションブロック内で管理画面から入力した Liquid コードを直接実行し、パディング設定で上下の余白を制御するスニペット。テーマカスタマイザーでコード記述が可能。

📁 ks-bootshop·MIT·8
🛍️ 商品表示初級

商品ページの見出し

商品詳細ページの商品名を h1 見出しで表示するブロック。テーマカスタマイザーから見出しサイズと上下の余白(padding)を調整できる。

📁 ks-bootshop·MIT·8
🛍️ 商品表示中級

商品レビューバッジの表示

Loox と JudgeMe 両方のレビュー集約アプリに対応したレーティングバッジを商品ページに埋め込む。メタフィールドから平均評価とレビュー数を取得し、各アプリの UI コンポーネントを描画する。

📁 ks-bootshop·MIT·9
🛍️ 商品表示中級

定期販売プランのデータ属性を動的に生成

商品の定期販売プラン(Selling Plans)をループで取得し、data 属性として HTML に埋め込むスニペット。JavaScript で定期販売オプションを制御するためのデータ基盤として機能する。

📁 theme-tools·MIT·10
🛍️ 商品表示初級

商品ページの区切り線

商品詳細ページで、セクション間に区切り線を挿入するブロック。パディング、高さ、背景色、透明度をカスタマイズできる。

📁 ks-bootshop·MIT·15
🛍️ 商品表示初級

商品画像のプリロード出力

商品オブジェクトから image_tag フィルターを使い、preload 属性付きで画像を出力するスニペット。複数商品のループ内でも使える基本的なパターン。

📁 theme-tools·MIT·16