Shopifyのストアフロントフィルタにメタフィールドが追加されたので使ってみた

公開日：2021年10月31日

更新日：2022年07月02日

先日、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シャツコレクションのページを開くと...

こんな感じに追加したメタフィールドで絞り込みできるようになっています。

※この記事は2022年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容どおりに設定ができない場合があります。

2020年1月に、カナダのShopify本社より「Shopifyエキスパート」として認定をいただきました。現在までに累計で50以上のShopifyストアの構築、1000以上の機能開発経験。他社で難しい要件の実装や構築も承ります。

お問い合わせはこちら