Shopifyで残り僅かバッジや在庫数をコレクション内に簡単に表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/05/06

はじめに

Shopify は、世界中のストアオーナーに利用されているネットショップ作成プラットフォームです。豊富なテーマと「Shopify アプリ」によって、コーディング不要で多彩な機能をストアに追加できます。

このガイドでご紹介する 「シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示」 は、在庫が少なくなった商品にバッジを自動で表示できる Shopify アプリです。テキストバッジでは {quantity} を使って実際の在庫数を表示できるので、「残り3点！」のようにお客様へ具体的に伝わります。画像バッジへの切り替えや、点滅・揺れといったアニメーションも選択可能です。コレクション単位でも商品単位でも設定でき、ホーム・商品・コレクション・検索・ブログ・固定ページ・カートの各ページごとに表示の ON/OFF を切り替えられます。

料金は Basic Plan $2.99/月 です。インストールから 7 日間は無料でお試しいただけます。年払いをお選びいただくと、実質 2 ヶ月分無料でお得にご利用いただけます。

アプリストアはこちらからご覧いただけます。

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

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

「シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示」でできること

「在庫が少なくなってきた商品を、もっとお客様にアピールしたい」「数量限定感を出して購買を後押ししたい」――このアプリを使えば、そんな悩みをノーコードで解決できます。コレクションを選んでまとめて設定したり、商品を個別に選んだりして、在庫数のしきい値を下回った商品にだけバッジを自動表示できます。テキスト・画像どちらのバッジにも対応し、位置やサイズ、色、フォント、枠線、角丸まで細かく調整できます。PC・モバイルそれぞれで個別に設定できるので、どの端末でもきれいに表示されます。

シンプル残り僅かバッジの全体イメージ

このアプリの特徴は次のとおりです。

コレクションを選ぶだけで、在庫の少ない商品にバッジを自動表示
商品を個別に選んでバッジを表示することも可能
テキストバッジで {quantity} を使い、在庫数をリアルタイム表示
画像バッジへの切り替えにも対応
アニメーション3種類（なし・点滅・揺れ）から選択可能
ページごとにバッジの表示・非表示を切り替え可能
在庫数の上限・下限しきい値で表示条件を細かく設定
位置・サイズ・色・フォント・枠線・角丸を自由にカスタマイズ
PC・モバイルで個別にサイズやフォントを設定可能

ここからは、このアプリでできることをひとつずつご紹介します。

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

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

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

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

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

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

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

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

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

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

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

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

アプリのインストール

シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示｜Shopify アプリストアからインストールできます。

料金は Basic Plan $2.99/月 で、インストールから 7 日間は無料でお試しいただけます。年払いをお選びいただくと、実質 2 ヶ月分無料でお得にご利用いただけます。

インストール手順

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

設定をクリック

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

Shopify App Storeへ移動

検索窓に「シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示」を入力し、表示されたアプリをクリックします。

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

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

インストールをクリック

権限の確認画面が表示されるので内容を確認し、「インストール」をクリックして完了です。

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

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

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

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

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

アプリの管理画面を開きます。

アプリの管理画面

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

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

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

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

手動でテーマに追加する（任意ページに設置したい場合）

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

Shopify 管理画面で「オンラインストア」→「テーマ」→「テーマを編集する」を開きます。

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

テーマエディタ左上部から、「埋め込みアプリ」をクリックし、「シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示」アプリをクリックします。

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

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

表示を確認して保存する

バッジブロックのカスタマイズ

ここからは、バッジブロックの各設定項目について解説します。テーマエディタでバッジブロックを選択すると、以下のような設定項目が表示されます。

表示条件の設定

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

コレクション
選択したコレクション内の在庫が少ない商品にバッジを自動で表示します。複数のコレクションを選択することもできます。「セール対象のコレクションだけバッジを出したい」「特定カテゴリでだけ煽りたい」といった場合に便利です。
商品
個別に選んだ商品にバッジを表示します。コレクションでまとめて指定するほどではないけれど、特定の目玉商品にだけバッジを付けたい場合におすすめです。
在庫数のしきい値
この値以下の在庫数になった商品にバッジを表示します（1〜100 で設定）。たとえば「5」に設定すると、在庫が 5 個以下の商品にだけバッジが付きます。在庫の少なさを訴求したい数量に合わせて調整してください。
バッジ非表示の在庫しきい値
この値未満の在庫数の商品はバッジを非表示にします（0〜100 で設定）。0 にすると常に表示されます。「在庫が 0 になったら逆にバッジを消したい」「残り 1 個未満では出さない」といった運用に活用できます。

表示条件の設定パネル

表示ページの設定

バッジをどのページで表示するかをチェックボックスで切り替えるグループです。必要なページにだけ表示することで、過剰な煽りを防げます。

ホームページ：トップページに掲載した商品にバッジを表示します。
商品ページ：個別の商品詳細ページにバッジを表示します。
コレクションページ：カテゴリ一覧ページの商品にバッジを表示します。
検索結果ページ：検索結果に並ぶ商品にバッジを表示します。
ブログ記事ページ：ブログ記事内に埋め込まれた商品にバッジを表示します。
固定ページ：固定ページに掲載された商品にバッジを表示します。
カートページ：カート内の商品にバッジを表示します。

商品ページとコレクションページのみで表示するなど、運用に合わせて柔軟に組み合わせるのがおすすめです。

表示ページの設定パネル

バッジの設定

バッジの基本的な種類を選ぶグループです。

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

バッジの種類設定パネル

バッジの画像設定

「バッジの種類」を画像にした場合に使うグループです。画像のアップロードや、PC・スマホそれぞれのサイズ、表示位置などを設定します。

バッジの画像
バッジとして表示したい画像をアップロードします。PNG など背景透過画像を使うと、商品画像になじみやすくなります。
バッジの縦幅（PC）／（スマホ）
PC とスマホでそれぞれ縦幅を px 単位で設定できます。画面の大きさに合わせて見やすいサイズに調整してください。
バッジの横幅（PC）／（スマホ）
PC とスマホで個別に横幅を px 単位で設定できます。アイコン的に小さく入れたい場合は控えめな値に、強くアピールしたい場合は大きめの値にすると効果的です。
バッジの位置
「左上・右上・左下・右下」から選択できます。商品画像のどの角にバッジを置くかを決められます。一般的には「右上」「左上」が目立ちやすくおすすめです。
バッジのアニメーション
「なし・点滅・揺れ」の 3 種類から選べます。バッジを目立たせたい場合は点滅や揺れを、控えめに見せたい場合は「なし」を選びましょう。
バッジの上下余白
バッジの上下の位置を px 単位で微調整できます（-100 〜 100）。マイナス値にすると、商品画像から少しはみ出すような演出も可能です。
バッジの左右余白
バッジの左右の位置を px 単位で微調整できます（-100 〜 100）。位置設定と組み合わせて、ぴったりの場所にバッジを配置してください。

バッジの画像設定パネル

バッジのテキスト設定

「バッジの種類」を テキスト にした場合に使うグループです。テキスト内容や文字色、フォントサイズ、枠線などを細かく設定できます。

バッジのテキスト
バッジに表示するテキストを入力します。{quantity} と入力すると、その商品のリアルタイム在庫数に置き換わります。たとえば「残り {quantity} 点！」と設定すると、在庫が 3 個の商品では「残り 3 点！」と表示されます。
バッジのテキストサイズ（PC）／（スマホ）
PC とスマホでそれぞれフォントサイズを px 単位で設定できます（10〜40px）。スマホでは少し大きめにすると視認性が向上します。
バッジのテキストの太さ
100〜900 の範囲で文字の太さを設定できます（100 単位）。目立たせたい場合は 700 以上の太字、落ち着いた印象にしたい場合は 400 前後がおすすめです。
バッジの文字色
バッジに表示する文字の色をカラーピッカーで指定できます。ブランドカラーや、背景色との視認性を考えて設定してください。
バッジの背景色
バッジの背景色をカラーピッカーで指定できます。空のままにすると背景は透明になります。商品画像になじませたい場合は透明、しっかり目立たせたい場合は明るい色がおすすめです。
バッジの枠線の太さ
バッジの周囲に枠線をつけたい場合に px 単位で太さを設定します（0〜40px）。0 にすると枠線は表示されません。
バッジの枠線色
枠線の色をカラーピッカーで指定できます。背景色と合わせてコーディネートしてください。
バッジの枠線の丸み
バッジの角丸を px 単位で設定できます（0〜100px）。大きい値にするほど丸みが強くなり、大きな値にするとピル状（カプセル状）のバッジになります。
バッジの重なり順
バッジの z-index（重なり順）を数値で指定します。数値が大きいほど前面に表示されます。他の要素の下に隠れてしまう場合は、この値を大きめに設定してください。