🔍 コレクション/検索中級
コレクション商品一覧のグリッド表示
コレクションページに商品グリッドを表示するセクション。レスポンシブなカラム数、ページネーション、フィルタ・ソート機能に対応する。
用途
コレクションページで商品を一覧表示するとき。商品数、表示件数、レイアウト、色・間隔をカスタマイザーから自由に調整できる。
設置場所
sections/collection-products.liquid に配置し、collection テンプレートに標準セクションとして登録する。管理画面のテーマカスタマイザーでセクションを追加すると自動で読み込まれる。
注意点
breakpoint_mobile / breakpoint_tablet / breakpoint_desktop の各設定値は、同じ行に表示する商品カード数を指定するため、CSS で Bootstrap の row-cols クラス対応が前提となる。limit（表示件数）を設定しても、ストアが ks- サブドメイン上にある場合は 16 件に上書きされるため、本番運用時はカスタムドメイン設定で回避する。pagination クラスに対応した collection-pagination カスタム要素が定義されていないと、ページネーション UI が正しく動作しない。
コード
289 行 / liquid{% liquid
if shop.permanent_domain contains 'ks-'
assign limit = 16
else
assign limit = section.settings.limit
endif
%}
<section
id="collection-products-{{ collection.id }}"
class="
collection-products
{{ section.settings.bg_color }}
{{ section.settings.bg_gradient }}
{{ section.settings.text_color }}
{{ section.settings.border_top_width | prepend: 'border-top-' }}
{{ section.settings.border_bottom_width | prepend: 'border-bottom-' }}
{{ section.settings.border_color }}
{{ section.settings.pt | prepend: 'pt-' }}
{{ section.settings.pb | prepend: 'pb-' }}
"
style="
--bs-bg-opacity: {{ section.settings.bg_opacity | append: '%' }};
--bs-border-opacity: {{ section.settings.border_opacity | append: '%' }};
">
<div
class="container"
style="max-width: {{ section.settings.container_max_width | append: 'px' }};">
{% paginate collection.products by limit %}
{% if collection.products.size == 0 %}
<p class="alert alert-primary">
{{ 'collection.empty_html' | t }}
</p>
{% else %}
{% render 'collection-utilities' %}
<div
class="
product-list mx-n4 mx-desktop-n5 mb-0 row
{{ section.settings.breakpoint_mobile | prepend: 'row-cols-' }}
{{ section.settings.breakpoint_tablet | prepend: 'row-cols-tablet-' }}
{{ section.settings.breakpoint_desktop | prepend: 'row-cols-desktop-' }}
"
role="list">
{% for product in collection.products %}
<div class="p-4 p-desktop-5 mb-4 mb-desktop-5" role="list-item">
{% render 'product-card', product: product %}
</div>
{% endfor %}
</div>
<collection-pagination class="collection-pagination">
{% render 'pagination', paginate: paginate %}
</collection-pagination>
{% endif %}
{% endpaginate %}
</div>
</section>
{% if section.settings.show_filters %}
{% render 'collection-filters' %}
{% endif %}
{% schema %}
{
"name": "Collection products",
"settings": [
{
"type": "header",
"content": "Styling"
},
{
"type": "select",
"id": "bg_color",
"label": "Background color",
"default": "bg-body",
"options": [
{ "value": "bg-primary", "label": "Primary" },
{ "value": "bg-secondary", "label": "Secondary" },
{ "value": "bg-body", "label": "Body" },
{ "value": "bg-white", "label": "White" }
]
},
{
"type": "range",
"id": "bg_opacity",
"label": "Background opacity",
"min": 0,
"max": 100,
"step": 1,
"default": 100,
"unit": "%"
},
{
"type": "select",
"id": "bg_gradient",
"label": "Background gradient",
"options": [
{ "value": "bg-gradient", "label": "Yes" },
{ "value": "", "label": "No" }
],
"default": ""
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "text-body",
"options": [
{ "value": "text-primary", "label": "Primary" },
{ "value": "text-secondary", "label": "Secondary" },
{ "value": "text-body", "label": "Body" },
{ "value": "text-white", "label": "White" }
]
},
{
"type": "range",
"id": "border_top_width",
"label": "Border top width",
"default": 0,
"min": 0,
"max": 16,
"step": 1,
"unit": "px"
},
{
"type": "range",
"id": "border_bottom_width",
"label": "Border bottom width",
"default": 0,
"min": 0,
"max": 16,
"step": 1,
"unit": "px"
},
{
"type": "select",
"id": "border_color",
"label": "Border color",
"default": "border-body",
"options": [
{ "value": "border-primary", "label": "Primary" },
{ "value": "border-secondary", "label": "Secondary" },
{ "value": "border-body", "label": "Body" },
{ "value": "border-white", "label": "White" }
]
},
{
"type": "range",
"id": "border_opacity",
"label": "Border opacity",
"min": 0,
"max": 100,
"step": 1,
"default": 100,
"unit": "%"
},
{
"type": "text",
"id": "container_max_width",
"label": "Container max-width (px)",
"info": "Leave empty to use the global container width"
},
{
"type": "header",
"content": "General"
},
{
"type": "range",
"id": "limit",
"label": "Limit products",
"min": 2,
"max": 50,
"default": 48,
"step": 1
},
{
"type": "checkbox",
"id": "show_product_count",
"label": "Show product count",
"default": true
},
{
"type": "checkbox",
"id": "show_filters",
"label": "Show filters",
"default": true
},
{
"type": "select",
"id": "filters_btn_color",
"label": "Filters button color",
"default": "btn-outline-primary",
"options": [
{ "group": "Solid", "value": "btn-primary", "label": "Primary" },
{ "group": "Solid", "value": "btn-secondary", "label": "Secondary" },
{ "group": "Solid", "value": "btn-white", "label": "White" },
{ "group": "Light", "value": "btn-light-primary", "label": "Primary" },
{ "group": "Light", "value": "btn-light-secondary", "label": "Secondary" },
{ "group": "Light", "value": "btn-light-white", "label": "White" },
{ "group": "Outline", "value": "btn-outline-primary", "label": "Primary" },
{ "group": "Outline", "value": "btn-outline-secondary", "label": "Secondary" },
{ "group": "Outline", "value": "btn-outline-white", "label": "White" }
]
},
{
"type": "checkbox",
"id": "show_sort_by",
"label": "Show sorting",
"default": true
},
{
"type": "select",
"id": "sort_by_btn_color",
"label": "Sort-by button color",
"default": "btn-outline-primary",
"options": [
{ "group": "Solid", "value": "btn-primary", "label": "Primary" },
{ "group": "Solid", "value": "btn-secondary", "label": "Secondary" },
{ "group": "Solid", "value": "btn-white", "label": "White" },
{ "group": "Light", "value": "btn-light-primary", "label": "Primary" },
{ "group": "Light", "value": "btn-light-secondary", "label": "Secondary" },
{ "group": "Light", "value": "btn-light-white", "label": "White" },
{ "group": "Outline", "value": "btn-outline-primary", "label": "Primary" },
{ "group": "Outline", "value": "btn-outline-secondary", "label": "Secondary" },
{ "group": "Outline", "value": "btn-outline-white", "label": "White" }
]
},
{
"type": "header",
"content": "Breakpoints",
"info": "Adjust items per row based on the screen resolution"
},
{
"type": "range",
"id": "breakpoint_mobile",
"label": "Mobile (<600px)",
"min": 1,
"max": 3,
"step": 1,
"default": 2
},
{
"type": "range",
"id": "breakpoint_tablet",
"label": "Tablet (≥600px)",
"min": 1,
"max": 4,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "breakpoint_desktop",
"label": "Desktop (≥1200px)",
"min": 1,
"max": 6,
"step": 1,
"default": 4
},
{
"type": "header",
"content": "Spacing"
},
{
"type": "range",
"id": "pt",
"label": "Top",
"min": 0,
"max": 20,
"step": 1,
"default": 10
},
{
"type": "range",
"id": "pb",
"label": "Bottom",
"min": 0,
"max": 20,
"step": 1,
"default": 10
}
],
"templates": ["collection"],
"presets": [
{
"name": "Collection products"
}
]
}
{% endschema %}出典・ライセンス
- Repository:
- https://github.com/kondasoft/ks-bootshop
- License:
- MIT
このコードは kondasoft 著作の MIT ライセンスソースです。 原本の著作権は kondasoft が保有します。日本語訳は 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 行