- コレクションページの新しい絞り込み機能について知りたい
- どの項目で絞り込みできるのか知りたい
- 絞り込み機能の設定方法は？
早速オンラインストア2.0で実装された、Shopifyデフォルトの商品絞り込み機能についてまとめていきます。
Shopifyデフォルトの商品絞り込み機能とは
これまでコレクションページ（商品一覧）の絞り込み機能は、無料テーマではタグでの絞り込み機能しかありませんでした。
細かい条件で絞り込むようにするためには、有料アプリの「Product Filter & Search」や「Filter Menu by Power Tools」、「Collection Filter & Search Bar」などを利用するか、対応した有料テーマを利用するか、自身でカスタマイズする必要がありました。
しかし2021年6月30日にオンラインで開催された「Shopify Unite 2021」にて発表された「オンラインストア2.0（OS2.0）」の機能が組み込まれたストア・テーマであれば、デフォルトで絞り込み機能が利用できるようになりました。
以下は新しい絞り込み機能を設定した、Dawnテーマのコレクションページです。
Shopifyデフォルトの商品絞り込み機能の設定方法
商品絞り込み機能の設定方法
絞り込み機能を使用すると、以下の属性のフィルターをコレクションページに追加することができます。
- 在庫状況
- 価格
- 商品タイプ
- 販売元（ブランド）
- 商品バリエーション
これらを利用するためには、オンラインストア2.0に対応したテーマ、かつ新しいフィルター機能が実装されたテーマである必要があります。公式のDawnテーマでは、デフォルトで実装されています。
オンラインストア2.0のストアでは、管理画面の「オンラインストア」→「メニュー」に以下の設定が追加されています。
※テーマが対応していない場合は、以下のようにメッセージが表示されます。この場合設定自体はできますがサイトには反映されません。
デフォルトではAvailability（出品状況）とPrice（価格）がオンになっていますが、右上の「絞り込みを追加」から追加することが可能。
チェックをつけて「保存」ボタンを押すだけで設定は完了します。
Shopifyデフォルトの商品絞り込み機能を使って絞り込む
設定が完了すると、コレクションページの上部に絞り込みオプションが表示されます。実際にどのように絞り込むことができるのかを見てみます。
Dawnテーマを追加しただけではなぜか絞り込み機能が有効にならず、価格の絞り込みしか表示されない＆価格でも絞り込みができないバグがあるようです（2021年8月現在）。Dawnの日本語版のみ起きているため、テーマの言語を一度英語にし、日本語に戻すと直るようです。
在庫状況
「出品状況」をオンに設定すると、以下のように「在庫あり」「在庫切れ」で絞り込むことができます。
価格
「価格」をオンに設定すると、以下のように「最低価格」〜「最高価格」の範囲で絞り込むことができます。価格はデフォルトでオンになっています。
商品タイプ
「商品タイプ」をオンに設定すると、以下のように商品管理で設定されている商品タイプごとに絞り込むことができます。
販売元（ブランド）
「販売元（ブランド）」をオンに設定すると、以下のように商品管理で設定されている販売元ごとに絞り込むことができます。
商品バリエーション
「商品のオプション」から各バリエーション項目をオンに設定すると、以下のように商品管理で設定されているバリエーションのオプションごとに絞り込むことができます。
以下は「カラー」と「サイズ」を設定した場合です。
指定済みの絞り込みと設定解除
指定済みの場合は以下のように表示され、それぞれの項目右にある「×」を押すか、各絞り込み項目を再度開き「リセット」を押すと指定の条件が解除されます。
「全てクリア」を押すと、すべての絞り込みが解除されます。
Shopifyの商品絞り込み機能を既存のテーマに追加する
既存のテーマに追加するためには、テーマをオンラインストア2.0に移行し、さらにDawnテーマのコードを参考に、コレクションページのLiquidをカスタマイズしてフィルター機能を実装する必要があります。
以上です！
