🟦
メタフィールドによるカスタムフィルター
メタフィールドを作成し、カスタムフィルター機能(絞り込み機能)を行う方法を紹介します。
設定の手順
カスタムフィルターを設定するには下記の手順を行います。
商品にメタフィールドを設定
｢Shopify管理画面 > 設定 > カスタムデータ｣より 商品にメタフィールドを追加します。
商品メタフィールドの定義から新たにメタフィールドの定義を設定します。
今回の例では、商品の絞り込みの要素にジェンダー(女性向け・男性向け・男女兼用)という分け方を設定していきます。
メタフィールドの定義を下記のように追加します。
- 名前 : ジェンダー
- ネームスペースとキー: custom.gender
- 説明: ジェンダータイプ
- タイプの選択: 単一行のテキスト
｢名前｣を入力すると名前に基づき｢ネームスペースとキー｣が自動的に設定されます。ただし｢ネームスペースとキー｣は日本語が設定できないため、｢名前｣を日本語で入力した場合は｢ネームスペースとキー｣を再度アルファベットに手動で修正が必要です。
商品のメタフィールドに値を入れる
商品登録画面に行くと先ほど設定したメタフィールドの項目が増えているので、フィルターに使いたい値を入力します。
今回の例ではジェンダーでカスタムフィルターを使用したいので、男性向け・女性向けなどの値を入力していきます。
Search & Discovery で フィルター項目の追加
Search & Discovery アプリの 絞り込みをカスタマイズから今回作成したメタフィールドの項目をフィルター項目に加えます。
MISEルテーマの設定
MISEルのテーマのコレクションテンプレート画面で、サイドバーを表示させフィルターを表示させます。
(デフォルトでは表示状態となっています。)
｢テーマ設定 > コレクションと検索ページ』 からサイドバーの表示を行ってください。
下記のように、カスタムフィルターの項目｢ジェンダー｣から｢女性向け｣を選択すると、メタフィールド｢女性向け｣の値の入った商品を絞り込めるようになりました。
Tips: 値の項目の設定
今回の例のような｢ジェンダー｣の項目であれば値の種類が｢男性向け・女性向け・男女兼用｣の3種類からこれ以上増えることありません。そのような場合はメタフィールドの選択肢のプリセットを予め設定しておくと便利です。
こうしておけば、｢女性用・男性用｣などと間違って入力してしまい、いたずらにフィルターの項目を増やしてしまうことを防げます。
入力できる値をプリセットに制限したため、商品登録画面にて｢男性向け・女性向け・男女兼用｣の3つからのみ値を設定できるようになりました。
