「メタオブジェクト」とは？初心者にもわかる基本概念と活用例

STEP 1：メタオブジェクトの定義を作成する

1. Shopify管理画面で「設定」→「カスタムデータ」を開き、「+定義を追加」をクリックします

メタオブジェクト定義の追加画面1

1. 名前とタイプを入力し、「+フィールドを追加」をクリック（今回はイベント、eventを入力）

メタオブジェクト定義の追加画面2

STEP 2：必要なフィールドを追加する

イベント情報として必要なフィールドをそれぞれ追加していきます。
今回は画像のように「イベント会場」、「開催日付」、「開催場所」、「開催期間」の4項目を設定します。

フィールドの設定

1. 表示されるコンテンツタイプから適切なものを選択（例：「1行テキスト」）
2. フィールドの名前とキーを設定します（例：名前「イベント会場」、キー「event.place」）
3. 同様の手順で開催日付、開催場所、開催時間のフィールドを追加します

各フィールドの設定

STEP 3：エントリー（実際のデータ）を登録する

定義が完成したら、実際のデータを入力していきます

1. 「コンテンツ」→「メタオブジェクト」へ移動します
   • 先ほど作成した「イベント」を選択し、右上の「エントリーを追加」をクリック
   

   メタオブジェクト画面

2. 先ほど設定した各フィールドが表示されているので、情報を入力します
3. ハンドル名はわかりやすいものに設定します（未設定だと自動設定されます）
   • 例：「event1」（半角英数字で設定）
   • このハンドル名はテーマからデータを参照する際に使用します
4. 保存ボタンをクリックします

エントリー情報の入力画面

STEP 4：ストアへの表示方法

登録したメタオブジェクトを実際にお客様が見るページに表示する方法は2つあります

1. ①テーマエディタを使う方法（コード不要）
   • 「オンラインストア」→「テーマ」→「カスタマイズ」
   • 任意のセクションを追加し、「動的ソースを接続」アイコンをクリック
   • メタオブジェクトを選択して保存
2. ②コードを使う方法

   メタオブジェクトは「タイプ（メタオブジェクト定義名）」と「ハンドル（エントリー名）」と「キー（フィールド名）」を使って呼び出します。基本形式は以下の通りです。

   
   {{ shop.metaobjects.タイプ.ハンドル.キー }}
   

   今回のケースだと、テーマファイルに以下のようなコードを追加することで、特定のイベント情報を表示できます(cssは未実装)

   
   {{ shop.metaobjects.event.event1.place }}
   
   開催日：{{ shop.metaobjects.event.event1.date }}
   
   場所：{{ shop.metaobjects.event.event1.address }}
   
   時間：{{ shop.metaobjects.event.event1.time }}
   
   

実際の表示例

Q1: すべてのShopifyストアでメタオブジェクトを使えますか？

A: 2023年にShopifyストアでメタオブジェクト機能が利用可能になりました。
管理画面の「コンテンツ」メニューに「メタオブジェクト」が表示されていれば利用できます。

Q2: アプリなしでメタオブジェクトを使えますか？

A: 使えます。メタオブジェクトはShopifyの標準機能なのでアプリなしで利用できます。

Q3: 一度作ったメタオブジェクトの構造を後から変更できますか？

A: メタオブジェクトの定義に新しいフィールドを追加することはできますが、既存のフィールドのキーや種類を変更することはできません。