Shopifyの商品カードをカスタマイズ｜売り切れ・セール価格・割引率・独自タグ

読者

商品カードに「売り切れ」や「20%OFF」を出したいです。どの値を見ればよいですか？

木村

在庫の有無はproduct.available、価格はproduct.priceとproduct.compare_at_priceを使います。まず表示順を決めましょう。

読者

商品タグもラベルとして表示できますか？

木村

できます。花月ではlabel_付きタグを表示用に変換しました。価格の条件と分けて、順番に見ていきます。

商品カードに「売り切れ」や「20%OFF」を出したいです。どの値を見ればよいですか？

在庫の有無はproduct.available、価格はproduct.priceとproduct.compare_at_priceを使います。まず表示順を決めましょう。

商品タグもラベルとして表示できますか？

できます。花月ではlabel_付きタグを表示用に変換しました。価格の条件と分けて、順番に見ていきます。

商品カードの役割を整理する

カード内では、商品情報を一目で判断できるようにします。価格とラベルは別の情報なので、まずデータの出どころを分けます。

カードへ渡す商品を確認する

花月のカスタムセクションでは、選択したコレクションのsection.settings.collection.productsをループし、各商品をproductとして扱います。カード内のタイトル、画像、価格、タグは同じ商品の値を読みます。

表示の優先順位を決める

価格欄は「売り切れ → セール中 → 通常価格」の順に判定します。売り切れ商品に割引率を重ねないためです。ラベルは商品タグから別に作り、価格判定の中へ混ぜません。

標準テーマとの違いを知る

Dawn系テーマにはcard-product.liquidやprice.liquidがあり、売り切れ・セールの表示がすでに組み込まれています。この記事で説明するのは、花月の独自セクションo_common-collection.liquidの商品カードです。標準カードを使っている場合は、既存表示との重複を先に確認してください。

売り切れを先に判定する

最初の分岐は、商品を販売できる状態かどうかです。product.availableがfalseなら、価格の代わりに売り切れ表示を優先します。

availableが表すこと

Shopify公式のproductオブジェクトでは、少なくとも一つのバリエーションが購入可能ならproduct.availableはtrueです。全バリエーションが購入できないときにfalseになります。

Shopify公式のproductオブジェクトで、availableと価格の定義を確認できます。

売り切れ表示を出す

花月の価格欄では、売り切れなら価格に取り消し線を付け、翻訳キーから売り切れの文言を出します。ここでセール判定へ進まないよう、else側に販売中の処理を置きます。

{% if product.available == false %}
  <s>{{ product.price | money }}（税込）</s>
  <span>{{ 'products.product.sold_out' | t }}</span>
{% else %}
  {{ product.price | money }}（税込）
{% endif %}

このコードは表示だけの例です。実際に購入ボタンを置く場合は、そのボタンの利用可否も商品・バリエーションの状態に合わせてください。

税込表記はストア設定と合わせる

花月のカードでは価格の後ろへ「（税込）」を表示しています。これはテーマ独自の文言です。ストアの税設定や販売地域に合わない場合は固定文言を流用せず、表示ルールを確認してください。

セール価格と割引率を表示する

販売中の商品について、比較価格が販売価格より高いときだけセール表示にします。比較価格が空、または同額以下なら通常価格を表示します。

二つの価格を比べる

product.priceは商品の最安価格、product.compare_at_priceは比較価格の最安値です。花月のカードでは、比較価格が販売価格より大きいかでセールを判定しています。

{% if product.compare_at_price > product.price %}
  <del>{{ product.compare_at_price | money }}（税込）</del>
  {{ product.price | money }}（税込）
{% else %}
  {{ product.price | money }}（税込）
{% endif %}

比較価格には<del>を使い、販売価格を続けます。二つの価格の意味が視覚的にも分かります。

割引率を計算する

割引率は「（比較価格 − 販売価格）÷ 比較価格 × 100」です。例として比較価格が5,000円、販売価格が4,000円なら20%OFFです。ゼロで割らないよう、比較価格が販売価格より高い条件の内側で計算します。

{% if product.compare_at_price > product.price %}
  {% assign discount_percent = product.compare_at_price
    | minus: product.price
    | times: 100.0
    | divided_by: product.compare_at_price
    | round
  %}
  <del>{{ product.compare_at_price | money }}</del>
  <span>{{ product.price | money }}</span>
  <strong>{{ discount_percent }}%OFF</strong>
{% endif %}

moneyは価格の表示用、計算には元の数値を使います。100.0を掛けてから割ることで割合を求め、roundで整数へ丸めます。

バリエーション違いに注意する

価格が異なるバリエーションを持つ商品では、商品全体の最安価格と最安比較価格が同じバリエーション由来とは限りません。その場合、カードの割引率が実際に選ぶバリエーションとずれる可能性があります。厳密な割引率を出したいときは、カードで代表として表示するバリエーションを決め、そのvariant.priceとvariant.compare_at_priceを対で計算してください。

商品タグをラベルへ変換する

花月では、商品タグをカード画像の上に短いラベルとして表示しています。タグは価格情報とは別に管理できるため、「人気」「新作」などの案内に向いています。

label_付きタグを探す

独自ルールとしてlabel_新作のような商品タグを付け、カードではlabel_を除いた「新作」だけを表示します。元の実装はタグにlabel_が含まれる最初の一件を採用しています。

{% liquid
  assign product_label = blank
  for tag in product.tags
    if tag contains 'label_'
      assign product_label = tag | remove_first: 'label_'
      break
    endif
  endfor
%}
{% if product_label != blank %}
  <span class="c-card-section__tag">{{ product_label | escape }}</span>
{% endif %}

breakにより最初の一致で探索を止めます。escapeはタグ文字列をHTMLとして解釈させずに表示するための処理です。タグの登録は「商品管理 → 対象商品 → タグ」から行います。

先頭一致に絞る場合

上のcontainsは文字列の途中にlabel_があっても一致します。「必ず先頭へ付ける」運用なら、次の条件にすると意図が明確です。これは元の実装を改善する場合の例で、記事のためにテーマを変更したものではありません。

{% assign prefix = tag | slice: 0, 6 %}
{% if prefix == 'label_' %}
  {% assign product_label = tag | remove_first: 'label_' %}
{% endif %}

ラベルの代替と表示名

花月の実装は、label_付きタグがなければ商品の最初のタグを使い、表示名が「セール」なら「お買い得」へ置き換えます。最初のタグを自動で見せると、管理用タグが公開される可能性があります。サイトに合わせて、代替タグを使うか、ラベルなしにするかを決めてください。

カードの見た目を整える

条件分岐で正しい文字列が出た後に、CSSで見た目を調整します。特に通常価格、割引前価格、割引率の差が分かるようにします。

価格の意味を見分けやすくする

割引前価格は取り消し線と控えめな色、現在価格は通常の文字色、割引率は短い強調表示にします。花月ではCSSを対象セクションのIDへ限定し、他のカードに影響しないようにしています。

#shopify-section-SECTION_ID .c-card-section__price del {
  color: #6e7670;
  margin-right: .5em;
}
#shopify-section-SECTION_ID .c-card-section__price strong {
  margin-left: .5em;
  font-size: .85em;
}

ここでのSECTION_IDは説明用の仮名です。実際のセクションファイルでは#shopify-section-{{ section.id }}として出力します。

ラベルの色は用途で分ける

花月のカードでは、最初のカードに専用クラスを追加する場合があります。色や背景の強弱を変えるときは、ラベルの意味と表示順位を決め、文字が読めるコントラストを保ちます。forloop.firstは「最初のカード」を示し、「新作」など特定のタグの意味ではありません。

スマホでも情報を詰め込みすぎない

狭い画面では、ラベル・商品名・説明・価格・割引率が縦に並びます。価格が折り返して意味が分かれないか、長いタグが画像を覆わないかを確認します。見た目を優先して売り切れの文字を隠すことは避けます。

反映前に表示を確かめる

一つの商品だけではすべての条件を確認できません。通常商品、セール商品、売り切れ商品、複数バリエーションの商品を比べます。

三つの価格状態を見る

• 通常価格の商品：現在価格だけが出る
• セール商品：比較価格、現在価格、割引率がそろう
• 売り切れ商品：売り切れ表示が優先される

花月のカスタムセクションでどの状態を出すかを確かめます。商品データを変えずに確認したい場合は、既存の商品を使って複製テーマのプレビューで見ます。

タグとバリエーションを見る

label_付きタグ、タグなし、複数タグの商品を比較します。バリエーションごとに価格が違う商品では、カードの価格と商品詳細ページで選択できる価格の関係を確認し、必要なら代表バリエーションを使う方式へ切り替えます。

変更したファイルを把握する

この記事の実例はsections/o_common-collection.liquid内のカスタム商品カードです。一般的なDawn系のカードはsnippets/card-product.liquidとsnippets/price.liquidにも表示処理があります。どの一覧がどのファイルを呼ぶかを確認してから、複製テーマで調整します。

まとめ

商品カードは、まず表示条件を決めてから、価格とラベルを独立して組み立てると読みやすくなります。

• 売り切れを最優先にして、販売中の商品だけセール判定する
• 比較価格が販売価格より高いときに割引率を計算する
• label_付きタグは表示用の文字列へ変換する
• バリエーションの価格が異なる商品では、同じバリエーションの価格同士を比べる
• 標準の商品カードと独自セクションのどちらを編集するか確認する

花月の実装では、一つの独自セクションにこれらをまとめています。条件の優先順位と参照する商品の単位を押さえると、後から表示ルールを変えるときにも判断しやすくなります。