Shopifyのメタフィールドを活用しよう

Shopifyの商品登録で、説明のテキストエディタにサイズから注意事項まで全部書くのが辛い。 ……なんて時に、活用したいのがメタフィールド。 メタフィールドを使うと、登録・編集画面の情報登録欄を増やすことができますよ。

Shopifyのメタフィールドとは

Shopifyのメタフィールド（Metafields）とは、必要に応じて情報登録欄を作ることができる機能です。 WordPressを使用されている方は“カスタムフィールド”と似た機能、と考えるとわかりやすいと思います。

デフォルトの状態だと、商品登録画面から設定できるのは商品名、説明文、価格、オプション/バリエーションの４つがメイン。 ですが、以下のような情報を別途登録したいこともあります。

• 商品の寸法（サイズ）
• パッケージサイズ
• 商品の重さ（重量）
• 原材料
• 発送目安
• 注意事項・特記事項

説明の中に書こうと思えば書けますが、分かりにくいですよね。

食品系であれば原材料や賞味期限、アパレルならば商品の組成や仕上がり寸法、家電なら規格や連続使用可能時間…などなど、ECショップで扱う商品によって掲載したい情報は違うでしょう。

自分のストアに合わせて情報登録箇所を作ってね、とShopifyが用意してくれている機能がメタフィールドなのです。

Shopifyメタフィールドの実装方法

商品にメタフィールドを設定してみましょう。

1.設定からメタフィールドを定義

Shopifyのストアダッシュボード（管理画面）を開いてください。 左下に表示されている「設定」をクリック。

設定の左メニューから、メタフィールドをクリックします。

メタフィールドを追加することが出来る項目が表示されます。 今回は商品の情報を追加したいので、商品を選択してください。

最初は下図のように、追加するという選択肢のみの表示です。 定義を追加する、というのはメタフィールドを作成するという意味になります。 どちらでも構いませんので、緑色の「定義を追加する」ボタンを押しましょう。

メタフィールドの設定画面が開きます。 それぞれの項目を確認しながら、入力していきましょう。

●名前

メタフィールドの名前です。 タイトルのように扱われるので、わかりやすい名前を入力しましょう。 今回は「素材」と設定ます。

●ネームスペースとキー

メタフィールドの固有ID、システムが識別するための名前を設定します。 ネームスペースとキーは.（ドット/ピリオド）で繋ぐ形で設定する必要があります。 今回は「info.material」と設定しておきます。

ネームスペースもキーも、半角英数字、アンダースコア ( _)、ハイフン (-)を使用して自由に設定することが出来ます。メタフィールドを複数作る予定があれば、関連する情報はネームスペースを同じにするとわかりやすいでしょう。 一度登録すると、変更はできません。

●説明

何を設定するためのメタフィールドか、簡単な説明を入力可能です。 空のままでも良いので、今回は入力しません。

●ストアフロントAPIに公開

ストアフロントAPIでメタフィールドの表示を許可するかのチェックです。 よくわからない方は、そのままでOK。 後から変更できるので、必要を感じたらチェックすれば大丈夫です。

●コンテンツタイプ

コンテンツタイプでは、登録する情報の種類を選択します。 一度登録すると、変更はできません。

コンテンツタイプを選択する、をクリックすると、使用できる一覧が表示されます。

今回は素材を入力できれば良いので、単一行のテキスト - 1つの値にします。 保存してメタフィールドの定義を完了させてください。

なお、メタフィールドで選択できるコンテンツタイプ一覧は、Shopifyヘルプセンター(日本語版)で紹介されています。

2.商品にメタフィールド情報を登録

メタフィールドが追加できましたので、次は、商品毎に情報を登録していきましょう。

商品管理から、メタフィールドを使って情報を入れたい商品を選択。 商品情報の登録画面で、一番下までスクロールダウンしてください。 メタフィールドというブロックが追加されています。

素材の右側、空のテキストフィールドにこの商品の素材を入力。 保存すれば、登録完了です。

3.メタフィールドを表示する

メタフィールドを作成し、商品登録画面から情報を入力しても、デフォルトの状態だとメタフィールドの情報は表示されません。 テーマのカスタマイズ画面から、メタフィールドの情報を呼び出す設定をしましょう。

商品 > デフォルトの商品ページを開きます。

※メタフィールドが未設定の商品が表示される方は、後記のメタフィールドを登録した商品でプレビューをお試しください

商品情報の中から、Materialsをクリック。 非表示中の方は、目のアイコンをクリックして“表示”状態にしてください。

行のコンテンツと書かれた、テキストエリアの右側にあるアイコン（動的ソースを挿入）をクリック。 表示される選択肢の中から、作成したメタフィールド「素材」を選択します。

プレビューの方で、折りたたみを開いて確認します。 『2.商品にメタフィールド情報を登録』で登録した情報が表示されれば成功です。

メタフィールドを登録した商品でプレビューする

商品が複数あり、お試しに一件だけメタフィールドを設定した場合。 プレビューで別の商品が表示されていて確認しにくい！という事があります。

そんな時は左上、プレビューの横にある「変更」を使います。 変更をクリックすると、プレビューに使う商品を選択できます。

メタフィールド呼び出すコードは?

メタフィールドは、Liquidのコードでも呼び出すことができます。

使うのは、メタフィールドの定義で設定したネームスペースとキー。 加えて、商品のメタフィールドであればproduct.metafields、ブログ記事用のメタフィールドであればarticle.metafields…というように、どのコンテンツ（オブジェクト）のメタフィールドかを示す必要があります。

とは言え、これは覚える必要はありません。 設定から、メタフィールドを見るとわかります。 今回の場合は「product.metafields.info.material」ですね。

これを{{と}}で囲むと、該当するメタフィールドの値を表示することができます。 テーマのカスタマイズ画面からであれば「カスタマイズされたLiquid」セクションに書くと、情報が表示されます。

もちろん、コード編集で、任意の位置に記述して表示することも出来ます。