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

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

松田健聖

2021年10月31日

先日、ShopifyのDevelopper Changelogでストアフロントフィルタにメタフィールドを追加したとの情報がアップされました。

そこで今回はストアフロントフィルタを使ったファセット検索の設定方法について紹介します。

テーマはDawnを使っており、下記の通り既に検索ボックスが実装されているものになります。検索ボックスが実装されていないテーマをご使用の場合は、各自Dawnを参考に実装してください。

設定の流れ

  1. メタフィールドの定義の追加
  2. 商品登録&メタフィールドの更新
  3. コレクションの作成
  4. 絞り込みの追加

1.メタフィールドの定義の追加

まずは絞り込みを設定するためのメタフィールドを用意します。

設定 > メタフィールド の順に進みメタフィールドの定義を追加します。

今回は、TシャツA・TシャツB・TシャツCをそれぞれMENS・WOMENS・UNISEX として絞り込む内容としました。

正規表現の部分はドキュメントが見当たらなかったので、無視してください。

 

2.商品登録&メタフィールドの更新

今回は、TシャツA・TシャツB・TシャツCのメタフィールドにそれぞれMENS・WOMENS・UNISEXを設定します。

こちらはTシャツAという商品に対する設定内容です。TシャツB・TシャツCも同様に設定します。

 

 

3.コレクションの作成

2.で作った商品が含まれるTシャツコレクションを作成します。

4.絞り込みの追加

 オンラインストア > メニュー > 絞り込みの追加 の順に進み絞り込み機能を実装します。

これで設定は完了です!!

先ほど作ったTシャツコレクションのページを開くと...

 

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

 

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

logo

株式会社5-bit

私たち『5-bit(ファイブビット)』は、SaaS型E-Commerceプラットフォーム『Shopifty』専門の伴走型EC支援企業です。

お問い合わせ・ご相談はこちらまで
Shopifyの記事一覧