「セール価格は設定したのに、パッと見ただけではお得感が伝わらない…」「他社のShopifyストアみたいに、かわいい“SALE”リボンや角丸バッジをつけたいけど、どこをどう触ればいいのか分からない」「価格の取り消し線だけだと地味で、セールをやっていることに気づいてもらえない」——実店舗を運営しながらEC化を進めている事業者様や、すでにShopifyでストアを構えているEC担当者様から、こうしたご相談をよくいただきます。
結論からお伝えすると、Shopifyでは商品ページに「価格」と「割引前価格（比較対象価格）」を入力するだけで、テーマ標準の「SALE」バッジを自動表示できます。さらに、テーマエディタの設定項目を使えば、専門的なコーディング知識がなくても、バッジの色・文言・角丸（角の半径）・表示位置を自由にカスタマイズすることが可能です。凝ったデザインを実現したい場合は、Liquidコードを直接編集する方法や、専用アプリを導入する方法もあります。
本記事では、Shopify標準機能によるセールバッジの表示方法から、色・文言・角丸・位置のカスタマイズ手順、テーマ別の注意点、Liquidコードでの実装方法、そしてバッジ運用で陥りがちな失敗とその対策まで、実務目線で徹底的に解説します。なお、本記事はあくまで「SALE」「セール」などの装飾的なデザインバッジ・リボンのカスタマイズに特化した内容です。「20%OFF」のように割引率を商品ごとに自動計算して数値表示する仕組みについては、別記事「Shopifyで割引率を自動表示する方法完全ガイド」で詳しく解説していますので、目的に応じて使い分けてください。
この記事でわかること
- Shopify標準機能だけでセールバッジを自動表示させる具体的な手順
- バッジの色・文言・角丸・表示位置をテーマエディタから変更する方法
- Dawn以外のテーマや有料テーマでカスタマイズする際の注意点
- Liquidコードで独自デザインのバッジを実装する方法とリスク
- セールバッジ運用でよくある失敗パターンと回避策
- バッジ表示を強化できるおすすめShopifyアプリの比較
- 小売事業者ならではの実務Tips（季節商戦・在庫管理・効果測定との連携）
セールラベル（バッジ）とは何か、なぜ重要なのか
セールラベル（バッジ）とは、商品画像の上に重ねて表示される「SALE」「セール中」「期間限定」といった小さなラベルのことです。ECサイトにおいて、商品一覧ページを訪れたユーザーは、1商品あたり数秒程度しか視線を留めないと言われています。取り消し線付きの価格表示だけでは、値引きされていることに気づかれないまま離脱されてしまうケースも珍しくありません。バッジという視覚的なアイキャッチを加えることで、「この商品はお得だ」という情報を一瞬で伝えられる点が最大のメリットです。
セールバッジがCVRに与える心理効果
行動経済学の分野では、値引き前後の価格を並べて提示することで「アンカリング効果」が働き、割安感が強調されることが知られています。バッジはこのアンカリング効果をさらに視覚的に補強する役割を果たします。また、「SALE」の文字色に赤やオレンジなど注意喚起色を用いると、緊急性・希少性を訴求しやすくなり、「今すぐ購入しないと損をするかもしれない」という心理（機会損失回避）を刺激できます。実店舗であればPOPや値札シールで表現していた「お得感の演出」を、ECでは商品画像上のバッジが代替していると考えるとイメージしやすいでしょう。
数値の割引率表示バッジとの違い（重要な注意点）
Shopifyのセール関連バッジには、大きく分けて2つの系統があります。ひとつは本記事で扱う「SALE」「セール中」といった固定文言・装飾重視のデザインバッジ、もうひとつは「20%OFF」「¥1,000引き」のように商品ごとの割引率・割引額を自動計算して表示する数値連動型のバッジです。前者は視認性やブランドイメージの演出に強く、後者は「どれだけお得か」を具体的な数字で伝える説得力に強みがあります。両者は実装方法もカスタマイズの考え方も異なるため、混同すると「文言だけ変えたのに割引率が表示されない」といったトラブルの原因になります。数値割引率の自動表示については別記事で詳しく解説していますので、本記事のカスタマイズと合わせて用途に応じて実装を検討してください。
Shopify標準機能でセールラベルを自動表示する方法
Shopifyの標準テーマ（Dawnおよびその派生テーマ）には、追加のアプリを入れなくてもセールバッジを表示できる機能があらかじめ組み込まれています。手順は非常にシンプルです。
価格・割引前価格の設定手順
- Shopify管理画面から「商品管理」→対象商品を選択
- 「価格」欄に販売価格（セール価格）を入力
- 「割引前価格を表示する」にチェックを入れ、割引前価格（通常価格）を入力
- 変更を保存
この設定を行うだけで、商品一覧ページや商品詳細ページに、通常価格の取り消し線表示とあわせて「SALE」バッジが自動的に表示されます。バリエーション（サイズ・カラー違いなど）がある商品の場合、バリエーションごとに価格設定が必要になる点にも注意してください。一部のバリエーションだけをセール価格にすると、代表価格の表示ロジックによって一覧ページでのバッジ表示にばらつきが出ることがあるため、複数バリエーションを持つ商品を一括でセールにする際は、事前に管理画面でCSVエクスポートし、一括編集してから再インポートする運用がおすすめです。
Dawnテーマでの表示確認とプレビュー
価格設定を保存したら、必ずストアプレビューで表示を確認しましょう。特にモバイル表示では、バッジと価格表示が重なって見えることがあるため、PC・スマートフォン両方のプレビューをチェックすることを習慣化してください。テーマによっては商品一覧ページと商品詳細ページでバッジの見え方（サイズ・位置）が異なる場合があるため、両方の画面を確認することが重要です。
セールラベルをデザインカスタマイズする方法
Dawnテーマでは、コードを一切触らずにテーマエディタの操作だけでバッジのデザインを変更できます。管理画面から「オンラインストア」→「テーマ」→「カスタマイズ」に進み、テーマ設定内の「バッジ」セクションを開くことで、以下の項目を編集できます。
セール時のラベルの色を変更する方法
テーマ設定の「バッジ」セクションには、複数のカラーパターン（配色スキーム）が用意されています。「販売バッジ」に割り当てる配色を選ぶことで、背景色・文字色をまとめて変更可能です。ブランドカラーに合わせて赤・黒・ゴールドなど複数パターンを試し、商品画像とのコントラストが十分に取れているかを必ず確認してください。特に白背景の商品写真に淡い色のバッジを乗せると視認性が大きく落ちるため、実店舗のPOPと同様に「遠目からでも一瞬で読めるか」という基準でチェックすることをおすすめします。
セール時のラベルの位置を変更する方法
「カードでの位置」設定から、バッジを商品画像の左上・右上・左下・右下のいずれに配置するかを選択できます。一般的には左上に配置するストアが多い傾向にありますが、商品写真の被写体（人物モデルの顔や商品の重要な部分）とバッジが重ならない位置を選ぶことが大切です。写真素材によってバッジが被写体にかぶってしまう場合は、位置変更だけでなく、商品写真の撮影・トリミングの段階でバッジ表示スペースを意識しておくと、後々の調整コストを減らせます。
セール時のラベルの角丸を変更する方法
「角の半径」の項目では、0〜40pxの範囲でバッジの角丸具合を調整できます。角丸を大きくするとポップで柔らかい印象になり、アパレルやコスメ、雑貨などのブランドと相性が良い傾向があります。逆に角丸を0に近づけるとシャープでフォーマルな印象になり、家電やビジネス用品、高級路線のブランドに向いています。サイト全体のボタンや他のUIパーツの角丸設定と統一感を持たせることで、ブランドイメージに一貫性が生まれます。
セール時のラベルの文言（テキスト）を変更する方法
バッジの文言は、管理画面の「オンラインストア」→「言語」→対象テーマの「翻訳を編集」から変更できます。「Products > Product > On Sale」という項目を探し、デフォルトの「Sale」を「セール」「期間限定」「タイムセール中」など任意の文言に書き換えられます。ここで注意したいのは、この設定はストア全体で共通のバッジ文言になるという点です。商品Aだけ「限定復刻」、商品Bだけ「在庫一掃」のように商品ごとに文言を出し分けたい場合は、標準機能だけでは対応できないため、後述するアプリ導入やLiquidカスタマイズが必要になります。
多言語対応・越境EC展開時の注意点
越境ECにも対応している場合、バッジの文言は言語ごとに個別に翻訳設定を行う必要があります。日本語ストアで「セール」と設定しても、英語版ストアでは自動翻訳されず「Sale」のままだったり、逆に空欄になってしまうケースがあるため、対応言語を追加した際は必ずすべての言語で翻訳項目を確認しましょう。
テーマ別のカスタマイズ方法の違い
ここまで紹介した手順はShopify標準のDawnテーマ（およびその派生無料テーマ）を前提としています。有料テーマやカスタム開発されたテーマの場合、バッジ関連の設定項目の名称や場所が異なることがあるため、まずはテーマ設定画面全体を確認し、「Badge」「Label」「Sale」などのキーワードで検索してみることをおすすめします。設定項目自体が存在しないテーマの場合は、次に紹介するLiquidコードでの実装が必要になります。
Liquidコードで独自バッジを実装する場合の注意点
より自由度の高いデザイン（グラデーション、アニメーション、アイコン付きバッジなど）を実現したい場合は、テーマファイルのLiquidコードとCSSを直接編集する方法があります。商品カードのスニペットファイル（多くの場合card-product.liquidなど）に条件分岐を追加し、compare_at_priceがprice よりも大きい場合にバッジを表示するロジックを組み込む形が一般的です。ただし、この方法にはいくつかの注意点があります。
- テーマアップデート時にカスタマイズが上書きされ、消えてしまう可能性がある
- コードの記述ミスによってテーマ全体の表示崩れやエラーが発生するリスクがある
- 編集前に必ずテーマの複製（バックアップ）を作成してから作業する必要がある
- 公開中のテーマを直接編集せず、複製したテーマで検証してから公開に反映する
実店舗運営と兼務でEC担当をされている方の場合、コード編集はハードルが高く感じられることも多いはずです。社内にエンジニアリソースがない場合は、後述するアプリの活用や、外部の制作パートナーへの部分的な委託を検討するのも現実的な選択肢です。
セールバッジ運用でありがちな失敗と対策
多くのShopifyストアを見てきた経験から、セールバッジ運用でつまずきやすいポイントを整理します。
- セール終了後もバッジが表示され続けている：割引前価格の欄を空欄に戻し忘れると、セール終了後もバッジが残ったままになり、「二重価格表示」として景品表示法上の問題に発展するリスクがあります。セール終了日を管理表で一元管理し、終了後は速やかに設定を戻す運用フローを徹底しましょう。
- バッジと在庫切れ表示が同時に出て見づらい：セール中に在庫切れが発生すると、「SALE」バッジと「売り切れ」表示が重なって視認性が落ちることがあります。テーマ設定で表示の優先順位を確認しておきましょう。
- 全商品にバッジが乱立し特別感が薄れる：ストア内のほぼ全商品にセールバッジをつけてしまうと、「常にセールをしているお店」という印象がつき、通常価格時の訴求力が下がる恐れがあります。目玉商品・戦略商品に絞ってバッジを付与するメリハリも重要です。
- 割引率が景品表示法の基準に抵触するリスク：割引前価格として、実際には販売実績のない高い価格を設定する「二重価格表示」は、景品表示法上の有利誤認表示に該当する可能性があります。割引前価格は、原則として当該価格で相当期間販売していた実績のある価格を用いる必要があります。
おすすめアプリで実現できる高度なバッジカスタマイズ
標準機能やLiquidカスタマイズだけでは対応しきれない、より柔軟なバッジ運用をしたい場合は、専用アプリの導入も選択肢になります。
RuffRuff 購入特典
条件付きディスカウントの設定に強みを持つアプリです。「会員ランク別」「購入数量別」など細かい条件でセールを組み立てられるため、条件ごとにバッジの文言を出し分けたい場合の土台として活用できます。
RuffRuff 予約販売
Built for Shopify認定を受けているアプリで、期間限定販売やVIP限定販売など複合的な販売条件に対応しています。予約販売とセールを組み合わせたい場合、バッジ表示との連携もスムーズに行えます。
バッジ専用アプリを検討する際の比較ポイント
バッジ専用アプリを選定する際は、「商品ごとの文言出し分けができるか」「画像バッジ（アイコン付き）に対応しているか」「モバイル表示の崩れがないか」「日本語サポートの有無」「月額料金と自社の売上規模が見合っているか」を必ず比較しましょう。
実装方法の比較表
| 方法 | コスト | カスタマイズ自由度 | 必要スキル | こんな事業者向け |
|---|---|---|---|---|
| Shopify標準機能（テーマエディタ） | 無料 | 中（色・位置・角丸・文言） | 不要 | まずは手早くセールを開始したい事業者 |
| Liquidコード編集 | 無料〜制作会社委託費 | 高（デザイン自由自在） | コーディング知識または外部委託 | ブランドの世界観を細部までこだわりたい事業者 |
| 専用アプリ導入 | 月額数百〜数千円程度 | 中〜高（商品別出し分け等） | 不要〜軽微な設定知識 | 複数条件のセールを頻繁に運用する事業者 |
こんな事業者におすすめ／向いていないケース
おすすめのケース
- 実店舗のPOPやセール告知の雰囲気をオンラインでも再現したい小売事業者
- コーディング知識がなくても、まずは無料でバッジ表示を始めたい事業者
- ブランドカラーに合わせてバッジのデザインを細かく調整したい事業者
- 季節ごとのセール（歳末セール・決算セール・在庫一掃セールなど）を頻繁に実施する事業者
向いていないケース・注意が必要なケース
- 商品ごとに全く異なる文言のバッジを大量に出し分けたい場合（標準機能だけでは限界があるため、アプリまたはLiquid編集が必須）
- アニメーションや動画のように動きのあるバッジを実装したい場合（外部制作パートナーへの委託を検討すべき）
- 景品表示法の理解が不十分なまま大幅な「割引率」を強調したバッジ文言を使いたい場合（法務確認が必要）
小売事業者ならではの実務Tips
季節商戦とバッジ文言の連動
歳末セールや決算セール、在庫一掃セールなど、季節ごとにバッジ文言を変えることで、リピーターに「今回は何のセールか」を明確に伝えられます。バッジ文言を変更するタイミングをあらかじめ年間販促カレンダーに組み込んでおくと、担当者の変更対応漏れを防げます。
在庫管理とバッジ表示の連携
在庫一掃セールのようにバッジと在庫状況を連動させたい場合、在庫数が一定数を下回ったら自動的にバッジ文言を「残りわずか」に切り替えるといった運用も、アプリやカスタム開発次第で実現可能です。実店舗で在庫を目視できる強みをECでも活かすイメージで、在庫データとバッジ表現を連携させる視点を持つと差別化につながります。
効果測定の方法
バッジを導入した前後で、商品一覧ページのクリック率（CTR）や商品詳細ページへの遷移率、カート投入率がどう変化したかをGoogle Analyticsなどで比較することをおすすめします。バッジのデザインを変更した際も、A/Bテストとまではいかなくても、期間を区切って変更前後のデータを記録しておくと、次回以降の意思決定材料になります。
よくある質問（FAQ）
Q. バッジを表示しても割引前価格の取り消し線が出ません。なぜですか？
A. 「割引前価格を表示する」のチェックが外れている、または割引前価格が販売価格より低い（もしくは同額)になっている可能性があります。管理画面の価格設定を再度確認してください。また、バリエーションがある商品では、表示中のバリエーションに割引前価格が入力されていないと表示されないことがあります。
Q. バッジの文言を商品ごとに変えることはできますか？
A. Shopify標準機能ではストア全体共通の文言設定となるため、商品ごとの出し分けはできません。商品ごとに文言を変えたい場合は、Liquidコードのカスタマイズか、商品ごとの出し分けに対応したアプリの導入が必要です。
Q. セール終了後にバッジを自動で消すことはできますか？
A. 標準機能には、指定した日時で自動的にバッジを非表示にする機能はありません。セール終了日に手動で割引前価格の設定を解除するか、予約・スケジュール機能を持つアプリを併用して自動化する方法があります。
Q. モバイル表示でバッジが商品名や価格と重なってしまいます。どうすればいいですか？
A. バッジの表示位置設定を変更するか、商品画像の余白（トリミング）を見直すことで改善できる場合があります。テーマによってはモバイル専用のレイアウト調整項目が用意されていることもあるため、テーマのドキュメントを確認してみてください。
Q. 割引率を数字で自動表示するバッジと、デザインバッジは同時に使えますか？
A. はい、両方を併用することは可能です。「SALE」の装飾バッジで注意を引きつつ、近くに「20%OFF」の数値バッジを併記することで、視認性と説得力を両立させているストアも多く見られます。数値割引率の自動表示の実装方法は別記事で詳しく解説しています。
まとめ
Shopifyのセールバッジは、標準機能だけでも十分に実用的なカスタマイズが可能であり、価格設定とテーマエディタの操作だけで、色・位置・角丸・文言を自社のブランドイメージに合わせて調整できます。さらに凝ったデザインを実現したい場合はLiquidコードの編集、商品ごとに柔軟な出し分けをしたい場合は専用アプリの導入がそれぞれ有効な選択肢です。一方で、二重価格表示など景品表示法に関わる注意点もあるため、デザインだけでなく運用ルールの整備も欠かせません。
実際にどの施策が自社に最適なのかは、商材特性や競合状況、社内の体制まで踏まえて総合的に判断する必要があり、自己判断だけでは見誤ってしまうことも少なくありません。迷った際は、EC構築と集客の両面を見渡せる専門家に一度相談し、客観的な視点で自社に合った進め方を整理してもらうことをおすすめします。
コメント