はじめに

ShopifyでECサイトを構築する際、”売り切れ商品がコレクション内に多く表示されてしまう”というユーザー体験上の課題に直面した経験はありませんか？
コレクションの条件設定で在庫がある商品のみを含めるようにすることは可能ですが、意図的に売り切れた商品を掲載したままにしておきたい、というケースも多くあるかと思います。
しかし、在庫がない商品がコレクション内に多く混在している状態はサイトの見やすさが損なわれ、UXの精度を落とす要因になりかねません。

そこで本記事では、Dawnで在庫切れ商品を自動的にコレクションページの末尾へ並び替える方法をご紹介します。
このカスタマイズによってエンドユーザーが購入可能な商品にたどり着きやすくなる導線設計が可能となり、CV率の向上に直結します。
JavaScriptもそのままコピペで実装できますので、ぜひご参照ください！

実装方法

1. 「card-product.liquid」で新たなdata属性を追加

コレクションページに出力される各商品カードに在庫状態を表すdata属性を加えるため、「card-product.liquid」で「<div class="card-wrapper ...">」と書かれた箇所を探し、以下の通り変更します。

<div class="card-wrapper product-card-wrapper underline-links-hover">

↓下記に変更

<div class="card-wrapper product-card-wrapper underline-links-hover" data-available="{{ card_product.available }}">

2. 「main-collection-product-grid.liquid」に並び替え用のJavaScriptを追加【絞り込み機能なしver】

商品の絞り込み機能をオフにしている場合は、下記スクリプトを「main-collection-product-grid.liquid」の{% schema %}{% endschema %}直前または直後に追加することで、在庫切れ商品が後ろに並び替わるよう制御することができます。（画像はクリックで拡大します）
絞り込みを使用している場合は本手順をスキップし、手順3へとお進みください。

<script>
  function reorderProductsByStock() {
    const grid = document.querySelector('[id^="product-grid"]');
    if (!grid) return;

    const items = Array.from(grid.children); // .grid__item を取得
    const inStock = items.filter(item =>
      item.querySelector('[data-available="true"]')
    );
    const outOfStock = items.filter(item =>
      item.querySelector('[data-available="false"]')
    );

    // 並べ替え
    [...inStock, ...outOfStock].forEach(item => grid.appendChild(item));
  }

  document.addEventListener('DOMContentLoaded', reorderProductsByStock);
  document.addEventListener('shopify:section:load', reorderProductsByStock);
</script>

3. 「main-collection-product-grid.liquid」に並び替え用のJavaScriptを追加【絞り込み機能ありver】

絞り込み機能をオンにしている場合、手順2のスクリプトでは、絞り込み適用後ページをさらに読み込み直すまで並び替えが作動しません。
絞り込み適用時も自動で在庫切れ商品を並び替えるためには、下記スクリプトを「main-collection-product-grid.liquid」の{% schema %}{% endschema %}直前または直後に追加することで正常に動くようになります。

<script>
  function reorderProductsByStock() {
    const grid = document.querySelector('[id^="product-grid"]');
    if (!grid || grid.dataset.reordered === "true") return;

    const items = Array.from(grid.children); // .grid__item を取得
    const inStock = items.filter(item =>
      item.querySelector('[data-available="true"]')
    );
    const outOfStock = items.filter(item =>
      item.querySelector('[data-available="false"]')
    );

    // 並べ替え
    [...inStock, ...outOfStock].forEach(item => grid.appendChild(item));

    // 並び替え済みフラグを付けて、無限再実行を防止
    grid.dataset.reordered = "true";
  }

  function watchGridChanges() {
    setInterval(() => {
      const grid = document.querySelector('[id^="product-grid"]');
      if (grid && grid.dataset.reordered !== "true") {
        reorderProductsByStock();
      }
    }, 300); // 0.3秒間隔で監視
  }

  document.addEventListener('DOMContentLoaded', () => {
    reorderProductsByStock();
    watchGridChanges();
  });
</script>

以上により、コレクションページで在庫切れ商品がコレクションの最後尾に並ぶようになりました。
※本カスタマイズが機能するのはページが読み込まれた初期状態の時に限り、並び替えを手動で変えた場合はその通りの並び順へと変更されます。

まとめ

いかがでしたが？

在庫切れ商品の並び順を最適化することは、見た目の調整以上にユーザーの購買行動に大きな影響を与える施策です。
「今すぐ買える商品」に素早くアクセスできる導線をつくることで、離脱防止・売上向上へと繋がります。
制作現場ですぐに導入でき、クライアントへの提案力強化にもなるShopifyカスタマイズですので、ぜひサイト制作時にお役立てください！

弊社では、ECサイト制作だけでなくその後の運用までを、成果にコミットした万全のバックアップ体制でご支援しています。
売上最大化のために必要な運用すべてをサポートさせていただきますので、マーチャント様からの運用フェーズのご相談などでお困りの制作者様もお気軽にご連絡ください！