はじめに

今回の記事では、Shopify のメタオブジェクトについて解説します。

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

目次

• メタオブジェクトとは
• メタフィールドとの違い
• メタオブジェクトの設定方法
  • メタオブジェクトを定義する
  • メタオブジェクトのエントリー
  • テーマで利用する
• まとめ

メタオブジェクトとは

メタオブジェクトとは、Shopify ストアに構造化された情報を追加し、管理するための強力なツールです。これにより、機能、仕様、サイズチャートなどの詳細な商品情報を保存し、整理することができます。管理画面からメタオブジェクトに保存されているデータにアクセスおよび編集が可能で、アプリはメタオブジェクト API を通じてこれらにアクセスできます。また、Liquid テンプレートやストアフロント API を利用してテーマ内でメタオブジェクトを表示することもできます。

メタオブジェクトは主に「定義」と「エントリー」の二つの部分から構成されています。定義は、オブジェクトの構造を定義するフィールドの集合で、管理画面の [設定] > [カスタムデータ] で管理されます。エントリーは、そのメタオブジェクトの実際のコンテンツまたはデータであり、管理画面の [コンテンツ] > [メタオブジェクト] で作成および管理されます。

メタオブジェクトの利用により、商品の細かい情報を顧客に提供することが可能になり、より豊富なショッピング体験を提供できます。Shopify の新しい商品分類やカテゴリーメタフィールドのような機能と組み合わせることで、店舗の表示や管理の柔軟性がさらに向上します。

メタフィールドとの違い

メタフィールドとメタオブジェクトの主な違いは、データを保持する位置にあります。メタフィールドは、特定の Shopify オブジェクト（例えば、商品やページ）に関連付けられたカスタムデータとして機能します。これは、メタフィールドが商品やページのような特定のオブジェクトに「属している」ことを意味し、そのオブジェクト内でのみ使用されます。具体的には、Liquid テンプレート内で以下のように参照されます。

{{ product.metafields.namespace.key }}
{{ page.metafields.namespace.key }}

この方式では、メタフィールドを使用するには、対応するオブジェクト（商品、ページなど）を指定する必要があります。商品ページなど、直接関連するページでの使用は直感的ですが、商品メタフィールドを商品ページ以外で使用する場合には、特定の工夫やリキッドの知識が必要になります。

一方で、メタオブジェクトは、Shopify ストア全体でアクセス可能な独立したカスタムデータオブジェクトとして機能します。メタオブジェクトは、shop オブジェクトの下に配置され、テーマのどこからでも直接アクセスすることが可能です。これにより、テーマ内の任意の場所から簡単にメタオブジェクトデータにアクセスし、それを使用することができます。メタオブジェクトの参照方法は以下のようになります。

{{ shop.metaobjects.custom_object_namespace.field_key }}

ここで、custom_object_namespace は、ユーザーが定義するオリジナルのオブジェクト名です。この柔軟性により、「メタオブジェクト」という名称が付けられています。メタオブジェクトは、特にテーマ内のさまざまな場所で統一的にカスタムデータを表示したい場合に便利です。

メタオブジェクトの設定方法

メタオブジェクトを使うには 2 つの手順を踏む必要があります。

1. メタオブジェクトを「定義」する
2. 定義したメタオブジェクトに値を「エントリー」する（値を追加する）。

今回は、FAQ のメタオブジェクトを作っていきます。

メタオブジェクトを定義する

メタオブジェクトは、[設定] > [カスタムデータ] または、[コンテンツ] > [メタオブジェクト]から定義できます。

• [設定] > [カスタムデータ]
  

• [コンテンツ] > [メタオブジェクト]
  

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

「ネーム」は、作成するメタオブジェクトの名前になります。今回は「FAQ」と入力します。
「タイプ」はメタオブジェクトへのアクセスで使います。今回は「ネーム」に英語を入力したので問題ないですが、日本語をいれると「タイプ」まで日本語になってしまいます。

その場合は、タイプの横にある「編集」をクリックし、適当な英語に訳しましょう。

次に「フィールド」を追加します。フィールドはメタオブジェクトがどんなデータを持つのかを定義します。
今回は FAQ のメタオブジェクトを作るので、必要なのは、質問用の入力欄と、回答用の入力欄です。
「フィールドを追加」をクリックし、質問用の「単一行のテキスト」をクリック選択します。

「名前」を入力します。「キー」はストアフロントで使うので英語に訳します。「名前」「キー」を入力したら「追加ボタン」をクリックします。

次に「回答」用のフィールドを作成します。
「フィールドを追加」をクリックし、回答用に「複数行のテキスト」を選択します。
以下のように入力し「追加」ボタンをクリックします。

「よくある質問」と「回答」のフィールドを追加し「保存」をクリックしメタオブジェクトを追加します。
[コンテンツ] > [メタオブジェクト] に移動すると定義したメタオブジェクトを確認できます。

以上でメタオブジェクトの定義は終わりです。

メタオブジェクトのエントリー

次に定義したメタオブジェクトに値を追加していきます。
[コンテンツ] > [メタオブジェクト] から作成したメタオブジェクトをクリックします。「エントリーを追加」をクリックします。

以下の画像のようなページが表示されます。先ほど FAQ メタオブジェクトに追加した「よくある質問」「回答」の入力欄があるので入力しましょう。少し下に「ハンドル」があります。英語で入力しましょう！

テーマで利用する

テーマで利用するには以下のようになります。

{{ shop.metaobjects.faq.question1.question }}
{{ shop.metaobjects.faq.question1.answer }}

簡単に解説します。

• faq：メタオブジェクトの中のネームタイプに設定した「faq」です。

  

• question1：各エントリーに設定したハンドルです。

  

• question,answer：フィールドを追加する際に設定した「キー」です。

  

shop オブジェクトには以下にあるオブジェクトなので、テーマ上のどこからでもアクセスすることができます。

繰り返し表示する

FAQ を蓄えていき複数エントリー追加すると、繰り返しで表示したくなります。
その場合は以下のコードのように書きます。

{% for faq in shop.metaobjects.faq.values %}
  {{ faq.question }}
  {{ faq.answer }}
{% endfor %}

shop.metaobjects.faq.values の下に追加したエントリーがすべて入っています（今回なら「question1」「question2」）。
for 文ではそれを一つずつ取り出すという感じです。今回であれば以下のような出力になります。

よくある質問１
よくある質問１に対する回答
よくある質問２
よくある質問２に対する回答

まとめ

今回は Shopify のメタオブジェクトについて解説しました。

Shopify のメタオブジェクトを使えば、Shop オブジェクトに様々なデータをもたせることができます。

アイデア次第でいろいろなことができそうです。
例えば

• 実店舗ストア店員の自己紹介を乗せたり
  • フィールドに名前、顔写真、自己紹介をもたせる
• インフルエンサーやブランドアンバサダーのプロファイルを管理したり
• 今回やったような FAQ を作成したり
• Shop にお気に入り機能を追加したり（難易度高め）

「シンプル Q&A ｜どこでも FAQ」ではコードを編集することなく FAQ を追加することができます。

インストールはこちらから
ご利用ガイドはこちらから

お気に入り機能は、自分で実装しようとするとかなり難しいので、アプリを導入することをおすすめします。

インストールはこちらから
ご利用ガイドはこちらから

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

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