【2025年】Shopifyの商品にセールラベルを表示する方法は？おすすめアプリも紹介！

はじめに
Shopify の商品にセールラベルを表示するとは？
Shopify の商品にセールラベルを表示するメリット・デメリット
- セールラベルを表示するメリット
- セールラベルを表示するデメリット・注意点
Shopify でセールラベルを表示する 3 つの方法
テーマのカスタマイズでセールラベルを表示する
- メリット
- デメリット
テーマのコードを編集してセールラベルを表示する
アプリを利用してセールラベルを表示する
- メリット
- デメリット
おすすめアプリ「シンプル商品バッジ｜お手軽アイコンラベル表示」の紹介
- アプリ概要
- 主な機能と特徴
「シンプル商品バッジ｜お手軽アイコンラベル表示」のインストール手順と簡単な使用方法
テーマのコード編集で実装する場合のサンプルコード
まとめ
参考記事

はじめに

Shopify を活用したオンラインストア運営が急速に普及している昨今、商品一覧や商品詳細ページに「セールラベル」を表示してユーザーの目を引きたいと考えている方は多いのではないでしょうか。セール期間中の商品や、特別価格の商品をパッと見てわかりやすくすることで、ユーザーを購入へ誘導しやすくなるのが大きなメリットです。

しかし、「実際に Shopify でセールラベルを表示するには、どのような方法があるの？」「テーマ編集やコード編集を自力で行うのは難しそう……」「もっと手軽にラベルを表示できるアプリはないの？」といった疑問があるかもしれません。

本記事では、Shopify ストアにセールラベルを表示する 3 つの方法（テーマカスタマイズ・テーマのコード編集・アプリの利用）を解説し、それぞれのメリット・デメリットや実装のポイントを紹介します。特に初心者でも簡単に導入しやすいおすすめアプリ「シンプル商品バッジ｜お手軽アイコンラベル表示」については、インストール方法から基本的な設定手順まで詳しく取り上げるので、ぜひ最後までご覧ください。

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

Shopify の商品にセールラベルを表示するとは？

「セールラベル」とは、その名の通り「SALE」「特価」「割引」などの文字やアイコンを商品画像に重ねる形で表示する仕組みを指します。英語圏のストアでは「Sale Badge」「Sale Label」などと呼ばれることも多く、ユーザーにとっては商品ページを視覚的にスキャンしながら、お買い得情報を瞬時に認識できるのが最大のメリットです。

Shopify では、ストアに標準搭載されている機能で簡単にセールラベルを表示できるテーマもありますが、そういった機能がないテーマや、より高度なデザインのラベルを表示したい場合には、テーマのコードを編集したり、アプリを利用したりすることで柔軟に対応が可能です。

Shopify の商品にセールラベルを表示するメリット・デメリット

セールラベルを設定するメリットを理解し、あわせてデメリットや注意点についても把握しておきましょう。

セールラベルを表示するメリット

メリットのイメージ

1. ユーザーの目に留まりやすい
セールラベルが商品画像に貼り付けられていると、通常価格の商品との差別化が一目でわかります。数ある商品一覧の中でも特価品やセール品を際立たせやすく、ユーザーを商品詳細ページへ誘導しやすくなります。

2. 訴求力・購買意欲の向上
「SALE」「特価」「○％ OFF」などのラベルがあるだけで、ユーザーに「お得感」を訴求できます。特に割引率や在庫限りなどの文言を加えると、購買意欲を高めやすくなり、注文数の増加が期待できます。

3. 簡単なマーケティング施策
大掛かりなデザイン変更や、複雑なキャンペーンシステムを導入しなくても、画像上にセールラベルを付けるだけで簡単に「セール感」を演出できます。ラベルのデザインや内容を変えるだけで、さまざまな施策に対応可能です。

セールラベルを表示するデメリット・注意点

デメリットのイメージ

1. デザインの整合性
セールラベルがサイトのビジュアルイメージから浮いてしまうと、統一感が損なわれる可能性があります。ブランドイメージを大切にしたい場合は、ラベルの形状や色使いに注意しましょう。

2. 大量商品への適用
セール商品が数多くある場合、一括設定できる仕組みを整えないと管理が煩雑になります。どの商品にラベルを付与したのか、またいつラベルを外すのかなど、在庫・価格変更に合わせた運用が必要です。

3. 無節操な使いすぎ
セールラベルを多用しすぎると、ショップ全体が「常にセールをしている」印象となり、逆に緊急性が薄れてしまうことも。また、全商品をセール対象にしてしまうと、本当にアピールしたい商品が埋もれる可能性があります。

Shopify でセールラベルを表示する 3 つの方法

Shopify でセールラベルを表示する主な方法として、以下の 3 つが挙げられます。

テーマのカスタマイズ機能でラベルを設定する
テーマのコードを編集して実装する
アプリを利用してノーコードで実装する

それぞれの方法にメリット・デメリットがあるので、順番に解説していきます。

テーマのカスタマイズでセールラベルを表示する

Shopify のテーマによっては、商品に対して自動的にセールラベル（または「Sale」などのタグ）を表示する機能を備えているものがあります。とくに公式テーマや有名なサードパーティテーマでは、割引設定がある商品に対してラベルを表示する機能がデフォルトで実装されているケースもあります。

テーマカスタマイズ画面

メリット

コード不要
テーマのカスタマイズ画面でオン・オフやテキストを設定するだけで実装できるため、プログラミング知識が不要です。
テーマアップデートの影響を受けにくい
テーマが提供する標準機能を利用するため、アップデート時に大きく崩れる心配が比較的少ないです。
表示の一貫性
テーマ内部のデザインとして設定されている場合が多いため、他の要素との整合性が保ちやすいです。

デメリット

テーマ依存
すべてのテーマがセールラベル機能を備えているわけではありません。ラベルのデザインや場所、表示条件などを細かく変更しにくい場合もあります。
カスタマイズ性の制限
テーマに用意された設定以上の自由度を求める際には、結局コード編集が必要になる場合があります。
複数パターンのセールラベルに対応しづらい
同時期に異なる種類のセールラベルを使いたい場合など、標準機能だけでは賄えないケースもあります。

もし使用中のテーマにセールラベル表示機能が備わっているなら、まずはテーマカスタマイズ画面を確認してみましょう。そこにラベル関連の設定があれば、ほとんど手間なく導入できます。

テーマのコードを編集してセールラベルを表示する

テーマのコード（Liquid や CSS、JavaScript）を直接編集し、割引額や「SALE」などの文字を表示する方法もあります。基本的なアイデアとしては、商品に割引が適用されているかどうかを Liquid コードで判定し、該当する場合に HTML 要素を出力してラベルを重ねているだけです。

テーマのコード編集画面

メリット

自由度の高さ
デザイン・位置・表示条件など、すべてを自分好みに設定できます。他の機能との連携や高度な条件分岐も可能です。
既存の仕組みに合わせやすい
既に導入しているカスタマイズと合わせて、一体的に管理できるため、ストア全体のコードを統一したい場合に便利です。
外部アプリに依存しない
アプリをインストールしないので、余分なコストや外部スクリプトの読み込みが発生しません。

デメリット

コーディング知識が必要
HTML・CSS・Liquid の基本を理解していないと、テーマの編集はハードルが高いです。誤った編集でレイアウト崩れや動作不良を起こすリスクもあります。
テーマアップデート時のメンテナンス
テーマを更新すると、編集したコードが上書きされる恐れがあります。アップデートのたびに修正内容を再適用する手間が発生する場合も多いです。
複雑化のリスク
大掛かりなカスタマイズを重ねると、コードが煩雑になりやすく、運用負荷が高まります。

セールラベルをコード編集で実装する簡単なサンプルコード

以下は、商品が割引価格になっている（compare_at_price が price より高い）場合に「SALE」ラベルを表示する Liquid のサンプル例です。実際のテーマによってテンプレート構造は異なりますが、product-card や product-grid といったファイルに下記のようなコードを追加するイメージです。

<!-- 商品画像のラッパー要素（例: product-grid-item など）の中 -->
<div class="product-card-image-wrapper">
  <!-- 既存の画像表示コード -->
  <a href="{{ product.url }}">
    <img src="{{ product.featured_image | img_url: '500x' }}" alt="{{ product.title }}">
  </a>

  <!-- 割引の判定ロジック -->
  {% if product.compare_at_price > product.price %}
    <div class="sale-label">
      SALE
    </div>
  {% endif %}
</div>

<style>
  .sale-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ff0000;
    color: #ffffff;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
  }
  .product-card-image-wrapper {
    position: relative;
  }
</style>

compare_at_price が存在し、かつ compare_at_price > price の場合にセールが成立しているとみなし、sale-label クラスを持つ要素を表示しています。
ラベルの見た目は CSS で制御し、赤背景・白文字などのスタンダードなセール感を演出しています。

このようにコード編集で柔軟に表示できますが、メンテナンス性や実装難易度を考慮すると、あまり大掛かりにしない方が無難です。今後テーマをアップデートする予定がある方や、プログラミングが苦手な方には、次に紹介する「アプリの利用」が最もおすすめになります。

アプリを利用してセールラベルを表示する

Shopify アプリを使えば、ノーコード・少ないステップでセールラベルを表示できます。特に「テキストやアイコンを自由に変更したい」「特定の商品やコレクションだけにラベルを表示したい」といった柔軟な対応を行いたい場合や、ラベルの管理をひとつの画面で行いたい場合にはアプリの導入がおすすめです。

Shopify App Store

メリット

ノーコードで実装可能
テーマ編集やコード編集をする必要がなく、アプリの管理画面やテーマエディタ上で完結します。
複数ラベルやデザインパターンの管理がしやすい
たとえば「SALE」「NEW」「残りわずか」など、さまざまなバッジを一括管理できるアプリも多いです。
アップデートや不具合に対するサポート
アプリ開発会社がサポートを提供している場合も多く、トラブル時に問い合わせできるのは安心材料です。

デメリット

コストがかかる場合が多い
無料アプリもありますが、セールラベル機能に特化したアプリは有料（サブスクリプション）のケースが少なくありません。
外部スクリプトの読み込み
アプリによっては余計なスクリプトが追加され、ページ読み込み速度への影響が生じる可能性があります。
アプリ同士の競合
複数のアプリを使っていると、コードが競合して想定外の表示や不具合が起きる場合があります。

こうしたメリット・デメリットを踏まえても、ノーコードでセールラベルを導入できるアプリは非常に魅力的です。運用担当者にコーディングの知識が少ない場合や、セールラベルを高度に活用していきたい場合には特におすすめです。

「シンプル商品バッジ｜お手軽アイコンラベル表示」のインストール手順と簡単な使用方法

本アプリの詳細な利用ガイドは、公式サイトのご利用ガイドに掲載されています。ここでは、その内容を一部抜粋しながら基本的な流れを紹介します。

アプリをインストールする

Shopify アプリストアで「シンプル商品バッジ｜お手軽アイコンラベル表示」と検索してください。もしくはこちらのリンクからアプリ詳細ページへアクセスしてください。
アプリの詳細ページから「インストール」ボタンをクリックし、インストールを始めます。
Shopify の管理画面で再度権限の確認などがあります。問題なければ、「インストール」ボタンでインストールを完了してください。
アプリの管理画面が表示されれば、インストールは完了です。

この段階で、7 日間の無料トライアルが始まります。無料期間のうちに一通りの機能を試してみて、実際に実現したいレンタル販売の要件に合うかどうか判断しましょう。

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

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

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

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

アプリのカスタマイズ

テーマにアプリブロックを追加することができたら、そのアプリブロックで表示する商品ラベルをカスタマイズすることができます。
今回は例として、特定の商品にテキスト「セール」アイコンを表示する方法を解説していきます。

追加されたアプリブロックを選択して、カスタマイズ項目を表示してください。
「バッジを表示する商品の設定」で、任意の商品を選択してください。商品単位ではなくコレクション単位でバッジを表示する商品を選択することもできます。
「バッジの設定」で、選択した商品に表示するバッジの設定をします。今回は画像を使用せずテキストのみのバッジを表示したいので、「バッジのテキスト」に「セール」を入力してください。
バッジのテキストサイズ、太さ、文字色、背景色などをカスタマイズします。変更はテーマカスタマイズ画面に表示されるので、画面を見ながらお好みのデザインに調整してください。
バッジの縦横幅、位置、上下左右の余白を適宜カスタマイズします。
デザインの調整が完了したら、保存するボタンをクリックして変更を保存してください。

「セール」ラベルとは、別に「New」のようなラベルを併用することもできます。商品バッジを併用する場合は、同様の手順で、もう一つアプリブロックを追加して、同じように設定を繰り返してください。

テーマのコード編集で実装する場合のサンプルコード

前述のアプリを使えばノーコードで手軽に実装できますが、テーマのコード編集でラベルを実装したい方向けにもう少し詳細なサンプルを紹介します。ここでは、割引率を自動計算して表示する例を示します。

<!-- ▼▼ セールラベル表示サンプル ▼▼ -->
{% assign discount_rate = 0 %}
{% if product.compare_at_price > product.price %}
  {% assign diff = product.compare_at_price | minus: product.price %}
  {% assign discount_rate = diff | divided_by: product.compare_at_price | times: 100 | floor %}
{% endif %}

<div class="product-card-image-wrapper">
  <a href="{{ product.url }}">
    <img src="{{ product.featured_image | img_url: '500x' }}" alt="{{ product.title }}">
  </a>

  {% if discount_rate > 0 %}
    <div class="sale-label">
      {{ discount_rate }}% OFF
    </div>
  {% endif %}
</div>

<style>
  .product-card-image-wrapper {
    position: relative;
  }
  .sale-label {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #e62e2e;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
  }
</style>
<!-- ▲▲ セールラベル表示サンプル ▲▲ -->

discount_rate は割引率（パーセント）を計算して保持し、その値が 0 より大きければラベルを表示する仕組みです。
floor フィルターで小数点を切り捨て、整数値にしています。
CSS で背景色やフォントを整えてあり、例えば赤と白のコントラストでセール感を出しています。

運用時には、テーマファイルのバックアップを必ず取り、編集箇所を記録しておきましょう。また、複雑なカスタマイズや複数パターンのラベル切り替えを考えている場合は、アプリ導入の方がスマートな選択かもしれません。

まとめ

本記事では、Shopify でセールラベルを表示する方法として、以下の 3 つを取り上げました。

テーマのカスタマイズ機能
- テーマにセールラベル機能がある場合は最速・最簡単
- しかし、機能を備えていないテーマも多く、デザインの自由度は限定的
テーマのコード編集
- コーディングスキルがあれば柔軟なデザインや高度な判定が可能
- テーマのアップデートで修正が必要になるリスクやメンテナンス負荷が大きい
アプリを利用
- ノーコードで導入でき、複数ラベルを手軽に管理できる
- 有料アプリの場合、コストがかかるがサポートやアップデート面で安心

特に初心者や、テーマの大幅改変を避けたい方、短期間で効果的なセール施策を打ちたい方には、アプリを使う方法がおすすめです。今回紹介した「シンプル商品バッジ｜お手軽アイコンラベル表示」なら、ノーコードでラベルを簡単に追加でき、商品数が増えても一括管理しやすいというメリットがあります。セール時期だけでなく、季節限定商品や在庫少量のアピール、新着アイテムのお知らせなど、さまざまな使い方ができるのも魅力です。

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

運営規模やスタッフのスキル、ストアのブランディング方針に合わせて最適な導入方法を選び、セールラベルを活用してショップをさらに盛り上げていきましょう。
最後まで読んでいただきありがとうございました。