メタフィールドを使ったストアコンテンツのカスタマイズ方法

メタフィールド機能は、SHOPLINE管理画面で追加のフィールドを保存できるようにし、ストアの外観や機能のカスタマイズを可能にします。メタフィールドを使うことで、ストアデザインや商品ページにパーソナライズされた設定やさまざまな表示効果を実装できます。例えば：

• 商品詳細ページに複数商品の異なる取扱説明書を追加する
• 異なるカテゴリに異なる割引情報を追加する
• 衣料品に異なる素材説明や洗濯方法などを追加する
• ジュエリー商品のカラット重量表示情報を追加する
• 異なる商品に異なる発送案内を追加する

メタフィールド使用の概要

モジュール選択：各メタフィールドは特定のモジュールに紐づいているため、メタフィールドを使用する前に、どのモジュールのために作成するかを特定する必要があります。現在、メタフィールドは以下のモジュールをサポートしています：商品、商品バリエーション、商品カテゴリ、ページ、顧客、ブログ、ブログカテゴリ、および注文。
 

 手順： 

1. メタフィールドの基本情報を入力します。
2. ストアのSHOPLINE管理画面でメタフィールドに値を割り当てます。
3. ページエディターで動的ソースを挿入するか、SHOPLINEレイアウトエンジンに呼び出しコードを挿入します。

メタフィールドの紹介

メタフィールドの構成

メタフィールドの基本情報の入力。メタフィールドは以下の情報で構成されています：フィールド名 / OwnerResource / Namespace / キー / 説明、およびdataType。

• フィールド名: メタフィールドの名前。例：商品の素材。
• OwnerResource: メタフィールドが属するリソースの種類、別名「OwnerResourceタイプ」。例：商品、カスタムページなど。
• OwnerID: メタフィールドが属するOwnerResourceのID。例：商品AのIDは1605898661です。
• Namespace: メタフィールドのグループをまとめるコンテナ。Namespaceでメタフィールドをグループ化することで、異なるマーチャントの同じキー名のメタフィールド間の衝突を防ぎます。例：my_fields。
• キー: メタフィールドの名前で、特定のメタフィールドを参照するためのコード識別子として使用されます。例：materials。
• dataType: メタフィールドに保存されるデータの種類。例：単一行テキスト、URL、整数など。
• 説明: メタフィールドを定義する説明情報で、値を割り当てる際に正しい値を入力するのに役立ちます。例：ジュエリーの素材情報を入力してください。
• 値: メタフィールドに保存されるデータ。例：925シルバー。

メタフィールドのデータタイプ

以下はメタフィールド機能で利用可能なデータタイプです：

メタフィールドの作成

以下は、商品モジュールのメタフィールドを作成する例です：

1. SHOPLINE管理画面から、設定 > カスタムデータに移動します。
   
    
2. メタフィールドセクションで、作成したいメタフィールドのモジュールを選択します。現在、以下のモジュールのメタフィールドを作成できます：商品 / 商品カテゴリ / 商品バリエーション / ページ / 顧客 / ブログ / ブログカテゴリ / 注文。この手順では、メタフィールド作成のために商品モジュールを選択します。
   
    
3. 追加フィールドをクリックします。
   
    
4. 詳細を入力し、完了したら追加をクリックします。
   

• フィールド名：SHOPLINE管理画面でメタフィールドを識別するために使用します。例：Color（色）。
• Namespace（名前空間）とKey（キー）：メタフィールドの一意の識別子です。名前空間を使って類似のメタフィールドをグループ化できますが、各名前空間とキーは一意でなければなりません。例：「custom.color」。名前空間とキーは数字で始めることはできませんのでご注意ください。
• 説明（任意）：メタフィールドに入力する値など、説明情報を提供します。
• データタイプ：メタフィールドが保存するデータの種類です。テキスト、ドキュメント、URLなどがあり、単一または複数のデータタイプの設定が可能です。

5. メタフィールドの無効なデータを防ぐために、検証ルールを設定します。例えば、単一行テキストフィールドの場合、入力が必須の長さ内に収まるように最小および最大文字数の制限を定義できます。
    
6. メタフィールドを作成したら、メタフィールドリスト内の位置をカスタマイズし、よく使うメタフィールドをトップにトップに固定して素早くアクセスできるようにできます。同じ順序は商品や商品カテゴリなどの関連ページにも反映され、メタフィールドの管理がより効率的になります。
   

メタフィールドを作成した後、そのメタフィールドに値を割り当てることができます。

メタフィールドへの値の割り当て

1. 値を割り当てたいモジュールを選択します。前の手順で商品モジュールのメタフィールドを作成したため、SHOPLINE管理画面の商品ページに移動して値を割り当てます。値を割り当てたい特定の商品を選択します。この例では3番目の商品を選び、詳細ページに進みます。
   
    
2. ページの下部にあるカスタムデータセクションを見つけ、値を割り当てるメタフィールドを選択します。入力できる値の種類はメタフィールドのデータタイプによって異なります。 
   
    

メタフィールドへの値の割り当てを完了します。

テーマデザインでのメタフィールドの設定

エディターでのメタフィールド動的ソースの挿入

具体的な操作手順については、以下を参照してください： メタフィールド | テーマデザインでのメタフィールドの設定。

レイアウトエンジンでの呼び出しコードの挿入

メタフィールドを作成し値を割り当てた後、以下の表から呼び出しコードをコピーしてレイアウトエンジンのコードエディターに貼り付けることでカスタマイズを実現できます。

例えば、名前空間がmy_fields、キーがadditional_infoの商品のメタフィールドを作成した場合、このメタフィールドを呼び出すコードは：{{product.metafields.my_fields.additional_info.value}}

未定義メタフィールドの管理

定義済みメタフィールドと未定義メタフィールド

SHOPLINEのメタフィールドは、定義済みと未定義の2種類に分かれています。

• 定義済みメタフィールド： これらはSHOPLINE管理画面で作成され、テキスト、数値、ブール値、メディアファイルなどのデータタイプが割り当てられています。管理画面の設定ページに表示されるため、入力、更新、管理が簡単です。
• 未定義メタフィールド： これらのメタフィールドはSHOPLINE管理画面で作成されていません。通常、APIやサードパーティアプリを通じて追加されます。

未定義メタフィールドの管理方法

未定義のメタフィールドを管理するには、定義のないメタフィールドタブに移動します。ここから、以下の操作が可能です：

• メタフィールドの修正：メタフィールドの横にある鉛筆アイコンをクリックして、名前を更新したり、定義済みメタフィールドに変換したりできます。
• メタフィールドの削除：メタフィールドが不要になった場合は、ゴミ箱アイコンをクリックして直接削除できます。

効果的な活用方法

商品詳細ページの柔軟なカスタマイズのための独立したフィールド拡張

よく設計された商品詳細ページは、顧客の購買意思決定を導く上で重要な役割を果たします。国境を越えた競争が激しいeコマースの世界では、細部にこそ勝敗の鍵があります。商品詳細ページに独自かつ関連性の高い情報を表示することで、マーチャントは潜在的な顧客の信頼と好意を獲得するだけでなく、他社との差別化を図り、競争優位を築くことができます。

例えば、マーチャントが商品の洗濯方法を含めたい場合を考えてみましょう。洗濯情報専用の拡張フィールドを作成することで、顧客は商品詳細ページで簡単にその情報にアクセスできます。これにより、顧客の信頼感と安心感が高まるだけでなく、洗濯に関する誤りによる返品の可能性も減少します。

洗濯表示以外にも、マーチャントは必要に応じてメタフィールドを使用して、素材の構成、原産地、サイズなどの追加情報を商品詳細ページに柔軟に含めることができます。

シンプルなコードカスタマイズによるパーソナライズされた機能要件の実装

より多くの情報を柔軟に表示することに加え、メタフィールドは特定のビジネスシナリオに合わせたパーソナライズされた機能要件のカスタマイズにも活用できます。これにより、マーチャントがストアをカスタマイズする際に直面する技術的なコストや障壁を効果的に軽減できます。

例えば、商品説明のタブ切り替えの実装、関連資料のダウンロードセクションの追加、関連商品レコメンドセクションの統合などです。

商品説明のタブ切り替え

商品詳細ページでは、多くの情報を提示する必要がある場合があります。しかし、すべての情報がページ上に散乱していると、顧客は圧倒され、必要な情報を迅速に見つけることが難しくなります。これにより、ショッピング体験が低下し、顧客の不満につながる可能性があります。

この問題に対処するために、マーチャントはタブ切り替えテンプレートを利用して情報を効果的に分類・整理できます。このテンプレートにより、マーチャントは複数の情報カテゴリを1つのコンテンツボックス内に表示し、顧客は異なるタブを切り替えて目的の情報にアクセスできます。この方法により、商品詳細ページは包括的でありながら視覚的に魅力的なレイアウトを維持できます。

以前は、このような機能を実装するにはマーチャントが技術者を雇用して開発に追加リソースを投じる必要があり、不便でした。しかし、メタフィールド管理ツールを使えば、マーチャントは独自に新しい拡張フィールドを作成し、コードのコピー＆ペーストで基本的なタブ切り替えテンプレートを簡単に統合できます。これにより、商品説明のタブ切り替えテンプレートの設定と商品詳細ページへの表示が簡素化されます。

関連資料のダウンロードセクションの追加

すべての情報を商品詳細ページに直接表示することが便利とは限りません。設置マニュアルや素材構成の詳細など、詳細な資料説明は文書の形で顧客に提供する方が適しています。

メタフィールドを使うことで、マーチャントは関連資料のダウンロードリンクを商品に簡単に追加できます。これにより、顧客はリンクをクリックして文書をダウンロードし、ローカルで閲覧できるため、商品に関する包括的な情報を入手できます。

関連商品レコメンドセクションの追加

データによると、個別の商品詳細ページに関連商品レコメンドを組み込むことで、顧客のページ閲覧時間が効果的に増加するだけでなく、ストアの平均取引額も向上します。

以前は、マーチャントが関連商品レコメンドを実装するには特定のアプリが必要でした。しかし、メタフィールド管理ツールを使うことで、マーチャントはいつでもどこでも簡単に関連商品レコメンドモジュールを作成できます。

メタフィールドは、商品、カテゴリ、顧客、注文、ブログ、ページ、ストアなどのリソースに対して拡張フィールドを作成し、特定の情報を保存できるだけでなく、管理者APIを通じて他のECシステム（CRM/IMS/ERP）とのデータ送受信や連携も可能にします。これにより、SHOPLINEストアは他のシステムとよりシームレスに連携でき、マーチャントはさまざまなデータを便利に管理・閲覧できます。