2026/01/29

Shopifyで割引率表示を実現できるアプリ7選を紹介！

@ 信条刃

Shopify

今回の記事は Shopify App Store で提供されている、商品の割引率を表示するアプリについての記事です。

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

商品の割引率表示とは

「割引率表示」とは、商品がセール価格になっているときに、商品ページやコレクションページ上で 「◯%OFF」 や 「◯円お得」 のように、値引きインパクトを“見える化”することです。

Shopify では、通常価格（Compare at price）と販売価格（Price）の差分を使って割引を表現できますが、テーマによっては 割引率が自動で表示されない ことも多く、アプリ導入やテーマへの軽いカスタマイズで補うケースが一般的です。

割引率表示を導入する利点

割引率表示の導入により得られる利点について解説します。

セール訴求が直感的になる
「値引き後の価格」だけだとお得感が伝わりづらい場面があります。%OFF 表示は、初見でも価値が伝わりやすく、セール導線が強くなります。
比較検討のストレスを減らせる
顧客は頭の中で「どれくらい安いのか」を計算しがちです。割引率を見せることで、比較が速くなり、購入までの摩擦を減らせます。
コレクションページで“回遊→クリック”が増える
一覧ページで割引バッジが見えると、セール商品が埋もれにくくなります。結果的に商品詳細への遷移が増えやすいです。
値引きの理由づけがしやすい
「期間限定」「在庫限り」「まとめ買い」など、割引と一緒にラベルを出すと納得感が増します。ラベル・バッジ系アプリはここが強いです。
広告・SNS 流入の即時理解を助ける
広告や SNS から来た顧客は滞在時間が短いことも多いです。ファーストビューで割引率が見えると、判断が速くなります。
単価アップ（まとめ買い）施策と相性が良い
階段割引（数量割引）や「まとめ買いで◯%」など、割引の見せ方を強化すると平均注文単価（AOV）にも繋げやすいです。
クーポン依存を減らせる
クーポンコード入力が必要な設計は、面倒で離脱につながることもあります。自動割引＋表示を整えると、体験がスムーズになります。
多言語・多通貨ストアでも訴求を統一しやすい
多言語対応のアプリなら、ストアの言語に合わせて割引ラベル文言を出し分けできます。
テーマ改修よりも速く検証できる
ノーコードや 1クリック導入のアプリなら、まずは小さく試して当たりを付けられます（もちろん、後述のコーディング実装で軽量化する選択もあります）。

割引率表示アプリの選び方

割引率表示アプリを選択する際には、アプリが提供する特定の機能に注目することが重要です。以下に、選定時に重視すべきポイントをまとめます。

商品ページに 割引率（%OFF） と 割引額（◯円お得） を表示できる
コレクションページや検索結果でも バッジ表示 ができる
文言（例：「今だけ」「期間限定」）を自由にカスタマイズできる
見た目（色・位置・サイズ）のカスタマイズ性が高い
セール判定（Compare at price と Price）を自動計算してくれる
期間指定（スケジュール）や条件指定（在庫、タグ、コレクション等）で出し分けできる
日本語対応（管理画面や翻訳）がある
できれば「Built for Shopify」など、品質面の安心材料がある

割引率表示は一見シンプルですが、実運用では「どこに表示するか」「どの条件で出すか」「ストアのデザインに馴染むか」で成果が変わります。
まずは 商品ページだけ なのか、一覧やカートまで含めて訴求したい のかを決めると、アプリ選定が一気に楽になります。

コーディングで割引率を表示する方法

アプリを入れずに、テーマ側で割引率を表示したい場合の実装例です。
Online Store 2.0 テーマ（例：Dawn 系）を想定し、セール時だけ「◯%OFF（◯円お得）」 を表示します。

※編集前にテーマを複製してバックアップすることをおすすめします。

実装の考え方

compare_at_price（元値）が price（売値）より大きいときだけセール
割引率：(compare_at_price - price) * 100 / compare_at_price
割引額：compare_at_price - price

1) 割引ラベル用の snippet を作成

snippets/discount-badge.liquid を新規作成して、以下を貼り付けます。

{%- comment -%}
  discount-badge.liquid
  使い方：
  - product オブジェクトがある場所で render してください
  - 例：{% render 'discount-badge', product: product %}
{%- endcomment -%}

{%- liquid
  assign v = product.selected_or_first_available_variant
  assign compare = v.compare_at_price
  assign price = v.price

  assign has_discount = false
  if compare and compare > price and compare > 0
    assign has_discount = true
    assign discount_amount = compare | minus: price
    assign discount_rate = discount_amount | times: 100 | divided_by: compare
  endif
-%}

{%- if has_discount -%}
  <span class="ur-discount-badge" aria-label="割引率">
    {{ discount_rate }}%OFF（{{ discount_amount | money }}お得）
  </span>
{%- endif -%}

2) 商品ページに表示する

商品テンプレート（例：sections/main-product.liquid）で、価格が表示されている近くに以下を追加します。

{% render 'discount-badge', product: product %}

ポイントは、価格と同じブロック付近に置くことです。テーマによってはバリエーション変更時に価格表示だけ差し替えるため、同じエリアに置くと表示の整合が取りやすいです。

3) コレクション（商品カード）にも表示する

商品カード（例：snippets/card-product.liquid）で、商品画像やタイトル付近に以下を追加します。

{% render 'discount-badge', product: product %}

一覧ページは見た目が詰まりやすいので、「%OFFだけ表示」にしたい場合は snippet の中身を以下のように簡略化しても OK です。

{{ discount_rate }}%OFF

4) CSS で見た目を整える

assets/base.css または assets/theme.css に追加します。

.ur-discount-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.06);
}

この実装で「まずは割引率を見せたい」は十分満たせます。
一方で、「条件出し分け」「複数ラベル」「自動スケジュール」「バッジテンプレ」までやるなら、ここから紹介するアプリの方が運用が楽です。

価格比較

割引率表示を目的に「まず試しやすい」価格帯で整理します（機能上限や条件があるプランも含みます）。

まずは無料で試したい

DECO Product Labels & Badges（無料プランあり）
SimiCart（無料プランあり）
Discount Mixer（無料プランあり）
Lably（無料プランあり）
DiscountYard（Trial/Dev が無料。ただし条件の記載あり）
月額が軽く、商品ページに割引率を出すのが主目的
シンプル割引率表示（$2.99/月）
割引運用も含めて強化したい（割引の種類・組み合わせ・ウィジェット等）
DiscountYard（$19.95/月〜）
Discount Mixer（$1/月〜の記載あり、上位は $49.99/月）
モバイルアプリで販促全体を伸ばしたい
SimiCart（$49/月〜）

Shopify アプリの日本語サポート

Shopify アプリにおいて日本語サポート（少なくとも日本語表示があるか）は非常に重要です。翻訳機能を用いてサポート依頼をしても、意図が伝わらず時間がかかるケースもあるため、可能なら日本語対応を優先したいところです。

本記事の「アプリ情報」内の言語欄ベースで整理します。

日本語に対応している（言語に日本語の記載あり）
シンプル割引率表示
Sami Product Labels & Badges
SimiCart
Discount Mixer
日本語に翻訳されていない（英語のみ等の記載あり）
DiscountYard — Stack Discounts
DECO Product Labels & Badges
Lably—Product Labels & Badges

使いやすさ

割引率表示アプリで、管理画面が日本語であることを除いても、まずは 「シンプル割引率表示」 が最もシンプルに導入しやすい構成です。商品ページに割引率・割引額を出す目的に対して機能が絞られており、ノーコードで完結しやすいのが理由です。

一方で、割引率表示を「バッジ運用」に広げるなら Sami / DECO / Lably のようなラベル系が強く、割引の種類・組み合わせまで含めて伸ばすなら Discount Mixer / DiscountYard が候補になります。

「どこで、何を、どれくらい出し分けたいか」で最適解が変わるので、迷ったら次の順で選ぶのがおすすめです。

まず商品ページに割引率を出したい：シンプル割引率表示
一覧（コレクション）でもセール感を強くしたい：Sami / DECO / Lably
割引施策そのものを増やして AOV を伸ばしたい：Discount Mixer / DiscountYard
モバイルの売上比率を伸ばしたい：SimiCart

終わりに

今回は、Shopify の 「商品の割引率を表示するアプリ 7 選」 を紹介しました。

割引率表示は「たった一言」に見えますが、売上に直結しやすい改善のひとつです。
どのアプリをインストールするか迷っている場合は、まず 無料プランや無料体験 で表示確認だけでも試してみてください。

また、アプリを使わずにテーマ側で割引率を表示したい場合は、上記の 「コーディングで割引率を表示する方法」 の実装例も参考にしてみてください。

ここまでお付き合い頂き、誠にありがとうございました。

参考記事

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

@ 信条刃

Shopify

サイトTOP お問い合わせ

Shopifyで割引率表示を実現できるアプリ7選を紹介！

商品の割引率表示とは

割引率表示を導入する利点

割引率表示アプリの選び方

コーディングで割引率を表示する方法

実装の考え方

1) 割引ラベル用の snippet を作成

2) 商品ページに表示する

3) コレクション（商品カード）にも表示する

4) CSS で見た目を整える

おすすめの割引率表示 Shopify アプリ 7 選

シンプル割引率表示｜お手軽値引き率・ディスカウント表示 ☆ 迷ったらこれ

特徴・機能

価格設定

DiscountYard — Stack Discounts

特徴・機能

価格設定

特徴・機能

価格設定

DECO Product Labels & Badges

特徴・機能

価格設定

SimiCart ‑ Mobile App Builder

特徴・機能

価格設定

Discount Mixer: 一括割引

特徴・機能

価格設定

Lably—Product Labels & Badges

特徴・機能

価格設定

価格比較

Shopify アプリの日本語サポート

使いやすさ

終わりに

参考記事

最新の記事

目次

関連タグ

Shopifyで割引率表示を実現できるアプリ7選を紹介！

Shopifyのブログ記事タグを一覧で表示できるアプリを6つ紹介！

Shopify で商品説明タブを表示できるアプリを5つ紹介！

Shopify で決済アイコンを表示できるアプリを5つ紹介！

Shopify でスマホナビゲーションを表示できるアプリを8つ紹介！

Shopify で商品ページにタグを 表示できるアプリを5つ紹介！

Shopify で商品ページにタグを 表示できるアプリを5つ紹介！