Shopifyメタフィールドとメタオブジェクトの実践ガイド

ブログ

›

ガイド

Tomas Janu

|

August 4, 2024

Shopifyのメタフィールドとメタオブジェクトの実践ガイド

メタフィールドとメタオブジェクトの使い方を学び、コーディングやテーマ編集なしでShopifyストアに追加する。違いと例は？

Shopifyは2021年のUniteでメタフィールドを導入し、2022年の初めに製品版としてリリースしました。メタフィールドはカタログの商品に追加のパラメータを追加し、ストアフロントに表示する素晴らしい方法です。

メタオブジェクトは2023年2月に導入されたので、まだ比較的新しいものです。複数のパラメータ/フィールドを持つカスタムオブジェクトと考えることができます。個人的には、以下のルールを常に使用しています：

複数の商品で共有される商品のパラメータ/値ですか？もしそうなら、メタフィールドを使います。
異なるテンプレートファイルでストア全体に表示されるコンテンツ（ブロック、セクション、画像）ですか？もしそうなら、metaobjectを使用して管理します。

このチュートリアルでは、コーディングやコード編集なしでShopifyストアでこれらを使用する方法を紹介します。 2.0のテーマを使用する必要があることに注意してください。

メタフィールドとメタオブジェクトの違い

メタフィールドは、テキスト、色、商品、ページなどの簡単な情報を保存し、あなたのストアの商品、コレクション、ページ、ブログ記事などに割り当てることができます。欠点は、それぞれ別々に値を入力する必要があることです。また、更新したい場合は、それぞれを個別に更新する必要があります。

典型的な使用例としては、商品の詳細ページに寸法、材質、納期などの追加情報を表示することです。

Custom data section in Shopify including metafields and metaobjects — メタフィールドとメタオブジェクトを含むShopifyのカスタムデータセクション

メタオブジェクトはメタフィールドの上にあり、各メタオブジェクトは複数のメタフィールドを含むことができます。メタオブジェクトは、複数のパラメータを表示したり、繰り返し表示されるコンテンツを表示するためによく使用されます。メタオブジェクトの利点は、同時に使用されているすべてのインスタンスに対して、1つの場所から編集できることです。

複数のページにブロックやセクションを表示する場合、メタオブジェクトを使用することは非常に理にかなっています。

メタフィールドを使用して商品詳細ページに追加パラメータを追加する方法

例えば、椅子には1.素材、2.デザイナー、3.寸法があり、商品詳細ページに表示したいとします。

ステップ #1 - ストア管理画面でメタフィールドを作成する

まず、ストア管理画面に3つのメタフィールドを用意します：

ストア管理 >設定>カスタムデータ
メタフィールドセクションで、商品を選択し、定義を追加をクリックします。
メタフィールド名（例：Material）を入力し、タイプ（例：Single line text）を選択します。

Adding and defining a new metafield — 新しいメタフィールドの追加と定義

3つのメタフィールドを作成したら、椅子に追加します。

ステップ2 - 商品にメタフィールドを追加する

メタフィールドが定義できたので、商品に追加してみましょう：

ストアの管理画面 >商品に移動し、メタフィールドを定義したい商品を探します。
管理画面の商品ページで、下にスクロールして、利用可能なメタフィールドを表示します。
この商品に関連するデータを入力し、保存をクリックします。

Assigning the metafield to specific product — メタフィールドを特定の商品に割り当てる

ステップ3 - 商品詳細ページにメタフィールドを表示する

準備が整いましたので、メタフィールドの情報をPDPに表示してみましょう：

ストアの管理画面 >オンラインストア>テーマ>カスタマイズに移動します。
上部中央のテンプレートメニューで、「商品」>「デフォルト商品」を選択します。
商品ページの下に新しいブロックを追加します。
データベース（"ハンバーガー"）のアイコンをクリックして、メタフィールドのコンテンツを追加します。

Displaying metafield on the storefront — ストアフロントにメタフィールドを表示する

メタフィールドを好きなように表示することができます。

ヒント - プリセットの選択肢を使って時間を節約

メタフィールドの定義で "プリセットの選択肢に制限する "を使用することで、時間を大幅に節約することができます。各商品の値を手動で入力する代わりに、ドロップダウンから選択するだけです。

Limiting metafield options to preset choices — メタフィールドの選択肢をプリセットの選択肢に制限する

メタオブジェクトを使用して商品/コレクションページに動的コンテンツを表示する方法

メタオブジェクトはより複雑で、ストアにダイナミックコンテンツを追加することができます。各コレクションページで、名前だけでなく、名前、説明、色、画像などを含む完全なセクションで、異なるデザイナーを特集したいとします。

古いShopifyテーマ1.0の時代には、異なるテンプレートを作成することでそれを実現することができました。それはまた機能しますが、非常に時間がかかり、一貫性がなく、非効率的です。メタオブジェクトを使用すると、単一のオブジェクトを作成し、異なる製品やページに接続することができます。

ステップ #1 - ストア管理画面でメタオブジェクトを作成する

まず、ストア管理画面でメタオブジェクトを用意しましょう：

ストア管理 >設定>カスタムデータ
メタオブジェクトセクションで、定義を追加をクリックします。
メタオブジェクト名（例：デザイナー）を入力し、（メタ）フィールドを追加します。

Creating and defining metaobject — メタオブジェクトの作成と定義

この例では、各デザイナーは、Name（1行テキスト）、Description（リッチテキスト）、Background and text color（カラー）、Main and Secondary image（ファイル）を持ちます。

ステップ2 - メタオブジェクトエントリーの追加

メタオブジェクトを作成したら、データを入力する必要があります：

ストア管理 >設定>カスタムデータ
メタオブジェクトセクションで、既存のメタオブジェクトを選択します。
右上のMore actionsをクリックし、Add new entryを選択します。
必要な入力をすべて入力し、保存して、別の新しいエントリーを続けます（まだある場合）。

Adding metaobject entries — メタオブジェクトエントリーの追加

ステップ#3 - コレクション/商品メタフィールドを準備する

メタオブジェクトをコレクション/商品に接続するには、まずメタフィールドをメタオブジェクトタイプで作成する必要があります。

ストア管理 >設定>カスタムデータ
メタフィールド]セクションで[コレクション]を選択し、[定義を追加]をクリックします。
メタフィールド名（例：Designer）を入力し、タイプ（例：Metaobject）を選択し、既存のメタオブジェクトであるReferenceを選択して保存します。