0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Shopify で残りわずかバッジを表示するおすすめアプリ5選

0
Posted at

はじめに

2026 年現在、EC 市場は引き続き拡大を続けており、その中でも Shopify を利用する事業者は世界的に増加しています。日本国内でも、コーディング知識がなくても本格的なオンラインストアを開設できる手軽さから、Shopify でショップを立ち上げる事業者が年々増えてきました。

そんな中、ストア運営者にとって重要なテーマのひとつが 「在庫の希少性訴求」 です。具体的には、商品ページやコレクションページに 「残りわずか」「在庫数表示」「在庫バッジ」 といった視覚的な訴求要素を入れて、お客様の購買意欲を後押しする施策が注目されています。

しかし、残念ながら Shopify のデフォルト機能だけでは、在庫数のしきい値に応じて自動でバッジを表示する仕組みを実現することができません。 そのため、多くの事業者は アプリ を活用し、在庫数に応じたバッジ表示を自動化しています。

この記事では、

  • Shopify における「残りわずかバッジ」「在庫数表示」の基礎
  • バッジを設置するメリット・デメリット
  • そして Shopify ストアで 在庫が少ない商品に自動でバッジを表示 できる 5 つ のアプリ

をまとめてご紹介します。最初にご紹介する 「シンプル残り僅かバッジ|お手軽コレクションページ在庫数表示」 は、コレクション単位での自動表示や、{quantity} プレースホルダーによる在庫数のリアルタイム表示など、設定が直感的で使いやすいため、ボリュームを多めに丁寧に解説します。ぜひ参考にしてみてください。

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

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

「残りわずかバッジ」 とは、Shopify ストアの商品画像や商品ページに表示される、在庫が少ないことを訴求するためのラベル のことです。代表的なバリエーションには以下のようなものがあります。

  • テキストバッジ:「残り3点!」「あと2個!」のように、テキストで在庫数を強調表示する
  • 画像バッジ:オリジナルのアイコンやスタンプ画像で「残りわずか」を視覚的に表現する
  • アニメーション付きバッジ:点滅や揺れアニメーションで目を引かせる

このような 在庫バッジ は、商品を「数量限定」のように演出し、お客様の購買行動を後押しする効果が期待できます。とくに人気商品や売れ筋商品で活用すると、カート投入率(Add to Cart Rate)購買率(Conversion Rate) の向上に直結します。

Shopify で残りわずかバッジを表示するメリットとデメリット

メリット

  1. 希少性による購買率の向上
    「残りわずか」という訴求は、心理学でいう 希少性の原理 を活用したマーケティング手法です。在庫が少ないことを示すバッジは、お客様の「今買わないと無くなるかも」という購入の後押しになります。

  2. 具体的な数字で説得力アップ
    「在庫が少ない」と曖昧に伝えるよりも、「残り 3 点」「あと 2 個」のように具体的な数字を提示するほうが、訴求力は格段に強くなります。在庫数表示はまさにその役割を果たします。

  3. コレクションページでも目を引ける
    商品ページだけでなく、コレクションページや検索結果ページの一覧表示でもバッジを表示できれば、ストア全体で在庫の希少性を訴求でき、回遊率と購買率の双方を高められます。

  4. 運用負荷ゼロで自動化できる
    しきい値ベースで自動表示するアプリを使えば、在庫が変動しても自動的にバッジが付け外しされるため、運用担当者が手動で管理する必要がありません。

デメリット

  1. 過剰表示で訴求力が薄まる
    どの商品にも「残りわずか」が表示されているストアでは、お客様は「またか」と感じて訴求が伝わらなくなります。本当に在庫が少ない商品にだけ表示する設計が重要です。

  2. 設定によっては UI を圧迫する
    バッジの位置やサイズを誤ると、商品画像や価格が見づらくなり、UX を損なう恐れがあります。PC とスマートフォンで個別にサイズ調整できるアプリを選ぶと安心です。

Shopify のデフォルト機能では残りわずかバッジを表示できない

Shopify のデフォルト機能では、在庫数のしきい値に応じて自動でバッジを表示する仕組みは用意されていません。 商品ページに在庫数を表示する Liquid 変数(product.variants.first.inventory_quantity など)はありますが、

  • しきい値に応じて表示・非表示を切り替える
  • 商品画像の上にバッジとしてオーバーレイ表示する
  • コレクションページや検索結果ページの一覧でも統一的に表示する
  • PC・スマホで個別にスタイルを調整する

といった一連の挙動を実現するには、テーマの Liquid・CSS・JavaScript を編集する必要があり、運用ハードルが高くなります。そのため、ノーコードで実現できる アプリの導入 が現実的な選択肢となります。

Shopify で残りわずかバッジを表示できるアプリ 5 選

ここからは、実際に Shopify ストアで残りわずかバッジを表示できるアプリを 5 つご紹介します。

シンプル残り僅かバッジ|お手軽コレクションページ在庫数表示

はじめに

最初にご紹介するのは、株式会社 UnReact が提供する 「シンプル残り僅かバッジ|お手軽コレクションページ在庫数表示」 です。

このアプリは、Shopify ストアにおいて 在庫が少ない商品に自動でバッジを表示できるアプリ です。コレクションを選んでまとめて適用したり、商品を個別に選んで指定したり、ストアごとの運用に合わせて柔軟に使えます。テキストバッジでは {quantity} プレースホルダーを使って在庫数をリアルタイム表示でき、画像バッジへの切り替え、点滅・揺れアニメーションにも対応しています。

シンプル残り僅かバッジのアプリストアヘッダー画像

ノーコードでテーマに追加でき、管理画面は日本語をはじめ 20 言語に対応しているため、海外向けストア運営にも安心して使えます。料金は Basic Plan $2.99/月 で、7 日間の無料体験つきです。年払いを選ぶと実質 2 ヶ月分無料でお得にご利用いただけます。

できること

このアプリでできることを、機能ごとに見ていきましょう。

様々なページに在庫数表示を追加できる

ホーム、商品、コレクション、検索、ブログ、固定ページ、カートの各ページごとに、バッジの表示・非表示をチェックボックスで切り替えられます。「商品ページとコレクションページでだけ見せたい」「カート画面では出したくない」といった細かいニーズにも、コーディングなしで対応できます。

様々なページに在庫数表示を追加できる

画像やテキストのバッジを追加できる

バッジは「テキスト」「画像」の 2 種類から選べます。テキストバッジでは {quantity} を入れるだけで、その時点の在庫数に自動で置き換わります。「残り 3 点!」「あと 2 個!」のように具体的な数を伝えられるのが大きな特徴です。ブランドの世界観に合わせて画像バッジを使えば、よりオリジナリティのある表現も可能です。

画像やテキストのバッジを追加できる

ノーコードで見た目をカスタマイズできる

バッジの位置(左上・右上・左下・右下)、上下左右の余白、サイズ、文字色、背景色、枠線の太さ・色・角丸、フォントサイズ・太さなど、見た目に関わる項目はすべてテーマエディタから直感的に設定できます。点滅や揺れのアニメーションを加えれば、より目立たせることもできます。

ノーコードで見た目をカスタマイズできる

1クリックでテーマに追加できる

アプリ管理画面から、追加したいテーマを選んで「テーマに追加」をクリックするだけ。テーマエディタが自動で開き、表示位置や設定を確認して保存すれば、すぐにバッジを表示できるようになります。コーディングは一切不要です。

1クリックでテーマに追加できる

アプリのインストール

アプリストアからインストールして、すぐにご利用いただけます。

シンプル残り僅かバッジ|お手軽コレクションページ在庫数表示|Shopify アプリストア

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

設定をクリック

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

Shopify App Storeへ移動

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

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

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

インストールをクリック

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

アプリ管理画面

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

アプリをテーマに追加

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

自動でテーマに追加する(1 クリック追加)

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

アプリの管理画面を開く

アプリの管理画面

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

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

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

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

手動でテーマに追加する

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

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

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

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

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

表示を確認し、問題なければ「保存する」をクリック

表示を確認して保存する

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

ここからは、バッジブロックの主な設定項目について解説します。

表示条件の設定

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

  • コレクション:選択したコレクション内の在庫が少ない商品にバッジを自動表示します。複数選択可。
  • 商品:個別に選んだ商品にバッジを表示します。
  • 在庫数のしきい値:この値以下の在庫数になった商品にバッジを表示します(1〜100 で設定)。
  • バッジ非表示の在庫しきい値:この値未満の在庫数の商品はバッジを非表示にします(0〜100 で設定)。0 で常に表示。

表示条件の設定パネル

表示ページの設定

ホーム・商品・コレクション・検索・ブログ・固定ページ・カートの各ページで個別に表示・非表示を切り替えられます。「商品ページとコレクションページでだけ見せたい」「カート画面では出したくない」といった運用に合わせて柔軟に組み合わせられます。

表示ページの設定パネル

バッジの設定(種類の選択)

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

  • テキスト:文章でしっかりアピールしたいときにおすすめ。{quantity} を使うと在庫数をリアルタイム表示できます。
  • 画像:あらかじめ用意したロゴやアイコンを使い、ブランドの世界観に合わせたい場合に便利です。

バッジの種類設定パネル

バッジの画像設定(画像バッジ向け)

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

  • バッジの画像:オリジナル画像をアップロードします。背景透過 PNG が商品画像になじみやすくおすすめです。
  • バッジの縦幅・横幅(PC/スマホ):PC とスマホでそれぞれ縦幅・横幅を px 単位で設定できます。
  • バッジの位置:「左上・右上・左下・右下」から選択できます。商品画像のどの角にバッジを置くかを決められます。
  • バッジのアニメーション:「なし・点滅・揺れ」の 3 種類から選べます。バッジを目立たせたい場合は点滅や揺れを、控えめに見せたい場合は「なし」を選びましょう。
  • バッジの上下余白/左右余白:マイナス値も指定でき、商品画像から少しはみ出すような演出も可能です。

バッジの画像設定パネル

バッジのテキスト設定(テキストバッジ向け)

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

  • バッジのテキスト:「残り {quantity} 点!」のように設定すると、在庫 3 個の商品では「残り 3 点!」と動的表示されます。
  • バッジのテキストサイズ(PC/スマホ):PC とスマホでそれぞれフォントサイズを px 単位で設定できます(10〜40px)。
  • バッジのテキストの太さ:100〜900 の範囲で文字の太さを設定できます。
  • バッジの文字色/背景色:カラーピッカーで指定できます。背景色を空にすると透明になります。
  • バッジの枠線の太さ/色/丸み:枠線の太さ(0〜40px)、色、角丸(0〜100px)をそれぞれ設定できます。
  • バッジの重なり順(z-index):他要素の下に隠れる場合は値を大きくして前面に表示します。

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

その他の設定(追加 CSS)

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

その他の設定パネル

おわりに

「シンプル残り僅かバッジ|お手軽コレクションページ在庫数表示」は、コレクション単位・商品単位の柔軟な指定、{quantity} を使った在庫数リアルタイム表示、画像/テキストの切り替え、3 種類のアニメーション、ページごとの表示制御など、ストアごとの運用に合わせた細やかなカスタマイズが可能 な残りわずかバッジアプリです。

特に、コレクションを選ぶだけで自動でバッジを付けられる手軽さは、運用工数を増やしたくないストア運営者にとって大きな魅力です。

シンプル残り僅かバッジ|お手軽コレクションページ在庫数表示|Shopify アプリストア からインストールいただけます。詳しいご利用ガイドは こちら をご覧ください。

Hey!Scarcity Low Stock Counter

Hey!Scarcity Low Stock Counter のアプリストア画像

アプリ概要

項目 内容
アプリ名 Hey!Scarcity Low Stock Counter
開発者 Minimate Apps
価格設定 無料プランあり / Premium $5.99/月(7 日間の無料体験あり)
主な機能・特徴 在庫レベル表示、商品ページ・コレクションページでの低在庫メッセージ、パルスアニメーション、しきい値ベースの自動表示、絵文字・アニメーション対応
対応言語 英語(日本語未対応)
評価 ★★★★★(4.9)

ワンポイント解説

「Hey!Scarcity Low Stock Counter」は、在庫レベル表示・低在庫アラート・カウントダウンを 1 つのウィジェットでまとめて訴求できる Shopify アプリです。Built for Shopify バッジ取得済みで、レビュー数 138 件・評価 4.9 という海外ストアでの評価は非常に高く、特にパルスアニメーションでバッジを目立たせる演出が好評です。商品ページとコレクションページの両方に対応し、しきい値を下回ったときだけ自動で表示する仕組みなので運用も簡単です。日本語には未対応ですが、英語のままでも世界観として違和感が出にくいシンプルなデザインのため、海外向けストアやモード系・コスメ系ブランドとの相性が良いアプリといえます。

Stock Sheep ‑ Sold & Low Stock

Stock Sheep のアプリストア画像

アプリ概要

項目 内容
アプリ名 Stock Sheep ‑ Sold & Low Stock
開発者 App Attic
価格設定 無料プランあり / Basic $10/月 / Growth $20/月 / Advanced $30/月(7 日間の無料体験あり)
主な機能・特徴 在庫数ウィジェット、販売数ポップアップ、Add to Cart ポップアップ、プログレスバー、絵文字・プリセットデザイン、商品セグメント別ルール
対応言語 英語(日本語未対応)
評価 ★★★★☆(4.5)

ワンポイント解説

「Stock Sheep」は、緊急性(Urgency)・希少性(Scarcity)・社会的証明(Social Proof)の 3 要素をまとめて訴求 できる多機能アプリです。低在庫ウィジェットとカウントダウンに加え、Add to Cart や販売実績のポップアップも表示できるため、コンバージョン率向上のための仕組みを 1 つのアプリで揃えられます。プログレスバー・絵文字・プリセットデザインが豊富で、エディタなしで見栄えのよい UI を作れる点もメリット。バリアント単位での在庫表示にも対応しているため、サイズ・カラー違いの多いアパレル系ストアと特に相性がよいアプリです。

RN: Back in Stock Alerts

RN: Back in Stock Alerts のアプリストア画像

アプリ概要

項目 内容
アプリ名 RN: Back in Stock Alerts
開発者 Grinduck
価格設定 無料プランあり / Early Bird $9.99/月
主な機能・特徴 「残り X 点」表示、Notify Me ボタン、メール/SMS/WhatsApp 通知、バリアント単位の在庫表示、売り切れバリアント非表示、入荷待ちリスト
対応言語 英語(日本語未対応)
評価 ★★★★★(5.0)

ワンポイント解説

「RN: Back in Stock Alerts」は、「残りわずかバッジ」と「再入荷通知」の両機能をワンストップで提供 している点が特徴のアプリです。Built for Shopify バッジ取得済みで、リミテッドストックウィジェットを商品ページとコレクションページに表示しつつ、売り切れ商品では Notify Me ボタンで顧客の連絡先を集めて再入荷時に通知できます。バリアント単位や倉庫拠点単位の在庫制御にも対応しており、複数倉庫を持つ EC や、人気のサイズ・カラーが頻繁に売り切れる商品を扱うストアに特に向いています。

Low Stock Notifier

Low Stock Notifier のアプリストア画像

アプリ概要

項目 内容
アプリ名 Low Stock Notifier
開発者 WEWISE
価格設定 無料プランあり / Premium $0.99/月
主な機能・特徴 在庫しきい値の設定、メール通知、Telegram 通知、特定コレクションのみ監視
対応言語 英語(日本語未対応)
評価 評価なし(新着)
カテゴリー 在庫アラート

ワンポイント解説

「Low Stock Notifier」は、在庫が少なくなった商品をストア管理者に通知することに特化したシンプルなアプリ です。メールに加えて Telegram への通知にも対応しているため、リアルタイムに在庫を把握したい運営者にぴったり。月額 $0.99 という非常に低価格で、特定コレクションだけを監視対象にすることもできます。フロントエンドにバッジを表示するアプリと組み合わせれば、「お客様にも在庫の希少性を訴求しつつ、自分にも補充タイミングを通知する」というハイブリッドな運用が可能になり、機会損失を最小化できます。

まとめ

ここまで、Shopify ストアで 残りわずかバッジ在庫数表示 を実現できる 5 つのアプリをご紹介しました。

アプリ名 特徴
シンプル残り僅かバッジ|お手軽コレクションページ在庫数表示 コレクション単位・商品単位の柔軟な指定、{quantity} でリアルタイム在庫数表示、画像/テキスト切替、3 種アニメーション、20 言語対応
Hey!Scarcity Low Stock Counter パルスアニメーションで在庫レベルを目立たせる多機能ウィジェット
Stock Sheep ‑ Sold & Low Stock 緊急性・希少性・社会的証明の 3 要素を一括対応
RN: Back in Stock Alerts 残りわずかバッジ + 再入荷通知をワンストップで
Low Stock Notifier 管理者向けの低在庫通知に特化したシンプルアプリ

最初にご紹介した 「シンプル残り僅かバッジ|お手軽コレクションページ在庫数表示」 は、設定の直感性、{quantity} プレースホルダーによる動的表示、ページ別の表示制御、20 言語対応など、Shopify ストアで在庫の希少性を訴求するうえで必要な機能をひととおり揃えています。「これからまずバッジを設置して効果を試したい」というストア運営者の方には、最初の 1 本としておすすめできるアプリです。

シンプル残り僅かバッジ|お手軽コレクションページ在庫数表示|Shopify アプリストア

参考記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?