🔍 コレクション/検索初級
コレクションカード
コレクション一覧に表示するカード型コンポーネント。コレクション画像、タイトル、商品数を条件付きで出力する。セクション設定でタイトル位置、フォントサイズ、画像比率をカスタマイズ可能。
用途
コレクション一覧ページや「おすすめコレクション」セクションで、複数のコレクションをカード形式で並べて表示するとき。
設置場所
snippets/collection-card.liquid に配置し、collection テンプレートまたは Featured Collections セクション内から `{% render 'collection-card', collection: collection, block: block %}` で呼び出す。
注意点
block.settings.title / block.settings.img が指定されていない場合は collection オブジェクト自体の値にフォールバックするため、コレクション画像が Shopify 管理画面で設定されていることが前提。image-url スニペットが別途存在し、size、orientation、class パラメータに対応している必要がある。section.settings の各設定値(text_align、img_orientation、title_font_size など)が親セクションで定義されていないと CSS クラスが出力されず、スタイルが反映されない。
コード
38 行 / liquid{% comment %}
Renders a collection card within a collection list. Usually within a collection template or the Featured Collections section
Accepts:
- collection: {object} The collection object - https://shopify.dev/docs/api/liquid/objects/collection
- block: {object} (Optional) The section block, if rendered within the Featured Collections section.
Usage:
{% render 'collection-card' collection: collection, block: block %}
{% endcomment %}
{% liquid
assign img = block.settings.img | default: collection.image
assign title = block.settings.title | default: collection.title
%}
<div class="collection-card {{ section.settings.collection_card_text_align }}">
<a
href="{{ collection.url }}"
class="collection-card-link">
<div class="collection-card-img-wrapper">
{% render 'image-url', img: img, size: 900, orientation: section.settings.collection_card_img_orientation, class: section.settings.collection_card_img_border %}
{% if section.settings.collection_card_show_title %}
<h3
class="
collection-card-title collection-title mb-0
{{ section.settings.collection_card_title_font_size }}
{{ section.settings.collection_card_title_position }}
">
{{ title }}
{% if section.settings.collection_card_show_product_count %}
({{ collection.products_count }})
{% endif %}
</h3>
{% endif %}
</div>
</a>
</div>出典・ライセンス
- 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 行