Shopifyメタフィールドの設定手順を管理画面から実践する

メタフィールドは、標準の商品項目では足りない独自データを追加する仕組みです。使い方は管理画面の「設定」→「カスタムデータ」で定義を作り、そこへ値を入力するという2段階。これさえ押さえれば、素材・保証期間・PDFなど自由な情報を構造化して管理できます。

メタフィールドの定義を作成しデータ型を選ぶ

「設定」→「カスタムデータ」で対象(商品・コレクション・顧客など)を選び、「定義を追加」をクリックします。ここで指定する名前空間とキーは、後からLiquidやAPIで参照する識別子になります。custom.materialのように用途が分かる命名にしておくと保守が楽です。データ型は保存後に変更しづらいため、単一行テキストか複数値を許すかを最初に決めておきましょう。

商品や顧客に個別の値を入力する

定義を作っただけでは値は空のままです。実際のデータは各商品の編集ページ下部にある「メタフィールド」欄から入力します。「素材」という定義なら、商品ごとに「綿100%」「本革」と打ち込む流れです。型を「日付」にすれば入力欄がカレンダーに、「ファイル」ならアップロードUIに変わり、選んだ型に応じて入力フォームが最適化されます。

設定したメタフィールドをテーマに表示する方法

値を入力しても、テーマ側で出力しなければ店頭には現れません。表示手段は、Liquidにコードを直接書く方法と、テーマエディターの動的ソースを使うノーコードの方法の2通り。細かい制御が必要ならLiquid、手早く済ませたいなら動的ソースが向いています。

Liquidでメタフィールドを直接出力する記述例

商品テンプレートなら、product.metafields.名前空間.キーで値を取り出せます。未入力時の空表示を避けるため、条件分岐で囲むのが実践的です。

{% if product.metafields.custom.material %}
  <p>素材: {{ product.metafields.custom.material }}</p>
{% endif %}

ファイル型やリファレンス型は、そのまま出力するとオブジェクトになります。.value.urlを付けて目的の値を明示的に取り出しましょう。

テーマエディターの動的ソースで表示する

Online Store 2.0のテーマなら、コードを書かずに表示できます。テキストや画像のブロックを選び、項目横のデータベースアイコン(動的ソースを接続)をクリックすると、利用可能なメタフィールドが一覧表示されます。ここから該当フィールドを選べば紐付けは完了です。ただし一覧に出るのは、定義作成時に「ストアフロントでのアクセスを許可」した項目のみ。候補に出ないときは、まず定義の公開設定を疑ってください。

メタフィールドで扱えるデータ型と用途別の使い分け

データ型を正しく選べば、入力ミスの防止と表示の自由度を両立できます。代表的な型と適した用途は次の通りです。

  • 単一行テキスト:素材名や型番など短い文字列。選択肢を限定したいならリスト設定を併用
  • リッチテキスト:装飾付きの説明文。HTMLとして出力できる
  • ファイル:取扱説明書PDFやサイズ表画像
  • 参照(商品・メタオブジェクト):関連商品やブランド情報の紐付け
  • 日付・整数・真偽値:発売日、在庫下限、限定フラグなど

迷ったら「その値で並べ替えや条件分岐をしたいか」を基準にすると選びやすくなります。数値計算するなら整数型、単なる表示ならテキスト型で十分です。

メタフィールド活用時につまずきやすいポイントと対処法

設定は正しいのに値が出ない——このトラブルは原因がほぼ決まっています。多くは参照名の食い違いか、公開範囲の設定漏れ。順に切り分ければ短時間で解決できます。

表示されない場合に確認すべき名前空間とキー

Liquidで空表示になる最頻出の原因は、名前空間とキーのタイプミスです。定義画面の正式な識別子をコピーし、コード側と一字一句照合してください。動的ソースに候補が出ない場合は、定義の「ストアフロントでのアクセス」がオフの可能性が高いでしょう。これを有効化すると、Liquidと動的ソースの双方から参照できるようになります。

APIやメタオブジェクトと連携する際の注意点

Storefront APIやGraphQL経由で取得するには、管理画面での公開許可とは別に、APIアクセス用の公開設定が必要になる場合があります。またメタオブジェクトを参照型で紐付けたときは、参照先のエントリー自体が公開状態でないと値が返りません。連携が動かないときは、フィールド単体だけでなく参照先の公開状態まで確認すると、原因にたどり着きやすくなります。