Liquid Snippets by ALSEL
🔍 コレクション/検索中級

paginate タグ(ページネーション)

コレクションをページサイズごとに分割し、複数ページで商品一覧を表示するための Liquid タグ。named attributes による window_size の指定にも対応している。

用途
コレクションページで大量の商品を一定数ずつ区切り、ページネーション UI で切り替えられるようにしたいとき。
設置場所
templates/collection.liquid または商品一覧を表示するセクション内で、`{% paginate collection by pageSize %}` の形式で商品ループを囲み、`{% endpaginate %}` で閉じる。named attributes を使う場合は `window_size: 50` などを BY の直後に記述する。
注意点
pageSize は整数値である必要があり、0 以下の値は無視される。window_size など named attributes はカンマ区切りで複数指定でき、改行時の動作は Prettier の printWidth 設定に依存する。paginate タグ内で出力したい全コンテンツ(商品カード、ページネーションリンク含む)を囲む必要がある。
タグ:paginationcollectionlooppage-break

コード

23 行 / liquid
It takes a collection and a pageSize
{% paginate collection by pageSize %}{% endpaginate %}

It breaks on by pageSize when printWidth is hit
printWidth: 1
{% paginate collection by pageSize %}
  {{ collection }}
{% endpaginate %}

It is undocumented, but it also accepts named attributes (window_size). Those are comma separated.
printWidth: 80
{% paginate collection by pageSize window_size:50, attr:(0.. 2) %}
  {{ collection }}
{% endpaginate %}

It is undocumented, but it also accepts named attributes (window_size). We print
those comma separated and on a new line when it breaks.
printWidth: 1
{% paginate collection by pageSize window_size: 50 %}
  {{ collection }}
{% endpaginate %}

出典・ライセンス

License:
MIT

このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

関連項目

🔍 コレクション/検索初級

ページネーションの表示

ページネーションUI(前へ・次へ、ページ番号)を paginate オブジェクトから描画するスニペット。デフォルトのページネーション形式で複数ページに分割したコンテンツをナビゲートできる。

📁 shopify-code-snippets·MIT·6
🔍 コレクション/検索初級

ページネーションの現在位置表示

コレクションや検索結果の一覧ページで、現在のページ番号と全ページ数を表示する。Shopify の多言語対応翻訳キーを使用して、言語ごとに自動で表記を切り替える。

📁 shopify-code-snippets·MIT·6
🔍 コレクション/検索中級

検索結果のペジネーション比較

検索結果を paginate タグで複数パターン分割して表示するテンプレート。デフォルトペジネーションと window_size:1 オプション指定の両方の書き方を示しており、ページネーション動作の違いを検証するサンプルコード。

📁 theme-tools·MIT·12
🔍 コレクション/検索初級

検索結果のページネーション設定

検索結果を paginate タグでページ分割し、複数の window_size 設定を並べて出力する方法。28件単位のペーグネーションと、ウィンドウサイズを明示的に指定した設定の2パターンを示している。

📁 theme-tools·MIT·12
🔍 コレクション/検索初級

コレクションページの商品ギャラリー

コレクション内の商品を3列のテーブルレイアウトで表示するテンプレート。各商品にサムネイル、タイトル、価格(セール時は定価を取消線)を表示し、ページネーションに対応する。

📁 liquid·MIT·20
🔍 コレクション/検索初級

コレクションページの商品一覧

コレクション内の商品を一覧表示し、商品画像・タイトル・説明文・価格帯をカード状に並べる。ページネーション機能で20件ごとに分割表示する。

📁 liquid·MIT·23