2026/05/08

Shopify に残りわずかバッジを設置できるアプリ6選を紹介！

@ 信条刃

今回の記事は Shopify App Store で提供されている、残りわずかバッジ・在庫数表示アプリ についての記事です。商品ページやコレクションページで「残り 3 点！」のような 在庫バッジ を表示し、希少性を訴求して購買率を高めるためのアプリを厳選してご紹介します。

残りわずかバッジ・在庫数表示とは

「残りわずかバッジ」とは、Shopify ストアの商品画像や商品ページに表示される、在庫が少ないことを訴求するためのラベル のことです。テキストで「残り 3 点」のように具体的な数を表示するもの、画像でアイコン的に表現するもの、点滅や揺れアニメーションで目を引くものなど、表現方法はさまざまです。

「在庫数表示」とは、商品の在庫数を画面上に明示することを指します。残りわずかバッジと組み合わせることで、しきい値以下の商品にだけリアルタイムの在庫数を表示でき、より具体的な希少性訴求ができるようになります。

これらの仕組みは、心理学でいう 希少性の原理 を活用したマーケティング手法のひとつであり、お客様の購買意欲を後押しする効果があります。とくに人気商品や売れ筋商品では、カート投入率や購買率の向上に直結する施策として、多くの Shopify ストアで採用されています。

残りわずかバッジ・在庫数表示アプリについて調べるにあたり、以下の記事を参考にしています。

残りわずかバッジを導入する利点

希少性で購買率を高められる
「残り 3 点」「あと 2 個」といった在庫数表示は、希少性の原理を活用してお客様の購買意欲を強く後押しします。
具体的な数字で説得力が増す
「在庫が少ない」と曖昧に伝えるより、実際の数字を示すほうが訴求力は格段に強くなります。テキストバッジで在庫数をリアルタイム表示できれば、説得力のある演出が可能です。
コレクションページや一覧ページでも訴求できる
商品ページだけでなく、コレクションページや検索結果ページでもバッジを表示できれば、ストア全体で在庫の希少性を訴求でき、回遊率も高まります。
運用負荷を増やさず自動化できる
しきい値ベースの自動表示なら、在庫数が変動するたびに自動でバッジが付け外しされるため、手動で管理する必要がありません。
ブランドの世界観に合わせて調整できる
テキスト・画像の切り替え、フォント・カラー・枠線の調整、アニメーションの有無など、見た目を細かく調整できるアプリを選べば、ブランドの世界観を崩さずに導入できます。
PC とスマホで個別に最適化できる
PC とスマートフォンで個別にサイズやフォントを調整できると、どの端末でもきれいに表示でき、UX を損なわずに済みます。

残りわずかバッジアプリの選び方

残りわずかバッジ・在庫数表示アプリは多数提供されていますが、選定する際は以下のポイントを確認するとよいでしょう。

在庫数のしきい値で自動表示できるか
コレクション単位・商品単位の両方に対応しているか
テキストバッジで {quantity} などのプレースホルダーを使えるか
画像バッジ・アニメーションに対応しているか
ホーム・商品・コレクション・検索などページ別の表示制御ができるか
PC・スマホで別々のサイズやフォントを設定できるか
日本語をはじめ多言語に対応しているか

これらの条件を満たすアプリほど、ストアごとの細やかな運用に対応できます。とくに在庫数が頻繁に変動するストアでは「自動化」「{quantity} プレースホルダー対応」「ページ別表示制御」が重要なポイントになります。

残りわずかバッジをテーマのコードで実装する場合のサンプルコード

ここでは、アプリを使わずに「在庫数のしきい値以下になったらバッジを表示する」処理をテーマのコードで実装する場合のサンプルを紹介します。商品カードに対して、Liquid・CSS・JavaScript の 3 ステップで設定します。

Liquid テンプレートに在庫データを埋め込む

product-card.liquid などの商品カードのスニペットで、在庫数を data 属性として埋め込みます。

{% liquid
  assign threshold = 5
  assign first_variant = product.first_available_variant
  assign quantity = first_variant.inventory_quantity | default: 0
%}

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

CSS でバッジのスタイルを設定する

CSS でバッジの位置・色・アニメーションを指定します。商品カードのコンテナに position: relative を付与しておく必要があります。

.product-card__image {
  position: relative;
}

.product-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 4px 8px;
  background-color: #ff3b30;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  animation: badge-pulse 1.5s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

JavaScript で動的に在庫情報を反映する（任意）

Ajax で商品のバリアントを切り替えるテーマでは、バリアント変更時に在庫数を再描画する処理が必要です。下記は商品ページのバリアントセレクト変更時にバッジを更新する例です。

document.addEventListener('DOMContentLoaded', () => {
  const card = document.querySelector('.product-card');
  if (!card) return;

  const threshold = Number(card.dataset.threshold || 0);

  document.addEventListener('variant:change', (event) => {
    const variant = event.detail?.variant;
    if (!variant) return;

    const quantity = variant.inventory_quantity ?? 0;
    let badge = card.querySelector('.product-card__badge');

    if (quantity > 0 && quantity <= threshold) {
      if (!badge) {
        badge = document.createElement('span');
        badge.className = 'product-card__badge';
        card.querySelector('.product-card__image').appendChild(badge);
      }
      badge.textContent = `残り ${quantity} 点！`;
    } else if (badge) {
      badge.remove();
    }
  });
});

このように、テーマ側でバッジを実装することは可能ですが、商品ページごとに個別実装が必要だったり、テーマアップデート時にコードが消えたり、コレクションページや検索結果ページでも統一して動かすには追加の改修が必要だったりと、運用面で多くの注意点が出てきます。

そのため、本記事で紹介したようなアプリを使ってノーコードで実装するほうが、長期的な運用コストを抑えられるケースがほとんどです。

価格比較

アプリ名	料金	特徴・提供サービス
シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示	$2.99/月	コレクション・商品単位の指定、`{quantity}` 動的表示、ページ別制御、20 言語対応
Stock Sheep ‑ Sold & Low Stock	$10〜$30/月（無料プランあり）	在庫ウィジェット + 販売／カートポップアップで多面的に訴求
Appikon ‑ Back In Stock	$19.99〜$49.99/月（無料プランあり）	再入荷通知の老舗。1,400 件超のレビュー実績
Hey!Scarcity Low Stock Counter	$5.99/月（無料プランあり）	パルスアニメーションが特徴的な低在庫ウィジェット
シンプル在庫数表示｜お手軽残りわずか表示	$2.99/月	商品ページのテキスト表示に特化、20 言語対応
Back In Stock ︱Restock Rooster	$4.99〜$44.95/月（無料プランあり）	2 クリック導入の再入荷通知アプリ

Shopify アプリの日本語サポート

アプリ名	日本語サポート
シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示	○
Stock Sheep ‑ Sold & Low Stock	×
Appikon ‑ Back In Stock	×
Hey!Scarcity Low Stock Counter	×
シンプル在庫数表示｜お手軽残りわずか表示	○
Back In Stock ︱Restock Rooster	×

使いやすさ

紹介したアプリの中で最もおすすめなのは、最初にご紹介した 「シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示」 です。

理由は明確で、コレクション単位での自動表示・商品個別での指定・{quantity} プレースホルダーによる在庫数表示・ページ別の表示制御・PC／スマホ別カスタマイズといった、ストア運営者が実際に欲しい機能をひととおり揃えていながら、設定 UI が直感的で迷わないからです。さらに 20 言語に対応しているため、海外向けストアでも日本国内向けストアでも安心して使えます。

複数のアプリを試してみたい場合でも、まずは無料体験ができる本アプリから始めて、効果を確認しながら他アプリと比較してみるのがおすすめです。

終わりに

「残りわずかバッジ」「在庫数表示」は、Shopify ストアで購買率を高めるためのシンプルかつ効果的な施策のひとつです。今回ご紹介したアプリを参考に、ぜひ自店舗に合ったバッジ運用を取り入れてみてください。

参考記事

@ 信条刃

Shopify

サイトTOP お問い合わせ

Shopify に残りわずかバッジを設置できるアプリ6選を紹介！

残りわずかバッジ・在庫数表示とは

残りわずかバッジを導入する利点

残りわずかバッジアプリの選び方

おすすめの残りわずかバッジ Shopify アプリ

シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示 ☆ 迷ったらこれ

特徴・機能

価格設定

Stock Sheep ‑ Sold & Low Stock

特徴・機能

価格設定

Appikon ‑ Back In Stock

特徴・機能

価格設定

Hey!Scarcity Low Stock Counter

特徴・機能

価格設定

シンプル在庫数表示｜お手軽残りわずか表示

特徴・機能

価格設定

Back In Stock ︱Restock Rooster

特徴・機能

価格設定

残りわずかバッジをテーマのコードで実装する場合のサンプルコード

Liquid テンプレートに在庫データを埋め込む

CSS でバッジのスタイルを設定する

JavaScript で動的に在庫情報を反映する（任意）

価格比較

Shopify アプリの日本語サポート

使いやすさ

終わりに

参考記事

最新の記事

目次

関連タグ

Shopify にカードカルーセルを設置できるアプリ6選を紹介！テキスト付き画像で魅せるストアの作り方

Shopify のタイムライン表示アプリ 6 選！沿革・会社概要・ブランドストーリーを魅力的に伝える

Shopify に残りわずかバッジを設置できるアプリ6選を紹介！

Shopify にアコーディオン・折りたたみタブを設置できるアプリ 6 選を紹介！

Shopify にご利用ガイドを設置できるアプリ6選を紹介！

Shopify に最後に売れた時間を表示できるアプリ6選を紹介！