【2025年】Shopify で商品バッジ・ラベル・アイコンを表示する方法は？おすすめアプリを紹介！

はじめに
Shopify ストアで商品バッジを表示することはできる？
Shopify ストアの商品にバッジを表示するメリット・デメリット
- メリット
- デメリット
Shopify ストアに商品バッジを表示する 2 つの方法
- テーマのコードを編集する
- アプリを導入する
コード編集によって実装する場合のサンプルコード
- コード編集実装のポイント
手軽に試すならアプリの利用がおすすめ
おすすめ Shopify アプリ「シンプル商品バッジ｜お手軽アイコンラベル表示」の紹介
- 主な特徴
「シンプル商品バッジ｜お手軽アイコンラベル表示」のインストール手順
コード編集かアプリか、どちらを選ぶべき？
まとめ
参考記事

はじめに

2025 年の現在、EC 業界では「商品自体の魅力をどうやってお客様に伝えるか」という観点がますます重要になっています。画像やテキストだけでなく、バナーやラベル、そして“バッジ”といった視覚要素を活用して、商品をより分かりやすく見せたり、お客様の購入意欲を高めたりする手法が注目を集めています。

たとえば「セール中」「在庫残りわずか」「新着」などの文言やアイコンを商品画像の上に重ねて表示できれば、視覚的なインパクトを与えられ、お客様が商品を見つけやすくなります。また、特定のコレクションや一部の商品だけピックアップし、「おすすめ」や「限定」といったラベルを付けることで販促にも大きく寄与するでしょう。このように、商品画像に目立つ“バッジ”を付与するのは、EC サイトの売上増やブランドイメージの確立にも効果的な方法です。

商品バッジの表示例

しかし一方で、「Shopify ストアの商品にバッジを表示することってそもそも可能？」「どういうメリット・デメリットがある？」「導入方法はテーマ編集なのか、アプリを使うべきなのか？」といった疑問を持つ方も多いでしょう。本記事では、Shopify ストアで商品バッジを表示するうえで知っておきたいポイントを整理し、導入方法やおすすめのアプリもご紹介します。

具体的には、バッジを表示する方法として「テーマのコード編集」と「アプリ導入」の二つのパターンを比較しながら、それぞれのメリット・デメリットを解説します。さらに、初心者でも簡単に導入できるおすすめアプリとして「シンプル商品バッジ｜お手軽アイコンラベル表示」を取り上げ、実際のインストール手順や利用方法を詳しく紹介していきます。
商品バッジの導入を検討している方や、もう一歩上の販促テクニックを取り入れて他店との差別化を図りたい方は、ぜひ最後までお読みいただき、参考にしてください。

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

Shopify ストアで商品バッジを表示することはできる？

結論からいえば、Shopify ストアの商品画像にバッジ（アイコンやラベルなど）を重ねて表示することは「テーマのカスタマイズ」や「コード編集」「アプリ利用」など複数の方法で実現可能です。公式のテーマや有名テーマの中には、あらかじめ簡易的なバッジ表示機能を持っているものもありますが、より自由度の高いバッジを表示したい場合は、コードを独自に編集するか、アプリを導入するのが一般的です。

バッジ表示を行うことで商品をよりわかりやすく訴求できますが、設置数が増えすぎると全体の見た目が煩雑になる可能性もあります。また、テンプレートのコードを修正するのは一見難易度が高いため、ノーコードでスピーディーに実装できるアプリ活用も盛んに行われています。

ここからは、Shopify ストアに商品バッジを表示するメリットや考えられるデメリットを確認したうえで、実際の導入方法をわかりやすく解説していきます。

Shopify ストアの商品にバッジを表示するメリット・デメリット

Shopify 商品バッジ（Shopify 商品アイコンや Shopify 商品ラベルを含む）を利用すると、商品一覧や商品詳細ページにおいてお客様の目を引きやすくなります。しかしながら、メリットばかりではなく注意点も存在します。ここでは、代表的なメリットとデメリットを整理します。

メリット

メリットのイメージ

視覚的な訴求力がアップする

商品画像に「セール」「新着」「残りわずか」などのバッジを重ねることで、ユーザーは一目で重要な情報を把握できます。テキストだけでは見落とされるケースでも、アイコンやラベルを付与することでスルーされにくくなるでしょう。

購買意欲を刺激しやすい

たとえば「セール中」「在庫限り」といったフレーズは、希少性やお得感をユーザーに伝えやすく、購買意欲を高めます。バッジを付与することで、ユーザーが商品を選ぶ際の優先度を高めることが可能です。

ブランドイメージを強化できる

シンプルな「SALE」バッジだけでなく、ブランドのロゴやカラーに合わせたオリジナルアイコン・ラベルを作成すれば、ストア全体のデザインに統一感を持たせることができます。長期的にはブランド認知度を高める効果も期待できます。

様々な販促施策と組み合わせられる

バッジは特定の商品だけに表示させることも可能です。新商品や限定商品、コラボアイテム、特定カテゴリに該当する商品などにだけピンポイントでアイコンを追加し、販促施策と連動しやすい点もメリットです。

デメリット

デメリットのイメージ

過度なバッジ表示はデザインを損ねる可能性

あれもこれもとバッジを付けすぎると、商品一覧ページがラベルだらけになって混雑し、かえってユーザーが見づらくなってしまう恐れがあります。バッジはあくまで補助的な要素であるため、設置ルールをきちんと定めておくことが大切です。

コード編集の知識や工数が必要な場合がある

テーマにバッジ表示の機能が備わっていない場合、直接コードを編集しなければならないことがあります。Liquid や CSS の知識が必要であり、またテーマのバージョンアップに伴うメンテナンス作業も増えます。

アプリ導入コストや競合リスク

外部アプリを使う場合は月額費用や機能制限が課されるケースがあるほか、別のアプリと干渉してデザインが崩れたり、不具合が発生したりするリスクがあります。無料アプリや安価なアプリを探す、あるいはサポート体制がしっかりしたアプリを使うなど、取捨選択が必要です。

Shopify ストアに商品バッジを表示する 2 つの方法

商品バッジを導入する代表的な方法として、「テーマのコードを編集する方法」と「アプリを導入する方法」が挙げられます。なお、テーマによってはバッジ表示に対応していることもありますが、多くの場合はデザインや配置の自由度が低いため、より柔軟に運用したいなら下記の 2 つを検討することになるでしょう。

テーマのコードを編集する

テーマのコード編集画面

Shopify のテンプレート言語である Liquid と、HTML/CSS、JavaScript などを直接編集してバッジ表示を組み込む方法です。商品一覧や商品詳細ページ（collection.liquid や product.liquid など）に条件分岐を記述し、「在庫数が ◯ 個以下のときにアイコンを表示」などといった実装が可能になります。

メリット
- テーマ全体のデザインに合わせて細かいカスタマイズができる
- 他のカスタム機能と連動しやすい
- 定期費用（サブスクリプション）がかからない
デメリット
- コーディングスキルが必要
- テーマのアップデートのたびに修正を加える必要がある
- 実装ミスがあるとストア全体の見た目に影響が出る

アプリを導入する

Shopify App Store

Shopify アプリストアで公開されているバッジ表示アプリを利用する方法です。アプリによっては、コレクション単位や商品単位でバッジを設定できたり、アイコン画像を自由にアップロードできたり、デザインの変更をノーコードで行えたりします。

メリット
- コードを直接触らなくてよい
- ノーコードでバッジの内容・配置などを管理できる
- 開発元によるサポートが期待できる
デメリット
- 月額費用や課金形態がある（無料アプリもあるが機能制限に注意）
- 他のアプリやテーマとの競合リスク
- 表示速度への影響や、アプリのバージョンアップに左右される可能性

コード編集によって実装する場合のサンプルコード

ここでは、テーマのコードにバッジを直接記述するイメージを示します。下記は Liquid の簡易サンプルとなりますので、実際にはテーマのファイル構成やデザインに合わせて調整が必要です。

<!-- 商品バッジ表示サンプル -->
{% comment %}
  サンプルの想定：
  - 在庫数が10以下の商品に「残りわずか！」バッジを表示
  - コレクションでセール対象商品には「SALE!」バッジを表示
{% endcomment %}

<div class="product-card">
  <a href="{{ product.url | within: collection }}">
    <div class="product-image-wrapper">
      <img
        src="{{ product.featured_image | img_url: '600x600' }}"
        alt="{{ product.title | escape }}"
      />
      <!-- バッジの表示ロジック -->
      {% if product.compare_at_price and product.compare_at_price > product.price %}
        <div class="product-badge sale-badge">
          SALE!
        </div>
      {% endif %}
      {% if product.inventory_quantity <= 10 and product.inventory_quantity > 0 %}
        <div class="product-badge limited-badge">
          残りわずか！
        </div>
      {% endif %}
      {% if product.inventory_quantity == 0 %}
        <div class="product-badge soldout-badge">
          SOLD OUT
        </div>
      {% endif %}
    </div>
    <div class="product-title">
      {{ product.title }}
    </div>
    <div class="product-price">
      {{ product.price | money }}
    </div>
  </a>
</div>

<style>
  .product-image-wrapper {
    position: relative;
  }
  .product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #f00;
    color: #fff;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
  }
  .sale-badge {
    background: #ff0000;
  }
  .limited-badge {
    background: #ffa500;
  }
  .soldout-badge {
    background: #000000;
  }
</style>

上記の例では、product.compare_at_price と product.price を比較することでセール対象かどうかを判定し、在庫数（product.inventory_quantity）によって「残りわずか」「SOLD OUT」のバッジを切り替えるイメージになっています。テーマによっては変数名や記法が異なる場合もあるので、適宜修正してください。

コード編集実装のポイント

テーマのバックアップを必ず取る
コード編集前にテーマを複製するなどして、失敗しても元に戻せるようにしておきましょう。
表示させたいページ・セクションを把握する
商品一覧なら collection.liquid、商品詳細ページなら product.liquid、セクションファイル（sections フォルダ内）など、用途に応じて編集するファイルが異なります。
CSS での見た目調整
バッジの位置や配色などは、絶対位置（position: absolute; top; left; など）で指定することが多いです。ディスプレイ幅に応じて相対値にするか、メディアクエリでレスポンシブ対応することも考慮しましょう。
テーマアップデート時のメンテナンス
テーマを大幅にアップデートすると、独自カスタマイズが上書きされるリスクがあります。変更加えている箇所をドキュメント化しておくと保守が楽になります。

手軽に試すならアプリの利用がおすすめ

テーマコードを編集する方法は自由度こそ高いものの、初心者にはハードルが高い場合がありますし、社内リソースが限られているケースでは継続的なメンテナンスに不安を感じるかもしれません。その点、アプリを利用すればノーコードで導入でき、複数商品を一括管理する機能なども備わっていることが多いので、スピード重視・手軽さ重視の方にはとくにおすすめです。

今回ご紹介する「シンプル商品バッジ｜お手軽アイコンラベル表示」は、月額 5.99 ドルで商品バッジ機能を実装できる国産アプリです。公式ガイドや日本語サポートもしっかり用意されているため、初めてバッジ機能を導入する方でも安心して利用できます。

「シンプル商品バッジ｜お手軽アイコンラベル表示」のインストール手順

ここでは、公式ガイド（https://unreact.jp/shopify-apps/sa-100-ur-product-badge/guide）に基づいて、実際のインストール手順をざっくりと解説します。画面イメージなどはガイドでも詳しく紹介されていますので、あわせてご覧ください。

「シンプル商品バッジ｜お手軽アイコンラベル表示」のインストール手順

まずは、ストアに Shopify アプリストアからアプリをインストールします。以下の手順でアプリをインストールしてください。

Shopify アプリストアで「シンプル商品バッジ｜お手軽アイコンラベル表示」を検索するか、こちらの URL にアクセスします。
アプリの詳細ページにて「インストール」ボタンをクリックします。
Shopify 管理画面で権限確認の画面が出てきますので、問題なければそのまま進み、インストールを完了します。
アプリの管理画面が表示されれば、インストールは完了です。

テーマへのアプリブロック追加手順

アプリをカスタマイズするには、テーマにアプリブロックを追加する必要があります。以下の手順でアプリブロックを追加してください。

アプリの管理画面の「テーマに追加」でテーマにアプリブロックを追加してください。
TOP ページにアプリブロックが追加されます。問題なければ、変更を保存してください。（公開中のテーマの場合、保存すると実際のストアに反映されてしまうので注意してください。）

自動でのアプリブロック追加がうまくいかない場合や TOP ページ以外のページにアプリブロックを追加したい場合は、ご利用ガイドを参考に手動でアプリブロックを有効化してください。

アプリのカスタマイズ

テーマにアプリブロックを追加すると、テーマのカスタマイズ画面のサイドバーに「シンプル商品バッジ」の設定が表示されます。ここで、どの商品・コレクションにどんなバッジを表示させるかを指定します。

「バッジを表示する商品の設定」で、商品あるいはコレクションを選択
「バッジの画像」または「バッジのテキスト」を設定（両方を組み合わせることも可能）
サイズ（幅・高さ）や位置、余白などの数値を入力して見た目を調整
追加 CSS を利用して細かなデザインをカスタマイズすることも可能

設定内容はプレビュー画面に即時反映されるため、ストアにどう表示されるかをリアルタイムで確認できます。納得のいく見た目になったら再度「保存」しましょう。

実際にストアで確認

設定が完了したら、ストアをプレビューモードまたは実際の URL でチェックしてみてください。指定した商品画像に、アプリで設定したバッジが重ね表示されていれば成功です。

運用上のポイント

バッジの表示ルールを整理する
「どの商品にどんなバッジを表示するのか」を事前に決めておくと、設定がスムーズです。セールやキャンペーンを頻繁に行う場合は、再利用しやすいバッジを作っておくと効率的です。
過度なバッジ乱用に注意
あまりに多くのバッジを同時に表示すると、かえって見づらくなります。常時付けっぱなしにするのではなく、期間限定で使うなどメリハリをつけましょう。
テーマの大幅更新時には再確認
テーマをアップデートしても、通常はブロック設定が保持されます。ただし、念のために設定画面を開いて不具合がないかをチェックしておくのがおすすめです。
複数アプリとの共存
他にも画像関連や商品一覧ページのレイアウトをいじるアプリを導入している場合、競合が起こるとデザインが崩れる可能性があります。その際は個別にアプリ開発元に問い合わせるか、CSS カスタマイズで対応可能です。

コード編集かアプリか、どちらを選ぶべき？

最終的には、ストアの規模や目指すデザイン、運用リソースによって最適な方法は変わります。以下の点を考慮して選択しましょう。

社内にコーディングスキルを持った人材がいるか
自前でテーマを自由にカスタマイズできるなら、テーマ編集のメリットは大きいです。ただし、中長期的な保守やバージョン管理にも手間を割けるかを確認しましょう。
バッジ表示をどれくらい高度に使い分けたいか
在庫数による動的な切り替え、セール期間中のみ特別なバッジ表示、など細かい要件があるならコード編集で自由度を確保するのもアリです。ただし、アプリでも条件分岐が実装されている場合もあるので、アプリの機能をよく確認しておきましょう。
スピード重視やノーコード運用を求めるならアプリ
とにかく簡単に、早く導入したい場合はアプリが適しています。将来的にテーマを切り替える可能性がある場合も、アプリベースなら影響が少なくて済みます。
長期的なコスト
アプリの場合、毎月のサブスクリプション料金が発生するケースが多いですが、独自開発で外注コストがかさむよりは安く済む場面も。テーマ編集は初期コストが高いものの、月額費用がかからないというメリットがあります。

まとめ

2025 年の EC 市場において、より多くの商品が並ぶ環境下でお客様の目を引くためには、商品バッジ（Shopify 商品バッジ・Shopify 商品アイコン・Shopify 商品ラベルなど）の導入が大いに役立ちます。バッジを使えば「セール中」「残りわずか」「新着アイテム」などを分かりやすく表示でき、視覚的な訴求力を高めることができます。

ただし、あまりに乱用するとストア全体が煩雑になってしまい、逆効果になる恐れもあるため、メリハリをつけた設置が大切です。また、「テーマコード編集」あるいは「アプリ導入」という主な手段にはそれぞれメリットとデメリットがあるので、自社のリソースや必要な機能を考えたうえで選択するとよいでしょう。

もしノーコードで手軽にバッジ機能を導入したい方は、月額 5.99 ドルで使える日本語対応アプリ「シンプル商品バッジ｜お手軽アイコンラベル表示」がおすすめです。テーマのカスタマイズに不慣れな方でも安心して運用でき、見た目のデザイン調整も管理画面上で簡単に行えます。

これからの EC 競争の中で、商品の存在感を際立たせるための“ひと手間”として、ぜひ商品バッジを活用してみてください。

シンプル商品バッジ｜お手軽アイコンラベル表示