Shopifyのメタフィールドとは? 独自の情報を登録できるようにしよう

Shopifyで商品登録したけど、説明のテキストエディタにサイズから注意事項まで全部書くのが辛い。表示もパソコン幅だと、細長くて見にくいし…。

……なんて時に、活用したいのがメタフィールド。
今回は、コード編集一切なしで出来る基本的なメタフィールドの定義・実装方法を解説します。任意の商品へのリンクを追加するメタフィールド、表示用セクションファイルのコードも公開！

• Shopifyのメタフィールドとは
• Shopifyメタフィールドの実装方法
• 1.設定からメタフィールドを定義
• 2.商品にメタフィールド情報を登録
• 3.ページでメタフィールドを表示
• コードでメタフィールド呼び出す
• メタフィールドの活用Tips
• 管理画面上でメタフィールドの順番を変える
• メタフィールドで特定の商品へのリンクを作る

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」セクションに書くと、情報が表示されます。

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

メタフィールドの活用Tips

管理画面上でメタフィールドの順番を変える

メタフィールドを複数作ると「こっちを上に表示させたい」というものが出てきます。
が、メタフィールドの並び順については、メタフィールドの定義からも、商品などの登録・編集画面でも設定できません。

設定できるのは「ピン止め」の有無だけなので、これを使って順番を変えます。
ちなみに、ピン止めとは登録・編集画面内でメタフィールドを表示するか、「全て表示」をクリックしないと表示しないかを決める機能です。

メタフィールドでは、ピン止めしたのが新しいものほど、上に表示されます。
表示順を変えたい時は、この仕組みを使って1つずつ並べ直していきます。

1.メタフィールドのピン止めを全てOFFにする
2.１番下に表示させたいメタフィールドをピン止めする
3.〇〇メタフィールドの定義の左のをクリック（保存する）
4.設定したいメタフィールド名をクリック
5.下から２番目に表示したいメタフィールドをピン止め
6.〇〇メタフィールドの定義の左のをクリック（保存する）

…と1つずつ設定すると、メタフィールドを好きな順番に並び替えることができます。

をクリックして、画面を切り替えることで、ピン止めした履歴を保存しているイメージです。画面切り替えを省くと、リロードした時に設定した順番と違う表示になってしまうことがあるので注意してください。

メタフィールドの数が多いと地味に面倒ですよね。
最初から下に表示したいメタフィールドから定義（作成）するか、最後にまとめて順番の変更をするのがおすすめです。

メタフィールドで特定の商品へのリンクを作る

商品ページ内に、関連する特定の商品へのリンクを表示したいケースもあります。
アパレル系ECだと「モデルコーディネイト使用商品」、食品系だと「この商品におすすめの紅茶」など、コレクションやタグで設定するのはちょっと…という時には、メタフィールドを使うと便利です。

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

まず、商品メタフィールドを追加しましょう。

名前、ネームスペースとキーは、任意で設定してください。
コンテンツタイプ「商品」に、その下で「商品のリスト」を選びます。

2.メタフィールドを使って商品を選択

メタフィールドを設定したい商品の編集ページを開きます。

作成した商品リストの、入力箇所をクリック。
「商品を選択」をクリックして、商品ページ内に表示させたい商品を設定します。

3.テーマのコードを編集（セクション作成）

商品リストの場合、テーマカスタマイズ画面の「動的ソースを挿入」から一発で表示させるのは難しいです。コード少し触る必要があります。

販売ストア > オンラインストアから、コード編集画面を開きます。
新しいセクションを追加する、からセクションを新規作成。
ファイル名はlesson-metafield.liquidとしました。

lesson-metafield.liquidの中身をまるごと、以下のコードに置き換えてください。

{%  if product.metafields.item.relate != blank %}
  <div class="page-width"> 
      <div class="grid"> 
        {% for item in product.metafields.item.relate.value %}
          <div style="flex: 1;">
            <a href="{{ item.url }}">
              <img src="{{ item.featured_image | img_url: 'large' }}" style="max-width: 100%;">
            </a>
            <h3>{{ item.title }}</h3>
            <p>{{ item.price_min | money }} ～</p>
          </div>
        {%- endfor %}
      </div>
  </div>
{% endif %}

{% schema %}
  {
    "name": "メタフィールド商品リスト",
    "settings":[] ,
    "presets": [
      {
        "name": "メタフィールド商品リスト"
      }
    ],
    "templates": ["product"]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

商品メタフィールド（product.metafields.item.relate）が空でない場合は、登録されている情報をループで取り出して表示しています。
schemaのtemplatesは、このセクションを使用できるテンプレート（ページ）の指定です。今回の場合だと、商品ページのみで使えるように制限している形です。

注意点は、メタフィールドのタイプが“商品リスト”になっていること。
リストタイプの場合、for文ではvalueプロパティを使用する必要があります。

Shopifyテーマのコード編集（基礎）については、下記の記事をご確認ください。

Skillhubブログ

Shopifyのテーマセクションを自作する方法【Liquid・JSON未経験者でもできる】

Skillhubブログ

Shopifyテーマに自作ブロックを作成・追加する方法【Liquid・JSON未経験でもできる】

Skillhubブログ

【Shopifyテーマカスタマイズ】最初に把握したいLiquidタグとオブジェクト知識まとめ

4.テーマのカスタマイズ画面から追加

セクションのLiquidファイルを上書き保存。
テーマのカスタマイズ画面 > デフォルトの商品を開きます。

セクションを追加、から作成した「メタフィールド商品リスト」を選びます。

メタフィールドで選択した商品が表示されれば成功です！
HTML/CSSを変更・追加して、お好きにレイアウトやデザインを変更してください。

今回は商品メタフィールドで行いましたが、同様にブログやページのメタフィールドを設定すると「このページで紹介した商品はこちら」のようなリンクを作ることも可能です。
ストアオーナー（ECサイトの運営者）も手軽に設定できて、便利ですね。