🔍 コレクション/検索初級
コレクションページの商品一覧
コレクション内の商品を一覧表示し、商品画像・タイトル・説明文・価格帯をカード状に並べる。ページネーション機能で20件ごとに分割表示する。
用途
コレクションページで商品のグリッド一覧を表示するとき。ページネーションで大量商品を管理しやすくする。
設置場所
templates/collection.liquid に配置するか、sections/collection-grid.liquid などのセクション内に組み込む。管理画面のテーマカスタマイザーでページネーション件数(20)と画像サイズ('small')を設定値に変更して使う。
注意点
product_img_url: 'small' のサイズは Shopify がストアアップロード時に自動生成するため、存在しないサイズを指定するとフォールバック画像が返される。featured_image が未設定の商品は null が渡されるため、img タグの alt 属性や onerror ハンドラで欠損対応を加える。truncatewords: 35 は日本語では1語が複数文字のため、英文より極端に短くなるので文字数ベースの truncate フィルタへの切り替えを検討する。
コード
23 行 / liquid{% paginate collection.products by 20 %}
<ul id="product-collection">
{% for product in collection.products %}
<li class="singleproduct clearfix">
<div class="small">
<div class="prodimage"><a href="{{product.url}}"><img src="{{ product.featured_image | product_img_url: 'small' }}" /></a></div>
</div>
<div class="description">
<h3><a href="{{product.url}}">{{product.title}}</a></h3>
<p>{{ product.description | strip_html | truncatewords: 35 }}</p>
<p class="money">{{ product.price_min | money }}{% if product.price_varies %} - {{ product.price_max | money }}{% endif %}</p>
</div>
</li>
{% endfor %}
</ul>
<div id="pagination">
{{ paginate | default_pagination }}
</div>
{% endpaginate %}
出典・ライセンス
- Repository:
- https://github.com/Shopify/liquid
- 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 行
🔍 コレクション/検索中級
paginate タグ(ページネーション)
コレクションをページサイズごとに分割し、複数ページで商品一覧を表示するための Liquid タグ。named attributes による window_size の指定にも対応している。
📁 theme-tools·MIT·23 行