hiro 
Shopifyに標準でついているサイト内検索機能をカスタマイズしたい。
検索結果に「商品」だけをヒットさせる方法や、逆にすべてをヒットさせる方法を知りたい。
あと、Shopifyを理解するのにおすすめの本があれば知りたい。
こんなことを考えている方へ。
この記事のポイントは以下です。
・Shopifyのサイト内の検索結果をカスタマイズする方法（2パターン）
・Shopify学習におすすめの参考書の紹介
この記事を書いている私は大阪在住のweb制作フリーランスです。
東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。
先日こんなツイートをしました。
この記事では上記のツイートを掘り下げます。
Shopifyのサイト内検索機能をカスタマイズする方法【実案件で使用】
Shopifyのサイト内検索機能をカスタマイズする方法を解説します。
サイト内検索とはこちらです。
虫眼鏡マークをクリックして、検索キーワードを入れるとHITした結果を表示してくれます。Shopifyのテンプレートには標準でついてます。
今回はこの検索結果をカスタマイズしていきます。
商品だけを検索結果に出したい
商品とブログページのみ検索結果に出したい
といったニーズに答えます。
カスタマイズするパターンは2つあります。
この違いは使用するテーマによって左右されます。
私の実案件の経験ですと、
- Atlantic（アトランティック）・・・ノーコードで可能
- Debut（デビュー）・・・liquidを操作するコーディングが必要
でした。
順番に解説します。
ノーコードでカスタマイズ可能な場合（例：Atlantic）
Atlantic（アトランティック）は、ノーコードでカスタマイズ可能でした。
Atlantic（アトランティック）を例に取り、カスタマイズ方法を解説します。
検索窓はこちらです。サイトの右上に検索アイコン（虫眼鏡）があります。
クリックでキーワード入力エリアが出現します。
検索結果を「商品」だけにする
「商品」だけを検索結果に出す方法を解説します。
管理画面＞オンラインストア＞テーマへと進みます。
カスタマイズを押下します。
カスタマイズ画面左側の「Header」を選択します。
「Search」の中の「Display results」を見つけます。
これを「products」に変えます。
これで、サイト内検索結果に「商品」のみが表示されるようになりました。
なお、各項目の意味は以下です。
デフォルトは「Products, posts, and pages」になっています。
| Products | 商品 |
| Products and pages | 商品とページ（固定ページ） |
| Products and posts | 商品とブログ記事 |
| Products, posts, and pages | 商品とブログ記事とページ（固定ページ） |
クイックサーチを無効にする
Atlantic（アトランティック）にはクイックサーチという機能があります。
検索窓にキーワードを入れると、画面遷移せずに結果を見せてくれる機能です。
ですが、なぜか不具合が起きます。エラーメッセージが表示されてしまうのです。
調べても解決できなかったので「クイックサーチ」を無効にしました。
手順を解説します。
管理画面＞オンランストア＞テーマ＞カスタマイズ＞Header へと進みます。項目の中にある「SEARCH」を見つけます。
「Enable live serch」のチェックを外します。
これでOKです。
検索結果画面の翻訳を変更する
デフォルトの検索結果画面は以下です。
- 検索結果が1件のとき
- 検索結果が複数の時
どちらも日本語の翻訳がおかしいので、直していきます。
今回は以下のように直します。
| 【デフォルト】 | 【変更後】 |
| の検索結果 | Search Results |
| 1結果 前 ‘product A’ | ‘product A’の検索結果｜1件 |
| 9活動成果 前 ‘product’ | ‘product’の検索結果｜9件 |
管理画面＞オンラインストア＞テーマ＞言語を編集する へ進みます。
「General」タブをクリックします。
「Search Results」という項目を見つけます。
この翻訳を以下のように修正します。
| 【デフォルト】 | 【変更後】 |
| 結果 | 検索結果 |
| 活動成果 | 検索結果 |
続いて「Search」という項目を見つけます。
この中の「Results header」を以下に修正します。
| 【デフォルト】 | 【変更後】 |
| の検索結果 | Search Results |
「Search Results」と英語にしたのは、デザイン上の都合です。「検索結果」でも「結果」でも何でもOKです。違和感のない翻訳を入れます。
「Results text」を以下に修正します。
| 【デフォルト】 | 【変更後】 |
| {{ results_count }} {{ results }} 前 ‘{{ search_terms }}’ | ‘{{ search_terms }}’の{{ results }}｜{{ results_count }}件 |
修正するのはこの2つだけです。
最後に「保存」を押して修正完了です。
ストアフロントで確認します。
以下の表示になっているはずです。
このままでも問題ないのですが、イタリック（斜体）が気になります。最後にcssを調整して斜体をなくします。
スタイルを調整する
検索結果の文言が斜体になっているので、これを解除します。
斜体のままで問題ないよ
という場合は、この手順は不要です。
まず、斜体が当たっているクラス名を特定します。
「.result-label」に「font-style: italic;」が設定されていることがわかります。
続いて、 管理画面＞オンラインストア＞テーマ＞コードを編集する をクリックして、コードエディタへ進みます。
その後 Assetsフォルダ＞thema.css.liquid を開きます。
このscssファイルの中に、スタイルを修正する記述を入れてあげればOKです。
.template-search .results-label {
font-style: normal;
}変更を保存してストアフロントで確認します。
斜体（イタリック）が解除されていれば、完了です。
コーディングが必要な場合（例：debut）
debut（デビュー）の検索結果をカスタマイズする場合はliquidの編集が必要です。
公式ヘルプに方法が載っているので、参照しながら進めます。
重要な箇所は以下です。
Searching only for certain types
You can restrict the type of objects that are returned by the online store search. For example, you can choose to return products, but not pages or articles. To control the objects that are returned, you need to use the type parameter.
The options are:
product – Search results contain matching products only.
article – Search results contain matching blog articles only.
page – Search results contain matching pages only.You can set the type parameter by using a hidden field in the search form within search.liquid.
日本語訳はこちら。
特定のタイプのみを検索する
オンラインストア検索によって返されるオブジェクトのタイプを制限できます。たとえば、商品のみを返させて、ページや記事は検索結果に返しません。返されるオブジェクトを制御するには、typeパラメーターを使用する必要があります。
オプションは次のとおりです。
product -検索結果には、一致する商品のみが含まれます。
article -検索結果には、一致するブログ記事のみが含まれます。
page -検索結果には、一致するページのみが含まれます。typeパラメータは、product、page、articleをカンマで区切ることで、任意の組み合わせにすることができます。たとえば、検索結果をproductとarticleのみにさせたい場合は、typeをarticle,productと指定します。
デフォルトのタイプはですarticle,page,product。これは、検索結果に一致するブログ記事、ページ、および製品が含まれることを意味します。
search.liquid内の検索フォームの非表示フィールドを使用して、typeパラメーターを設定できます。
たとえば、以下のように「name=”type”」かつ「value=”product”」と指定すると、検索結果を商品のみにできます。
修正が必要なのは2つのファイルです。
- search.liquid
- search-drawer.liquid
「search.liquid」は“検索結果ページ内の検索窓で検索した時”の結果をコントロールするファイルです。
「search-drawer.liquid」は“サイトヘッダーの検索窓から検索した時”の検索結果をコントロールするファイルです。
それぞれ別々のファイルなんですよね。
両方修正する必要があります。
なお、公式ヘルプには「search-form.liquid」を修正するように、との記述がありますが、正しくは「search-drawer.liquid」です。
おそらくアップデートでファイル名が変わったのかと。でもヘルプの方は昔のままなのだと思います。
Debut
search.liquid in the Templates directory
search-form.liquid in the Snippets directory
search.liquidを修正する
管理画面＞オンラインストア＞テーマ＞コードを編集をクリックして、エディタを開きます。
「Template」フォルダの中にある「search.liquid」を見つけます。
「search.liquid」内を「type」で検索をかけて、39行目あたりの以下の記述を見つけます。
この部分を以下に変えます。
<input type="hidden" name="type" value="product" aria-hidden="true" />- name=”options[prefix]” → name=”type”
- value=”last” → value=”product”
と修正しています。
これで、“検索結果ページ内の検索窓で検索した時”の結果が「商品」のみになりました。
search-drawer.liquidを修正する
管理画面＞オンラインストア＞テーマ＞コードを編集をクリックして、エディタを開きます。
「Snippets」フォルダの中にある「search-drawer.liquid」を見つけます。
「search-drawer.liquid」内を「type」で検索をかけて、19行目にある以下の記述を見つけます。
この部分を以下に変えます。
<input type="hidden" name="type" value="product" aria-hidden="true" />- name=”options[prefix]” → name=”type”
- value=”last” → value=”product”
と修正しています。
これで、“サイトヘッダーの検索窓から検索した時”の結果が「商品」のみになりました。
そもそも検索結果に何を出すべきか？
そもそも、サイト内検索結果をどうするべきか？ という問題があります。
検索結果を商品のみにするべきか？
商品もブログ記事もページ（固定ページ）も出すべきか？
商品とブログ記事にすべきか？
正直、ECサイトなら「商品のみ」にすべきです。
お客さんは商品を買いに来ており、商品を探したいから検索をするのです。ならば、検索結果に商品だけを出してあげるのが親切ですし、CVRも上がるでしょう。
ですが、商品数が極単に少なく、むしろブログ等のコンテンツが充実している場合は、その限りではありません。
たとえば、
- 商品は数点だけで、2クリック以内で商品一覧にアクセス可能、かつその商品の魅力を語るブログコンテンツが膨大
なんてサイトの場合は、商品とブログの検索結果にしても良いかもしれません。
Shopifyでのサイト構築を学ぶのにオススメな教材
- 本なら2020年の12月に発売された「商品売るならShopify 世界標準かつ最先端のECサイト構築入門
」がおすすめ！
私も買いましたが「shopifyとは？」という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。
- 動画ならUdemyの「Shopifyでクライアントのストアを作る人のための講座
」がオススメです！
私も買いましたが、Shopifyでのサイト構築からオーナー権譲渡までを一通り知ることができます。
shopifyは日本語のリファレンスが少なく、独学しようとすると大変です。
ネットで調べたり、Shopifyサポートに直接質問したりして学ぶこともできますが、知識にムラが出たり、そもそも正しい情報でなかったり、というリスクもあります。
今回紹介したのは、両方とも日本語の教材です。
内容も初心者向けなので、
これからshopifyに関わってみたい！
shopify一通り分かっているけれど、抜けてる部分がないか確認したい！
といった方にはとてもおすすめです。
まとめ
この記事のポイントをまとめます。
サイト内検索をカスタマイズする方法は2つです。
ノーコードの場合は、オンラインストア＞テーマ＞カスタマイズから可能です。liquidを編集する場合は「search.liquid」や「searc-○○.liquid」といったファイルを検索します。
公式のヘルプは以下です。
今回の記事はここまでです。