メタフィールドによるカスタムフィルター

メタフィールドを作成し、カスタムフィルター機能(絞り込み機能)を行う方法を紹介します。

カスタムフィルターとは?

コレクションページなどで、商品の絞り込めるShopifyのフィルター機能にはオプション・出品状況・価格などの項目が備わっています。

これらの項目以外にも、商品のメタフィールドを用いてストア独自のフィルター(カスタムフィルター)を作成することができます。

下記では、例として｢ジェンダー｣という新しいフィルターの項目を追加しています。

このようなカスタムフィルターの作成方法を紹介します。

ご注意カスタムフィルターの設定はやや高度な設定となります。

メタフィールドの設定方法に慣れていない方は、こちらの商品メタフィールド (高度な設定) もしくはShopifyヘルプセンターのメタフィールドの説明をご覧ください。

フィルター機能の設定に慣れていない方は、こちらの Search & Discovery を使ったフィルターもしくはShopifyヘルプセンターのストアフロントの絞り込みをご覧ください。

カスタムフィルターを設定するには下記の手順を行います。

｢Shopify管理画面 > 設定 > カスタムデータ｣より商品にメタフィールドを追加します。

商品メタフィールドの定義から新たにメタフィールドの定義を設定します。

今回の例では、商品の絞り込みの要素にジェンダー(女性向け・男性向け・男女兼用)という分け方を設定していきます。

メタフィールドの定義を下記のように追加します。

ご注意｢名前｣を入力すると名前に基づき｢ネームスペースとキー｣が自動的に設定されます。ただし｢ネームスペースとキー｣は日本語が設定できないため、｢名前｣を日本語で入力した場合は｢ネームスペースとキー｣を再度アルファベットに手動で修正が必要です。

商品登録画面に行くと先ほど設定したメタフィールドの項目が増えているので、フィルターに使いたい値を入力します。

今回の例ではジェンダーでカスタムフィルターを使用したいので、男性向け・女性向けなどの値を入力していきます。

Search & Discovery アプリの絞り込みをカスタマイズから今回作成したメタフィールドの項目をフィルター項目に加えます。

MISEルのテーマのコレクションテンプレート画面で、サイドバーを表示させフィルターを表示させます。

(デフォルトでは表示状態となっています。)

｢テーマ設定 > コレクションと検索ページ』からサイドバーの表示を行ってください。

下記のように、カスタムフィルターの項目｢ジェンダー｣から｢女性向け｣を選択すると、メタフィールド｢女性向け｣の値の入った商品を絞り込めるようになりました。

今回の例のような｢ジェンダー｣の項目であれば値の種類が｢男性向け・女性向け・男女兼用｣の3種類からこれ以上増えることありません。そのような場合はメタフィールドの選択肢のプリセットを予め設定しておくと便利です。

こうしておけば、｢女性用・男性用｣などと間違って入力してしまい、いたずらにフィルターの項目を増やしてしまうことを防げます。

入力できる値をプリセットに制限したため、商品登録画面にて｢男性向け・女性向け・男女兼用｣の3つからのみ値を設定できるようになりました。