0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Shopifyでディスカウントを割引率表示する方法を5つ紹介!

Posted at

はじめに

2026年現在、Shopify は「スピード感を持ってECを立ち上げたい」「海外販売やSNS連携まで見据えたい」といった事業者にとって、最初の選択肢になりやすいプラットフォームです。一方で、運用を続けるほど “あと一歩こうしたい” が出てきます。典型例が Shopify の割引率表示 です。

セールをしているのに、商品ページで見えるのは「割引後価格」と「割引前価格(compare at price)」だけ。
これだとユーザーは「で、何%OFFなの?」を頭の中で計算する必要があり、購入の勢いが落ちることがあります。

そこでこの記事では、Shopify 割引率 表示 を実現するための方法(=アプリ)を 5つ まとめて紹介します。

  • 最初にご紹介する 「シンプル割引率表示|お手軽値引き率・ディスカウント表示」 は、導入から表示・カスタマイズまでが非常に分かりやすいので、画像付きで丁寧に解説します。
  • そのほかのアプリは、章ごとに特徴を整理し、表で比較しながら “向いているストア像” が分かるようにまとめます。

「セールの訴求力を上げたい」「割引率を見える化してCVRを上げたい」という方は、ぜひ最後までご覧ください。


Shopifyで割引率(%)を表示する重要性

割引は “やるか・やらないか” ではなく、見せ方 で成果が大きく変わります。特に割引率(%)の表示は、ユーザーの意思決定を後押しする要素になりやすいです。

たとえば同じ 2,000円の値引きでも、

  • 10,000円 → 8,000円(2,000円引き)
  • 5,000円 → 3,000円(2,000円引き)

では、お得感の伝わり方がまったく違います。ここを 「20%OFF」「40%OFF」 のように一瞬で理解できる形にすると、ページ滞在中の迷いが減りやすくなります。

また、割引率表示には副次的なメリットもあります。

  • 回遊性が上がる(商品一覧やコレクションで「お得商品」を探しやすい)
  • 比較検討が短縮される(価格差が直感的に理解できる)
  • キャンペーンの訴求が統一される(「全品◯%OFF」を商品ページでも一貫して見せられる)

つまり、Shopify 割引率 表示 は “見た目の改善” ではなく、売上に直結する改善施策になりやすいということです。


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

メリット

購入の背中を押しやすい
割引率が一瞬で理解できると、「今買う理由」が明確になります。特にスマホユーザーは情報を流し読みするため、%表示の効果が出やすい傾向があります。

セールの統一感が出る(訴求がブレない)
広告・SNS・メルマガで「最大50%OFF」と言っているのに、商品ページでは%が見えない。これ、地味に機会損失です。ページ内でも同じ訴求ができると、納得感が増します。

在庫処分・季節商品のスピードが上がる
「◯%OFF」がはっきり見えると、買い回りの判断が早くなり、滞留在庫の解消にもつながりやすいです。

デメリット(注意点)

“割引ありき” の買い方が定着する可能性
割引率が目立ちすぎると、通常価格で売りにくくなることがあります。
おすすめは「常時表示」ではなく、キャンペーン期間・在庫状況に応じた運用です。

割引の計算ルールがストア内で混在すると混乱する
Shopify では、割引の種類(compare at price/クーポン/自動ディスカウント/アプリ割引など)が複数あります。
“何を元に割引率を算出しているか” を把握しておかないと、表示と実際の決済金額にズレが出る場合があります。


Shopify標準機能だけだと割引率を出しにくい理由

Shopifyの標準機能でも「セール価格の表示」自体はできます。具体的には、商品に 割引前価格(compare at price) を設定し、販売価格(price)を下げればセール表示になります。

ただし、標準のテーマだと多くの場合、

  • 割引前価格(取り消し線)
  • 割引後価格

までは表示できても、「何%OFFか」 は自動計算して出してくれません。
テーマの改修(Liquidで計算表示)でも実現は可能ですが、運用面でこんな課題が出やすいです。

  • テーマ更新で表示が崩れるリスク
  • 表示位置やデザイン調整に手間がかかる
  • 商品テンプレートごとに差し込みが必要になることがある

そのため、「ノーコードで、確実に、見た目も整えたい」 という場合は、アプリの導入が最短ルートになりやすいです。


Shopifyで割引率を表示する方法5つ(おすすめアプリ)

今回紹介するのは以下の5つです。

  • シンプル割引率表示|お手軽値引き率・ディスカウント表示(商品ページに割引率・割引額をラベル表示)
  • Discount Mixer: 一括割引(割引戦略+ウィジェット/バッジで訴求)
  • DECO Product Labels & Badges(テンプレ豊富なバッジ+割引表示)
  • Lably—Product Labels & Badges(条件設定に強いラベル/バッジ)
  • SimiCart ‑ Mobile App Builder(モバイルアプリ内で割引訴求まで強化)

ここから、順番に見ていきましょう。最初のアプリは画像付きでしっかり解説します。


シンプル割引率表示|お手軽値引き率・ディスカウント表示

はじめに

今回まずご紹介するのは、Shopify アプリの 「シンプル割引率表示|お手軽値引き率・ディスカウント表示」 です。

Shopify は、ECサイトを比較的かんたんに構築できるプラットフォームですが、「あと少しこうしたい」を実現する拡張機能が Shopify アプリ です。WordPressでいうプラグインのようなイメージで問題ありません。

このアプリを使うと、商品ページに「割引率(%)」や「割引額(いくらお得か)」を、カスタムラベルとして表示 できます。
割引の “お得感” を見える化できるので、セール施策の訴求力を上げたいストアと相性が良いです。

インストールはこちら:
https://apps.shopify.com/sa-137-ur-discount-label?locale=ja

料金は Basic Plan:$2.99 / 月(1週間の無料期間あり) です。

注意点(重要)
本アプリの割引率表示は「価格」と「割引前価格(compare at price)」に基づいて計算されます。
そのため、クーポン他アプリ自動ディスカウント などによる割引は、表示内容に反映されません。
「表示上の%」と「決済時の割引」がズレないよう、運用ルールを決めておくのがおすすめです。


このアプリでできること

「シンプル割引率表示|お手軽値引き率・ディスカウント表示」は、商品ページ上で “どれくらいお得か” を直感的に伝えるためのアプリです。

シンプル割引率表示|お手軽値引き率・ディスカウント表示

特徴をまとめると、主に以下の4つです。

  • ノーコードで商品ページに割引表示を挿入できる
    テーマにアプリブロックを追加するだけで、割引率・割引額のラベルを表示できます。
  • 表示文言を自由にカスタマイズできる
    「◯% OFF」だけでなく、「今だけ」「期間限定」「◯円お得」など、ストアのトーンに合わせられます。
  • 見た目をノーコードで調整できる
    文字サイズ、色、背景色、余白などをテーマエディタで直感的に設定できます。
  • テーマへの反映がスムーズ
    アプリ側からテーマへ追加でき、導入のつまずきを減らせます。

ノーコードで商品ページに割引率(%)を表示できる

このアプリの一番の価値は、やはり Shopify 割引率 表示 を “コードを書かずに” 実現できる点です。
商品ページに割引ラベルを出すことで、セールの意図が伝わりやすくなります。

https___ur-file-uploader-bucket.s3.ap-northeast-1.amazonaws.com_260114064132-sa-137-ur-discount-label_screenshots_1.avif

このように「割引率」や「割引額」を見える化できると、ユーザーは “いま買う理由” を理解しやすくなり、購入の意思決定がスムーズになります。


割引ラベルの文言をストアに合わせて調整できる

割引率(%)の見せ方は、ストアのブランドトーンによって最適解が変わります。

  • 強めに売るなら:◯% OFF / SALE
  • やわらかく伝えるなら:いまだけお得 / 期間限定
  • 金額訴求なら:◯円お得 / -◯円

このアプリでは、文言を自由に調整できます。

割引ラベルの文言をカスタマイズしている例

さらに、テキスト内で プレースホルダー(置き換え文字) が使えるため、テンプレのように運用できます。

  • [discount-amount]:割引額(いくら値引きされたか)
  • [discount-rate]:割引率(%)

たとえば、次のような “売れやすい型” を作っておくと便利です。

  • 今だけ [discount-rate]%OFF
  • \[discount-amount]お得/
  • SALE:-[discount-amount]([discount-rate]%OFF)

デザインをノーコードで整えられる(目立たせる/馴染ませる)

ラベルは “表示できればOK” ではなく、テーマとの相性 で成果が変わります。
目立たせたいのに目立っていない、逆に目立ちすぎて安っぽく見える——こうした事故を防ぐには、デザイン調整が重要です。

割引ラベルのデザインをカスタマイズしている例

背景色・枠線・文字色・余白などを調整しながら、次のどちらかに寄せるのがおすすめです。

  • 馴染ませる設計:既存のCTAボタンやアクセントカラーに合わせる(上品・統一感)
  • 目立たせる設計:補色・コントラストを強めにする(強いセール訴求)

“どちらが正しい” ではなく、商材や客層で最適が変わるので、まずは小さくテストしつつ調整すると失敗が少ないです。


テーマに追加がスムーズ(導入でつまずきにくい)

アプリ側からテーマに追加できるので、導入のハードルが低いのも特徴です。

https___ur-file-uploader-bucket.s3.ap-northeast-1.amazonaws.com_260114064239-sa-137-ur-discount-label_screenshots_1%2520%283%29.avif

「アプリは入れたけど、どこに何を入れればいいのか分からない」という “導入あるある” を減らしやすい設計になっています。


アプリのインストール手順

ここからは実際のインストール手順です。
まず以下のURLからアプリページへアクセスします。

https://apps.shopify.com/sa-137-ur-discount-label?locale=ja

  1. Shopify 管理画面 左下の「設定」をクリックします。
    Shopify 管理画面の設定メニュー

  2. 「アプリ」をクリックし、「Shopify App Store」に移動します。
    Shopify 管理画面のアプリメニュー

  3. 検索窓に「シンプル割引率表示|お手軽値引き率・ディスカウント表示」と入力し、表示されたアプリをクリックします。
    Shopify App Store でアプリ名を検索している画面

  4. アプリ詳細画面で「インストール」をクリックします(権限を確認してインストールを完了してください)。
    アプリ詳細画面のインストールボタン

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


アプリブロックをテーマに追加する

インストールしただけでは表示されないため、次にテーマエディタでアプリブロックを追加します。

テーマエディタ上では、アプリブロック名が 「UR: Smart Sale Discount Label」 のように表示される場合があります。


自動でテーマに追加(1クリック)

アプリ管理画面から対象テーマを選び、「テーマに追加」を行います。

  1. Shopify 管理画面でアプリを開きます。
    Shopify 管理画面でアプリを開いた状態

  2. 「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
    テーマを選択して「テーマに追加」をクリックする画面

  3. テーマ編集画面が開いたら「保存する」をクリックして有効化します。
    テーマ編集画面で「保存する」をクリックする画面

  4. 割引前価格が設定されている商品の商品ページを開くと、以下のように割引表示されます。配置したい位置に調整してください。
    商品ページに割引ラベルが表示される画面


手動でテーマに追加(商品ページに狙って差し込みたい場合)

自動追加がうまくいかない場合や、特定の商品テンプレートに正確に差し込みたい場合は、手動追加が分かりやすいです。

  1. Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
    オンラインストアのテーマ一覧から「カスタマイズ」を開く画面

  2. テーマエディタ上部のページ選択から「商品」テンプレートに移動します。
    テーマエディタで商品テンプレートを選択する画面

  3. 割引前価格が設定されている商品の商品ページを開きます。
    割引前価格が設定された商品の商品ページ

  4. ラベルを出したい位置で「セクションを追加」または「ブロックを追加」をクリックします。
    テーマエディタでセクションまたはブロックを追加する画面.avif

  5. 「アプリ」タブから 「UR: Smart Sale Discount Label」 を選択して追加します。
    アプリブロック「UR: Smart Sale Discount Label

  6. 追加できたら「保存する」をクリックします。
    アプリブロック追加後に保存する画面


ラベル表示のカスタマイズ(テキスト/デザイン/余白)

テーマにアプリブロックを追加したら、ブロックをクリックして設定を行います。

アプリブロックの設定項目が表示された画面

設定の方向性としては、次の順で決めると迷いません。

  • まずテキスト(何を言うか):割引率を出すのか/割引額も出すのか/煽り文言を入れるのか
  • 次に見た目(どう見せるか):背景色・文字色・枠線・角丸
  • 最後に配置(どこに置くか):価格の近く、カートボタンの近く、商品タイトル付近 など

なお、ここでも注意点は同じです。

本ブロックは「価格」と「割引前価格」に基づいて表示します。
クーポン/自動ディスカウント/他アプリの割引は反映されません。


運用のコツ(失敗しないための考え方)

最後に、導入後に成果へつなげるためのコツをまとめます。

  • 割引前価格(compare at price)の設計を先に固める
    「通常価格=compare at price」「セール価格=price」を徹底すると、表示の一貫性が出ます。
  • ラベルは“出しすぎない”
    すべての商品に大きなラベルが並ぶと、かえって安売り感が強くなります。コレクション単位・キャンペーン期間など、出す範囲を決めるのがおすすめです。
  • 文言は“強い言葉”より“分かりやすさ”
    今だけ! を連発するより、[discount-rate]%OFF が正確に見えるほうが、ユーザーの納得感は上がりやすいです。
  • まずは1つのテンプレで統一し、数字で判断する
    複数デザインを同時に試すと判断が難しくなります。まずは統一し、CVRやAOVの変化を見て調整するのが堅実です。

導入はこちら:
https://apps.shopify.com/sa-137-ur-discount-label?locale=ja

シンプル割引率表示|お手軽値引き率・ディスカウント表示

なお、詳細な使い方は下記の公式ご利用ガイドが参考になるかと思います。
公式ご利用ガイド


Discount Mixer: 一括割引

Discount Mixer: 一括割引

Discount Mixer は、割引を「作る」だけでなく「組み合わせて運用する」ことを重視したアプリです。商品割引、数量割引、カート割引、BOGO(Buy One Get One)、送料無料などを横断的に設計でき、さらにセールバッジやカウントダウンタイマーで視認性も高められます。

「割引率表示」という観点では、割引施策をまとめて管理し、ユーザーに分かりやすい形で提示する仕組み を作りやすいのがポイントです。複数キャンペーンを走らせるストアほど、力を発揮します。

項目 内容
アプリ名 Discount Mixer: 一括割引
開発者 Discount Mixer
評価 5.0(159)
価格 無料プランあり/$1/月(エッセンシャル)/$2/月(プロ)/$49.99/月(アルティメット)
主な特徴 商品割引・数量割引・カート割引・BOGO・送料無料を作成/自動割引・コード割引/セールバッジ・カウントダウン/除外設定/ウィジェット調整
連携 チェックアウト、Shopify管理者ページ、POS、通貨ローカライズ、PageFly など
対応言語 日本語含む多数

ワンポイント解説
Discount Mixer は「割引をきれいに設計して、見せ方(バッジやウィジェット)まで一気通貫で整えたい」ストアに向いています。単発セールよりも、季節施策・まとめ買い・送料無料条件などを複数併用する運用で真価が出ます。割引率表示を含め、キャンペーン全体の訴求を“管理画面側から統制”したい場合におすすめです。


DECO Product Labels & Badges

DECO Product Labels & Badges

DECO は、ディスカウント表示も含めた「ラベル/バッジ」での訴求に強いアプリです。テンプレートが豊富で、ブランドに合わせたデザイン調整がしやすいのが特徴。割引商品の自動計算・表示にも対応しており、「Shopify 割引率 表示」をバッジでスマートに見せたい場合の候補になります。

※日本語翻訳は未対応なので、管理画面の英語操作に抵抗がない方向けです。

項目 内容
アプリ名 DECO Product Labels & Badges
開発者 PieLab
評価 5.0(1,128)
価格 Free(条件あり)/$9/月(Starter)/$19/月(Growth)/$39/月(Unlimited) ※無料体験あり
主な特徴 テンプレ豊富なラベル&バッジ/AI Generator/条件表示(コレクション・バリアント等)/複数バッジ表示/割引商品の自動計算・表示/分析機能(上位プラン)
連携 PageFly、GemPages、Judge.me など
対応言語 英語(日本語翻訳なし)

ワンポイント解説
DECO は「デザイン性の高い割引バッジを量産して、キャンペーンを見栄えよく運用したい」ストアに向きます。テンプレが豊富なので、毎回ゼロから作らずに “それっぽく整う” のが強み。一方で管理画面が英語のため、運用担当が英語に抵抗ない体制だと導入がスムーズです。


Lably—Product Labels & Badges

Lably—Product Labels & Badges

Lably は、ストア内のさまざまなページ(商品/コレクション/検索結果など)でラベル・バッジを表示でき、条件設定も柔軟です。割引率の範囲や在庫状況など、複数条件に応じて出し分けしたい場合に扱いやすいタイプです。

こちらも日本語翻訳は未対応なので、英語管理画面が前提になります。

項目 内容
アプリ名 Lably—Product Labels & Badges
開発者 DevIT.Software
評価 5.0(566)
価格 Free/$5.99/月(Basic)/$7.99/月(Grow)/$14.99/月(Plus) ※無料体験あり
主な特徴 テンプレライブラリ(季節イベント等)/商品・コレクション・検索ページに表示/在庫・割引レンジなど条件表示/フォント・色・位置など細かく調整/アニメーション・ツールチップ
連携 PageFly、GemPages、Shogun、EComposer など
対応言語 英語ほか(日本語翻訳なし)

ワンポイント解説
Lably は「割引率表示を含むバッジ運用を、条件分岐まで細かく作り込みたい」場合に相性が良いです。たとえば“30%OFF以上だけ目立つ色にする”“在庫僅少と割引を同時に出す”など、情報設計でCVRを押し上げたいストア向け。無料プランで試してから、必要に応じてルール数を増やす流れが現実的です。


SimiCart ‑ Mobile App Builder

SimiCart ‑ Mobile App Builder

SimiCart は少し毛色が違い、Shopifyストアの iOS / Android アプリ をノーコードで作るためのアプリです。ただし、割引施策と相性が良い機能が多く、アプリ内限定ディスカウントやバナー、プッシュ通知などで「お得」を押し出せます。

「Webストアでの Shopify 割引率 表示」だけでなく、アプリ側の体験まで含めてLTVを上げたい ストアにとって、選択肢になります。

項目 内容
アプリ名 SimiCart ‑ Mobile App Builder
開発者 SimiCart
評価 4.7(33)
価格 Free/$49/月(BASIC)/$99/月(PRO)/$199/月(PREMIUM)
主な特徴 ノーコードでアプリ作成/プッシュ通知無制限/アプリ限定割引/スマートバナー/ウィッシュリスト/商品ラベル/多言語・多通貨
連携 Omnisend、Klaviyo、Judge.me、Discounts など
対応言語 日本語含む(英語、スペイン語、アラビア語など)

ワンポイント解説
SimiCart は「割引率表示そのもの」より、割引を“リピート施策の武器”として強化したいストアに向きます。プッシュ通知×アプリ限定ディスカウントは再訪の導線になりやすく、Web広告依存を下げたい場合にも有効です。月額は高めなので、まずはLTVやリピート率を伸ばす目的が明確なストアで検討すると投資判断がしやすいでしょう。


どれを選ぶべき?目的別のおすすめ

最後に、迷いやすいポイントを目的別に整理します。

  • 商品ページにシンプルに割引率(%)を出したい(まず失敗したくない)
    シンプル割引率表示|お手軽値引き率・ディスカウント表示
  • 複数の割引施策をまとめて設計し、見せ方(バッジ/タイマー)まで運用したい
    Discount Mixer: 一括割引
  • デザイン性の高いバッジで割引訴求し、キャンペーンを見栄えよく回したい
    DECO Product Labels & Badges / Lably
  • Webだけでなくアプリも含めて、割引をLTV施策に組み込みたい
    SimiCart ‑ Mobile App Builder

まとめ

Shopify は標準機能でもセール表示はできますが、「何%OFFか」 を分かりやすく出すには工夫が必要です。だからこそ、Shopify 割引率 表示 をノーコードで整えられるアプリは、売上に直結しやすい投資になり得ます。

今回ご紹介した5つの方法(アプリ)は、それぞれ得意分野が違います。
まずは「商品ページで割引率をきちんと見せたい」のか、「キャンペーン運用全体を強化したい」のか、「LTVまで見据えてアプリ体験を作りたい」のか。目的を決めるだけで、選ぶべきアプリはかなり絞れます。

特に最初に解説した 「シンプル割引率表示|お手軽値引き率・ディスカウント表示」 は、導入から表示までが分かりやすく、はじめての Shopify 割引率 表示 に向いています。気になる方は、無料期間で一度テストし、テーマとの相性や見え方を確認してみてください。

https://apps.shopify.com/sa-137-ur-discount-label?locale=ja

最後までお読みいただき、ありがとうございました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?