はじめに

様々なECサイトを見ていると、「在庫残りわずか」「残り○○点」などの表示を商品ページでよく見かけます。
このように、ECサイトを運営するうえで”在庫をどう見せるか”は購入率に直結する非常に重要なポイントです。

Shopifyの商品テンプレートにも「在庫ステータス」というブロックが用意されており、各商品・バリエーションごとに残りの在庫数を表示することが可能です。
しかし全ての商品に在庫数を表示してしまうと、かえって在庫が潤沢にあることが伝わってしまい、緊急性が薄れてしまうというデメリットも。

そこで今回は、在庫が少なくなった場合のみ商品ページに在庫数を表示する方法をご紹介します。
このカスタマイズを行うことで、過剰な在庫情報の露出を避けながら、購買意欲を高める効果的な見せ方を実現できます。
Shopifyのデフォルト機能を活用しながら簡単に実装できますので、ぜひご参考ください！

実装方法

1. 「テーマのコンテンツ」で必要に応じてテキストを編集

管理画面のオンラインストアから「デフォルトテーマのコンテンツを編集する」を開き、Produts > Productで変更したい項目のテキストを編集します。
本記事では、より日本人に馴染みのある表現になるよう、「Inventory low stock」および「Inventory low stock show count」にある「低在庫」という表記を「在庫わずか」に変更しています。

2. 商品情報セクションに「在庫ステータス」ブロックを追加

テーマエディタで編集したい商品ページのテンプレートを開き、任意の場所に「在庫ステータス」ブロックを追加します。
ここで「在庫数」の表示をオンにし、「低在庫基準値」の数値を必要に応じて変更してください。

3. 「main-product.liquid」の該当箇所を変更

設定した基準値を超える在庫数がある場合に残在庫数を表示させないようにするため、「main-product.liquid」の170行目あたりから書かれている在庫あり時のステータス表示を、以下の通り変更します。（画像はクリックで拡大します）
※仕様を戻す場合に備え、変更前のコードはコメントアウトで残しておくと便利です。

{%- if block.settings.show_inventory_quantity -%}
    {{-
    'products.product.inventory_in_stock_show_count'
    | t: quantity: product.selected_or_first_available_variant.inventory_quantity
    -}}
{%- else -%}
    {{- 'products.product.inventory_in_stock' | t -}}
{%- endif -%}

↓ 下記に変更

{{- 'products.product.inventory_in_stock' | t -}}

以上により、テーマエディタで設定した低在庫基準値より多くの在庫が残っている場合は「在庫あり」、基準値より在庫数が下回った場合は「在庫わずか：残り○○個」と表示されるようになりました。

まとめ

いかがでしたが？
在庫わずかの時のみ在庫数を表示することで、エンドユーザーに対して購入の後押しとなる適度な”焦り”を演出できます。
これによりコンバージョン率の向上が期待でき、特に在庫が少ない商品や限定アイテムの販売促進などに効果的となります。

小さな工夫が売上に繋がるEC運営。
ぜひ本機能を活用して、戦略的な在庫情報の見せ方を実践してみてくださいね。
カスタマイズに関するご不明点や運用のお悩みなどがありましたらお気軽にお問い合わせください！