Shopify

[Shopify] 新しいメタフィールドの概要と使い方まとめ

この記事で解決できるお悩み
  • 新しいメタフィールドとは何か知りたい
  • メタフィールドを使うと何ができるのか知りたい
  • メタフィールドの設定方法は?

早速Shopifyの新しいメタフィールド(Metafields)についてまとめていきます。

Shopifyの新しいメタフィールドとは

メタフィールドとは、デフォルトで用意されていない特定の情報を保存することのできるフィールドのことです。

例えば、商品情報にはデフォルトで用意されている情報(ストアに表示される項目)には、「タイトル」「説明」「画像」「価格」「商品タイプ」「販売元」くらいしか用意されていません。

メタフィールドを使うことで、「サブタイトル」「サイズ表」「型番」「ファイルダウンロード」など、デフォルトで用意されていない様々な項目を自由に追加することができます。

以前からメタフィールドは利用できましたが、管理画面から利用するには「Metafields Custom Field Master」や「Metafields Guru」などの有料アプリを使用する必要がありました。

今回、2021年6月30日にオンラインで開催された「Shopify Unite 2021」にて発表された新しい「メタフィールド」は、「オンラインストア2.0(OS2.0)」の機能が組み込まれたストア・テーマであれば、デフォルトで利用できるようになりました。

2021年7月9日現在、新しいテーマエディタが適用されているため、2021年6月28日以前に作成されたストアでもメタフィールドの定義自体はできるものの、オンラインストア2.0に対応していないテーマでは、NoCodeでテーマに組み込んでストアに表示することはできません。

新しいDawnテーマや、オンラインストア2.0に移行したテーマでは利用できます。

Shopifyのメタフィールドでできること・設定方法

それでは具体的に何ができるかを見ていきます。

メタフィールドの定義を追加・編集する

まず、管理画面上でメタフィールドの定義を追加できるようになりました。

オンラインストア2.0が適用されたストアでは、設定メニューの左下に「メタフィールド」という項目が追加されています。

ここから新しいフィールドを簡単に追加することができるようになりました。

利用できるメタフィールドの種類

メタフィールドには、2021年7月時点では以下の5項目が存在し、そのうち2項目の「商品」と「バリエーション」のみが利用可能となっています。

今年の後半にはより多くの型や配列をサポートする予定とのこと。(「顧客」「注文」のメタフィールドが追加されるとかなり便利になるため待ち遠しいですね)

メタフィールド定義の構成内容

メタフィールドの定義は、以下の内容で構成されています。

詳しくはヘルプに記載されているため省きますが、メタフィールドの定義には2つのタイプがあります。

名前にカーソルを当てると表示される以下が、「標準定義」と言われるメタフィールドになります。

これらは何に使用するフィールドか、コンテンツタイプ・値の型やエラー定義などがあらかじめ定義されているものです。

※現在は「商品のサブタイトル」「サポートガイド」「ISBN」「UPC」「EAN」しかなくあまり使えませんが、今後増えていくようです。

それに対し、ここから選択せずに手動で名前などを設定していくのが「カスタム定義」となります。

名前と説明は、以下のように編集画面の入力項目に表示されます。

※ネームスペースとキーは、Liquidコードを編集して挿入する際に使用します。

メタフィールドの定義で選択できるコンテンツタイプ

メタフィールドの定義で選択できるコンテンツタイプは決まっており、以下の種類があります。

 

カラーピッカーのフィールドを設けたいときに使用します。

実際の編集画面は以下。

 

日付と時刻

日付・時刻の選択フィールドを設けたいときに使用します。日付だけか、日付と時刻の両方かを選択できます。追加ルールで選択できる日付の範囲を指定することもできます。

実際の編集画面は以下。(以下は日付のみの場合)

 

ファイル

ファイルアップロードのフィールドを設けたいときに使用します。追加ルールで画像のみを受け付けるか、すべてのファイルタイプを受け付けるかを指定することもできます。

実際の編集画面は以下。

 

JSON

JSONの入力フィールドを設けたいときに使用します。

実際の編集画面は以下。

 

測定

測定のフィールドを設けたいときに使用します。「重量」「量」「寸法」のいづれかが選択でき、追加ルールで入力できる最小・最大の数値を指定することもできます。

「重量」「量」「寸法」は、それぞれ選択できる単位が異なります。
※左から、「重量」「量」「寸法」の選択可能な単位。

実際の編集画面は以下。(以下は重量の場合)

 

数値

数値のフィールドを設けたいときに使用します。「整数」か「小数」化を指定でき、追加ルールでは入力できる最小値・最大値を設定することもできます。

実際の編集画面は以下。(以下は整数の場合)

 

リファレンス

リファレンス(参照)のフィールドを設けたいときに使用します。「ページ」「商品」「商品バリエーション」のいづれかを参照できます。

実際の編集画面は以下。(以下はページの場合)

 

テキスト

テキストのフィールドを設けたいときに使用します。単一行のテキストフィールドか、複数寮のテキストエリアかを指定でき、追加ルールではテキストの最小の長さ・最大の長さ・正規表現を設定することもできます。

実際の編集画面は以下。(以下は単一行の場合)

 

trueまたはfalse

trueまたはfalseのフィールドを設けたいときに使用します。

実際の編集画面は以下。

 

URL

URLのフィールドを設けてリンクを追加したいときなどに使用します。追加ルールでは入力を許可するドメインを設定することもできます。

実際の編集画面は以下。

 

たくさんありますが、メタフィールドの定義で選択できるコンテンツタイプは以上です。もしかしたらコンテンツタイプも今後増えるかもしれません。

メタフィールドに値を追加する · Shopify ヘルプセンター

こちらのコンテンツタイプ一覧を見ると、2021年7月時点では選択できない「Money」「評価」とあるため、近いうちに追加されるのかもしれません。

メタフィールドをピン止めする

メタフィールドの定義を追加する際に、デフォルトでは「定義がピン止めされました」と、ピン止めがオンになっています。

定義したフィールドは「商品」「バリエーション」などのタイプごとに、一覧表示されますが、一覧の右側のアイコンでピン止めされているかどうかがわかります。

ピン止めされていると、以下のように該当の編集画面の入力項目にデフォルトで表示されるようになります。

ピン止めできるのは最大10項目までとなっており、それ以上ピン止めしようとするとエラーになります。

逆にピン止めされていないメタフィールドは、

該当の編集画面の右上の「すべてを表示」を押さないと表示されません。

「すべてを表示」を押した先に、すべてのメタフィールドが表示されます。

編集画面からデータにアクセスする

メタフィールドの定義を商品に追加したことで、編集画面に追加したメタフィールドのフィールドが表示され、商品ごとに入力できるようになりました。

ただ、これだけでは実際の商品ページには表示されません。

テーマエディタ上でデータソースを反映する

ページ上にメタフィールドのコンテンツを表示するためには、オンラインストア2.0のテーマを使用することで、テーマ内のセクションにメタフィールドの値を連携=表示することができます。

まずは管理画面の「オンラインストア」→「カスタマイズ」から、該当するテンプレートへ移動します。

商品メタフィールドの場合は、以下のように商品詳細のテンプレートを開きます。

用意されている各セクションの項目で、定義したメタフィールドが利用できる場合は、以下のような小さな「動的ソースアイコン」が表示されます。

アイコンを押すと、利用可能なメタフィールドのみが表示されます。

例えば、テキストの場合は「テキスト」「カレンダー」「測定」「数値」が、

リンクの場合はコンテンツタイプが「URL」のみが選択可能となります。

※コンテンツタイプ「色」「JSON」「trueまたはfalse」はDawnテーマに用意されているデフォルトのセクションには見当たらないため、テーマコードの編集で利用可能かと思われます。

動的ソースアイコンには2種類あり、通常のアイコンと「+」マークがついたアイコンがありますが、違いは以下です。

  • 通常のアイコン:動的ソースを1つだけ選択できる
  • 「+」がついたアイコン:動的ソースを複数(最大20まで)選択できる

以下が設定後です。

これで先ほど作成したメタフィールドをセクションのこの部分に接続できました。

このテンプレートを使った商品は、商品ごとに指定したメタフィールドの値が自動的に表示されるようになります。

テーマを編集して直接データソースを反映する

テーマを直接編集する場合は、メタフィールドの定義に表示されているネームスペースとキーを使用して、メタフィールドを埋め込むことができます。

Liquidコードを編集する際には、バックアップを必ず行い、テスト環境で確認を行うなど、自己責任のもとに行ってください。

Shopifyのメタフィールドを既存のテーマに追加する

Shopifyの新しいメタフィールドを、Dawn以外の既存のテーマに追加することも可能です。

まずはオンラインストア2.0に移行する必要がありますが、以下を参考にどうぞ。

[Shopify] 既存テーマをオンラインストア2.0に移行する方法 早速Shopifyの既存テーマをオンラインストア2.0に移行する方法についてまとめます。 Liquidコードを編集する...

オンラインストア2.0に移行すれば、Dawnテーマ同様に新しいメタフィールドがDebutテーマなどでも利用可能になります。

(おまけ)今後追加される予定の「コンテンツ」管理メニューについて

まだ管理画面には追加されていない機能ですが、2021年6月30日にオンラインで開催された「Shopify Unite 2021」の中では、新しいコンテンツ管理プラットフォームが紹介されました。

左メニューに「Content」が追加されているのが確認できます。

ここからメタフィールドを使って全く新しいカスタムタイプを作ることができるようになるとのこと。

動画では「Testomonials(お客様の声)」というコンテンツを商品ごとに設定する方法が紹介されていました。

これはまだ利用できませんが、2021年の後半に再度詳しく紹介されるとのことで楽しみですね。

以上です!

ABOUT ME
toru
フリーランスWebディレクター・UI/UXデザイナー。大手Web制作会社10年・フリーランス6年の経験をもとに、Webサイト・ECサイト構築・運用支援を行うかたわら、Web制作スキルを身につけたい方や、フリーランスを目指す方に向けて、自分の経験をもとに役に立つ情報をわかりやすく発信しています。