Shopifyで在庫数表示を実装する方法を考察

はじめに

今回は、Shopify で在庫数表示（残りわずか表示）を実装する方法について考察しました。

HTML・CSS を用いて在庫数表示を実装する方法や、Liquid を用いて在庫数表示を実装する方法について考察しました。

それでは、頑張っていきましょう。

Shopifyでの在庫数表示の定義

まずは、Shopify で在庫数表示を行う定義から考えていきましょう。

Shopifyで在庫数を表示する際には、以下の要素を定義します。

まず、在庫数表示を行う商品の範囲（全商品または特定の商品群）を設定します。

次に、在庫が少ない場合に「残りわずか」などの警告メッセージを表示する条件を定義し、顧客に対して早期購入を促します。また、在庫がゼロになった場合には「在庫切れ」の表示や、入荷通知のオプションを設定し、顧客に商品の再入荷を知らせる手段を提供します。

これにより、顧客体験を向上させ、在庫管理の効率を高めることができます。

Shopifyで在庫数表示を行うメリット

まずは、Shopify で在庫数表示を行うメリットから考えていきましょう。

在庫数表示を行うメリットが無いと、考察する意味があまり無いですからね。

Shopifyで在庫数を表示することは、顧客体験の向上や売上の最適化に繋がる重要な機能です。以下に、その主なメリットを挙げます。

1. 購買意欲の喚起

在庫数を表示することで、顧客に「残りわずか」といった緊急感を与え、早期購入を促進します。特に、数量が限られている商品に対しては、購入をためらっている顧客の意思決定を加速させる効果があります。

2. 顧客の信頼性向上

在庫状況をリアルタイムで表示することで、顧客に対して透明性を提供できます。顧客は商品が購入可能かどうかを瞬時に把握できるため、購入後の在庫切れによるキャンセルリスクが低減され、ショップに対する信頼性が向上します。

3. 在庫管理の効率化

在庫数を表示することで、ショップ運営者は販売状況をより正確に把握でき、在庫補充のタイミングを適切に判断できます。また、在庫が減少した際に自動的にアラートを発することで、在庫切れを防止し、顧客満足度を維持することができます。

4. 売上の最大化

在庫数の表示は、商品が希少であることを強調し、顧客に即決を促すことで、売上の最大化に寄与します。また、在庫切れ時には「入荷通知」を提供することで、次回入荷時に即座に売上を回復させることが可能です。

Shopifyで在庫数表示を行うデメリット

それでは次に、Shopify で在庫数表示を行うデメリットについて考えていきましょう。

在庫数表示は、顧客に透明性を提供する反面、いくつかのデメリットや課題も伴います。以下に、その主なデメリットを挙げます。

1. 購買の躊躇を招く可能性

在庫数が十分にある場合、顧客が「急がなくても良い」と感じて購入を先延ばしにする可能性があります。これにより、購入意欲が低下し、結果的に売上機会を逃すリスクがあります。

2. 在庫切れによる機会損失

在庫がゼロの場合、「在庫切れ」の表示により顧客が他のショップで購入する可能性があります。また、在庫切れのまま長期間放置すると、ショップ全体の信頼性が損なわれるリスクがあります。

3. 競合他社への情報提供

在庫数を公開することで、競合他社に販売状況を把握されやすくなります。これにより、競争戦略を立てやすくされるリスクがあり、ビジネスに不利に働く可能性があります。

4. 在庫管理のプレッシャー

在庫数をリアルタイムで正確に表示するためには、在庫管理システムの精度が重要です。システムに不具合が生じた場合、誤った在庫数が表示され、顧客に対する信頼を損なうリスクが増加します。また、在庫管理のプレッシャーが運営者にのしかかる可能性があります。

5. 顧客の不安を煽るリスク

特に在庫が極端に少ない場合、顧客に「今すぐ買わないと手に入らない」という不安を与えすぎてしまい、逆に購買意欲を萎縮させる可能性があります。顧客が衝動的な購入を避けるようになるかもしれません。

それではここから、Shopify で在庫数表示を行う方法について考察していきます。

Shopify で在庫数表示を実装する方法

それでは、Shopify で在庫数表示を実装する方法を考察していきましょう。

以下の、Liquid のvariantのオブジェクトをを参考にしていきましょう。

https://shopify.dev/docs/api/liquid/objects/variant

{
  "available": true,
  "barcode": "",
  "compare_at_price": null,
  "featured_image": null,
  "featured_media": null,
  "id": 39897499729985,
  "image": null,
  "incoming": false,
  "inventory_management": "shopify",
  "inventory_policy": "deny",
  "inventory_quantity": 5,
  "matched": true,
  "metafields": {},
  "next_incoming_date": null,
  "option1": "S",
  "option2": "Low",
  "option3": null,
  "options": [],
  "price": "10.00",
  "product": {},
  "quantity_price_breaks": [],
  "quantity_rule": {},
  "requires_selling_plan": false,
  "requires_shipping": true,
  "selected": false,
  "selected_selling_plan_allocation": null,
  "selling_plan_allocations": [],
  "sku": "",
  "store_availabilities": [],
  "taxable": true,
  "title": "S / Low",
  "unit_price": null,
  "unit_price_measurement": null,
  "url": {},
  "weight": 500,
  "weight_in_unit": 500,
  "weight_unit": "g"
}

inventory_quantityを利用すれば、在庫数にアクセスすることができます。

また、variantにアクセスする際には、以下のコードのように for 文を用いる必要があります。

{% for variant in product.variants %}
  <div class="variant">
    <p>バリアント名: {{ variant.title }}</p>
    <p>価格: {{ variant.price | money }}</p>
    <p>SKU: {{ variant.sku }}</p>
    <p>在庫状況: {% if variant.available %}在庫あり{% else %}在庫なし{% endif %}</p>
    <button type="button">このバリアントを選択</button>
  </div>
{% endfor %}

それではここから、在庫数表示を行うサンプルコードについて解説します。

在庫数表示を行うサンプルコード

以下が、在庫数表示を行うサンプルコードです。

{% for variant in product.variants %}
  <div class="variant">
    <p>バリアント名: {{ variant.title }}</p>
    <p>価格: {{ variant.price | money }}</p>
    <p>SKU: {{ variant.sku }}</p>
    <p>在庫数: 
      {% if variant.inventory_management == "shopify" %}
        {{ variant.inventory_quantity }} 個
      {% else %}
        在庫管理されていません
      {% endif %}
    </p>
    <p>在庫状況: 
      {% if variant.available %}
        在庫あり
      {% else %}
        在庫なし
      {% endif %}
    </p>
    <button type="button">このバリアントを選択</button>
  </div>
{% endfor %}

• product.variants：商品に紐づくすべてのバリアント（色やサイズの異なる商品など）をループします。
• variant.inventory_quantity：各バリアントの在庫数を表示します。
• variant.inventory_management：在庫管理が有効かどうかを確認します。Shopifyで在庫管理されている場合にのみ、在庫数を表示します。
• variant.available：在庫があるかどうかをチェックし、在庫状況を表示します。

ここまでで、Shopify で在庫数表示を実装する解説は終了です。

ここからは、非エンジニアの方に向けて、Shopify アプリを用いて在庫数表示を行う方法を解説していきます。

Shopify アプリを使って在庫数表示を実装する方法

それでは、Shopify アプリを使って在庫数表示を実装する方法を紹介していきます。

今回紹介するのは、シンプル在庫数表示｜お手軽残りわずか表示というアプリです。

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

https://unreact.jp/shopify-apps/sa-026-ur-only-a-few-left/guide

https://unreact.jp/blog/shopify-low-stock-counter

https://unblog.unreact.jp/blog/dat-9unw59y

https://qiita.com/eijiSaito/items/d56c637fe0c6623eaf8f

以下が、Shopify 公式のアプリストアです。

https://apps.shopify.com/sa-026-ur-only-a-few-left?locale=ja

それでは、こちらのアプリについて紹介していきます。

シンプル在庫数表示｜お手軽残りわずか表示の機能について

シンプル在庫数表示｜お手軽残りわずか表示は、Shopify で在庫数表示を行えるアプリです。

ノーコードで、在庫数表示を行えます。

以下のように、在庫数を表示するの条件をカスタマイズできます。

また、在庫数表示のテキストを自由にカスタマイズできます。

また、在庫数表示の色・大きさ・位置を自由に変更できます。

安価で使いやすい在庫数表示アプリなので、コーディングで実装するのが難しい場合には、選択肢の一つに入ってくるかと思います。

https://apps.shopify.com/sa-026-ur-only-a-few-left?locale=ja

最後に

今回は、コーディングで在庫数表示を行う方法と、Shopify アプリを用いて在庫数表示を行う方法について紹介しました。

お疲れさまでした。