【2026年】Shopifyの商品ページで割引率を表示する方法を徹底解説！

はじめに
Shopifyの商品ページで割引率を表示できる？
Shopifyで割引率を表示するメリット・デメリット
- メリット
- デメリット
Shopifyで割引率を表示する方法（テーマ編集 / アプリ）
- テーマのコード編集で実装する方法
- アプリを利用して実装する方法
手軽に試すならアプリがおすすめな理由
おすすめアプリ「シンプル割引率表示｜お手軽値引き率・ディスカウント表示」とは
アプリ導入前に必ず押さえたい注意点（割引前価格・クーポンとの違い）
「シンプル割引率表示」インストール手順
- インストールの流れ
- インストール手順（詳細）
テーマにアプリブロックを追加して商品ページに表示する方法
- 自動でテーマに追加（1クリック）
- 手動でアプリをテーマに追加（おすすめ：狙った位置に差し込みたい場合）
アプリの基本設定（テキスト・デザイン・配置・追加CSS）
運用のコツ（売上につながる割引率表示の見せ方）
テーマのコード編集で割引率を表示する方法（サンプルコード）
実装後のチェックリスト
よくあるトラブルシューティング
よくある質問
まとめ
参考記事

はじめに

2026 年現在、EC 市場は引き続き拡大し、個人・小規模事業者から大手ブランドまで、オンライン販売への参入が当たり前になりました。その中でも Shopify は、テンプレート（テーマ）の完成度と拡張性、そしてアプリの豊富さから、国内でも定番の EC プラットフォームとして選ばれ続けています。

一方で、Shopify ストア運営で「売上を伸ばす」ためには、集客だけでなく 商品ページ（PDP）の最適化 が欠かせません。特にセールやキャンペーンを行うストアでは、次のような悩みがよく出ます。

「割引はしているのに、お得感が伝わらない」
「定価とセール価格の差がパッと見で分からない」
「%OFF で見せたいが、Shopify の標準機能だけだと難しい」

そこで注目されるのが、今回のテーマである Shopify 割引率表示（%OFF 表示）です。商品ページで割引率が見える化されると、ユーザーは「いま買う理由」を直感的に理解しやすくなります。

本記事では、Shopify の商品ページで割引率を表示する方法を、次の 2 つのアプローチで徹底解説します。

テーマのコード編集（Liquid）で実装する方法
Shopify アプリを利用する方法（ノーコード）

さらに、手軽に導入できるおすすめアプリとして
「シンプル割引率表示｜お手軽値引き率・ディスカウント表示」も紹介し、導入手順・使い方・運用のコツまでまとめていきます。

スクショが必要な箇所は、あとで差し替えられるように TODO 形式で入れているので、そのまま社内ナレッジやブログ原稿として使えるはずです。ぜひ最後までご覧ください。

今回は、以下の記事を参考にしています。

Shopifyの商品ページで割引率を表示できる？

結論から言うと、Shopify の商品ページで割引率（%OFF）を表示することは可能です。
ただし、Shopify の標準テーマをそのまま使っている状態では、商品ページに「割引率」が自動表示されるケースは多くありません（※テーマによっては独自で表示されることもあります）。

Shopify で「割引」を表現する基本は、次の 2 つの価格です。

価格（price）：実際の販売価格
割引前価格（compare at price）：元の価格（比較価格）

この 2 つがあるからこそ、割引率は次の計算式で求められます。

割引率（%） = (割引前価格 - 価格) ÷ 割引前価格 × 100

例えば、

割引前価格：10,000 円
価格：7,000 円

なら、割引率は

(10,000 - 7,000) ÷ 10,000 × 100 = 30%

つまり 30%OFF です。

この仕組みを使って、商品ページに割引率を表示する方法は大きく 2 つです。

テーマのコード編集（Liquid）で割引率を計算して表示する
アプリを使って割引率・割引額をラベルとして表示する

次章では、Shopify 割引率表示をするメリット・デメリットを整理してから、具体的な実装方法に入っていきます。

Shopifyで割引率を表示するメリット・デメリット

割引率表示は「とりあえず付ければ売れる」という単純な話ではなく、ストアのブランド戦略や販促設計とセットで考えるのが重要です。ここでは、導入前に押さえたいメリット・デメリットを整理します。

メリット

Shopifyで割引率表示をするメリットのイメージ

お得感が一瞬で伝わり、購入の後押しになる

商品ページでユーザーが迷うポイントのひとつが、「本当にいま買うべきか？」です。
割引率が %OFF で明確に表示されると、定価と比較した価値が直感的に伝わり、購入の意思決定が早まります。

特に、スマホでは価格の視認性が下がりがちなので、Shopify 割引率表示の効果が出やすい傾向があります。

価格比較の負担が減り、離脱を防げる

「割引前価格」と「販売価格」だけが並んでいても、ユーザーは頭の中で引き算しなければなりません。
割引率が見えていると、比較の負担が軽くなり、ページ離脱を抑える効果が期待できます。

セール・キャンペーンの訴求が強くなる

セールページのバナーやメルマガで「最大 30%OFF」と言っていても、商品ページでその根拠が見えないと、訴求が弱くなります。

商品ページで割引率が表示されていると、集客施策（広告・SNS・メール）との整合性が高まり、キャンペーン全体の成果につながりやすいです。

値引き額（いくらお得）と組み合わせると説得力が上がる

割引率だけでなく「-2,000 円」「3,000 円お得」のような 割引額表示も合わせると、ユーザーが得られるメリットが具体化します。

単価が高い商材：割引額（いくらお得）が刺さりやすい
単価が低い商材：割引率（%OFF）が刺さりやすい

このあたりは後半の「運用のコツ」で詳しく解説します。

デメリット

ブランド価値を毀損する可能性がある

割引率を大きく見せると、短期的には売れやすくなります。
しかし、常時割引が当たり前になると「定価で買う意味がない」と感じられ、ブランド価値が下がるリスクもあります。

高級商材
ギフト向け商材
定価販売が強みのブランド

こういったストアは、割引率表示のサイズや文言（「期間限定」など）を慎重に設計しましょう。

表示が正確でないと、逆に不信感につながる

割引率表示は「正しい価格設定」が前提です。特に Shopify では、次のようなケースでズレが起きます。

割引前価格（compare at price）を設定していない
バリエーションごとに割引前価格がバラバラ
通貨や端数処理で割引率が丸められる
クーポン割引なのに、割引率表示が変わらない（後述）

ズレがあると「思ったより安くない」「表示が怪しい」となりやすいので、運用ルールが重要です。

デザインに合わないと、商品ページがチープに見える

割引率ラベルが派手すぎたり、テーマの余白設計と合っていないと、商品ページの完成度が落ちて見えることがあります。
特にスマホはスペースが限られるため、位置・サイズ・余白調整が必須です。

表示ルール（景表法など）に配慮が必要

日本国内で割引・セールを行う場合、表示の仕方によっては誤認を招く可能性があります。
たとえば「いつでもセール」「実態のない二重価格」などは、広告表示としてリスクが生じる場合があります。

本記事は法的助言ではありませんが、割引前価格の運用（いつの価格か、通常販売の実態があるか等）は、必要に応じて専門家・社内法務と確認することをおすすめします。

Shopifyで割引率を表示する方法（テーマ編集 / アプリ）

Shopify の商品ページで割引率を表示する方法は、大きく分けて 2 つ です。

テーマのコード編集で実装する
アプリを利用して実装する

それぞれの特徴を、運用目線で比較します。

テーマのコード編集で実装する方法

テーマファイル（Liquid）や、テーマエディタの「カスタム Liquid」ブロックにコードを追加し、割引率を計算して表示します。

メリット
- アプリ費用がかからない
- 表示内容・デザインを自由に作れる
- 表示位置を細かく制御できる
デメリット
- コード編集が必要（外注コストが発生しやすい）
- テーマ更新で差分管理が必要
- 実装ミスがあると表示崩れ・エラーの原因になる

アプリを利用して実装する方法

Shopify アプリをインストールし、アプリブロックを商品ページに追加して割引率を表示します。

メリット
- ノーコードで導入できる
- UI（管理画面）で見た目を調整できる
- テーマ更新時の保守が楽になりやすい
デメリット
- 月額コストがかかる場合が多い
- アプリの仕様に依存する（細かい挙動まで自由にできないことも）

どちらを選ぶべき？

最短で試して、すぐに売上改善に繋げたい → アプリがおすすめ
開発体制があり、表示を細部まで作り込みたい → テーマ編集がおすすめ

この後は、まず「アプリで手軽に実装する方法」を中心に解説し、最後に「テーマ編集のサンプルコード」も紹介します。

手軽に試すならアプリがおすすめな理由

Shopify 割引率表示は、商品ページの UI 改善に直結する施策ですが、スピード感が重要です。

「表示位置はここが良い」
「%OFF じゃなくて “いくらお得” の方が反応が良い」
「文言を “今だけ” に変えたら CVR が上がった」

こういった改善は、実際に出してみて反応を見て調整するのが最短ルートです。

テーマ編集で 1 回ごとに改修すると、どうしても

開発/外注の工数がかかる
テスト→公開のサイクルが遅くなる
ちょっとした文言変更が面倒

になりがちです。

アプリであれば、管理画面で テキスト・サイズ・色・余白 まで調整でき、検証サイクルを高速化できます。特に、初めて Shopify 割引率表示に取り組むストアほど、まずはアプリでの検証をおすすめします。

アプリ導入前に必ず押さえたい注意点（割引前価格・クーポンとの違い）

このアプリに限らず、Shopify で割引率表示をする際に必ず理解しておきたいのが、「割引の種類」です。

このアプリの割引率表示は「割引前価格」と「価格」が基準

重要ポイントとして、このアプリのラベル表示は基本的に次の 2 つを元に計算されます。

価格（price）
割引前価格（compare at price）

つまり、商品（正確にはバリエーション）に 割引前価格 が設定されていないと、割引率は表示できません。

Shopifyの割引前価格（compare at price）設定例のスクリーンショット

クーポン／自動ディスカウントの割引は、ラベルに反映されない

ここがハマりやすいポイントです。

「10%OFF クーポンを配っている」
「自動ディスカウント（条件付き割引）を設定している」
「他アプリで割引を入れている」

こういった場合でも、商品に割引前価格が設定されていないと、割引率ラベルは表示されません。
また、割引前価格があって表示されていても、クーポンでさらに値引きされた分までラベルに反映されるとは限りません。

運用としては、次の考え方がおすすめです。

商品ページで「常に見せたい割引」は 割引前価格 で管理
期間限定・条件付きの割引（クーポン等）は別枠として訴求（バナーやカートで見せる等）

割引前価格は「バリエーション単位」で設定される

Shopify では、サイズやカラーなどバリエーションがある商品は、価格も割引前価格も基本的に バリエーション単位です。

M サイズは 20%OFF
L サイズは 10%OFF

のようにバラけていると、ユーザーが混乱する可能性もあります。可能ならセール設計は揃えるか、少なくとも表示方法を工夫しましょう。

割引率の端数処理（丸め）をどうするか

割引率は、価格によっては 33.333...% のように端数が出ます。
多くの実装では round（四捨五入）か floor（切り捨て）になります。

「33%OFF」と出すのか
「34%OFF」と出すのか
「最大33%OFF」のように控えめにするのか

このあたりはブランド方針に合わせるのが良いです。アプリの場合は表示仕様があるので、気になる場合は実際にテストして確認しましょう。

「シンプル割引率表示」インストール手順

ここからは、ご利用ガイドをベースに「シンプル割引率表示｜お手軽値引き率・ディスカウント表示」の導入手順を解説します。

アプリページ：https://apps.shopify.com/sa-137-ur-discount-label?locale=ja
ご利用ガイド：https://unreact.jp/shopify-apps/sa-137-ur-discount-label/guide

インストールの流れ

手順はシンプルで、ざっくり次の流れです。

Shopify 管理画面からアプリを探す
インストールして権限を承認
テーマにアプリブロックを追加
表示位置やデザインを調整して保存

インストール手順（詳細）

Shopify 管理画面からアプリストアへ

Shopify 管理画面左下の「設定」をクリック
「アプリ」をクリックし、「Shopify App Store」へ移動

アプリを検索してインストール

検索窓に「シンプル割引率表示｜お手軽値引き率・ディスカウント表示」と入力して検索
アプリ詳細画面で「インストール」をクリックし、権限を確認してインストールを完了

インストールが完了すると、アプリの管理画面が表示されます。
アプリの管理画面（インストール後）のスクリーンショット

ここまでで「アプリ導入」は完了です。次は、テーマに追加して商品ページに表示させます。

テーマにアプリブロックを追加して商品ページに表示する方法

Shopify の Online Store 2.0（OS2.0）系テーマでは、アプリは「アプリブロック」としてテーマに挿入するのが一般的です。

このアプリのブロックは、テーマエディタ上で 「UR: Smart Sale Discount Label」 のような名前で表示される場合があります（表記は環境で多少変わることがあります）。

自動でテーマに追加（1クリック）

まずは最短ルートの「自動追加」です。

Shopify 管理画面でアプリを開く
「テーマを選択」で対象テーマを選び、「テーマに追加」をクリック
テーマ編集画面が開いたら「保存する」をクリックして有効化

その後、割引前価格（compare at price）が設定されている商品の商品ページを開くと、割引ラベルが表示されます。
商品ページに割引ラベルが表示された例（アプリブロック）

表示されたら、テーマエディタ内でブロックの位置を移動して、最適な場所に置きましょう（後述します）。

手動でアプリをテーマに追加（おすすめ：狙った位置に差し込みたい場合）

「自動追加がうまくいかない」「特定の商品テンプレートだけに表示したい」場合は、手動が確実です。

Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開く
テーマエディタ上部のページ選択から「商品」テンプレートに移動（例：デフォルト商品）
割引前価格が設定されている商品の商品ページをプレビューで開く
ラベルを表示したい位置で「セクションを追加」または「ブロックを追加」をクリック
「アプリ」タブから 「UR: Smart Sale Discount Label」 を選択して追加
「保存する」をクリック

ここまでできれば、商品ページへの表示自体は完了です。次は「見せ方」を整えます。

アプリの基本設定（テキスト・デザイン・配置・追加CSS）

アプリブロックをクリックすると、テーマエディタのサイドバーに設定項目が表示されます。
アプリブロックの設定項目（テーマエディタのサイドバー）

ここでは、よく使う設定を「運用目線」で解説します。

テキスト設定（表示文言の作り方）

テキスト（プレースホルダーが便利）

このアプリでは、テキスト内に プレースホルダー（置き換え文字）を使えます。

[discount-amount]：割引額（いくら値引きか）
[discount-rate]：割引率（%）

例えば、次のように書けます。

-[discount-amount]（[discount-rate]% OFF）
今だけ [discount-rate]%OFF
＼[discount-amount]お得／
SALE：-[discount-amount]

ポイント：
「%OFF」はインパクトが強い一方で、商材によっては「いくらお得」の方が刺さります。
最初は両方入れて、反応を見て片方に寄せるのもおすすめです。

割引額に通貨記号を表示する

ON にすると、割引額に ¥ や $ といった通貨記号が付与されます。

日本国内向けストア：基本 ON 推奨（分かりやすい）
多通貨対応ストア：表示崩れがないか要確認

文字サイズ（PC / スマホ）

PC とスマホで別々に文字サイズを指定できます。

スマホは小さくしすぎない（読めないと意味がない）
ただし価格表示と競合しないように調整する

テキストの太さ・色

太字にすると目立ちますが、強すぎると「安っぽさ」が出ることもあります。
ブランドトーンに合わせて、色×太さ×背景のバランスで調整しましょう。

デザイン設定（背景・枠線・角丸・アニメーション）

背景色・ボーダー色・ボーダー幅

背景色：視認性に直結
ボーダー：テーマによっては枠線がある方が馴染む
ボーダー幅：太すぎると主張が強い

迷ったら、最初は「背景色だけ」変えて、枠線は薄め（またはなし）から始めるのがおすすめです。

角の丸み

角丸は、テーマのボタンやバッジのデザインに合わせると統一感が出ます。

ボタンが丸い → ラベルも丸め
ボタンが角張っている → ラベルも角張らせる

テキストアニメーション

アニメーションは目立ちますが、やりすぎると逆効果です。

まずは「なし」で運用
どうしても見られない場合だけ、弱めのアニメーションを検討

配置と余白（ズレが出やすい重要ポイント）

左右位置

左：自然で読みやすい（初心者向け）
中央：強めに訴求したいとき
右：価格付近に寄せたいとき

基本は「価格の近く」に置くと伝わりやすいです。

内側余白（上下 / 左右）

余白が少ないと詰まって見え、余白が大きいと間延びします。
スマホで特に差が出るので、スマホ表示を必ず確認しましょう。

PC/スマホ余白（上・下）

商品タイトル、価格、バリエーション、購入ボタン…と商品ページは要素が多いです。
ラベルが「どこにも属していない」状態になると違和感が出るので、余白調整で 価格ブロックの一部に見えるように寄せるのがコツです。

追加のCSS（最後の仕上げ）

「設定項目だけだと微妙に合わない」という場合は、追加 CSS で調整できます。

運用イメージ：

ブラウザの検証ツールでクラス名を確認
追加 CSS で上書き

例（あくまでイメージ）：

/* 例：ラベルの最大幅を制限して折り返しを防ぐ */
.ur-discount-label {
  max-width: 260px;
  white-space: nowrap;
}

※クラス名はテーマ・アプリの出力によって異なるため、実際のストアで検証して合わせてください。

運用のコツ（売上につながる割引率表示の見せ方）

ここでは「表示できた」で終わらせず、売上につなげるための考え方をまとめます。Shopify 割引率表示は、見せ方で成果が変わります。

割引率と割引額、どちらをメインにするべき？

おすすめは「商材単価」で判断することです。

低単価（例：1,000〜5,000 円）
- %OFF が分かりやすい
- 例：10%OFF、20%OFF
高単価（例：20,000 円以上）
- 「いくらお得」の方が刺さりやすい
- 例：-5,000円、8,000円お得

もちろん、まずは両方見せて A/B 的に判断するのも良いです。

文言は「セール理由」を添えると強い

単に「20%OFF」だけよりも、理由があると納得感が出ます。

期間限定 [discount-rate]%OFF
在庫限り：-[discount-amount]
今だけセール：[discount-rate]%OFF

ただし、実態のない煽り文言（いつでも今だけ等）は避け、運用実態に合わせて設計しましょう。

価格ブロック付近に置く（遠いと気づかれない）

おすすめの置き場所は次のどれかです。

商品タイトルのすぐ下
価格のすぐ上（またはすぐ下）
compare at price（割引前価格）とセットで表示される位置

購入ボタンの下など、スクロールしないと見えない位置に置くと効果が落ちます。

「セール対象」以外の商品でラベルを出さない

当たり前ですが、割引前価格がない商品にラベルが出てしまうと違和感になります。
アプリは通常条件分岐されますが、実装後は「割引なし商品」もチェックして、表示が出ないことを確認しましょう。

計測して改善する（最低限のKPI）

割引率表示は UI 改善施策なので、次の指標を見て効果を確認します。

商品ページの CVR（購入率）
カート投入率
平均注文額（AOV）
セール対象商品の売上比率

アプリ導入は「費用」が発生するため、数字で判断できる状態にしておくのがおすすめです。

テーマのコード編集で割引率を表示する方法（サンプルコード）

ここからは、アプリを使わずに テーマ編集で Shopify 割引率表示を実装する場合のサンプルです。

注意：テーマ編集はストアに影響する可能性があります。
必ずテーマを複製してバックアップを取り、プレビュー環境で検証してから公開してください。

実装の考え方

商品（または選択中のバリエーション）の
- price
- compare_at_price
  を取得
compare_at_price > price のときだけ割引率を計算して表示
デザインは CSS で整える

実装前の準備（必須）

「オンラインストア」→「テーマ」へ移動
現在のテーマを「複製」してバックアップを作る
TODO: 画像を入れる（テーマを複製する画面）
複製したテーマをプレビューで編集する

方法A：テーマエディタの「カスタムLiquid」ブロックで実装（手軽）

OS2.0 テーマ（例：Dawn系）なら、商品テンプレートに「カスタム Liquid」を追加して実装できることがあります。

「カスタマイズ」を開く
商品テンプレートへ移動
価格ブロック付近で「ブロックを追加」→「カスタム Liquid」
下記コードを貼る

{%- assign v = product.selected_or_first_available_variant -%}

{%- if v.compare_at_price and v.compare_at_price > v.price -%}
  {%- assign discount_amount = v.compare_at_price | minus: v.price -%}
  {%- assign discount_rate = discount_amount | times: 100.0 | divided_by: v.compare_at_price | round -%}

  <div class="pdp-discount-label">
    <span class="pdp-discount-label__text">
      {{ discount_rate }}%OFF（{{ discount_amount | money }}お得）
    </span>
  </div>
{%- endif -%}

あとは、同じブロック内に <style> を書くか、テーマの CSS に追記して見た目を整えます。

<style>
  .pdp-discount-label {
    display: inline-block;
    margin: 8px 0;
    padding: 6px 10px;
    border-radius: 9999px;
    border: 1px solid currentColor;
    font-weight: 700;
    line-height: 1.2;
  }
  .pdp-discount-label__text {
    font-size: 14px;
  }
  @media (max-width: 749px) {
    .pdp-discount-label__text {
      font-size: 13px;
    }
  }
</style>

この方法のメリットは、ファイル編集が少なく、元に戻しやすい点です。
一方で、テーマによっては「カスタム Liquid」を入れる位置の自由度が限られる場合があります。

方法B：テーマファイルにスニペットを作って実装（管理しやすい）

継続運用するなら「スニペット化」がおすすめです。

手順

「オンラインストア」→「テーマ」→「コードを編集」
snippets に discount-label.liquid を作成
下記を貼り付け

{%- comment -%}
  Discount label snippet
  - Uses variant price and compare_at_price
  - Shows only when compare_at_price > price
{%- endcomment -%}

{%- assign v = product.selected_or_first_available_variant -%}

{%- if v and v.compare_at_price and v.compare_at_price > v.price -%}
  {%- assign discount_amount = v.compare_at_price | minus: v.price -%}
  {%- assign discount_rate = discount_amount | times: 100.0 | divided_by: v.compare_at_price | round -%}

  <div class="pdp-discount-label" aria-label="割引情報">
    <span class="pdp-discount-label__text">
      今だけ {{ discount_rate }}%OFF（{{ discount_amount | money }}お得）
    </span>
  </div>
{%- endif -%}

商品ページの該当ファイルに {% render 'discount-label', product: product %} を挿入

挿入場所はテーマによって異なりますが、Dawn 系なら sections/main-product.liquid の価格ブロック付近が候補です。

TODO: 画像を入れる（main-product.liquid の価格付近に render を挿入する場所）

CSS を assets/base.css などに追加

.pdp-discount-label {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid currentColor;
}

.pdp-discount-label__text {
  font-size: 14px;
  font-weight: 700;
}

端数処理を変えたい場合

四捨五入：| round
切り捨て：| floor
切り上げ：| ceil

例：切り捨てにする

{%- assign discount_rate = discount_amount | times: 100.0 | divided_by: v.compare_at_price | floor -%}

表示上の誤差が気になる場合は「切り捨て」にすると安全側に寄せられます。

コード編集のメリット・デメリット（改めて）

メリット
- 月額コストゼロで Shopify 割引率表示ができる
- 表示ロジックを自由にできる（例：特定タグの商品だけ表示）
- コレクションページ、カートなどにも拡張しやすい
デメリット
- テーマ更新時に差分管理が必要
- 実装箇所を誤ると表示崩れやエラーの原因になる
- 開発体制がないと保守が難しい