【2025年】Shopifyの商品ページで在庫数を一覧で表示する方法は？おすすめアプリも紹介！

はじめに
Shopify で商品ページに在庫数一覧を表示することは可能？
在庫数一覧表示のメリット・デメリット
- メリット
- デメリット
テーマのコードを編集する方法
アプリを利用する方法
- アプリ利用のメリット
- アプリ利用のデメリット
「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」について
- アプリの主な機能
- 「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」を利用するメリット
アプリのインストール手順と基本的な使用方法
コード編集とアプリ導入どちらがおすすめ？
- コード編集向きのケース
- アプリ導入向きのケース
まとめ
参考記事

はじめに

Shopify で商品を販売していると、複数のバリエーション（色、サイズなど）を持つ商品で「どのバリエーションがどれくらい在庫があるのか」を顧客にわかりやすく表示したいと考えることがよくあります。特に、人気の商品や限定商品の場合、在庫状況が購入判断に大きく影響するため、在庫数を透明性を持って表示することで顧客の信頼感や購入意欲を高めることができます。

在庫一覧表のイメージ

しかし、「Shopify で商品ページに在庫数一覧を表示できるのか？」「どのような方法で実装すればよいのか？」「難しいコード編集が必要なのか？」といった疑問を抱く方も多いのではないでしょうか。

結論から言うと、Shopify で商品ページに各バリエーションの在庫数を一覧で表示する方法は、大きく分けて次の 2 通りあります。

テーマのコードを編集する方法
アプリを利用する方法

本記事では、それぞれの方法のメリット・デメリットを詳しく解説し、特におすすめのアプリとして「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」を紹介します。さらに、実際のアプリインストール手順やテーマのコードで在庫一覧を実装するサンプルコード例も解説しますので、2025 年時点での最新 Shopify ストア運営に役立ててください。

この記事を読み終えるころには、あなたの Shopify ストアで在庫数一覧表示を導入する道筋がはっきりと見えてくるでしょう。

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

Shopify で商品ページに在庫数一覧を表示することは可能？

Shopify は柔軟なテンプレート言語（Liquid）と豊富なアプリエコシステムを持つプラットフォームのため、商品ページに在庫数一覧を表示することは十分に可能です。ただし、標準の Shopify 機能には「バリエーションごとの在庫数を一覧表示する」機能が備わっていないため、以下のいずれかの方法を選択する必要があります。

テーマのコードを編集して、Liquid と JavaScript で在庫数一覧を実装する
在庫数一覧表示用の Shopify アプリをインストールして、ノーコードで対応する

どちらの方法を選択するかは、技術的なスキル、予算、カスタマイズの要望などによって決まります。「コード編集」は柔軟性が高い一方で、実装とメンテナンスの難易度が上がります。一方の「アプリ」は有料の場合が多いものの、初心者でもスピーディーに導入でき、テーマアップデートの影響を受けにくいメリットがあります。

在庫数一覧表示のメリット・デメリット

メリット

メリットのイメージ

顧客の購入判断をサポート

在庫数を透明性を持って表示することで、顧客は「欲しいバリエーションが在庫切れになる前に購入しよう」という心理が働き、購入率の向上につながります。特に限定商品や人気商品では、残り数量が購入の後押しになります。

カスタマーサポートの負担軽減

「このサイズの在庫はありますか？」「この色の在庫状況を教えてください」といった問い合わせを減らすことができ、カスタマーサポートの業務効率化につながります。

透明性の向上によるブランドイメージアップ

在庫情報を隠すことなく開示することで、顧客からの信頼度が向上し、ブランドの透明性をアピールできます。

在庫管理の効率化

在庫数が顧客に見えることで、売れ筋商品や在庫過多の商品が把握しやすくなり、仕入れや販売戦略の改善に活用できます。

デメリット

デメリットのイメージ

実装とメンテナンスの複雑さ

在庫数一覧の表示は、単純なテキスト表示と比べると実装が複雑になります。また、リアルタイムでの在庫反映やデザインの調整など、継続的なメンテナンスが必要になる場合があります。

テーマやアプリとの競合リスク

既存のアプリやテーマの設定によっては、在庫数一覧がうまく表示されない、CSS が干渉するなどの不具合が起こる可能性があります。複数のカスタマイズを行っている場合は特に注意が必要です。

在庫切れ商品の印象悪化

在庫数を表示することで、在庫切れや在庫僅少の商品が目立ってしまい、ストア全体の商品豊富さの印象が薄れる可能性があります。

テーマのコードを編集する方法

テーマコード編集手順のイメージ

在庫数一覧をテーマに直接組み込みたい場合、以下のステップで実装する形が一般的です。

実装手順の概要

商品テンプレートの編集 商品ページのテンプレート（例：sections/product-template.liquidなど）に、在庫数一覧を表示する HTML と Liquid コードを追加します。
JavaScript での動的表示 バリエーション変更時に在庫数が更新されるよう、JavaScript を使って動的に在庫情報を取得・表示する仕組みを構築します。
CSS でのスタイリング 在庫数一覧のデザインを整えるため、CSS でスタイリングを行います。
リアルタイム在庫反映 Ajax API を使用して、リアルタイムで在庫数を取得・更新する仕組みを実装します。

サンプルコード例

以下は、商品ページにバリエーションごとの在庫数を表示する簡易的なコード例です。

{% comment %} 商品ページテンプレートでの例 {% endcomment %}
<div class="stock-table-wrapper">
  <h3>在庫状況</h3>
  <table class="stock-table">
    <thead>
      <tr>
        <th>バリエーション</th>
        <th>在庫数</th>
      </tr>
    </thead>
    <tbody>
      {% for variant in product.variants %}
        <tr data-variant-id="{{ variant.id }}">
          <td>{{ variant.title }}</td>
          <td class="stock-quantity">
            {% if variant.inventory_quantity > 0 %}
              {{ variant.inventory_quantity }}個
            {% else %}
              在庫切れ
            {% endif %}
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<style>
.stock-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.stock-table th,
.stock-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.stock-table th {
  background-color: #f2f2f2;
}
</style>

コード編集のメリット

完全に自前実装ができるデザインや機能を自由にカスタマイズ可能で、独自の要件にも柔軟に対応できます。
アプリの月額費用が不要自力で開発するため、アプリの月額費用が発生しません（ただし、開発工数やメンテナンスコストは別途発生）。
他の機能との連携が簡単既存のカスタマイズや独自機能と組み合わせやすく、統一感のある実装が可能です。

コード編集のデメリット

技術的な知識が必須 Liquid、JavaScript、CSS の知識が必要で、実装やデバッグにエンジニアのリソースが必要になります。
テーマアップデート時の手間テーマのアップデートごとに手動でマージ作業が必要となるケースが多く、運用保守に手間がかかります。
不具合リスクの増加実装に問題があると、在庫数が正しく表示されない、ページの読み込みが遅くなるなどの不具合が発生する可能性があります。

アプリを利用する方法

Shopifyアプリストア

テーマのコード編集に自信がない方や、素早く導入して運用したい方にはアプリの活用がおすすめです。

アプリ利用のメリット

ノーコードで簡単に導入可能アプリをインストールするだけで、テーマのコードを編集することなく在庫数一覧を追加できます。Shopify の管理画面から数クリックで設定が完了するため、技術的な知識がなくても導入が可能です。
テーマのアップデートに強いテーマを更新しても、アプリの設定は基本的に維持されます。コード編集の場合、テーマのアップデートごとに手動でマージ作業が必要になることが多いですが、アプリの場合はそのような手間がかかりません。
サポート体制が充実多くのアプリでは、開発元からのサポートが用意されています。設定や運用で困ったことがあれば、メールやチャットで問い合わせが可能です。
継続的な機能追加アプリは定期的にアップデートされ、新機能が追加されることが多いです。独自に開発する場合と比べて、最新の機能を素早く取り入れることができます。

アプリ利用のデメリット

月額費用が発生するほとんどのアプリは有料で、月額費用が発生します。ストアの規模や予算によっては、このコストが負担になる可能性があります。
カスタマイズの自由度に制限があるアプリが提供する機能の範囲内でのカスタマイズしかできません。独自のデザインや特殊な要件が必要な場合は、アプリの機能では対応できない可能性があります。
アプリ間の競合リスク複数のアプリを同時に使用している場合、アプリ同士が干渉して動作に問題が生じる可能性があります。

「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」について

在庫数一覧表示を提供するアプリはいくつか存在しますが、ここでは特におすすめの「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」を紹介します。

シンプル在庫数一覧表｜お手軽バリエーション在庫一覧

このアプリを使うと、Shopify の管理画面からノーコードで商品ページに各バリエーションの在庫数一覧表を追加でき、リアルタイムで在庫状況を表示できます。月額 3.99 ドルで 1 週間の無料試用期間付きというリーズナブルな価格設定で、日本語対応も充実しているため初心者にも安心です。

アプリ名: シンプル在庫数一覧表｜お手軽バリエーション在庫一覧
料金: 月額$3.99（7 日間の無料トライアルあり）
Shopify アプリストア: https://apps.shopify.com/sa-076-ur-stock-table-app?locale=ja
公式ガイド: https://unreact.jp/shopify-apps/sa-076-ur-stock-table-app/guide

アプリの主な機能

アプリの主な機能イメージ

バリエーションごとの在庫数一覧表を表示

商品ページにバリエーションごとの在庫を一覧表形式で表示できます。顧客が在庫状況を一目で確認できるため、購入体験が向上します。

各バリエーションの在庫状況を表形式で表示

サイズや色などの各バリエーションの在庫状況を、見やすい表形式で整理して表示することができます。

ノーコードでデザインをカスタマイズ

在庫表示のデザイン、アイコン、色、サイズなどをノーコードでカスタマイズできます。HTML や CSS の知識がなくても、簡単にストアのブランドイメージに合わせたデザインに調整できます。

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

アプリをインストール後、1 クリックでストアへの在庫表アプリブロックを追加できます。難しいコードの編集作業は一切必要ありません。

「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」を利用するメリット

このアプリを導入すると、次のようなメリットが得られます。

リアルタイムの在庫表示で透明性のあるショッピング体験を提供
アイコンや数字を使った直感的な在庫表示で顧客の理解を促進
ノーコードでのカスタマイズにより、誰でも簡単に設定可能
1 クリックでのテーマ追加により、スピーディーな導入が実現

アプリのインストール手順と基本的な使用方法

実際に「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」をインストールして設定する手順を解説します。

詳細な説明は公式のご利用ガイドを参照ください。ここでは、インストールからカスタマイズまでを簡単に解説します。

インストール手順

Shopify アプリストアで「シンプル在庫数一覧表｜お手軽バリエーション在庫一覧」と検索してください。もしくはこちらのリンクからアプリ詳細ページへアクセスしてください。
アプリの詳細ページから「インストール」をクリックしてストアにインストールします。
Shopify の管理画面で再度権限の確認などがあります。問題なければ、「インストール」ボタンでインストールを完了してください。
アプリ管理画面の表示インストール完了後、アプリの管理画面が表示されます。