Shopifyでメタフィールドを追加する方法|Metafields Guru|テーマ開発

テーマ開発
この記事でわかること
・メタフィールドってなに?
・Shopifyデフォルト機能とアプリのメタフィールドの違い
・Shopifyデフォルト機能でメタフィールドを追加する方法
・アプリでメタフィールドを追加する方法:Metafields Guru

メタフィールドとは

WordPressをよく使われている方は、投稿画面に任意の入力箇所を設ける「カスタムフィールド」をよく使われていると思いますが、

WordPressでいう「カスタムフィールド」が、Shopifyの「メタフィールド」です。

デフォルトの管理画面では管理できない情報を追加したい場合に使います。

具体的な例で説明すると、コーヒー豆のECサイトだと商品に豆の原産国を表示させたり、照明のECサイトだとライトの寿命年数を表示させたりするために使います。

Shopifyのテーマ開発をする上で「メタフィールド」はとても重要なので、使いこなせるようになりましょう!

Shopifyデフォルト機能とアプリのメタフィールドの違い

メタフィールドの追加方法は2種類あります。

・Shopifyのデフォルト機能で追加する方法
・アプリを使って追加する方法

では、この2つの実装方法の違いはなんでしょうか。

Shopifyは、2021年6月30日に大幅のアップデートをしました。

そのアップデートの中で、デフォルト機能に「メタフィールドを追加できる機能」を追加しました。

なので、2021年6月30日以降にストアを開設したShopify Online Store 2.0を使っている方は、Shopifyのデフォルト機能でメタフィールドが追加できます!

それ以前にストアを開設し、運用されている方は、アプリを使ってメタフィールドを追加する必要があります。

Shopifyのデフォルト機能でメタフィールドを追加する方法

2021年6月30日以降にShopifyストアを開設したストアはデフォルト機能でメタフィールドを追加することができます。

①ストアにログインして、管理画面左メニュー「設定」をクリックし、「メタフィールド」をクリックします。

メタフィールド追加|Shopifyデフォルト機能

②メタフィールドを追加したい項目をクリックしましょう。(例では、商品をクリックします。)

③「定義追加」をクリックします。

④メタフィールドの定義を設定し、「保存」をクリックします。

  • 「名前」にフィールドの名前を入力します。
  • 「ネームスペースとキー」に「my_fields.name」を入力します。(nameの箇所は名前に入力したもの)
  • 「このメタフィールドをストアフロントAPIリクエストに公開します。」にチェックを入れます。
  • 「コンテンツタイプを選択する」からメタフィールドのタイプを選択します。

以上で、メタフィールドの設定は完了です!

メタフィールドをストアに表示させる方法

アプリでメタフィールドを追加する方法:Metafields Guru

2021年6月30日以前にストアを開設された方は、メタフィールドがデフォルト機能として備わっていないので、アプリを使ってメタフィールドを追加する必要があります。

それではアプリを使ってメタフィールドを実装していきましょう。

古いShopifyストアでメタフィールドを使いするためには、Metafields Guruというアプリを導入します。(Worpdressでいう、Advaced Custome FiledやSmart Custome Fieldsのようなものです。)

①Shopifyストア管理画面にログインしてください。

②Shopify app storeの「Metafields Guru」からアプリを追加する。

③アプリを追加すると以下のような画面になります。

アプリ追加|Shopifyメタフィールド

④Metafields setsタブをクリックし、Create setをクリックします。

Create set|Shopifyメタフィールド

⑤設定する情報を記入し、Createをクリックします。

項目の設定|Shopifyメタフィールド

⑥情報に誤りがなければ右上のSaveをクリックします。

情報設定|Shopifyメタフィールド

⑦左メニューの商品管理をクリックし、その他の操作から「Edit Metafields」をクリックします。

商品管理|Shopifyメタフィールド

⑧Add metafieldsをクリックします。

Add Metafileds|Shopifyメタフィールド

⑨先ほど作成したメタフィールドが表示されるので、チェックをしconfirmをクリックします。

チェック|Shopifyメタフィールド

⑩メタフィールドが追加されるので、商品ごとに値を入力し、Saveをクリックします。

完了|Shopifyメタフィールド

これで、アプリを追加してのメタフィールドの登録が完成しました!