商品一覧にバリエーションの在庫数を表示させる方法について。バリエーションの多い商品の場合は、すべて表示させる事は混乱。在庫の少ないバリエーションだけを表示させる方法も紹介します。
ECストアにおいて、商品一覧の各商品の在庫数を表示させる事はいくつかメリットがあります。
まず、在庫が少ないことが表示されると、顧客に「早く買わなければ売り切れるかもしれない」という緊急感を与え、購買意欲を高めることができます。
また、顧客は商品詳細ページに移動しなくても、一覧ページで在庫状況を確認できるため、スムーズなショッピング体験を提供できます。
今回は、商品一覧にバリエーションの在庫数を表示させる方法についてサンプルコードを交えて考察してみたいと思います。
コレクションの商品一覧の作成方法
本サイトでは以前、自作で「特定コレクションの商品一覧」を作成する手順を、2回に分けて紹介しました。
Shopify 自作でコレクションの「商品一覧」を作る！①スキーマ設定編
Shopify 自作でコレクションの「商品一覧」を作る！②HTMLとLiquid編
オプションとバリエーションの違い
本題に入る前にまず、オプションとバリエーションの違いについて触れておきたいと思います。
例えば、スニーカーの場合、
・色
・サイズ
が、オプションになります。
この2つのオプションが組み合わせられた形で１つのバリエーションになります。
・白 / 25.5cm
・白 / 26.5cm
・黒 / 27.5cm
・黒 / 28.5cm
この記事で紹介する在庫数表示は、オプションではなく、バリエーションになります。
サンプルコード
では、サンプルコードを見ていきましょう。
{% for variant in product.variants %}
{{ variant.title }} //バリエーション名
{% if variant.inventory_quantity > 3 %} //在庫が４つ以上だったら
- 残り {{ variant.inventory_quantity }}
{% elsif variant.inventory_quantity > 0 %}
- 在庫わずか //在庫が１以上３以下だったら
{% else %}
- 在庫なし //在庫がなければ
{% endif %}
{% endfor %}①「for文」を使い、商品のバリエーション(オプションの組み合わせ)オブジェクト（product.variants）を１個ずつ処理します。
②バリエーション名（variant.title）を表示
③「if文」を使い、バリエーションの在庫数の数で条件分岐。在庫数の表示はvariant.inventory_quantity。
在庫の少ないバリエーションと在庫数だけを表示
商品一覧の情報表示には、限りがあります。特にバリエーションの多い商品の場合は、すべて表示させる事は難しいと思います。
とりわけ在庫の少ないバリエーションだけを表示させ、人気バリエーションのように見せ、購買意欲を高めるのも有効な方法だと思います。
以下は、在庫数が１以上３以下の場合のバリエーションだけを表示させるサンプルコードです。
{% for variant in product.variants %}
{% if variant.inventory_quantity < 4 and variant.inventory_quantity >0 %}
<p>{{ variant.title }}が現在大人気!</p>
<p>残り：{{ variant.inventory_quantity }}</p>
{% endif %}
{% endfor %}以上、商品一覧にバリエーションの在庫数を表示させる方法について紹介いたしました。ぜひ活用してみてください。
