コレクション/検索
20 件のスニペット・リファレンス
ページネーションの表示
ページネーションUI（前へ・次へ、ページ番号）を paginate オブジェクトから描画するスニペット。デフォルトのページネーション形式で複数ページに分割したコンテンツをナビゲートできる。
ページネーションの現在位置表示
コレクションや検索結果の一覧ページで、現在のページ番号と全ページ数を表示する。Shopify の多言語対応翻訳キーを使用して、言語ごとに自動で表記を切り替える。
検索結果のペジネーション比較
検索結果を paginate タグで複数パターン分割して表示するテンプレート。デフォルトペジネーションと window_size:1 オプション指定の両方の書き方を示しており、ページネーション動作の違いを検証するサンプルコード。
検索結果のページネーション設定
検索結果を paginate タグでページ分割し、複数の window_size 設定を並べて出力する方法。28件単位のペーグネーションと、ウィンドウサイズを明示的に指定した設定の2パターンを示している。
コレクションページの商品ギャラリー
コレクション内の商品を3列のテーブルレイアウトで表示するテンプレート。各商品にサムネイル、タイトル、価格（セール時は定価を取消線）を表示し、ページネーションに対応する。
コレクションページの商品一覧
コレクション内の商品を一覧表示し、商品画像・タイトル・説明文・価格帯をカード状に並べる。ページネーション機能で20件ごとに分割表示する。
paginate タグ（ページネーション）
コレクションをページサイズごとに分割し、複数ページで商品一覧を表示するための Liquid タグ。named attributes による window_size の指定にも対応している。
paginate タグの複数属性対応
Liquid の paginate タグでコレクション商品をページング処理する実装例。pageSize 単一属性のほか、window_size やカスタム属性を複数指定した場合のコード整形パターンを示す。
コレクションカード
コレクション一覧に表示するカード型コンポーネント。コレクション画像、タイトル、商品数を条件付きで出力する。セクション設定でタイトル位置、フォントサイズ、画像比率をカスタマイズ可能。
ページネーション
複数ページに分割されたコレクションや検索結果に対して、前後ページへのリンクとページ番号を表示するナビゲーション。Bootstrap のページネーションクラスを使用し、アクセシビリティに対応している。
コレクションページのフィルター・ソート操作パネル
コレクションページ上部に商品数表示、フィルターボタン、ソートドロップダウンを配置するユーティリティコンポーネント。アクティブなフィルター数をボタンに表示し、Bootstrap のオフキャンバス・ドロップダウンで UI を構成する。
予測検索結果の表示
検索入力時にリアルタイムで商品、コレクション、記事、ページを検索し、その結果を絞り込み可能なリスト形式で表示するセクション。検索クエリに応じてフィルタ対象とする情報源を管理画面で切り替えられる。
サイドバー検索モーダル
画面右側からスライドインする検索パネル。商品・コレクション・ブログ記事・ページを対象とした予測検索（オートコンプリート）に対応し、管理画面の設定で検索対象を切り替えられる。
カテゴリ階層の複数列グリッド表示
コレクション配下のカテゴリ一覧を複数列グリッドで表示するセクション。ブロック単位でカテゴリ画像、タイトル、説明、子カテゴリリンクを管理し、ホバー時に画像プリロードして遷移を高速化する。
検索結果ページのレイアウト
検索キーワード入力フォームと検索結果の商品一覧を表示するセクション。検索実施時の結果数表示、ページネーション、レスポンシブグリッドレイアウトに対応する。
コレクションページのフィルタパネル
コレクションページで真偽値・リスト・価格帯のフィルタを、オフキャンバス（サイドスライダー）パネルとして表示するスニペット。チェックボックスと価格入力フィールドで絞り込み条件を選択でき、該当件数を併記する。
コレクション商品のバリアント付き一覧表
コレクション内の全商品をバリアント単位の表形式で表示し、各行から直接カートに追加できるセクション。商品画像、説明、SKU、オプション、価格を一覧化して、B2B 向け注文フローや大量購入シーンに対応する。
コレクションページのヘッダー
コレクションページの上部に表示するヘッダーセクション。コレクション画像、タイトル、説明文を背景色・ボーダー・オーバーレイ効果とともに配置でき、テーマカスタマイザーから細かくスタイル調整できる。
コレクション商品一覧のグリッド表示
コレクションページに商品グリッドを表示するセクション。レスポンシブなカラム数、ページネーション、フィルタ・ソート機能に対応する。
フィーチャーコレクションのスライダー表示
複数のコレクションをカード形式でスライダーに並べて表示するセクション。自動再生、矢印ナビゲーション、ページネーション、スクロールバーをカスタマイズ可能。