Shopifyのメタオブジェクトの活用法

Shopifyの管理画面のメニューに「コンテンツ」が追加され、メタオブジェクトがアーリーアクセスで確認できたので一通り触ってみました。

Shopify メタオブジェクトの位置

おそらくこのメタオブジェクトが、コンテンツプラットフォームのベースになってくるはずです。現状(2023年1月時点)ではメタフィールドと同じくデータの更新はAPI経由のみで、あらかじめ入力したデータを表示させることができます。

商品・バリエーション・コレクションに紐づける場合は、複数のフィールドの値を動的に管理できるようになることが大きなメリットです。顧客のメタフィールドにも紐づけられるので、コミュニティページを作成した際に、顧客の外向けマイページのようなコンテンツを作成できたりします。データ構造として非常に強力な機能になり得るので期待大です。

メタオブジェクトとは?

そもそもメタオブジェクトって?という話ですが、英語の解説ページはありました。日本語はまだありません。

Metaobjects
Metaobjectshelpyouaddandstoreadditionalstructuredinformation.

以下、メタオブジェクトの説明の日本語訳です。

メタオブジェクトを使用すると、ストアに構造化された情報を追加して保存できます。例えば、商品の特徴、仕様、サイズチャートなどの情報を保存可能です。Shopifyの管理画面から、メタオブジェクトに保存されたデータを取得し、編集できます。アプリはメタオブジェクトAPIを通じてメタオブジェクトにアクセスできます。また、Liquid を使用して、Storefront API を通じてテーマ内の metaobject にアクセスすることもできます。

https://help.shopify.com/en/manual/custom-data/metaobjects

簡潔に言うと複数のメタフィールドをグルーピングできる機能です。使い方はあなた次第という感じですが、オブジェクトネームの入力例として「カートアップセル」「布地の色」「商品バンドル」が表示されていました。

Shopifyの構築パートナーの方々はおさえておきたい機能ですね。使い道としてはこの後の例をみてもらったほうが理解しやすいと思います。

メタオブジェクトの定義

最初にメタオブジェクトの定義を追加します。メタオブジェクトの画面上でも、メタオブジェクトについての簡潔な説明が記載されています。コンテンツに使うも良し、データ構造に使うも良しです。

メタオブジェクトを使用すると、(メタ)フィールドをグループ化し、ストアのさまざまな部分に接続できます。フィールドを使用して、カスタムコンテンツやデータ構造を作成します。

Shopifyのメタオブジェクト定義画面

この画面では「定義を追加」をクリックするだけです。

メタオブジェクトの入力画面

メタオブジェクトにはネームを入力できます。ネームを追加したら「フィールドを追加」からメタオブジェクトに紐づくメタフィールドを作成する流れです。

今回はサイズを例に作成してみました。サイズといっても単純なS・M・Lだけではなく、アパレルであればメンズ・レディース、さらには同じサイズでも商品によってそれぞれ肩幅や身幅などが異なります。

一つのサイズ表記に複数のパターンがある場合に、データとして一括管理して商品ページに簡単に表示できるという感じです。

Shppifyのメタオブジェクト(サイズの定義例)

ここのではサイズ3つのデータと、表示名として後で選択しやすいようにサイズの型番を設定しています。型番は説明の都合上0001/0002としています。メタオブジェクトへ入力したデータは「エントリー」と呼ばれています。

Shopifyのメタオブジェクト(エントリーフォーム)

▼データ設定例:型番0001

Shopifyのメタオブジェクト:データ設定例1

▼データ設定例:型番0002

Shopifyのメタオブジェクト:データ設定例2

メタオブジェクトをリファレンスとした商品のメタフィールドを作成する

次に商品のメタフィールドを新規作成して、リファレンスでメタオブジェクトを指定します。コンテンツタイプでリファレンス>メタオブジェクトを選択します。

コンテンツタイプでリファレンス>メタオブジェクトを選択

リファレンスでメタオブジェクトを指定した後の画面で、呼び出したいメタオブジェクトを指定できます。

呼び出したいメタオブジェクトの設定画面

こんな感じです。画面右側にある「ストアフロント」へのチェックもお忘れなく。

メタオブジェクトの設定画面

商品ページからメタオブジェクトのエントリーを指定する

商品管理ページの下部に、メタフィールドの項目があります。

メタフィールドの項目

ここからエントリーを選択できます。

メタフィールドのエントリー選択画面

エントリーを指定して保存します。

メタオブジェクトのエントリーを指定して保存する画面

商品ページのカスタマイズからメタオブジェクトを呼び出す

商品ページのカスタマイズから商品情報へテキストブロックを追加して、動的ソースを挿入します。

商品ページのカスタマイズから商品情報へテキストブロックを追加する

メタオブジェクトを指定してエントリー内のデータを指定していきます。

メタオブジェクトの指定画面

商品ページ上での見え方として真新しさはないですが、SKUが多く商品に関連するデータがたくさんある場合にオブジェクト単位で動的に表示できるのが特徴です。

メタオブジェクト設定後の、商品ページでの見え方イメージ

メタフィールドの表示方法はヘルプにも記載があり、メタオブジェクトもほぼ同じ方法で表示できます。

Displaying metafields on your online store
Connectmetafieldstoyourthemetodisplayspecializedinformationonyouronlinestore.

まとめ

今回はすぐに思いついた「商品のサイズ表示」を例に記事を書きましたが、商品に限らずページなどでももっと良い活用例があると思います。「メタフィールドとメタオブジェクト、こんなケースならどっち使えばいいんだっけ?」のような質問に力強く答えられる自信はまだありません。

複数のデータを束ねた情報を複数のページで表示させる、もしくは同じページ内で表示させる場合、入力・修正なども考慮すると、ベタ打ちではなく動的に表示させて情報は一箇所で管理できたほうが便利ですよね。

メタフィールドは非常にわかりやすい機能ですが、メタオブジェクトは用途が工夫次第な面もあるので、慣れるまではどう扱うか悩むケースも多いと思います。正式なリリース後にいろいろな使い方がシェアされると思うので、実例から理解を深めていくと良さそうです。

岡田風早

株式会社ソーシャルPLUS 代表取締役社長

ソーシャルPLUSのカスタマーサクセスとして2015年にフィードフォースに入社し、プロダクトマネージャーを経て執行役員に。2021年9月にソーシャルPLUSが分社化して現在の役職に至る。

LINE社のTechnology PartnerとしてLINEログインやミニアプリなどのAPI活用、Sales PartnerとしてLINEのCRM活用、またShopify Partnerとしてエンタープライズ向けのShopify × LINEやShopify Flow・メタフィールドの活用、データ設計を得意とする。

Shopify連携
LINE公式アカウント徹底活用ブログ
タイトルとURLをコピーしました