ShopifyはUnite 2021でメタフィールドを発表し、2022年初頭に正式リリースしました。メタフィールドは、カタログ内の商品に独自のパラメータを追加し、ストアフロントに表示するための非常に便利な機能です。
メタオブジェクトは2023年2月に導入された比較的新しい機能です。これは、複数のパラメータやフィールドを持つカスタムオブジェクトと考えると分かりやすいでしょう。私は常に以下のルールで使い分けています。
- 複数の商品で共有される商品パラメータや値ですか？その場合はメタフィールドを使用します。
- ストア内の異なるテンプレートファイルで表示されるコンテンツ（ブロック、セクション、画像など）ですか？その場合はメタオブジェクトを使用して管理します。
本チュートリアルでは、コーディングやコード編集を行わずに、Shopifyストアでこれらを使用する方法を解説します。なお、2.0テーマの使用が前提となります。
メタフィールドとメタオブジェクトの違い
メタフィールドは、テキスト、色、商品、ページなどの単純な情報を保存し、ストア内のあらゆる商品、コレクション、ページ、ブログ記事などに割り当てることができます。欠点は、値が個別に管理されるため、更新のたびに一つずつ修正する必要があることです。
一般的な活用例として、寸法、素材、配送日など、商品詳細ページに追加情報を表示するケースが挙げられます。
メタオブジェクトはメタフィールドの上位概念であり、一つのメタオブジェクトの中に複数のメタフィールドを含めることができます。これらは、複数のパラメータや繰り返し表示されるコンテンツを表示する際によく使われます。メタオブジェクトの利点は、一箇所で編集するだけで、それを使用しているすべての箇所に反映される点です。
ストア内の複数のページで表示されるブロックやセクションがある場合、メタオブジェクトの活用が非常に有効です。
メタフィールドを使って商品詳細ページにパラメータを追加する方法
例えば、家具を販売するストアを運営しているとします。各家具には（バリエーションとは別に）それぞれ異なる共有パラメータがあります。例えば、椅子には「1. 素材」「2. デザイナー」「3. 寸法」といった固有の情報があり、これらを商品詳細ページに表示したいとします。
ステップ1：ストア管理画面でメタフィールドを作成する
まず、ストア管理画面で3つのメタフィールドを準備しましょう。
- ストア管理画面から「設定」>「カスタムデータ
- 」へ進みます。「メタフィールド」セクションで「商品」を選択し、「定義を追加
- 」をクリックします。メタフィールド名（例：素材）を入力し、タイプ（例：1行テキスト）を選択します。
3つのメタフィールドを作成したら、次はそれらを椅子に追加していきます。
ステップ2 – 商品へのメタフィールドの追加
メタフィールドの定義が完了したら、商品に追加していきましょう。
- ストア管理画面の商品管理に移動し、メタフィールドを設定したい商品を選択します。
- 商品管理ページの一番下までスクロールすると、利用可能なメタフィールドが表示されます。
- 該当する商品に必要な情報を入力し、保存
ステップ3 – 商品詳細ページでのメタフィールドの表示
準備が整いましたので、メタフィールドの情報を商品詳細ページ（PDP）に表示させましょう。
- ストア管理画面のオンラインストア > テーマ > カスタマイズ
- に移動します。上部中央のテンプレートメニューから商品 > デフォルトの商品
- を選択します。商品ページの下に新しいブロック（例：テキスト）を追加します。
- データベース（「ハンバーガー」）アイコンをクリックして、メタフィールドのコンテンツを追加します。
これで、メタフィールドを使って自由に情報を表示できるようになりました。
ヒント – プリセット選択を活用して時間を節約
メタフィールドの定義で「プリセットの選択肢に制限する」機能を使うと、作業時間を大幅に短縮できるためおすすめです。商品ごとに手動で値を入力する代わりに、ドロップダウンから選択するだけで済むようになります。
メタオブジェクトを使用して商品やコレクションページに動的コンテンツを表示する方法
メタオブジェクトはより高度な機能で、CMSのように一元管理できる動的コンテンツをストアに追加できます。例えば、コレクションページごとに異なるデザイナーを紹介したい場合、名前だけでなく、名前、説明、色、画像などを含むセクション全体を動的に表示させることが可能です。
従来のShopifyテーマ1.0では、テンプレートを個別に作成する必要がありました。その方法でも可能ですが、手間がかかる上に一貫性を保つのが難しく、非効率的でした。メタオブジェクトを使えば、単一のオブジェクトを作成して、複数の商品やページに紐付けることができます。
ステップ1 – ストア管理画面でのメタオブジェクトの作成
まず、ストア管理画面でメタオブジェクトを準備します。
- ストア管理画面の設定 > カスタムデータ
- に移動します。メタオブジェクトセクションで定義を追加
- をクリックします。メタオブジェクト名（例：デザイナー）を入力し、（メタ）フィールドを追加します。
今回の例では、各デザイナーに対して「名前（1行テキスト）」「説明（リッチテキスト）」「背景色と文字色（色）」「メイン画像とサブ画像（ファイル）」を設定します。
ステップ2 – メタオブジェクトエントリの追加
メタオブジェクトを作成したら、データを入力する必要があります。
- ストア管理画面の 設定 > カスタムデータ
- に移動します。メタオブジェクト セクションで、既存のメタオブジェクトを選択します。
- 右上の その他の操作 をクリックし、新しいエントリを追加
- を選択します。必要な情報をすべて入力して保存し、他にもエントリがある場合は同様の手順を繰り返します。
ステップ3 – コレクション/商品メタフィールドの準備
ここからが少し複雑な部分です。メタオブジェクトをコレクションや商品に紐付けるには、まずメタオブジェクト型の メタフィールドを作成 する必要があります。🤯
- ストア管理画面の 設定 > カスタムデータ
- に移動します。メタフィールド セクションで コレクション を選択し、定義を追加
- をクリックします。メタフィールド名（例：デザイナー）を入力し、タイプ（メタオブジェクト）を選択します。次に 参照 を選択して既存のメタオブジェクトを指定し、保存します。
参照の接続が完了すれば、各コレクションに特定のデザイナーを割り当てることができるようになります。
ステップ4 – コレクションへのメタオブジェクトの追加
すべての定義が完了しました。それでは、コレクションにメタオブジェクトを追加しましょう。
- ストア管理画面の 商品管理 > コレクション に移動し、メタオブジェクトを定義したいコレクションを探します。
- 管理画面のコレクションページで一番下までスクロールし、利用可能なメタフィールドを表示します。
- メタフィールドの横にある空の入力欄をクリックして既存のエントリを1つ選択し、保存
ステップ5 – コレクションページでのメタオブジェクトの表示
準備が整いました。それでは、コレクションページにメタオブジェクトの情報を表示させましょう。
- ストア管理画面の オンラインストア > テーマ > カスタマイズ
- に移動します。上部中央のテンプレートメニューで コレクション > デフォルトのコレクション
- を選択します。プレースホルダーとして新しいセクションを追加し、データベースアイコン（「バーガー」アイコン）をクリックしてメタオブジェクトに接続します。
- セクションやブロック内の関連項目を、メタオブジェクト内の適切なエントリと紐付けます。
これでテンプレートを調整し、異なるコレクションにそれぞれ異なるエントリを割り当てることができるようになりました。その結果、単一のテンプレートファイルを使用しながら、複数のコレクションページでそれぞれ異なるコンテンツを表示できます。
結論と最終結果
Shopifyのメタフィールドとメタオブジェクトの理解は非常に奥が深く、時間がかかります。まずはシンプルな項目から始めて、少しずつ試してみてください。コツを掴めば、その強力さと、Shopifyストア運営における手作業をどれだけ削減できるかに驚くはずです。
上の最終結果では、商品ごとに異なる商品情報やデザイナーを表示できる単一の商品ページテンプレートをご覧いただけます。また、メタオブジェクトのコンテンツを一元管理できるようになったため、商品ごとに手動で更新する必要はありません。
