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

検索結果ページ

検索フォームで入力されたキーワードに基づき、マッチした商品やページを一覧表示するテンプレート。検索が実行されていない場合は非表示、結果がない場合はメッセージを表示し、存在する場合はリスト形式で 10 件ずつペジネーション付きで出す。

用途
ストアの検索機能から遷移する検索結果ページ。ユーザーが探した商品やコンテンツを効率よく閲覧できる。
設置場所
templates/search.liquid に配置する。管理画面の「オンラインストア > テンプレート」から検索用テンプレートとして読み込まれる。
注意点
search.performed が true でないと検索結果が表示されないため、検索ボタン送信時に必ず search オブジェクトに performed フラグが立つ設定が前提。highlight フィルターで検索キーワードを HTML タグでマーク(デフォルト: `<em>` タグ)するが、CSS でスタイル指定していないとマークが目立たないため stylesheet に em { background-color: yellow; } など指定するとよい。strip_html で HTML タグを削除した後 truncatewords で 65 語まで省略するため、日本語コンテンツの場合は単語数カウントが合わず全文表示される可能性があり、その場合は truncate フィルター(文字数指定)に切り替える。
タグ:searchpaginationtemplatefilter

コード

52 行 / liquid




    <div id="page" class="innerpage clearfix">
    <h1>Search Results</h1>
    {% if search.performed %}

     {% paginate search.results by 10 %}

     {% if search.results == empty %}
      <div class="latest-news">Your search for "{{search.terms | escape}}" did not yield any results</div>
        {% else %}


    <ul class="search-list clearfix">
     {% for item in search.results %}
      <li>
          <h3 class="stitle">{{ item.title | link_to: item.url }}</h3>
          <p class="sinfo">{{ item.content | strip_html | truncatewords: 65 | highlight: search.terms }} ... <a href="{{item.url}}" title="">view this item</a></p>
      </li>
    {% endfor %}
    </ul>
     {% endif %}

    <div class="paginate clearfix">
      {{ paginate | default_pagination }}
    </div>


    <div id="three-reasons" class="clearfix">
      <h3>Why Shop With Us?</h3>
      <ul>
        <li class="two-a">
          <h4>24 Hours</h4>
          <p>We're always here to help.</p>
        </li>
        <li class="two-c">
          <h4>No Spam</h4>
          <p>We'll never share your info.</p>
        </li>
        <li class="two-d">
          <h4>Secure Servers</h4>
          <p>Checkout is 256bit encrypted.</p>
        </li>
      </ul>
    </div>
  </div>

{% endpaginate %}
{% endif %}

出典・ライセンス

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