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

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

公開日:2021年10月31日

更新日:2022年07月02日

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

 

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

 

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

株式会社5-bit

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

お問い合わせはこちら

Our Contents私たちの情報発信

ShopifyにAmazon Payを導入するメリットや設定方法を解説

Shopifyのテーマ開発環境を構築する

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

Shopifyの新着商品一覧に期間限定(公開から〇〇日以内)で商品を掲載する方法

Shopifyの注文情報をGASでCSV出力する方法

Shopifyの全商品一覧(collections/all)に表示される商品を制御する方法

Shopifyテーマ開発にFigmaを使ったらかなり捗った話

Shopifyのクーポンを特定のユーザーにのみ適用させる方法

ブログ一覧