BLOG

ホームページ制作会社のニュース・ブログ

Keep Going.

ホームページ制作に役立つことから、スタッフの素顔まで。

Shopifyアプリ「Product Filter & Search」で検索をもっと便利に!

豊富な商品から目的の商品により早く到着出来るECサイトでは訪問客の満足度は上がり、結果リピーターに繋がります。このキーは検索です。今回は、Shopifyアプリ「Product Filter & Search」で検索をもっと便利にしましょう

Shopifyアプリ「Product Filter & Search」で検索をもっと便利に!

ECサイトの運営方法の一つに、取扱商品数や商品幅を増やし充実させることで顧客増を狙うという方法がありますが、取扱商品数をただ増やせばいいというわけではありません。
商品数が増えれば増えた分、訪問ユーザーが目当ての商品にたどり着くのに時間がかかってしまうというデメリットも生まれるからです。目あての商品がなかなか見つからない、あるいはたどり着けないと、たとえその商品が実はあってもユーザーは購入することなくサイトを離脱してしまう可能性が出てきます。これを回避するためには、絞込機能やキーワード機能といった検索機能を充実させる必要が出てきます。
そこで今回は、Shopifyで構築したECサイトで、絞込検索機能の導入を簡単に行うことができるアプリの一つ、Shopifyアプリ「Product Filter & Search」の導入と、中でも検索結果の絞り込み要素で需要の多い「フィルター」「並べ替え」の2つの設定についてご紹介します。

1:「Product Filter & Search」ってどういうアプリ?

「Product Filter & Search」は、BoostCommerce社が開発したShopifyのアプリで、Shopifyでの構築ECへ、絞込検索やキーワード検索など、検索機能の導入・強化をすることができるアプリです。

「Product Filter & Search」は、基本 月額19ドルの英語版のアプリで、無料料体験(トライアル)期間が14日間設けられています。
料金は、月額19ドルのプランに始まり、取り扱う商品数によって、いくつかのプランに分かれますが、他のアプリにあるような、プランによって利用できる機能の制限がかかるということはありませんので、その点では安心して導入できます。
自社のECサイトが取り扱う商品数とアプリの料金プランがマッチするか、また自分の望む検索機能の強化が実現できるかどうか、あらかじめこのトライアル期間を利用して、まずは2週間、じっくり確認・検討してみて下さい。

2:「Product Filter & Search」でできることは?

  • 複数の条件で絞込検索ができる
  • キーワード検索ができる
  • オートコンプリート機能がある
  • 在庫の有無によって表示・非表示の設定をすることができる
  • ページごとに、異なる商品フィルターを設定することができる
  • 商品データの自動同期が出来る

上記のほかにも検索履歴の保存や入力スペルのチェック機能など、検索機能を強化・充実させることが出来る機能が複数あり、非常に有用なアプリです。14日間のトライアル期間を利用して、一度は検討してみてる価値のあるアプリとなっておりますから、是非試してみることをお勧めします。

3:「Product Filter & Search」の設定

ではこの「Product Filter & Search」を設定してみましょう。
「Product Filter & Search」は英語版アプリなため、メニューやアプリの設定画面が英語表記ですが、設定自体は非常にシンプルでわかりやすいため、英語版だからと身構えず、是非設定してみて下さい。

3-1:インストール

1.「Product Filter & Search」をShopifyアプリストアで検索、あるいはこちらから表示し、「Add app」(あるいは「アプリを追加する」)をクリックします。

2.確認画面が表示されますので、「アプリをインストール」をクリックして、Shopifyへインストール作業を開始します。

3.以上でインストールは終わりです。
サイトのメニュー「アプリ管理」から、「Product Filter & Search」がインストールされていることを確認してください。

4.インストールが完了すると、商品フィルターや検索のレイアウト選択画面が表示されますので、好みのレイアウトの「Select layout」をクリックします。

5.すると自動で、「Initializing」(初期設定)のstepへ移ります。
このステップでは、商品データを取得・分析を行い初期設定が自動で行われますので、画面下の「Get started」をクリックします。

6.データの取得・分析が行われている間、画面下の「Next」をクリックし、画面を進めていきます。

7.データの取得・分析が完了し「Next」をクリックすると、下記のようなStep3画面が表示されますので、「Preview the filter」をクリックします。

8.すると、先ほど「4」で選択したレイアウトのフィルター結果画面が表示されますので、表示を確認します。

9.プレビュー画面のチェックが終わったら、「Verify Setup」(セットアップの確認)
と表示されたステップ4へ戻ります。
問題なければ、アンケート項目の一番上「It works. What’s next?」を選んで「Next」をクリックします。

10.確認画面が表示されますので、よければ「Take me to Homepage」をクリックし、初期設定は完了です。

いよいよ、検索機能を活用していきましょう。

3-2:フィルター機能を活用しよう

 ECサイトなどで目当ての商品を検索する際に、色やサイズ、値段をはじめとしたさまざまな種類のフィルターで、検索結果を絞り込んだことがある方は多いでしょう。
この「Product Filter & Search」は、その「フィルター」の設定を、ページごとに行うことが出来ます。
手順は下記のとおりです。

1.商品フィルターの設定は、メニューの「Filter」から行います

2.「Filter」―「Manage filter trees」を選択すると下記のような画面が表示されます。

商品フィルター(Filter tree)の種類は、以下の3種類があり、基本的には、「1」と「2」を使用します。

  • 1:Default filter tree:すべての商品ページに表示されるフィルター
  • 2:Search filter tree:検索結果ページに表示されるフィルター
  • 3:Custom filter trees:特定の商品ページに設定を行うためのフィルター

「1」「2」のほかに、特定の商品に対して、フィルターを設定したい場合など、フィルターをカスタマイズしたいときには、「3」の「Custom filter trees」欄で、「Add new filter tree」をクリックして、設定したいフィルターの名称、フィルター内容を設定してください。

3.「Default filter」や「Search filter」を編集する場合は、画面の「編集(えんぴつマーク)」をクリックします。
すると、下記のような画面が表示されますので、編集したい内容を追加、あるいは順番の入れ替えなどを行ってください。
※順番の入れ替えは、入れ替えたい行をドラッグ&ドロップすることで入れ替えることが出来ます

4.編集がおわったら、画面下の「save」をクリックして、忘れずに保存しましょう

3-3:並べ替え機能を活用しよう

1.ソートについてはメニューの「Tool」―「Sort by options」を選択して表示される「Sort by options」画面から編集を行います。

あらかじめ、下記の項目がソート項目として登録されていますが、これ以外のソート順を追加する場合は、画面のソート欄上下にある「Add sort By」をクリックし、新たに設定したい内容を登録してください。

  • relevance:関連性(おすすめ順)
  • price:High to low(価格が高い順)
  • manual:(手動)
  • title:Z to A(名称順 Z-A)
  • best-selling:(売れている順)
  • title:A to Z(名称順 A-Z)
  • price:Low to high(価格が安い順)
  • created:Oldest to newest(古い順)
  • created:Newest to oldest(新しい順)

2.編集が終わったら、忘れずに「Save setting」をクリックして保存しましょう

4:まとめ

 「Product Filter & Search」の機能や導入、ニーズの高いフィルター機能やソート機能についての基本的な設定について、ご紹介しました。
 「Product Filter & Search」は、このほかにも、検索そのものの設定機能も導入することが出来る便利なアプリです。「Product Filter & Search」を導入することで、Shopifyのデフォルトの検索結果を、色やサイズといった様々なフィルター条件、あるいは価格順や売れてる順おすすめ順などのソートでさらに絞り込むことが可能になり、訪問ユーザーは目的の商品により早くより確実にアクセスすることが出来るようになるのです。
 目的の商品により早くより確実にアクセスすることが出来ると、ユーザーの満足度は上がります。結果、リピーターの確保へと繋がっていく大切な要素でもあります。
ぜひとも、トライアル期間を利用して、機能を試してみて下さい。
 とはいえ、もちろん、ご自身では、どんな設定をしたらいいのかがわからない方もおられるでしょう。あるいは、どうしても英語アプリはわからなくて不安だと身構えてしまう方もおられるかもしれません。
そんなときは、是非、弊社MH DESIGNSにご相談ください。
 弊社はShopify 公認パートナーでもありますので、Shopifyアプリについても豊富な知見を持っております。お客様の実現したい機能について、しっかりとヒアリングをさせていただいたうえで、必要な設定、あるいは最適なご提案をさせていただきます。
 もちろんアプリだけではなく、ShopifyでのECサイトの構築についても、お力添えが可能です。
ShopifyでのEC構築やShopifyアプリでお悩み・お困りの際は、どうぞお気軽に弊社MH DESIGNSまでご連絡ください。

関連記事

郵便番号を元に、住所の自動入力を実装!yubinbango.js
ヘッドレスCMSとは
セマンティックなHTMLの重要性と実例講座【誤用編】
セマンティックなHTMLの重要性と実例講座【基礎編】