先日、ShopifyのDevelopper Changelogでストアフロントフィルタにメタフィールドを追加したとの情報がアップされました。
そこで今回はストアフロントフィルタを使ったファセット検索の設定方法について紹介します。
テーマはDawnを使っており、下記の通り既に検索ボックスが実装されているものになります。検索ボックスが実装されていないテーマをご使用の場合は、各自Dawnを参考に実装してください。
設定の流れ
- メタフィールドの定義の追加
- 商品登録＆メタフィールドの更新
- コレクションの作成
- 絞り込みの追加
１．メタフィールドの定義の追加
まずは絞り込みを設定するためのメタフィールドを用意します。
設定 > メタフィールド の順に進みメタフィールドの定義を追加します。
今回は、TシャツA・TシャツB・TシャツCをそれぞれMENS・WOMENS・UNISEX として絞り込む内容としました。
正規表現の部分はドキュメントが見当たらなかったので、無視してください。
２．商品登録＆メタフィールドの更新
今回は、TシャツA・TシャツB・TシャツCのメタフィールドにそれぞれMENS・WOMENS・UNISEXを設定します。
こちらはTシャツAという商品に対する設定内容です。TシャツB・TシャツCも同様に設定します。
３．コレクションの作成
２．で作った商品が含まれるTシャツコレクションを作成します。
４．絞り込みの追加
オンラインストア > メニュー > 絞り込みの追加 の順に進み絞り込み機能を実装します。
これで設定は完了です！！
先ほど作ったTシャツコレクションのページを開くと...
こんな感じに追加したメタフィールドで絞り込みできるようになっています。
目次を表示
※この記事は2024年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。
この記事の監修者
)
)
)
)
)
)
)
)
