🔍 コレクション/検索初級
検索結果のページネーション設定
検索結果を paginate タグでページ分割し、複数の window_size 設定を並べて出力する方法。28件単位のペーグネーションと、ウィンドウサイズを明示的に指定した設定の2パターンを示している。
用途
検索ページで商品一覧をページ分割表示するとき。ページングの表示件数とページネーションバーの表示窓を制御したいシーンで活用する。
設置場所
templates/search.liquid の検索結果ループ箇所に置き換える。`search.results` を `paginate` タグでループし、その内部で `render 'product-item'` を呼び出す形にする。
注意点
paginate の `by` パラメータで指定した件数（28件）は、テーマカスタマイザーで変更されると上書きされるため、固定値としては管理画面で確認した値を入れる。`window_size: 1` を指定すると、ページネーションリンクが現在ページ前後1ページのみに絞られるので、ページ数が多い場合は`window_size: 3` など調整する。`layout none` があるためこのスニペット単体では動作せず、親テンプレートで layout が指定されていることが前提。
コード
12 行 / liquid{%- liquid
layout none
paginate search.results by 28
render 'product-item', product: item
endpaginate
paginate search.results by 28, window_size: 1
render 'product-item', product: item
endpaginate
-%}
出典・ライセンス
- Repository:
- https://github.com/Shopify/theme-tools
- 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 行
🔍 コレクション/検索初級
コレクションページの商品ギャラリー
コレクション内の商品を3列のテーブルレイアウトで表示するテンプレート。各商品にサムネイル、タイトル、価格（セール時は定価を取消線）を表示し、ページネーションに対応する。
📁 liquid·MIT·20 行
🔍 コレクション/検索初級
コレクションページの商品一覧
コレクション内の商品を一覧表示し、商品画像・タイトル・説明文・価格帯をカード状に並べる。ページネーション機能で20件ごとに分割表示する。
📁 liquid·MIT·23 行
🔍 コレクション/検索中級
paginate タグ（ページネーション）
コレクションをページサイズごとに分割し、複数ページで商品一覧を表示するための Liquid タグ。named attributes による window_size の指定にも対応している。
📁 theme-tools·MIT·23 行