Shopifyストアに割引率を簡単に表示できるアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプル割引率表示｜お手軽値引き率・ディスカウント表示」の解説記事です。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプル割引率表示｜お手軽値引き率・ディスカウント表示」は、商品ページに「割引率（%）」や「割引額（いくらお得か）」を、カスタムラベルとして表示できるアプリです。
セールやプロモーションを実施しているストアで「今どれくらいお得か」を強調できるため、購入の後押し（CVR 向上）に役立ちます。
また、コーディング不要で、ラベルの文言・文字サイズ・色・背景色・余白などをテーマエディタ上で調整できます。セットアップもシンプルで、すぐに使い始められるのが特徴です。
ご興味のある方は、以下の URL からインストールしてみてください。
https://apps.shopify.com/sa-137-ur-discount-label?locale=ja
料金は Basic Plan：$2.99 / 月（1 週間の無料期間あり） です。
注意点（重要）
本アプリのラベルは「価格」と「割引前価格（compare at price）」に基づいて表示されます。
そのため、クーポンや他アプリ、自動ディスカウントによる割引は表示内容に反映されません。
「シンプル割引率表示｜お手軽値引き率・ディスカウント表示」でできること
Shopify アプリである「シンプル割引率表示｜お手軽値引き率・ディスカウント表示」は、商品ページに割引率・割引額を“見える化”して訴求できるアプリです。
主な特徴は次のとおりです。
- ノーコードで商品ページに割引表示を挿入できる
テーマにアプリブロックを追加するだけで、商品ページに割引ラベルを表示できます。 - 割引表示の文言を自由にカスタマイズできる
「◯% OFF」「いくらお得」など、ストアのブランドやキャンペーンに合わせた文言に調整可能です。 - ノーコードで見た目をカスタマイズできる
文字サイズ・色・背景色・枠線・角丸・余白などを、テーマエディタで直感的に変更できます。 - 1 クリックでテーマに追加できる
すぐにテーマへ反映でき、導入までの手間を最小化できます。
以下で、それぞれをもう少し詳しく見ていきます。
ノーコードで商品ページに割引表示を挿入できる
商品ページに「割引率」「割引額」を表示して、セールのお得感をひと目で伝えられます。
割引表示の文言を自由にカスタマイズできる
「% OFF」だけでなく、ストアに合った言い回し・見せ方に変更できます（例：期間限定、今だけ、お得、など）。
ノーコードで見た目をカスタマイズできる
背景色・枠線・文字色・余白などを調整して、テーマデザインに馴染ませたり、あえて目立たせたりできます。
1 クリックでテーマに追加できる
アプリ側からテーマへ追加できるので、導入がスムーズです。
シンプル割引率表示アプリのインストール
それでは、実際にアプリをインストールしていきましょう。
https://apps.shopify.com/sa-137-ur-discount-label?locale=ja
アプリの料金は、**$2.99 / 月（1 週間無料）**です。
- Shopify 管理画面 左下の「設定」をクリックします。
- 「アプリ」をクリックし、「Shopify App Store」に移動します。
- 検索窓に「シンプル割引率表示｜お手軽値引き率・ディスカウント表示」と入力し、表示されたアプリをクリックします。
- アプリ詳細画面で「インストール」をクリックします（権限を確認してインストールを完了してください）。
インストールが完了すると、アプリの管理画面が表示されます。
シンプル割引率表示のアプリブロックをテーマに追加
アプリをインストールしたら、テーマエディタでアプリブロックを追加して、商品ページに割引ラベルを表示できるようにします。
テーマエディタ上では、アプリブロック名が 「UR: Smart Sale Discount Label」 のように表示される場合があります。
自動でアプリをテーマに追加（1 クリック）
アプリの管理画面から、対象テーマを選んで「テーマに追加」を行います。
- Shopify 管理画面でアプリを開きます。
- 「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
- テーマ編集画面が開いたら「保存する」をクリックして有効化します。
- 割引前価格が設定されている商品の商品ページを開くと、以下のように割引表示されるので、任意の位置に配置してください。
手動でアプリをテーマに追加（商品ページに差し込みたい場合）
自動追加がうまくいかない場合や、特定の商品テンプレートに正確に差し込みたい場合は、手動追加がおすすめです。
- Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
- テーマエディタ上部のページ選択から「商品」テンプレート（例：デフォルト商品）に移動します。
- 割引前価格が設定されている商品の商品ページを開きます。
- 割引ラベルを表示したい位置で「セクションを追加」または「ブロックを追加」をクリックします。
- 「アプリ」タブから 「UR: Smart Sale Discount Label」（割引ラベル）を選択して追加します。
- 追加できたら「保存する」をクリックします。
シンプル割引率表示アプリのカスタマイズ
テーマにアプリブロックを追加したら、テーマエディタで「シンプル割引率表示｜お手軽値引き率・ディスカウント表示」のカスタマイズを行えます。
アプリブロック（UR: Smart Sale Discount Label）をクリックすると、下記のような設定項目が表示されます。
注意点（再掲）
本ブロックは「価格」と「割引前価格」に基づいて表示します。
クーポン／自動ディスカウント／他アプリの割引は反映されません。
テキスト設定
割引ラベルに表示する文言や、文字の見た目を設定します。
テキスト
ラベルに表示するテキストを編集できます。
テキスト内では、以下の プレースホルダー（置き換え文字）を利用できます。
[discount-amount]：割引額（いくら値引きされたか）[discount-rate]：割引率（%）
例：
-[discount-amount]（[discount-rate]% OFF）
運用のコツ
キャンペーン訴求に寄せるなら、例えば以下のような文言もおすすめです。
今だけ [discount-rate]%OFF＼[discount-amount]お得／SALE：-[discount-amount]
割引額に通貨記号を表示する
ON にすると、割引額に通貨記号を付けて表示します（例：¥ / $ など）。
テキストの大きさ（PC）
PC 表示時の文字サイズを px 単位で設定します。
テキストの大きさ（スマホ）
スマホ表示時の文字サイズを px 単位で設定します。
テキストの太さ
文字の太さ（font-weight 相当）を数値で設定します。
テキストの色
文字色をカラーピッカーで指定します。
デザイン設定
ラベルの背景や枠線など、見た目の“箱”の部分を調整します。
背景色
ラベルの背景色を指定します。
ボーダー色
枠線（ボーダー）の色を指定します。
ボーダー幅
枠線の太さを px 単位で指定します。
角の丸み
角丸（border-radius）を px 単位で指定します。
テキストアニメーション
テキストにアニメーションを付与できます。
「なし」を選ぶとアニメーションは入りません（まずは「なし」推奨。目立たせたい場合にのみ調整すると運用しやすいです）。
配置と余白
「どこに置くか」「どれくらい余白を取るか」を調整して、テーマ全体のバランスを整えます。
左右位置
ラベルの表示位置を以下から選択できます。
- 左
- 中央
- 右
内側余白（上下）
ラベル内の上下の余白（padding）を px で設定します。
内側余白（左右）
ラベル内の左右の余白（padding）を px で設定します。
PC 余白（上） / スマホ余白（上）
ラベルブロックの上側の余白（margin-top）を、PC / スマホ別に設定します。
PC 余白（下） / スマホ余白（下）
ラベルブロックの下側の余白（margin-bottom）を、PC / スマホ別に設定します。
その他
追加の CSS
設定項目だけでは表現しきれないデザインを、CSS で追い込めます。
- ブラウザの検証（デベロッパーツール）で、カスタマイズしたい要素の クラス名 を確認
- 「追加の CSS」に CSS を記述して上書き
おわりに
今回は「シンプル割引率表示｜お手軽値引き率・ディスカウント表示」の解説を行いました。
- 商品ページに 割引率（%）/ 割引額（いくらお得か） を表示してセール訴求を強化
- 文言やデザインを ノーコードでカスタマイズ 可能
- $2.99 / 月（1 週間無料） で手軽に導入できる
セールや期間限定キャンペーンの“お得感”をわかりやすく伝えたいストアは、ぜひ導入を検討してみてください。
ここまでお読みいただき、誠にありがとうございました。
https://apps.shopify.com/sa-137-ur-discount-label?locale=ja
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
