はじめに

ECサイトにおいて、商品一覧ページは、ユーザーが複数商品を比較・検討する重要な画面です。
この一覧画面では、在庫が少ない商品の見せ方が売れ行きを左右する鍵となります。
在庫が少ない商品と他商品が同じ見え方をしていると、在庫状況が購入判断に活かされず、販売機会を喪失してしまうケースがあります。

在庫が少ない商品がひと目で分かれば、ユーザーは「今買うべき商品」を直観的に判断しやすくなります。
これは判断材料を適切に提示するUX改善といえます。
またマーチャント側にとっても、在庫回転を促したい商品や残数が限られている商品を商品一覧の段階で認識してもらえることは、在庫の偏りや滞留を防ぐうえで有効です。

本記事では、Shopifyの標準テーマであるDawnの商品一覧ページに「在庫わずか」のラベルを表示して低在庫商品だけを視覚的に強調する方法を、Shopifyの仕様を踏まえながら解説していきます。
2ステップで簡単に実装できるカスタマイズですので、自社のストアをさらに成長させたいと考えているマーチャントさんはぜひお試しください！

実装前に理解しておきたい在庫情報の扱い

Shopifyにおける在庫数は、商品ごとではなく、バリエーション単位で管理されます。
そのため、商品一覧で在庫数を判定する場合は「どのバリエーションの在庫を参照するか」を明確にする必要があります。

Shopifyでは通常「selected_or_first_available_variant」が参照されることを踏まえ、本記事では最初に購入可能なバリエーションの在庫数を基準にすることとします。

実装の前提と方針

今回の実装では、以下の前提で進めていきます。

• JavaScriptは使用せず、Liquid＋CSSのみで実装
• 商品情報の「在庫を追跡する」を有効にしている商品のみ対象
• 売り切れ商品（在庫0）と在庫数0未満の商品は除外

実装方法

1. 商品カードに低在庫ラベルを表示

管理画面のオンラインストア > テーマ > コードを編集 からスニペットファイル「card-product.liquid」を開き、以下のコードを追加します。（画像はクリックで拡大します）
本記事では、商品画像を出力している箇所（{%- if card_product.featured_media -%}...{%- endif -%}）の直後に追加しています。

{%- assign low_stock_threshold = 5 -%}

{%- assign current_variant = card_product.selected_or_first_available_variant -%}
{%- assign inventory_qty = current_variant.inventory_quantity -%}

{%- assign is_low_stock = false -%}

{%- if current_variant.inventory_management
  and inventory_qty > 0
  and inventory_qty <= low_stock_threshold
-%}
  {%- assign is_low_stock = true -%}
{%- endif -%}

{% if is_low_stock %}
    <div class="card__badge"> 
        <span class="low-stock-badge">残りわずか</span>
    </div>
{% endif %}

Point 上記コードの1行目にある「low_stock_threshold」が、在庫が少ないと判定する基準になります。
「= 5」の数値を変えることで、何個以下を低在庫とするか自由に指定することが可能です。

2. ラベルのスタイルを調整

同ファイルまたは別ファイルに下記CSSを記述し、視覚的に強調するためスタイルを調整します。

.low-stock-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e5533d;
    color: #fff;
    font-size: 1.2rem;
    padding: 4px 6px;
    border-radius: 4px;
    z-index: 2;
}

ラベルの色や配置はストアのテーマデザインに合わせてご調整ください。

以上により、在庫数が指定した数量以下になった商品には画像のようなラベルが表示されます。

まとめ

いかがでしたか？
商品一覧で在庫が少ない商品を視覚的に強調することで、ユーザーは一覧画面で在庫状況を把握でき、購入判断がよりスムーズになります。
結果として商品ページまでの導線が整理され、迷いによる離脱を低減させる効果が期待できます。

今回のカスタマイズは、在庫回転の改善や販売機会の最適化に繋がる重要な施策です。
特に商品点数が多いストアでは、商品一覧での情報整理が運用効率にも影響します。

在庫情報をどのタイミングで、どの程度見せるかは、ユーザー体験と運用の両面に関わる要素となります。
ストアの規模や商品特性に合わせて、本実装をベースに調整してみてくださいね。
機能や実装手順などにご不明な点がありましたら、ぜひお気軽にお問い合わせください！