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

コレクションカード

コレクション一覧に表示するカード型コンポーネント。コレクション画像、タイトル、商品数を条件付きで出力する。セクション設定でタイトル位置、フォントサイズ、画像比率をカスタマイズ可能。

用途
コレクション一覧ページや「おすすめコレクション」セクションで、複数のコレクションをカード形式で並べて表示するとき。
設置場所
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 クラスが出力されず、スタイルが反映されない。
タグ:collectioncardimagetypographyfeatured-collections

コード

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>

出典・ライセンス

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