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アクセス用の公開設定が必要になる場合があります。またメタオブジェクトを参照型で紐付けたときは、参照先のエントリー自体が公開状態でないと値が返りません。連携が動かないときは、フィールド単体だけでなく参照先の公開状態まで確認すると、原因にたどり着きやすくなります。