メタフィールドを使用したストアコンテンツのカスタマイズ
メタフィールドを活用すると、SHOPLINEの管理画面に追加フィールドを保存し、ストアの外観や機能を柔軟にカスタマイズできます。これにより、商品ページやストアデザインに個別の設定を適用し、さまざまな表示効果を実装することが可能になります。
たとえば、次のようなカスタマイズができます:
- 商品詳細ページに、商品ごとに異なるユーザーマニュアルを追加する
- 特定のカテゴリに、異なる割引情報を表示する
- 衣類商品に、素材の詳細や洗濯方法を掲載する
- ジュエリー商品に、カラット重量の情報を表示する
- 異なる商品に対して異なる配送通知を追加する
メタフィールドの設定方法
メタフィールドは特定のモジュールに紐づいているため、使用する前に対象のモジュールを決定する必要があります。現在、メタフィールドは次のモジュールで利用できます:商品、商品バリエーション、商品カテゴリ、ページ、顧客、ブログ、ブログカテゴリ、注文。
|
注:エンタープライズプランを利用している場合、メタフィールドは会社モジュールにも対応しています。 |
手順:
- メタフィールドの基本情報を入力します。
- SHOPLINEの管理画面でメタフィールドに値を割り当てます。
- ページエディタで動的ソースを挿入する、またはSHOPLINEレイアウトエンジンにコールコードを追加します。
メタフィールドの紹介
メタフィールドの基本情報の入力
メタフィールドを作成する際には、基本情報を入力します。メタは次の情報で構成されています:フィールド名、OwnerResource、ネームスペース、キー、説明、データタイプ。
- フィールド名:メタフィールドの名称(例:「商品の素材」)
- OwnerResource:メタフィールドが紐づくリソースの種類(「OwnerResource Type」とも呼ばれる)。(例:商品、カスタムページなど)
- OwnerID:メタフィールドが属するOwnerResourceのID(例:商品AのIDは1605898661)
- ネームスペース:一連のメタフィールドを整理するためのコンテナ。異なるビジネスオーナー間で同じキー名の競合を防ぐ役割を持つ(例:my_fields)
- キー:メタフィールドの識別子。特定のメタフィールドを参照するためのコード(例:materials)
- データタイプ:メタフィールドに格納するデータの種類(例:1行テキスト、URL、整数など)
- 説明:メタフィールドの用途を示す説明文。値を設定する際の参考情報となる(例:「ジュエリーの素材情報を入力してください」)
- 値:メタフィールドに保存される具体的なデータ(例:925シルバー)
メタフィールドのデータタイプ
メタフィールド機能で利用可能なデータタイプは以下の通りです。
| データタイプ | サブクラス | 値リストのサポートの有無 | 機能 | ユースケース |
|
テキスト |
1行テキスト | はい | 1行のプレーンテキスト入力をサポートします。 | 商品に配送通知を追加します。 |
| 複数行テキスト | はい | 複数行のプレーンテキスト入力をサポートします。 | 商品に商品成分表を追加します。 | |
| リッチテキスト | はい | リッチテキストの入力をサポートします。 | 商品に対する整ったフォーマットのユーザーガイドを追加します。タイトル、リンク、太字テキスト、リストを含めることができます。 | |
| カラー | なし | はい | #RRGGBB形式のRGB値をサポートします。 | ページに背景色を追加します。 |
| Json | なし | いいえ | 高度なユースケースのための生のJSONデータをサポートします。 | ストアページにカスタムモジュールを追加します。 |
| 数値 | 整数 | はい | 整数入力のみをサポートします。 | 書籍商品に特定のページ数情報を追加します。 |
| 小数 | はい | 整数+小数入力をサポートします。 | 商品詳細ページにジュエリーのカラット情報を追加します。 | |
| URL | なし | はい | HTTP、HTTPS、mailto:の追加をサポートします。 | 商品詳細ページにURLリンクを追加します。 |
| 日付と時間 | 日付 | はい | タイムゾーンなしのISO 8601形式の日付値をサポートします。 | 商品有効期限、注文配達日、顧客の誕生日を追加します。例:2022-05-28。 |
| 日付と時間 | はい | ISO 8601形式の日付値とUTC時間の時間値をサポートします。 | 2022-01-01T12:30:00 | |
| 真または偽 | なし | いいえ | ブール型で、条件が真か偽かを選択するチェックボックスを作成します。 | オプションが利用可能かどうかを追加します。例えば、商品に刻印が可能かどうか。例:true。 |
| 測定 | 重量 | はい | 整数値と小数値をサポートします。重量はメートル法またはヤード・ポンド法の単位で測定されます。例:kg、g、lb、oz。 |
商品の重量や成分の重量を追加します。例えば、砂糖のグラム数。 例:{"value":3.0,"unit":"oz"}。 |
| サイズ | はい | 整数値と小数値をサポートします。サイズはメートル法またはヤード・ポンド法の単位で測定されます。例:mm、cm、m、インチ、フィート、コード |
サイズ:包装箱の高さや商品の長さを追加します。例えば、スカーフの長さ。 例:{\"value\":2.0,\"unit\":\"in\"}。 |
|
| 体積 | はい | 整数値と小数値をサポートします。体積はメートル法またはヤード・ポンド法の単位で単一の値と体積単位で測定されます。有効な単位値:ml、cl、l、m3(立方メートル)、us_fl_oz、us_pt、us_qt、us_gal、imp_fl_oz、imp_pt、imp_qt、imp_gal。 |
体積:水のカップの容量を追加します。 例:{\"value\":1.0,\"unit\":\"us_fl_oz\"}。 |
|
| 評価 | なし | はい | 評価や星評価の設定をサポートします。 |
商品のユーザー評価や星評価を追加します。 例:{\"value\":\"5\"}。 |
| 参照 | 商品 | はい | オンラインストアで商品を参照することをサポートします。 |
オンラインストアの商品ページや商品カテゴリページに表示する特集商品を設定します。 例:gid://shopline/Product/160589866。 |
| 商品バリエーション | はい | オンラインストアで商品バリエーションを参照することをサポートします。 | 同じ色の他の衣料品商品をオンラインストアの商品ページに表示するように設定します。例:gid://shopline/ProductVariant/1805951613。 | |
| カテゴリ | はい | オンラインストアでカテゴリを参照することをサポートします。 | 例:gid://shopline/collections/1225615767。 | |
| ページ | はい | オンラインストアでカスタムページを参照することをサポートします。 |
オンラインストアでポリシーページや商品の詳細なケア指示を挿入します。 例:gid://shopline/Page/59592784。 |
|
| Metaobject | はい | オンラインストアでMetaobjectを参照することをサポートします。 |
ストアページにMetaobjectモジュールを追加します。 |
|
| ドキュメント | はい |
画像:ストアのドキュメントライブラリを参照するか、最大10MBのJPG、JPEG、PNG、またはGIF形式の画像をアップロードします。
PDF:ストアのドキュメントライブラリを参照するか、最大10MBのPDFファイルをアップロードします。 |
gid://shopline/MediaImage/59301914
gid://shopline/GenericFile/596207872 |
|
| マネー | なし | いいえ | ストアの通貨に一致する通貨コードを持つ数値。 | {\"amount\":\"2\",\"currency_code\":\"USD\"} |
メタフィールドの作成
以下は、商品モジュールのメタフィールドを作成する例です。
-
SHOPLINEの管理画面から、設定 > カスタムデータ に移動します。
-
作成したいメタフィールドのモジュールを選択します。現在、次のモジュールに対してメタフィールドを作成できます:商品、商品カテゴリ、商品バリエーション、ページ、顧客、ブログ、ブログカテゴリ、注文。
ここでは例として、「商品」モジュールを選択します。 -
[フィールドを追加] をクリックします。
-
詳細を入力し、完了したら [追加] をクリックします。
-
- フィールド名:SHOPLINEの管理画面でメタフィールドを識別するための名称です(例:「色」)。
- ネームスペースとキー:メタフィールドを一意に識別するための設定。名前空間を利用すると、類似のメタフィールドをグループ化できます(例:「custom.color」)。ただし、名前空間とキーの組み合わせは重複しないようにする必要があります。
- 説明(オプション):メタフィールドに入力する値や用途に関する補足情報を記載できます。
- データタイプ:メタフィールドに保存するデータの種類です(例:テキスト、ドキュメント、URL)。単一のデータタイプだけでなく、複数のデータタイプを組み合わせて設定することも可能です。
-
これで、作成が完了しました。
メタフィールドが作成された後、メタフィールドに値を割り当てることができます。
メタフィールドへの値の割り当て
-
メタフィールドが作成されたら、メタフィールドに値を割り当てることができます。
SHOPLINEの管理画面で商品ページに移動して値を割り当てます。
値を割り当てたい特定の商品を選択します。この例では、3番目の商品を選択して詳細ページに移動します。 -
ページの下部で「データのカスタマイズ」を見つけ、値を割り当てるメタフィールドを選択します。入力できる値のタイプは、メタフィールドのデータタイプによって異なります。
メタフィールドへの値の割り当てプロセスを完了しました。
テーマデザインでのメタフィールドの設定
エディターにメタフィールドのダイナミックソースを挿入する
メタフィールドをテーマデザインに適用する場合は、ダイナミックソースをエディターに挿入します。具体的な操作手順については、次の記事を参照してください:テーマデザインでのメタフィールドの構成。
レイアウトエンジンにコールコードを挿入する
メタフィールドを作成し、値を割り当てた後、SHOPLINE管理画面の 設定 > カスタムデータ > メタフィールド で対応するフィールドのコールコードを確認できます。このコードをコピーし、オンラインコードエディターのレイアウトエンジンに挿入することで、デザインをカスタマイズできます。
|
注:オンラインコードエディターへのアクセスが必要な場合は、SHOPLINEにお問い合わせください。 |
定義されていないメタフィールドの管理
定義済みメタフィールドと未定義メタフィールドの違い
SHOPLINE のメタフィールドは、定義済みメタフィールド と 未定義メタフィールド の 2 種類に分かれます。
-
定義済みメタフィールド:
SHOPLINE 管理画面で作成され、テキスト・数値・真偽値・メディアファイルなどのデータタイプが設定されています。管理画面の設定ページに表示されるため、入力・更新・管理が容易です。 -
未定義メタフィールド:
SHOPLINE 管理画面で作成されていないメタフィールドです。主に API や サードパーティアプリ を通じて追加されます。
未定義メタフィールドの管理方法
管理画面で「未定義のメタフィールド」タブを開きます。
以下の操作を行えます。
-
メタフィールドを編集する:
メタフィールド名の横にある 鉛筆アイコンをクリックして、名前を更新するか、定義済みメタフィールドに変換します。 -
メタフィールドを削除する:
不要になったメタフィールドは、ゴミ箱アイコンをクリックして削除します。
効果的な活用方法
拡張フィールドを活用した柔軟な商品詳細ページのカスタマイズ
商品詳細ページは、顧客を購入へ導くうえで極めて重要な役割を果たします。特に競争の激しい越境EC市場では「細部の工夫」が決め手となります。ページに独自性のある情報を加えることで、販売者は顧客からの信頼を獲得すると同時に、競合との差別化を図ることができます。
例えば、ある販売者が商品に「洗濯方法」を表示したい場合、洗濯情報専用の拡張フィールドを作成することで、顧客は商品詳細ページから簡単に確認できます。これにより、商品の信頼性が高まり、洗濯方法の誤解による返品リスクも減らせます。
洗濯方法に限らず、素材・原産地・サイズなどの追加情報も、必要に応じてメタフィールドを利用して商品詳細ページに表示できます。
シンプルなコードカスタマイズによる機能拡張の実現
メタフィールドは情報の追加表示だけでなく、ビジネスシナリオに応じた機能要件のカスタマイズにも活用できます。これにより、ストアのカスタマイズにかかる技術的コストやハードルを軽減できます。
例えば、商品説明のタブ切り替え、関連資料のダウンロードセクション、関連商品レコメンドの追加などです。
商品説明のタブ切り替え
商品詳細ページには、多くの情報を掲載する必要がある場合があります。しかし、すべてを1ページに詰め込むと顧客が必要な情報を探しにくくなり、購買体験を損なう恐れがあります。
この問題を解決する方法のひとつが「タブ切り替えテンプレート」です。カテゴリごとに情報を整理し、1つのコンテンツ枠内でタブを切り替えながら表示できます。これにより、ページ全体を見やすく保ちながら必要な情報をわかりやすく提示できます。
従来、この機能を実装するには開発人材を雇う必要がありましたが、メタフィールド管理ツールを利用すれば、拡張フィールドを作成し、基本的なタブ切り替えテンプレートのコードをコピー&ペーストするだけで簡単に設定できます。
関連資料のダウンロードセクション
設置マニュアルや素材構成の詳細など、商品ページに直接表示するには分量が多い情報は、ダウンロード資料として提供する方が適しています。
メタフィールドを使えば、商品に関連資料のダウンロードリンクを簡単に追加できます。顧客はリンクをクリックして資料を入手し、ローカルで確認できるため、より充実した情報を得られます。
他システムとの連携
データによると、個々の商品詳細ページに関連商品レコメンドを組み込むことで、顧客のページ閲覧時間が効果的に増加し、ストアの平均取引額が向上します。
従来、ビジネスオーナーが関連商品レコメンドを実装するには特定のアプリが必要でした。しかし、メタフィールド管理ツールを使用すると、ビジネスオーナーはいつでもどこでも関連商品レコメンドモジュールを簡単に作成できます。
メタフィールドは、商品・カテゴリ・顧客・注文・ブログ・ページ・ストアなどの情報を保持できるだけでなく、Admin API を介して他のECシステム(CRM / IMS / ERP など)とのデータ連携や相互利用も可能です。これにより、SHOPLINEストアは他システムとシームレスに統合され、販売者は各種データを効率的に管理・閲覧できます。