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

コレクションページのヘッダー

コレクションページの上部に表示するヘッダーセクション。コレクション画像、タイトル、説明文を背景色・ボーダー・オーバーレイ効果とともに配置でき、テーマカスタマイザーから細かくスタイル調整できる。

用途
コレクションページの冒頭に視覚的に目立つヘッダーエリアを挿入したいとき。背景色や画像オーバーレイをストアの色調に合わせてカスタマイズしながら、タイトルと説明文を統一的に表示できる。
設置場所
sections/collection-header.liquid に配置し、templates/collection.liquid の冒頭で `{% section 'collection-header' %}` で読み込む。管理画面のテーマカスタマイザーでコレクションページを開き、セクションとして追加・設定する。
注意点
コレクション画像の表示は Shopify 管理画面でコレクションに画像がアップロードされていることが前提。画像のアスペクト比により高さが自動計算されるため、極端に横長・縦長の画像を使うと見栄えが損なわれる可能性がある。コンテナ幅（container_max_width）を空にするとテーマのグローバル幅が適用されるため、コレクションごとに異なる幅を指定したい場合は 600 など具体値を入力する必要がある。
タグ:collectionheadersectionimage-overlayresponsive-spacing

コード

277 行 / liquid
<header 
  id="collection-header-{{ section.id }}"
  class="
    collection-header image-overlay
    {{ 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-' }}
    {{ section.settings.pt_desktop | prepend: 'pt-desktop-' }} 
    {{ section.settings.pb_desktop | prepend: 'pb-desktop-' }}
  "
  style="
    --bs-bg-opacity: {{ section.settings.bg_opacity | append: '%' }};
    --bs-border-opacity: {{ section.settings.border_opacity | append: '%' }};
  ">
  {% if section.settings.img_show and collection.image != nil %}
    <div 
      class="img-wrapper"
      style="
        --overlay-color-rgb: {{ section.settings.img_overlay_color | color_to_rgb | remove: 'rgb(' | remove: ')' }};
        --overlay-opacity: {{ section.settings.img_overlay_opacity | append: '%' }};
        --overlay-blur: {{ section.settings.img_overlay_blur | append: 'px' }}
      ">
      <img
        srcset="{{ collection.image | image_url: width: 800 }} 800w, {{ collection.image | image_url: width: 1600 }} 1600w"
        src="{{ collection.image | image_url: width: 1600 }}"
        class="img-fluid"
        alt="{{ collection.image.alt }}"
        width="1600"
        height="{{ 1600 | divided_by: collection.image.aspect_ratio }}"
        loading="eager">
      </div>
  {% endif %}
  <div 
    class="container"
    style="max-width: {{ section.settings.container_max_width | append: 'px' }};">
    <h2 class="title {{ section.settings.title_font_size }}">
      <span>{{ collection.title }}</span>
    </h2>
    {% if section.settings.description_show and collection.description != blank %}
      <div class="description rte mb-0 {{ section.settings.description_font_size }}">
        {{ collection.description }}
      </div>
    {% endif %}
  </div>
</header>

{% schema %}
{
  "name": "Collection header",
  "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",
      "default": "600"
    },
    {
      "type": "header",
      "content": "Collection image"
    },
    {
      "type": "checkbox",
      "id": "img_show",
      "label": "Show collection image",
      "default": true
    },
    {
      "type": "color",
      "id": "img_overlay_color",
      "label": "Overlay color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "img_overlay_opacity",
      "label": "Overlay opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "default": 30,
      "unit": "%"
    },
    {
      "type": "range",
      "id": "img_overlay_blur",
      "label": "Overlay blur",
      "min": 0,
      "max": 10,
      "step": 1,
      "default": 0
    },
    {
      "type": "header",
      "content": "Text"
    },
    {
      "type": "select",
      "id": "title_font_size",
      "label": "Title font-size",
      "default": "h2",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "h4", "label": "H4" },
        { "value": "h5", "label": "H5" },
        { "value": "h6", "label": "H6" }
      ]
    },
    {
      "type": "checkbox",
      "id": "description_show",
      "label": "Show collection description",
      "default": true
    },
    {
      "type": "select",
      "id": "description_font_size",
      "label": "Description font-size",
      "default": "fs-md",
      "options": [
        { "value": "fs-sm", "label": "sm" },
        { "value": "fs-md", "label": "md" },
        { "value": "fs-lg", "label": "lg" },
        { "value": "fs-xs", "label": "xs" },
        { "value": "fs-xxl", "label": "xxl" }
      ]
    },
    {
      "type": "header",
      "content": "Spacing - mobile"
    },
    {
      "type": "range",
      "id": "pt",
      "label": "Top",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 8
    },
    {
      "type": "range",
      "id": "pb",
      "label": "Bottom",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 8
    },
    {
      "type": "header",
      "content": "Spacing - desktop"
    },
    {
      "type": "range",
      "id": "pt_desktop",
      "label": "Top",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 14
    },
    {
      "type": "range",
      "id": "pb_desktop",
      "label": "Bottom",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 14
    }
  ],
  "templates": ["collection"],
  "presets": [
    {
      "name": "Collection header"
    }
  ]
}
{% endschema %}

出典・ライセンス

Source:
kondasoft/ks-bootshop/sections/collection-header.liquid
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 行