はじめに

オンラインストアを運営するにあたり、ストア内の検索機能はエンドユーザーが「欲しい商品」「気になる商品」に素早くたどり着くための重要な導線です。
しかしShopifyの標準テーマであるDawnやRiseでは、デフォルトで検索結果にブログ記事やページまでもが含まれており、ユーザーが商品をスムーズに見つけることが出来ないケースが多くあります。
Shopifyでストア運営をされているマーチャントさんの中にも、実際にお客様からお声をいただいたり、使いづらさを実感したりといった方は少なくないのではないでしょうか。

そこで本記事では、Dawnテーマを対象に、たった2ステップでストア内検索を”商品だけ”に絞り込む方法をご紹介します。
ユーザーが求めている結果を瞬時に正しく表示させることで、UX向上やサイトの回遊率・CV率のアップが狙えます。

コーディングに詳しくないという方でも取り組みやすいようLiquidファイルごとに編集内容を解説していますので、ぜひお試しください。

実装方法

1. 「header-search.liquid」の該当箇所を変更

はじめに、ヘッダーからの検索結果を制御します。
「header-search.liquid」の66行目あたりにある「<input type="hidden" ～～>」を以下のように変更します。

<input type="hidden" name="options[prefix]" value="last">

↓ 下記に変更

<input type="hidden" name="type" value="product">

上記により、ヘッダーから検索した際に商品情報のみが検索結果に表示されるようになりました。

2. 「main-search.liquid」の該当箇所を変更

次に、「検索結果」の画面上にある検索窓から検索した場合の動作を制御します。
先ほど同様に、「main-search.liquid」の104行目あたりの記述を以下のように変更します。

<input name="options[prefix]" type="hidden" value="last">

↓ 下記に変更

<input type="hidden" name="type" value="product">

以上で、すべてのストア内検索の検索対象が商品情報のみとなりました。

まとめ

いかがでしたが？
検索結果を”商品だけ”に絞ることで、無関係なブログやページが検索結果に混ざることがなくなり、ユーザーの離脱を防いで購買目的にぴったり結びつく体験を提供することができます。

今回ご紹介した方法は、簡単なコーディングで実装でき、費用対効果の高い施策です。
Shopifyのコミュニティでも実績が報告されており、多くのマーチャントさんにとって有効な改善策となるカスタマイズですので、積極的に実装していきましょう！
実装にあたってのご不明点やさらなるカスタマイズなどでご相談がある方は、ぜひお気軽にお問い合わせください！