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

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

コレクション内の商品を一覧表示し、商品画像・タイトル・説明文・価格帯をカード状に並べる。ページネーション機能で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 フィルタへの切り替えを検討する。
タグ:collectionproductpaginationgridimage

コード

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 %}

出典・ライセンス

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