Shopifyでメタフィールドを使う方法
2021.12.28
Shopifyで商品データを取り扱うとき、商品名や価格以外にもデータを登録したいと思うことはないでしょうか。
本記事では、そういった独自のデータを登録するための機能「メタフィールド」について紹介したいと思います。
メタフィールドとは
序文でも述べた通り、商品情報に対して独自のデータ項目を追加する機能です。
WordPressを使用した事がある方であれば、カスタムフィールドの事だと思って頂ければ理解がしやすいと思います。
この機能を使用するには、昔はマスクデータへのアクセスやアプリの追加等が必要でした。
ですが本記事の執筆時点(2021年12月)では公式の機能として実装されています。
メタフィールドの追加方法
それでは早速メタフィールドの設定を行っていきます。
メタフィールドの設定はメインメニュー画面にある設定の中から行います。
設定メニューよりメタフィールドを選んでください。
現在メタフィールドを設定できる項目としては、商品とバリエーションの2種類です。
他にもコレクション、顧客、注文の項目が準備中となっているため、将来的にはこれらの項目にもメタフィールドが追加できるようになるはずです。
商品の項目を選ぶと現在設定されているメタフィールドの一覧が表示されるので、ここで「定義を追加する」を選択するとメタフィールドの追加画面になります。
メタフィールド追加の際に設定する項目は以下になります。
- ・名前
メタフィールドの名称を設定します
- ・ネームスペースとキー
コードからメタフィールドにアクセスする際の名称を選択します
- ・説明
メタフィールドの説明を記載します
- ・コンテンツタイプ
メタフィールドのデータ型を設定します
選択できるデータ型
各項目を入力して保存すればメタフィールドの追加完了です。
これで商品管理画面からメタフィールドへのデータ入力が行えるようになります。
メタフィールドの使用方法
今回は以下の内容で作成したメタフィールドを例に上げて説明をします。
商品のメタフィールドへのアクセスはpuroduct.metafieldsオブジェクトから行います。
例で作成したメタフィールドの表示は以下のように記述します。
{{ product.metafields.my_fields._test }}
「my_fields._test」の部分が先程ネームスペースとキーで設定したものになります。
またバリエーションに設定したメタフィールドへのアクセスは、product.variants.metafieldsオブジェクトから行います。
{% for variant in product.variants %}
{{ variant.metafields.my_fields._test }}
{% endfor %}
上記は商品バリエーションの数だけループを行い、設定した「my_fields._test」の内容を表示します。
バリエーションのメタフィールド使用の際の注意点
バリエーションのメタフィールドを使用する際に気をつけたい点があります。
商品のバリエーション切替を動的に行う際にはproduct_optionオブジェクトを使用しますが、このオブジェクトにはメタフィールのの情報は含まれていません。
そのため、選択した商品のバリエーションに合わせて情報を切り替えたい場合は、別途メタフィールドの情報を取り出しバリエーション切替に合わせて描画し直す処理の作成が必要になります。
まとめ
Shopifyは現在とても勢いのあるサービスのため、非常にアップデートの速度が早いです。
今回紹介したメタフィールドの機能について検索しても、shopifyの機能には存在しないのでAppの追加が必要、という記事もまだ見かける事があるのが現状です。
やはり最新の情報を得るためには公式の情報を追いかけるのが一番の近道ですが、何か新たな更新があった際は本サイトでもご紹介していきたいと思います。
Shopify公式ブログ
関連
Webサイト制作サイト制作
Webデザイン
SEO対策コンテンツSEO
SEO基礎SEO対策SEO解析
