Liquid Snippets by ALSEL
📄 ページテンプレート初級

検索結果ページの商品一覧

検索結果を24件ずつページネーションで表示し、各商品をサムネイル・タイトル付きで一覧化する。最も深いカテゴリ階層へのリンクを自動抽出して、カテゴリページ内の商品アンカーに遷移させる。

用途
ストア全体検索ページで、ユーザーが検索キーワードで見つけた商品を視覚的に確認し、カテゴリ経由でスムーズに移動させたいとき。
設置場所
templates/search.liquid に配置。ページネーションの範囲内に商品ループを含め、`product.featured_image` や `product.collections` の存在を前提とする。カテゴリページの URL 構造(`/pages/category/{handle}#{product-handle}`)に合わせてリンク部分を調整する。
注意点
product.collections が存在しない商品や、handle に 'hardware-' プレフィックスが付いていない場合は正しくリンクされないため、事前にコレクション構造を整理しておく。ページネーションの件数(24件)はモバイルレイアウトと組み合わせて調整し、行数が多くなりすぎないようする。product.featured_image が未設定のときは `alt` 属性が空になるため、テーマ側でフォールバック画像を CSS で指定すると良い。
タグ:searchpaginationproduct-listcollectionimage

コード

17 行 / liquid
{% paginate search.results by 24 %}
  {% for product in search.results %}
    {% comment %}
      Every product is in multiple auto collections that look like this: ["building consumables", "building consumables > solder & flux", "building consumables > solder & flux > rosin flux"]
      So we search for the _longest handle_ to find the leaf category of the product and link to that.
    {% endcomment %}
    {% assign collection_with_longest_handle = product.collections | sort: 'handle.size' | last %}
    {% assign modified_handle = collection_with_longest_handle.handle | remove_first: 'hardware-' %}
    <div>
      <img src="{{ product.featured_image | image_url }}" height="100px" alt="{{ product.title }}">
      <a href="/pages/category/{{ modified_handle }}#{{ product.handle }}">
        {{ product.title }}
      </a>
    </div>
  {% endfor %}
{% endpaginate %}

出典・ライセンス

License:
MIT

このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

関連項目

📄 ページテンプレート初級

ページテンプレート

Shopify の汎用ページテンプレート。ページのタイトルと本文コンテンツを Shopify 管理画面から取得して表示する基本的な構造。

📁 liquid·MIT·5
📄 ページテンプレート初級

リダイレクト

ヘッドレステーマで Shopify ストアフロントへのリダイレクト機能を提供するセクション。管理画面に「リダイレクト」という名称で登場し、ページから別 URL への誘導を実装する基盤となる。

📁 shopify-headless-theme·MIT·7
📄 ページテンプレート初級

トップページの基本テンプレート

Shopify Liquid の最小限のテンプレート例。HTML に日付変数を埋め込み、商品ページへのリンクを配置する基本構造を示す。

📁 liquid·MIT·7
📄 ページテンプレート初級

固定ページのテンプレート

Shopify 管理画面で作成した固定ページ(利用規約、プライバシーポリシーなど)を表示するテンプレート。ページタイトルと本文コンテンツを描画する。

📁 mcliquid-theme·MIT·8
📄 ページテンプレート初級

ページの基本テンプレート

固定ページ(About など)の基本レイアウト。ページタイトルとコンテンツを HTML の article 要素でマークアップし、管理画面で編集したテキストを表示する。

📁 liquid·MIT·9
📄 ページテンプレート初級

固定ページのテンプレート

固定ページ(ポリシー、会社概要、利用規約など)の基本レイアウト。ページタイトルと本文を中央揃えで表示する。

📁 ks-bootshop·MIT·10