コレクションページ：一覧・並び替え・ページネーション
paginateとsort_byを使ってコレクション一覧を実装し、商品カードをスニペット化できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、コレクション一覧と、あちこちで使い回す商品カードを作れるようになります。
受託では、商品カードをスニペットに1本化しておくと、検索や関連商品でもrenderするだけで済みます。
コレクションページはどう構成するか
templates/collection.jsonに、バナーと商品グリッドを置きます。
商品は{% paginate collection.products by 24 %}の中でループします。
ページ送りは{{ paginate | default_pagination }}で出すか、paginate.parts / previous / next / current_pageで自分で組みます。
1ページの件数の上限は公式リファレンスで確認します（時期によって値が変わっています）。paginateの外でcollection.productsを参照すると、先頭の一定件数までしか返りません。
並び替えはどう作るか
collection.sort_options（value / name）でselectを作り、?sort_by=price-ascendingのようなURLへ遷移させます。
現在の値はcollection.sort_by、既定はcollection.default_sort_byにあります。
商品カードはなぜスニペットにするか
snippets/card-product.liquidに切り出し、{% render 'card-product', product: product %}で呼びます。
カードは、コレクション・検索・関連商品・おすすめ枠と、テーマ中のあらゆる場所に出るからです。
カードの中では、画像・価格・売り切れバッジ・色バリエーションを扱います。
セールはcompare_at_price > priceで判定し、売り切れはavailable == falseで判定します。
発展：空の状態と大量表示
collection.products_count == 0のときは、空の表示を出します。collections.allは全商品のコレクションです。
「1ページに100商品」の要望はpaginateの上限次第なので、先に確認します。
無限スクロールは、Section Renderingで次のページを取得して実装します。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。