shopifyはデフォルトでECサイトに必要な機能がたくさん備わっています。
その中でも日本人にはお馴染みで人気のある機能が、「絞り込み検索」の機能です。
先日の制作依頼のお客様からも、特に価格による絞り込み検索機能を実装したいという相談がありました。
絞り込み検索機能のメリットは、ユーザーが求めている商品にたどり着きやすいので、サイトからの離脱防止になるという点が上げられます。
カテゴリーページや商品一覧ページにズラ〜っと並んだ商品から探すのは意外とストレス。また、並べ替え機能で並べ替えたとしても、長くスクロールしていって商品を探すとなると、ユーザーが途中で探すのを諦めてしまうなんて事もよくある事なんです…
なので絞り込み検索は商品数が多いストアでは必須の機能と言えますね。
今回はshopifyで絞り込み検索機能を使う方法を解説してみようと思います！
絞り込み検索機能でできる事。
shopifyのECサイトに絞り込み検索機能を追加するには、実はDawnをはじめとしたOS2.0のテーマならデフォルトの機能で可能です。
設定できる絞り込み項目は、
- 出荷状況(在庫の有無)
- 価格
- 商品タイプ
- ブランド(販売元)
の4つ。出荷状況の項目では在庫ありと在庫無しが選択できますし、価格の項目では任意の価格帯を入力して絞り込みができます。
商品タイプは商品に設定しておいたタイプを選択可能ですが、ここで選択できるのはタグではなくてタイプですので注意が必要。カスタムタイプを商品登録時に設定しておけば、この商品タイプによる絞り込みが可能になります。
ブランドは販売元という事ですが、こちらも商品登録時にブランドとして設定をしていれば絞り込み可能になります。
その他にも商品にカラーやサイズなどのバリエーションの設定をしていれば、バリエーションによる絞り込みも可能になりますし、メタフィールドで絞り込み項目を追加する事もできます。
商品一覧で絞り込み検索の設定方法。
Dawnのようなテーマなら、絞り込み検索はデフォルトの機能ですので設定方法は簡単です。
管理画面で、
オンラインストア→メニュー
で、下の方の「コレクションと検索の絞り込み」のところにある「絞り込みを追加」をクリックすると、先程の項目が現れますので、希望の絞り込み機能にチェックマークを入れて保存します。
商品にバリエーションを設定していれば、画像のようにカラーやサイズといったバリエーションでの絞り込みも設定できるはずです。
便利ですね。ただ、このままだと価格による絞り込みの入力フォームが変なんですね。
画像のように値段を入力するフォームが「差出人」と「受取人」になってます…仕上げにこの日本語の翻訳を修正しておきます。
絞り込みの入力フォームの日本語の修正方法。
デフォルトで設定されている日本語の翻訳がおかしい時ってshopifyでは時々あるので、修正方法を覚えておくと良いです。
管理画面のオンラインストアをクリックして、プルダウンメニューのアクションから「言語を編集」をクリックします。
一覧が表示されますので検索窓に「差出人」と入力して検索してみましょう。
すると、Facetsの中のfromが差出人になっているのがわかります。
なのでこの文字を変更しておきます。
同様に受取人も検索して翻訳された日本語を変更しておきましょう。変更したら保存をします。
最低価格〜最高価格とか、一般的でわかりやすい言葉にしておくのが良いですね。
海外製のshopifyでは時々おかしな日本語が適用されているのもご愛嬌。実際のサイトを見たりプレビューで確認ながらチェックして修正しておきましょう。
Dawnのようなテーマであれば、これでだいぶ高度な絞り込み検索機能の実装ができます。
絞り込み検索機能におすすめのアプリ。
アプリを使う事によって、もっと多彩な絞り込み機能の実装ができます。
おすすめのアプリは、「Product filter & Search」。
商品の詳細な検索は、特にアパレルやファッションを取り扱うECサイトではユーザビリティ向上のために必須と言っても過言ではありませんし、このアプリを使うと、デフォルトの機能よりも商品の検索機能が大幅にアップします。
このアプリを使ってDawnの絞り込み機能に追加して可能になる項目は以下のようなものがあります。
カラーパレットによる絞り込み
丸いカラーパレットにより、色の選択をして商品の絞り込みができます。やっぱりファッション系のECサイトでよく見る機能ですね。ユーザーが自分の好みの色のアイテムを探す時に便利です。
レビューの星の数による絞り込み
レビュー機能を実装していれば、レビューの星の数による絞り込みができるようになります。「Product Reviews」のようなレビュー機能のアプリにも対応していて便利です。レビューもユーザーが結構気にするポイントですね。
割引き率による絞り込み
ストアの商品に割引価格を設定していれば、割引率による絞り込みも可能です。ユーザーにとってはお買い得な商品が見つかりやすくなりますし、ショップ側にとっては売りたい商品を見つけてもらうのに役立ちますね。
検索候補の表示
このアプリのもう一つ特筆すべき機能が、検索語句の候補が表示される機能。
検索窓をクリックするだけでもよく検索される語句が表示されますし、例えばbと入力するだけで、blueとかblackといった検索候補の語句が表示されるだけでなく、候補の商品も表示されます。
さらに表示が非常に早い！瞬時に候補の語句も候補商品も表示されるんです！
そんな訳でこのアプリの機能を見ると、ファッションアイテムのECサイトではデフォルトの絞り込みだとちょっと足りない気がしてきますね。
価格は19$/月というお値段ですが、お値段以上の価値のあるアプリですし、コンバージョンアップや顧客の獲得・維持の期待ができるおすすめのアプリです。
メタフィールドを使って絞り込み項目を追加する方法。
また、メタフィールドを使うと、デフォルト以外にストア独自の絞り込み項目を追加する事ができます。
メタフィールドに定義を追加して、商品情報を定義の項目を入力しておけば、絞り込み検索の項目に追加する事ができます。
詳しいやり方はShopifyのメタフィールドを設定して絞り込み項目を追加する。を参考にしてみてください。
先程のアプリで設定できるような項目の追加は可能ですね。とはいえ検索語句の候補の表示や瞬時に商品を表示するといった事は、やはりアプリを使わないと難しいです。
ただ無料のテーマのデフォルトの機能でも色々な絞り込み検索機能はつけられますので、特にアパレルのECサイトを運営している方は設定してサイトのユーザビリティを高めておきましょう！
コメント