🛍️ 商品表示初級
商品カードの価格表示
商品カード向けの価格表示スニペット。セール時は比較価格(定価)に打消し線、現在価格を強調表示する。通常時は現在価格のみ表示する。
用途
コレクションページや関連商品セクション、検索結果など、商品カードで価格を表示するあらゆる場面に対応。セール品と通常品の価格訴求を視覚的に区別できる。
設置場所
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); }` 等の非表示化が必須。
コード
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>出典・ライセンス
- Repository:
- https://github.com/kondasoft/ks-bootshop
- 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 行