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

目次

• はじめに
• 記事の構成
• Shopify で残りわずかバッジ・在庫数表示はできる？
• 残りわずかバッジ・在庫数表示を設置するメリット・デメリット
  • メリット
  • デメリット
• テーマのコード編集とアプリ導入の比較
  • テーマのコード編集で実装する方法
  • アプリを導入する方法
  • 結論：最初はアプリで小さく試すのがおすすめ
• おすすめ Shopify アプリ「シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示」紹介
  • アプリの基本情報
  • できること
• アプリのインストール手順
  • Shopify 管理画面の左下にある「設定」をクリックする
  • 「アプリ」をクリックし、「Shopify App Store」へ移動する
  • 検索窓にアプリ名を入力し、表示されたアプリをクリックする
  • アプリ詳細画面で「インストール」をクリックする
  • 権限の確認画面で内容を確認し、「インストール」をクリックする
• アプリをテーマに追加（有効化）
  • 自動でテーマに追加する（1 クリック追加）
  • 手動でテーマに追加する
• アプリの設定項目を理解する
  • 表示条件の設定
  • 表示ページの設定
  • バッジの設定（種類の選択）
  • バッジの画像設定（画像バッジ向け）
  • バッジのテキスト設定（テキストバッジ向け）
  • その他の設定（追加 CSS）
  • クールダウンと再表示制御
• すぐ使えるおすすめ設定例
  • ECモール風の強い煽り設定
  • ハイブランド風の控えめ設定
  • コレクションページ特化の訴求設定
  • 文言のテンプレ例
• 関連施策との組み合わせ
• テーマのコード編集で実装する場合のサンプルコード
  • 実装の流れ
  • HTML（Liquid）を追加
  • CSS を追加
  • JavaScript を追加
  • コード実装の注意点
• 運用のコツ
• よくある質問
• まとめ
• 参考記事

はじめに

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

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

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

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

• Shopify で残りわずかバッジを表示できるアプリ19選！在庫数を訴求して購買率を高める方法
• 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 アプリ「シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示」紹介

ここからは、株式会社 UnReact が提供する 「シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示」 をご紹介します。

アプリの基本情報

• アプリ名：シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示
• 開発元：株式会社 UnReact
• 料金：Basic Plan 月額 $2.99（年払い実質 2 ヶ月分無料）
• 無料体験：7 日間
• 対応言語（管理画面）：日本語を含む 20 言語
• アプリストア URL：https://apps.shopify.com/sa-188-ur-only-a-few-badge?locale=ja

できること

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

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

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

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

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

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

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

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

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

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

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

「アプリ」をクリックし、「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!」（英語ストア向け）

関連施策との組み合わせ

残りわずかバッジ・在庫数表示は、他の Shopify 施策と組み合わせることで効果を最大化できます。

1. カートタイマーと組み合わせる

「あと {quantity} 個・カート保持時間 10 分」のように、希少性 + 緊急性をダブルで訴求すると、購買決定までのスピードがさらに速くなります。

2. レビュー件数の表示と組み合わせる

「残り 3 点・★★★★★ 138 件」のように、希少性 + 社会的証明を併用すると、購買決定の迷いを大きく減らせます。

3. 自動適用クーポンと組み合わせる

「あと 5 点・カートで 10% OFF 自動適用」のように、希少性 + ベネフィットを組み合わせれば、ターゲットに対する訴求の強度が高まります。

4. 再入荷通知（Notify Me）と組み合わせる

在庫が 0 になった商品に対しては、「Notify Me」ボタンを表示してウェイトリストに登録してもらい、再入荷時にメール通知を送る運用が効果的です。残りわずかバッジで「買い逃さないで」と訴求しながら、もし買い逃した方には再入荷通知でフォローアップする一貫した流れが作れます。

5. レコメンド・関連商品と組み合わせる

商品ページや商品検索の関連商品セクションでも残りわずかバッジを表示できれば、回遊性を維持したまま希少性訴求ができます。

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

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

実装の流れ

1. 商品カード／商品ページの Liquid に在庫数の判定ロジックを追加
2. CSS でバッジのスタイルとアニメーションを設定
3. 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 の「商品の表示」「カートの追加」「購入」のファネルで効果を確認できます。
• 本当に在庫が少ない商品にだけ表示する：バッジは「貴重な訴求要素」として、ここぞというときに使うのが効果的です。
• テーマを変更する際は表示確認を必ず行う：テーマ更新時には、対象テーマでバッジが正しく表示されるか確認しましょう。

よくある質問

Q. アプリを導入すれば、すべての商品に自動でバッジが付きますか？

A. しきい値以下になった商品にだけ自動でバッジが付きます。コレクション単位で対象を絞り込むこともできます。

Q. バリアント（サイズ・カラー）が複数ある商品でも動作しますか？

A. はい、動作します。利用可能な最初のバリアントの在庫数を基準に表示されます。

Q. 画像バッジを使う場合、ファイル形式に制限はありますか？

A. テーマエディタの画像アップローダーで対応している形式（PNG、JPG、GIF、SVG）であれば利用可能です。背景透過の PNG または SVG が推奨です。

Q. PC・スマートフォンでバッジサイズを別々に設定できますか？

A. はい、可能です。アプリの設定項目で PC とスマートフォンそれぞれの縦幅・横幅・フォントサイズを個別に設定できます。

Q. バッジが他の要素に隠れて見えない場合はどうすればよいですか？

A. 「バッジの重なり順（z-index）」の値を大きくしてください。大半のテーマでは 10〜100 程度の値で前面に表示できます。

Q. アンインストール後にバッジは残りますか？

A. アプリをアンインストールすると、テーマに追加したアプリブロック由来の表示は無くなります。

まとめ

• Shopify ストアで残りわずかバッジ・在庫数表示は、購買率を高めるために非常に効果的な施策
• デフォルト機能では実現できないため、テーマのコード編集かアプリ導入が必要
• ノーコード・低コスト・低リスクで導入できる 「シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示」 がおすすめ
• しきい値・表示ページ・スタイルを適切に設定し、過剰表示にならないよう注意する
• 関連施策（カートタイマー、レビュー、再入荷通知など）との組み合わせで効果を最大化

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

参考記事

• Shopify で残りわずかバッジを表示できるアプリ19選！在庫数を訴求して購買率を高める方法
• Shopify で在庫が少ない商品にバッジを自動表示するアプリの紹介
• Shopify で残りわずかバッジを表示するおすすめアプリ5選｜在庫数表示で購買率アップ