

【Shopify】商品検索を理解する - #09

Shopifyにはデフォルトで優れた検索機能が備わっています。
今回は、その検索機能を使って、商品を絞り込む方法を解説します。
■今回の内容に関する公式ドキュメント
https://help.shopify.com/ja/manual/online-store/storefront-search
■バックナンバー
- #01 - ローカルで開発する環境を構築する手順
- #02 - 無料テーマのディレクトリ構造の解説
- #03 - 仕様や用語、開発の流れの解説
- #04 - 独自言語「liquid」の基本的な書き方
- #05 - 動的な情報を出力できるオブジェクトとプロパティについて
- #06 - 商品一覧ページのカスタマイズ方法
- #07 - TOPページに商品一覧を新着順で出力する
- #08 - Content Schemaを理解して、管理画面からサイトをカスタマイズできるようにする
- #09 - 商品検索を理解する
- #番外編 - (随時更新)開発Tips
- #番外編 - (随時更新)便利なオブジェクト
- #オブジェクトの中身を確認する(PHPのprint_rやJavaScriptのconsole.logのようなイメージ)
基礎知識
以下のようにdomain/search?q=検索ワードの形式でアクセスすると、検索結果が返ってきます。
今回は、上記をもとに様々な検索方法を解説します。
また、Shopifyの検索機能は以下が対象ですが、今回は「商品」に絞って解説をします。
- 商品
- ページ
- 記事
様々な検索方法
検索結果を商品のみにする
type=productで検索結果を商品のみにしています。
また、同時にq=検索ワードも指定していますが、このように複数の条件がある場合は、「&」で繋げてあげます。
商品名で検索
q=title:商品名とすることで、商品名に限定して検索ができます。
任意のタグを持つ商品を検索
商品名と同じ仕組みです。
任意のタグを持つ商品を検索(タグ複数var.)
基本的な書き方は先程と同じです。
tag:タグ名1 OR タグ名2 の「OR」の前後には半角スペースを入力します。
この「OR」の書き方は他の検索方法でも同様です。
商品名やタグの解説を見れば一目瞭然ですが、q=○○:検索ワードの形式で細かく検索ができます。
商品で検索できるプロパティ(q=○○:検索ワードの○○の部分)は以下の通りです。(公式引用)
- body
- product_type
- tag
- title
- variants.barcode
- variants.sku
- variants.title
- vendor
https://help.shopify.com/ja/manual/online-store/storefront-search
注意点
どのようなロジックなのか詳しくは分かりませんが、「単語」で検索しなければ、正しい結果が返ってこない場合があります。
例えば、「オレンジ」という商品名の商品があるとします。
このように「オレンジ」で検索をすれば、検索結果に意図した商品が返ってくるのですが、
単語ではない「オレンジ」の一部の「ンジ」みたいな中途半端なワードで検索をすると、検索結果が返ってきません。
なので、検索する仕組みを作る際は単語で検索をすることを意識しましょう。
まとめ
Shopifyの検索機能を理解すれば、より充実した検索結果ページを作れるようになるので、ぜひ公式ドキュメントなどを見ながら開発してみてください。
■バックナンバー
- #01 - ローカルで開発する環境を構築する手順
- #02 - 無料テーマのディレクトリ構造の解説
- #03 - 仕様や用語、開発の流れの解説
- #04 - 独自言語「liquid」の基本的な書き方
- #05 - 動的な情報を出力できるオブジェクトとプロパティについて
- #06 - 商品一覧ページのカスタマイズ方法
- #07 - TOPページに商品一覧を新着順で出力する
- #08 - Content Schemaを理解して、管理画面からサイトをカスタマイズできるようにする
- #09 - 商品検索を理解する
- #番外編 - (随時更新)開発Tips
- #番外編 - (随時更新)便利なオブジェクト
- #オブジェクトの中身を確認する(PHPのprint_rやJavaScriptのconsole.logのようなイメージ)