Shopify ストアで在庫数表示・残りわずかバッジを設置する方法とおすすめアプリ

はじめに
記事の構成
Shopify で残りわずかバッジ・在庫数表示はできる？
残りわずかバッジ・在庫数表示を設置するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
- 自動でテーマに追加する（1 クリック追加）
- 手動でテーマに追加する
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

「在庫が残り少ないことを、もっとお客様に伝えて購買を後押ししたい」――そんなニーズを持つ Shopify ストア運営者は少なくありません。在庫の希少性は、心理学でいう 希少性の原理 にもとづく強力な訴求要素であり、商品ページやコレクションページに 残りわずかバッジ や 在庫数表示 を設置することで、カート投入率や購買率の向上が期待できます。

しかし、Shopify のデフォルト機能だけでは、しきい値に応じた自動バッジ表示や、{quantity} のような動的な在庫数の埋め込み、ページごとの表示切り替えなどは標準で対応していません。テーマの Liquid や JavaScript を編集する選択肢もありますが、テーマアップデートでコードが消えるリスクや、運用負荷の増加といった課題が出てきます。

そこで本記事では、Shopify ストアに 残りわずかバッジ と 在庫数表示 を設置する具体的な方法、メリット・デメリット、テーマのコード編集とアプリ導入の比較、そしておすすめアプリ「シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示」の設定手順までを、ストア運営者向けに丁寧に解説します。

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

記事の構成

この記事は以下の流れで解説します。

残りわずかバッジ・在庫数表示の基礎
設置するメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示」の紹介
アプリのインストール・テーマへの追加・設定手順
すぐ使える設定例と運用のコツ
テーマのコード編集で実装する場合のサンプルコード
関連施策との組み合わせ
よくある質問

Shopify で残りわずかバッジ・在庫数表示はできる？

結論から言うと、Shopify のデフォルト機能だけでは、在庫数のしきい値に応じて自動でバッジを表示する仕組みは実現できません。 ただし、以下の 2 つの方法のどちらかを使えば、ストア全体で統一された残りわずかバッジ・在庫数表示を実現できます。

テーマのコード編集で実装する方法：product.variants.first.inventory_quantity などの Liquid 変数を使い、商品カードや商品ページに条件付きでバッジを描画する。
アプリを導入して実装する方法：在庫しきい値に応じて自動でバッジを表示する Shopify アプリを使い、ノーコードで全ページに統一的に展開する。

それぞれにメリット・デメリットがあるので、後ほど詳しく比較します。

残りわずかバッジ・在庫数表示を設置するメリット・デメリット

メリット

1. 希少性の原理で購買率が高まる

「残り 3 点」「あと 2 個」という具体的な数値訴求は、お客様に「今買わないと無くなる」という心理的プレッシャーを与えます。これにより、迷いを生じさせずに購買決定へ導くことができます。とくに以下のような場面で効果的です。

限定商品・セール商品の販売
季節商品・トレンド商品の終売直前
入荷数が限られているコラボ商品

2. 具体的な数字で説得力が増す

「在庫が少ない」と曖昧に伝えるよりも、具体的な在庫数を示すほうが圧倒的に説得力があります。{quantity} のようなプレースホルダーで在庫数をリアルタイム表示できるアプリを選べば、嘘のない訴求が可能になります。

3. コレクションページや検索結果でも回遊率が高まる

商品ページに到達する前のコレクションページや検索結果ページでも、サムネイル画像にバッジが表示されていれば、お客様は「これは早めに買ったほうがよさそうだ」という印象を持ちやすくなります。結果として、商品ページへの遷移率（CTR）も高まります。

4. 運用負荷を増やさずに自動化できる

しきい値ベースで自動表示するアプリを使えば、在庫数の変動に応じてバッジが付いたり消えたりするため、運用担当者が手動で管理する必要はありません。Shopify 側の在庫データに連動するため、整合性も保たれます。

5. ブランドの世界観を崩さず導入できる

テキスト・画像の切り替え、フォント・カラー・枠線・角丸の調整、アニメーションの有無まで、見た目を細かくカスタマイズできるアプリを選べば、ブランドの世界観を崩すことなく自然にバッジを溶け込ませることができます。

デメリット

1. 過剰表示で訴求力が薄まる

すべての商品に「残りわずか」が表示されているストアでは、お客様は「またか」と感じて訴求が伝わらなくなります。しきい値の設定 で、本当に在庫が少ない商品にだけ表示するように調整することが重要です。

2. UI を圧迫するリスク

バッジの位置・サイズを誤ると、商品画像や価格表示を覆い隠してしまう可能性があります。PC とスマートフォンで個別にサイズを設定できるアプリを選�ぶ ことで、このリスクを抑えられます。

3. 過度な煽りはブランド毀損につながる

フラッシュセール感の演出は短期売上には効果的ですが、ハイブランドや上質感を売りにするブランドでは、過度な煽りはブランドイメージを損ねる場合があります。画像バッジ・アニメーションなしのシンプルなテキスト表示 など、ブランドにあった訴求方法を選ぶことが大切です。

テーマのコード編集とアプリ導入の比較

テーマのコード編集で実装する方法

メリット

月額料金がかからない（初期実装コストのみ）
既存テーマの構造に密に合わせた表現ができる
外部サービスへの依存がない

デメリット

Liquid・CSS・JavaScript の知識が必要
テーマアップデートでコードが消える可能性がある
全テンプレート（商品・コレクション・検索・ホームなど）に手を入れる必要がある
バリアント変更時の再描画など細かなロジックを自前で書く必要がある

アプリを導入する方法

メリット

ノーコードで導入できる
ホーム・商品・コレクション・検索などのページに統一的に展開できる
開発元によるアップデートが入るため、新しいテーマにも追従しやすい
バリアント変更や非同期コレクション読み込みなどの細かい挙動も自動で対応されている

デメリット

月額料金が発生する（多くは数ドル〜）
アプリの設定 UI を理解する必要がある
ストアによってはアプリブロックの制限を受ける場合がある

結論：最初はアプリで小さく試すのがおすすめ

テーマのコード編集は技術リソースを多く必要とするため、まずは無料体験のあるアプリで効果を測定し、効果があると判断できた段階で本格運用に切り替えるアプローチが最もリスクが低くおすすめです。多くのアプリは月額数ドルで利用でき、効果が出れば十分にペイします。

アプリのインストール手順

Shopify 管理画面の左下にある「設定」をクリックする

設定をクリック

「アプリ」をクリックし、「Shopify App Store」へ移動する

Shopify App Storeへ移動

検索窓にアプリ名を入力し、表示されたアプリをクリックする

「シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示」を入力し検索する

アプリ詳細画面で「インストール」をクリックする

インストールをクリック

権限の確認画面で内容を確認し、「インストール」をクリックする

インストール完了後のアプリ管理画面

アプリをテーマに追加（有効化）

アプリをインストールしただけでは、まだストアにバッジは表示されません。テーマに「アプリブロック」を追加することで、はじめてバッジが機能するようになります。

自動でテーマに追加する（1 クリック追加）

おすすめは、アプリ管理画面から 1 クリックで追加する方法です。

アプリの管理画面を開く

アプリの管理画面

「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックする

テーマを選択し、テーマに追加をクリックする

テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックする

表示を確認して、保存する

手動でテーマに追加する

特定のページに自分で設置したい場合は、テーマエディタから手動で追加できます。

「オンラインストア」→「テーマ」→「テーマを編集する」を開く

テーマを編集するをクリック

テーマエディタ左上で「埋め込みアプリ」を選択し、本アプリをクリックする

埋め込みアプリをクリックし、アプリを開く

表示位置や設定を確認して「保存する」をクリックする

表示を確認して保存する

アプリの設定項目を理解する

表示条件の設定

どの商品にバッジを表示するかを決めるグループです。コレクション単位での自動表示と、商品個別での指定の両方が利用できます。

コレクション：選択したコレクション内の在庫が少ない商品にバッジを自動表示します。複数選択可能。
商品：個別に選んだ商品にバッジを表示します。コレクション指定と併用も可能。
在庫数のしきい値：この値以下の在庫数になった商品にバッジを表示します（1〜100）。たとえば「5」と設定すると、在庫 5 個以下の商品にだけバッジが付きます。
バッジ非表示の在庫しきい値：この値未満の商品はバッジを非表示にします（0〜100）。「在庫が 0 になったら逆にバッジを消したい」「残り 1 個未満では出さない」といった運用が可能です。

表示条件の設定パネル

表示ページの設定

バッジをどのページで表示するかをチェックボックスで切り替えるグループです。ホーム・商品・コレクション・検索・ブログ・固定ページ・カートの 7 種類のページで、それぞれバッジの表示／非表示を切り替えられます。商品ページとコレクションページのみで表示する、というのが多くのストアにおける基本的な設定パターンです。

表示ページの設定パネル

バッジの設定（種類の選択）

バッジの基本的な種類を選ぶグループです。「テキスト」と「画像」のどちらかから選択できます。

テキストバッジ：{quantity} プレースホルダーを使って在庫数をリアルタイム表示できます。「残り {quantity} 点！」「あと {quantity} 個！」のような具体的な文言で強く訴求できます。
画像バッジ：オリジナルの画像をアップロードし、商品画像の上に重ねて表示します。ハイブランドでも違和感なく使える点がメリットです。

バッジの種類設定パネル

バッジの画像設定（画像バッジ向け）

「バッジの種類」を画像にした場合に使うグループです。画像のアップロード、PC・スマホそれぞれのサイズ、表示位置、アニメーション、上下左右の余白などを細かく設定できます。

バッジの画像：オリジナル画像をアップロードします。背景透過 PNG が商品画像になじみやすくおすすめです。
バッジの縦幅・横幅（PC／スマホ）：PC とスマホでそれぞれ縦幅・横幅を px 単位で設定できます。
バッジの位置：左上・右上・左下・右下の 4 つから選択。
バッジのアニメーション：「なし・点滅・揺れ」の 3 種類から選択。フラッシュセール感を演出したい場合は点滅、カジュアルなブランドで目を引きたい場合は揺れ、落ち着いた印象に仕上げたい場合は「なし」がおすすめです。
バッジの上下余白／左右余白：マイナス値も指定でき、商品画像から少しはみ出すような演出も可能です。

バッジの画像設定パネル

バッジのテキスト設定（テキストバッジ向け）

「バッジの種類」を テキスト にした場合に使うグループです。{quantity} を使った動的表示や、文字色・背景色・フォントサイズ・太さ・枠線・角丸まで細かく設定できます。

バッジのテキスト：{quantity} で在庫数を動的表示。例：「残り {quantity} 点！」 → 在庫 3 個の商品では「残り 3 点！」と表示されます。
バッジのテキストサイズ（PC／スマホ）：PC とスマホでそれぞれフォントサイズを px 単位で設定（10〜40px）。スマホでは少し大きめにすると視認性が向上します。
バッジのテキストの太さ：100〜900 の範囲で文字の太さを設定。目立たせたい場合は 700 以上、落ち着いた印象には 400 前後がおすすめ。
バッジの文字色／背景色：カラーピッカーで指定。背景色を空にすると透明になります。
バッジの枠線の太さ／色／丸み：枠線の太さ（0〜40px）、色、角丸（0〜100px）を細かく設定可能。大きい角丸でピル状（カプセル状）バッジも作れます。
バッジの重なり順（z-index）：他要素に隠れる場合は値を大きくして前面に表示。

バッジのテキスト設定パネル

その他の設定（追加 CSS）

用意された設定項目では実現できないカスタマイズを行いたい場合は「追加の CSS」を使用します。ブラウザの検証機能でカスタマイズしたい要素のクラス名を確認し、CSS で上書きできます。「特定の画面でだけ位置を変えたい」「フォントを変えたい」といった上級者向けのニーズに活用できます。

その他の設定パネル

クールダウンと再表示制御

「クールダウン」とは、お客様が一度バッジを見たあと、再度同じバッジを表示するまでの時間制御を指します。本アプリでは Liquid 側で在庫数のしきい値ベースに描画する設計のため、Cookie などによるクールダウン機能は提供していませんが、「バッジ非表示の在庫しきい値」 を活用することで、在庫が極端に少ない（残り 0 個など）商品でバッジを非表示にする運用が可能です。

たとえば、hide_threshold を 1 に設定すると、在庫が 0 個になった商品ではバッジを表示せず、SOLD OUT 表示などに切り替える運用ができます。

すぐ使えるおすすめ設定例

ECモール風の強い煽り設定

バッジの種類：テキスト
表示条件：在庫数のしきい値 5、非表示しきい値 1
バッジテキスト：「残り {quantity} 点！」
文字色：白、背景色：濃い赤、フォントウェイト：700
位置：左上、アニメーション：点滅
表示ページ：ホーム・商品・コレクション・検索

ハイブランド風の控えめ設定

バッジの種類：画像（ブランドアイコン）
表示条件：在庫数のしきい値 3、非表示しきい値 0
位置：右下、アニメーション：なし
余白：上下 12px・左右 12px
表示ページ：商品ページのみ

コレクションページ特化の訴求設定

バッジの種類：テキスト
表示条件：特定コレクションのみ、在庫数のしきい値 10
バッジテキスト：「あと {quantity}」、フォントサイズ 14px
位置：右上、アニメーション：揺れ
表示ページ：コレクションのみ

文言のテンプレ例

「残り {quantity} 点！」（標準的な訴求）
「ラスト {quantity} 個！」（ECモール風）
「在庫 {quantity} 個」（事務的・落ち着いた印象）
「あと少し（残り {quantity}）」（ソフトな訴求）
「Only {quantity} left!」（英語ストア向け）

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

ここでは、アプリを使わずにテーマのコード編集で残りわずかバッジを実装する場合のサンプルコードを紹介します。

実装の流れ

商品カード／商品ページの Liquid に在庫数の判定ロジックを追加
CSS でバッジのスタイルとアニメーションを設定
JavaScript でバリアント変更時の再描画処理を実装

HTML（Liquid）を追加

商品カードのスニペット（product-card.liquid など）に以下を追加します。

{% liquid
  assign threshold = 5
  assign hide_threshold = 1
  assign first_variant = product.first_available_variant
  assign quantity = first_variant.inventory_quantity | default: 0
  assign should_show_badge = false
  if quantity >= hide_threshold and quantity <= threshold
    assign should_show_badge = true
  endif
%}

<div class="ur-product-card" data-stock="{{ quantity }}" data-threshold="{{ threshold }}">
  <div class="ur-product-card__image-wrap">
    <img class="ur-product-card__image"
         src="{{ product.featured_image | image_url: width: 600 }}"
         alt="{{ product.title | escape }}">
    {% if should_show_badge %}
      <span class="ur-product-card__badge ur-product-card__badge--text"
            data-quantity="{{ quantity }}">
        残り {{ quantity }} 点！
      </span>
    {% endif %}
  </div>
  <h3 class="ur-product-card__title">{{ product.title }}</h3>
</div>

CSS を追加

base.css などに以下のスタイルを追加します。

.ur-product-card__image-wrap {
  position: relative;
  overflow: hidden;
}

.ur-product-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background-color: #ff3b30;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  white-space: pre-wrap;
  line-height: 1.4;
  pointer-events: none;
  animation: ur-badge-flashing 1.5s ease-in-out infinite;
}

@keyframes ur-badge-flashing {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (max-width: 767px) {
  .ur-product-card__badge {
    font-size: 10px;
    padding: 3px 6px;
  }
}

JavaScript を追加

バリアント変更や非同期コレクション読み込みに対応するため、MutationObserver を使ったスクリプトを追加します。

(() => {
  const SELECTOR = '.ur-product-card';
  const BADGE_CLASS = 'ur-product-card__badge';
  const TEMPLATE = (qty) => `残り ${qty} 点！`;

  const renderBadge = (card) => {
    const quantity = Number(card.dataset.stock || 0);
    const threshold = Number(card.dataset.threshold || 0);
    const wrap = card.querySelector('.ur-product-card__image-wrap');
    if (!wrap) return;

    let badge = wrap.querySelector(`.${BADGE_CLASS}`);
    const shouldShow = quantity >= 1 && quantity <= threshold;

    if (shouldShow) {
      if (!badge) {
        badge = document.createElement('span');
        badge.className = `${BADGE_CLASS} ${BADGE_CLASS}--text`;
        wrap.appendChild(badge);
      }
      badge.textContent = TEMPLATE(quantity);
    } else if (badge) {
      badge.remove();
    }
  };

  const apply = () => {
    document.querySelectorAll(SELECTOR).forEach(renderBadge);
  };

  // 初回描画
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', apply);
  } else {
    apply();
  }

  // DOM 変更時に再描画（デバウンス付き）
  let timer;
  new MutationObserver(() => {
    clearTimeout(timer);
    timer = setTimeout(apply, 300);
  }).observe(document.body, { childList: true, subtree: true });
})();

コード実装の注意点

テーマアップデートでコードが消える：テーマのバージョンを上げる際は、編集箇所を再適用する手間が発生します。
すべての描画箇所に手を入れる必要がある：商品カードは商品ページ・コレクションページ・検索結果ページ・関連商品など複数の場所で描画されます。それぞれに手を入れる必要があります。
バリアント切り替え時の再描画：Ajax でバリアントを切り替えるテーマでは、バリアント変更イベントを購読してバッジを更新する必要があります。
ページキャッシュ：在庫情報は変動するため、HTML にキャッシュが効きすぎると古い数字が表示される可能性があります。
多言語対応：テキストの翻訳は別途仕組みが必要です。

これらの保守性・運用性のリスクを総合的に考えると、ノーコードで使える 「シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示」 のようなアプリで実装するのが、長期的には最もコスパの良い選択肢になります。

運用のコツ

しきい値は商品カテゴリごとに見直す：消耗品とハイブランド商品では「残り少ない」と感じる数が異なります。在庫の総数や販売スピードに応じて、しきい値を調整してください。
画像バッジ用の素材は SVG / 透過 PNG を使う：商品画像になじませるため、背景透過の画像が望ましいです。
A/B テストで効果を測定する：バッジを設置する前後で、商品ページのコンバージョン率を比較しましょう。Shopify Analytics の「商品の表示」「カートの追加」「購入」のファネルで効果を確認できます。
本当に在庫が少ない商品にだけ表示する：バッジは「貴重な訴求要素」として、ここぞというときに使うのが効果的です。
テーマを変更する際は表示確認を必ず行う：テーマ更新時には、対象テーマでバッジが正しく表示されるか確認しましょう。