はじめに

今回の記事では、Shopify のメタフィールドについて解説します。

うまく使えると、商品、ブログ、お客様によって画面の表示を切り替えたりすることができます。

うまく使えるよう、しっかりと学んでいきましょう！

目次

• メタフィールド とは
• メタフィールドのタイプ
• メタフィールドの設定方法
  • 商品にメタフィールドの値を入力する
  • テーマで利用する
  • コードを編集してメタフィールドを表示する
• まとめ

メタフィールド とは

メタフィールドは、Shopify ストアにカスタムデータを追加するための強力なツールです。基本的なデータモデルには商品や注文などが含まれますが、メタフィールドを使うと、これらの標準モデルを超えたデータを保存し、独自の情報を商品や顧客、ブログに関連付けることができます。

たとえば、アパレルストアのオーナーが商品の洗濯指示を追加したい場合、商品に「お手入れ方法」というメタフィールドを追加して、それぞれの商品ページに具体的な指示を表示することができます。

メタフィールドのタイプ

メタフィールドの各タイプは、異なるユースケースのさまざまな値に対応しています。以下はメタフィールドのタイプと使用例などを記載した表です。

※ リストで使用するが「はい」の場合、複数設定できます。

コンテンツタイプ	説明	リストで使用する	例
コレクション参照	既存のコレクションにリンクすることができます。	はい	ファッション商品の「トータルコーディネート」コレクションをオンラインストアに含めます。
色	#RRGGBB 形式の RGB 値をサポートしています。	はい	商品の色を保存し、商品ページの背景を設定する。
日付	タイムゾーンなしの、ISO 8601 形式の日付値をサポートしています。	はい	商品の消費期限、注文配達日、またはお客様の生年月日を追加する。
日付と時刻	ISO 8601 形式の日付値と、UTC 時間の時間値をサポートしています。	はい	イベントの公開日または商品の発売日を追加する。
小数	小数値は、+/-9999999999999.999999999 の範囲内とし、整数は最大 13 桁まで、小数は最大 9 桁まで入力できます。	はい	宝石にカラット数を追加しする。
寸法	整数と小数の両方をサポートしています。寸法では、指標またはインペリアル測定単位のいずれかを使用する。	はい	箱の高さ、またはスカーフの長さなどの商品の長さを追加する。
ファイル参照	以下のいずれかのファイルタイプで、単一ファイルのアップロードをサポートする。	はい	組み立て指示の PDF ファイルを追加する。
整数	整数値は、-4,611,686,018,427,387,904 から 4,611,686,018,427,387,903 の範囲内を入力できます。	はい	本にページ数を追加する。
JSON	構造化データソースが必要な高度なユースケースで未処理の JSON データをサポートする。	いいえ	原材料の表など、それぞれの列で異なる商品を扱う仕様表を追加する。
メタオブジェクトの参照	単一または複数のメタオブジェクトエントリーへのリンクをサポートする。	はい	選択した商品ページにカスタムインフルエンサープロフィールを追加して表示する。
複合の参照	あらゆる参照タイプをサポートしています。	はい	Hydrogen ストアフロントに動的ランディングページを作成する。
金額	整数と小数の両方をサポートしています。通貨コードはストア通貨と一致している必要があります。	いいえ	仕入れ費用や倉庫への配送費用など、商品にかかる費用の詳細を追跡する。
複数行のテキスト	改行ありのプレーンテキストをサポートしています。	いいえ	配送メモや返品ポリシーを追加する。
ページ参照	既存のページにリンクすることができます。	はい	オンラインストアの商品に関するポリシーページまたは詳細なサポートガイドを挿入する。
商品の参照	メタフィールドリストの単一または複数の商品へのリンクに対応しています。	はい	オンラインストアの商品ページまたはコレクションページ上に、特集商品を保存および表示する。
商品バリエーションの参照	単一の商品バリエーションへのリンクに対応しています。	はい	オンラインストアの商品ページで、同じ色の他の衣料アイテムを保存して表示する。
評価	定義の設定方法に応じて、指定された記数法に沿った小数点以下の値をサポートする。	はい	商品のオーディエンススコアまたは星評価を追加する。
リッチテキスト	改行ありのテキスト、および見出しスタイル、太字、斜体、下線などのインラインスタイルをサポートしています。	いいえ	ブランドや商品やスタイルに関する、長めのストーリーを追加する。
単一行のテキスト	改行なしのプレーンテキストをサポートしています。	はい	短いメモや告知を追加する。
true または false	条件が true または false かを選択するチェックボックスを作成する。	いいえ	アイテムに刻印できるかどうかなど、あるオプションが利用可能かどうかを追加する。
URL	HTTP、HTTPS、mailto: の URL をサポートしています。	はい	特定のウェブサイトでホストされている書籍レビューまたは商品ビデオへのリンクを追加する。
量	整数と小数をサポートする。	はい	水筒の容量を追加する。
重量	整数と小数をサポートする。	はい	砂糖のグラム数など、商品や原材料の重量を追加する。

メタフィールドの設定方法

メタフィールドは、[設定] > [カスタムデータ] から設定できます。

メタフィールドを設定したいストアの箇所を選択します。

今回は「商品」に「単一行のテキスト」を追加します。
「商品」をクリックしてください。

次に「定義を追加する」をクリックします。

「定義を追加する」をクリックすると、以下のように表示されます。

それぞれの入力欄について説明します。

• 名前：管理画面で表示されます。わかりやすい名前にしましょう。
  • お手入れ方法
• ネームスペースとキー：システム上の識別子。ストアフロントのコード上でアクセスする際に使います。
  • clothes.how_to_wash
• 説明：メタフィールド設定の説明。
  • 商品のお手入れ方法を説明する。

設定後に「保存」ボタンをクリックします。このとき、ストアフロントのコード上で使う予定がある場合は、「ストアフロントのアクセス」を「ON」にして保存しましょう。（ON にしておくデメリットは特にないため、ON にしておくことをおすすめします！）

商品にメタフィールドの値を入力する

メタフィールドの設定を保存し、商品管理ページに行くと、ページ下部にメタフィールド「お手入れ方法」が追加されています。
今回は適当に入力します。

テーマで利用する

設定したメタフィールドの値をテーマで利用します。
[オンラインストア] > [テーマ] > [カスタマイズ] からテーマカスタマイズ画面に移動します。

商品ページへ移動し、サイドバーから「テキスト」ブロックを選択します（使用しているテーマによってはブロック名が違う可能性があります）。
次に画像右上にある「テキスト」入力欄の「動的ソースを接続」ボタンをクリックします。

クリックすると先程追加したメタフィールドの名前が表示されるのでクリックしましょう。
クリックすると以下の画像のように、先程設定した、値が表示されます。

以上がテーマで利用方法です。

コードを編集してメタフィールドを表示する

Liquid コードを編集しメタフィールドを使う場合を考えます。
コード上でメタフィールドの値を使い場合は、先ほど設定した、ネームスペースとキーと使います。

今回であれば、コード上で product.metafields.clothes.how_to_wash を使うことで値を取り出すことができます。

コードを編集する際はテーマを複製してからにしましょう！

以下のコードはお手入れ方法を記入している場合のみ、値を表示するコードです。

{% if product.metafields.clothes.how_to_wash %}
  <p>{{ product.metafields.clothes.how_to_wash }}</p>
{% endif %}

今回はメタフィールドをリスト形式にはしませんでしたが、リスト形式の場合は以下のようなコードになります。

{%  if product.metafields.clothes.how_to_wash != blank %}
  {% for how_to_wash in product.metafields.clothes.how_to_wash.value %}
    <p>{{ how_to_wash }}</p>
  {%- endfor %}
{% endif %}

まとめ

今回は Shopify のメタフィールドについて解説しました。

Shopify のメタフィールドを使えば、商品や、顧客、ブログなどにさまざまなデータをもたせることができます。

例えば

• テキストを登録して、商品ごとに表示を切り替える
• true or false を登録して、販売ボタンを表示したりしなかったりできる
• 既存のページをリンクして、詳しい使い方を説明しているブログに誘導する

他にもアイデア次第でいろいろなことができます。

シンプル会員ランク｜お手軽顧客タグ付け は自動で顧客にタグを付与することができます。
こちらからインストールできます

最後まで読んでいただきありがとうございました！