Shopify 割引率 表示 コードを調べている読者の多くは、単純な仕組みの説明よりも、具体的にどのファイルのどこにコードを書けば安全に「〇〇%OFF」を表示できるのか、実装後にどんなリスクがあるのかを知りたいはずです。
本記事は2026-07-29時点で、参考記事のタイトルと見出し構成、Shopify公式ヘルプ(Liquidテンプレート言語)の公開情報を踏まえて再構成しています。小売ECの案件獲得につながるよう、コード例の紹介だけでなく導入判断、運用設計、外注すべきタイミングまで踏み込みます。
セール施策を実施する際、「セール」というラベルだけでは購買意欲を刺激しきれず、「30%OFF」のように具体的な割引率を明示した方がクリック率・購入率が上がることは、多くの小売ECで経験的に知られています。しかしShopifyの標準機能には割引率を自動計算して表示する機能がなく、テーマコードの編集が必要になる点が実装のハードルになっています。
| 項目 | 内容 |
|---|---|
| 対象読者 | セール訴求を強化したいShopify運営者・実装担当者 |
| 主目的 | 割引率表示をコードで安全に実装し、購買意欲を高める |
| 検索意図 | 具体的な記述箇所とコード例、実装時のリスクを知りたい |
| 主軸キーワード | Shopify 割引率 表示 コード Liquid |
| 見る指標 | セール商品のクリック率、カート投入率、コード編集後の表示崩れの有無 |
| 相談テーマ | テーマコード改修を含むセール訴求・LP改善の一体設計 |
このテーマが小売ECで重要になる理由
Shopifyの標準テーマには、セール対象商品に「セール」ラベルを表示する機能はあっても、具体的な割引率(パーセンテージ)を自動計算して表示する機能は搭載されていません。しかし小売の現場では、次の理由から割引率表示のニーズが非常に高くなっています。
- 「セール」という表示より「30%OFF」の方が視覚的なインパクトが強く、クリック率が上がりやすい
- 一覧ページで割引率が一目で分かると、比較検討の手間が減り購入までの離脱が減る
- 広告クリエイティブと連動させることで、着地後の訴求に一貫性を持たせられる
一方で、テーマのコード(Liquidファイル)を直接編集する実装であるため、記述箇所を誤るとデザイン崩れやエラー表示につながるリスクがあり、慎重な進め方が求められます。
参考記事の構成から抽出した主要論点
参考記事(tsun.ec)をクロールしたところ、Shopify標準機能に割引率表示がない旨、実装前の準備、コードでの実装方法(コード編集箇所・記述箇所と内容)という構成でまとめられていました。具体的には次の論点が扱われています。
- Shopifyデフォルト機能では「セール」ラベルは表示されるが「〇〇%OFF」表示は不可であること
- 実装にはプログラミングコードの記述が必要であること
- コード編集箇所(該当するliquidファイルと行番号の特定方法)
- コード編集に伴うリスク(デザイン崩れ等)への警告
本記事ではこれらに加えて、参考記事では扱われていない「編集前に必ず行うべきテーマの複製・バックアップ手順」「商品一覧ページと商品詳細ページでの実装箇所の違い」「小数点以下の端数処理(切り捨て/四捨五入)の考え方」「テーマアップデート時にコードが消えるリスクとその対策」「商材別の割引率表示の見せ方の違い」を補って解説します。
小売事業者に多い活用シーン
- 季節セール・在庫処分セール：一覧ページで割引率を一目で見せ、比較検討の手間を減らす
- タイムセール：残り時間と割引率をセットで表示し、購買意欲を高める
- 広告連動セール：広告クリエイティブに記載した割引率と着地ページの表示を一致させ、信頼感を担保する
- 会員限定セール：ログイン状態によって表示する割引率を出し分ける高度な実装
導入前に決めるべき要件
- 割引率の端数処理をどうするか(切り捨て/四捨五入/切り上げ)
- 表示する場所(商品一覧ページのみ/商品詳細ページも/カートページも)
- デザイン(バッジ形式/テキスト形式、色使い)をブランドトーンに合わせる
- コード編集を行うテーマの複製・バックアップ体制
- テーマアップデート時にカスタムコードが上書きされないような管理方法
アプリ選定・機能理解で比較すべき軸
| 比較軸 | コード実装 | 専用アプリ利用 |
|---|---|---|
| 導入コスト | 実装時間のみ(アプリ利用料は不要) | 月額課金が発生する場合が多い |
| カスタマイズ性 | 高い(デザイン・端数処理を自由に制御) | アプリの設定範囲に限定される |
| 保守性 | テーマアップデート時に消える可能性がある | アプリ側でアップデートが管理される |
| 実装難易度 | Liquid/CSSの知識が必要 | 低い(管理画面操作のみ) |
| 向いている事業者 | コスト重視・技術リソースがある事業者 | スピード重視・非エンジニアが運用する事業者 |
主要な選択肢の整理
| 選択肢 | 特徴 | コスト感 |
|---|---|---|
| Liquidコード直接編集 | card-product.liquid等の該当ファイルに条件分岐コードを追加 | 実装時間のみ(内製なら無料) |
| 割引率表示アプリ | App Store経由でインストールし、管理画面から表示設定するだけ | 月額数百円〜数千円程度が目安 |
| セールバッジ機能付きテーマ | テーマ自体に割引率表示機能が標準搭載されている場合がある | テーマ購入費用のみ(追加コストなし) |
| 外注による実装 | Shopify開発会社にコード実装を依頼 | 要件により数万円程度〜(規模に応じて変動) |
商材別に優先順位が変わるポイント
| 商材 | 優先して検討すべきポイント |
|---|---|
| アパレル | シーズンオフセールで割引率の見せ方が売上を大きく左右するため優先度は高い |
| 食品 | 賞味期限が近い商品の値引き表示に活用しやすいが、価格の安さだけを強調しすぎない配慮が必要 |
| コスメ | 定期購入とのセット割引を割引率で見せると、初回購入のハードルを下げやすい |
| 雑貨・ギフト | プレゼント需要期の「まとめ買い割引」の訴求に有効 |
| BtoB寄り商材 | 個別見積もりが前提のため、公開の割引率表示より個別提案の方が適している場合が多い |
実装と運用の進め方
- Shopify管理画面の「オンラインストア」からテーマを複製し、テストテーマを作成する
- テストテーマ上でcard-product.liquid等、商品カード表示に関わるファイルを開く
- 比較対象価格(compare_at_price)と販売価格(price)から割引率を計算する条件分岐コードを追加する
- プレビュー画面で表示崩れがないか、PC/スマホ両方で確認する
- 問題がなければテストテーマを公開テーマとして適用する
- 公開後、セール商品のクリック率・カート投入率をモニタリングする
- テーマアップデート時は、カスタムコードが保持されているか都度確認する
実装コード例と記述箇所
割引率を表示する代表的な実装は、商品カードのLiquidファイル(多くのテーマでは「card-product.liquid」や「product-card.liquid」等の名称)に、比較対象価格と販売価格の差分から割引率を算出する条件分岐を追加する形になります。以下は一般的な考え方を示す実装例です(テーマ構造により変数名やファイル名は異なるため、実際の記述前に必ず該当テーマのコード構造を確認してください)。
{%- liquid
assign compare_at_price = card_product.compare_at_price
assign price = card_product.price
if compare_at_price > price and card_product.available
assign sale_percentage = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round
echo '<span class=discount-badge>'
echo sale_percentage
echo '% OFF</span>'
endif
-%}このコードは、商品ページ・一覧ページの商品カードを描画する既存のif分岐ブロックの終端付近(既存の在庫判定などの直下)に挿入するのが一般的です。挿入位置を誤ると、意図しない場所にバッジが二重表示されたり、閉じタグの対応がずれてレイアウトが崩れたりするため、必ずテスト環境で表示確認をしてから公開テーマに反映してください。端数処理については、上記の「round」を「floor(切り捨て)」に変更することで、実際の割引率よりも表示上の割引率が小さくなることを避けられます(表示上の割引率が実際より大きく見えることは、景品表示法上のリスクにもつながるため注意が必要です)。
商品詳細ページへの実装で追加で確認すべき点
商品一覧ページのカードだけでなく、商品詳細ページの価格表示エリアにも同様のロジックを実装する場合は、詳細ページ用のLiquidファイル(多くのテーマで「main-product.liquid」や「product-template.liquid」といった名称)を別途確認する必要があります。一覧ページと詳細ページで価格表示のマークアップ構造が異なるテーマも多いため、一覧ページ用のコードをそのままコピーしても正しく動作しないことがあります。実装後は、一覧ページと詳細ページの両方で割引率の数値が一致しているかを必ず突き合わせて確認してください。数値がずれていると、顧客からの信頼を損ねるだけでなく、表示価格の誤りとして問い合わせにつながるリスクもあります。
内製と外注をどう切り分けるか
Liquid/CSSの知識があれば内製での実装も可能ですが、次のような場合は外注を検討する価値があります。
- 該当テーマのコード構造が複雑で、正しい記述箇所を特定できない場合
- 複数のテーマ・複数の商品カードパターンに一貫して実装したい場合
- 景品表示法等の観点から、割引率表示の妥当性チェックまで含めて相談したい場合
- テーマアップデートのたびにコードが消えてしまい、恒久的な実装方法を相談したい場合
広告・SEO・CRMにどうつなげるか
| 連携領域 | 割引率表示の活用方法 |
|---|---|
| EC広告 | 広告クリエイティブに記載した割引率と着地ページの表示を一致させ、CTRとCVRの両方を高める |
| SEO | 「(商品名) セール 割引率」等の検索意図に応える一覧ページ構成にする |
| CRM/リピート施策 | 会員限定の割引率を通常価格と併記し、会員登録のメリットを可視化する |
成果を判断するための指標
| 指標 | 見る意味 |
|---|---|
| セール商品のクリック率 | 割引率表示によって注目度が上がったかの確認 |
| カート投入率 | 割引率表示が実際の購買行動につながっているか |
| ページ表示速度 | コード追加による表示速度への影響有無 |
| 表示崩れの発生件数 | 実装後のデザイン不具合の有無 |
公開後90日で見る改善ロードマップ
| 期間 | やること |
|---|---|
| 1〜7日 | テストテーマでコード実装・表示確認・公開テーマへの反映 |
| 8〜30日 | セール商品のクリック率・カート投入率をモニタリング |
| 31〜60日 | バッジデザイン・端数処理方法のA/Bテストを実施 |
| 61〜90日 | 広告クリエイティブとの連動、会員限定割引表示など応用施策へ展開 |
よくある失敗と回避策
- 本番テーマに直接コードを書いてしまう：必ずテーマを複製し、テスト環境で確認してから公開テーマに反映する
- 端数処理を誤り実際より割引率を大きく見せてしまう：四捨五入ではなく切り捨てを使うなど、表示が誇張にならない処理を選ぶ
- テーマアップデートでコードが消える：カスタムコードは別ファイルに切り出す、変更箇所を記録しておくなどの管理を徹底する
- 一覧ページのみ実装し詳細ページに反映し忘れる：実装箇所の抜け漏れがないか、テーマ内の商品カード表示箇所を横断的に確認する
外注や相談に向くタイミング
コード編集に不慣れで実装を後回しにしている場合や、実装したものの表示崩れが解消できない場合は、早めに専門家へ相談することでセール施策の機会損失を防げます。特に景品表示法に関わる表示の妥当性については、法務的な観点からの確認も含めて相談することをおすすめします。
よくある質問
割引率表示のコードはどのファイルに書けばよいですか？
多くのテーマでは商品カードの表示を制御する「card-product.liquid」や類似の名称のファイルに実装します。ただしテーマによってファイル構造は異なるため、まずは該当テーマのコード内で価格表示を行っている箇所を検索し、その近辺に条件分岐を追加するのが基本的な進め方です。
コード編集でサイトが壊れることはありますか？
閉じタグの対応がずれたり、変数名を誤って記述したりするとレイアウト崩れやエラー表示につながる可能性があります。必ずテーマを複製したテスト環境で編集・確認を行い、問題がないことを確認してから公開テーマに反映してください。
専用アプリを使った方が安全ですか？
コード編集に不安がある場合は、月額課金が発生しても専用アプリを使う方がリスクを抑えられます。一方でカスタマイズ性やコストを重視する場合は、コード実装の方が柔軟に対応できます。自社の技術リソースと予算に応じて選択してください。
テーマをアップデートするとコードは消えますか？
テーマの種類やアップデート方法によっては、カスタムコードが上書きされる可能性があります。テーマアップデート前には必ずバックアップを取り、アップデート後にカスタムコードが残っているかを確認する運用を徹底することをおすすめします。
割引率の表示は景品表示法上どこまで注意すべきですか？
比較対象価格として何を使うか(過去の販売実績があるか、二重価格表示の根拠があるか)によって、景品表示法上の有利誤認表示のリスクが変わってきます。単に希望小売価格から割引率を計算するだけでなく、実際にその価格で販売していた実績があるかを確認したうえで表示することが望ましいとされています。判断に迷う場合は、実装前に社内の法務担当者や外部専門家に確認することをおすすめします。
まとめ
Shopifyで割引率を表示するには、Liquidコードの直接編集が必要になりますが、正しい記述箇所と端数処理を押さえれば、セール施策の購買意欲を大きく高められます。一方でコード編集にはデザイン崩れやテーマアップデート時のリスクも伴うため、テスト環境での確認や外注の活用も含めて慎重に進めることが重要です。Shopify制作、EC広告、CRM改善、WordPress連携などを一体で見直したい場合は、ECサイト開発・Shopify改善の相談はこちらからお気軽にご相談ください。
コメント