Start Strong
Sell Smart
Manage with Ease
Market to Success

テーマデザインにおけるメタフィールド

フィールドを独立して拡張し、商品詳細および商品一覧ページを柔軟にカスタマイズできるように、SHOPLINEはメタフィールド機能モジュールをアップグレードしました。テーマデザインでのビジュアル設定を通じて、このアップグレードはパーソナライズされた要件を容易にし、ストアの構築の柔軟性、拡張性、およびカスタマイズ機能を大幅に向上させるとともに、ストアカスタマイズに伴う技術的コストを効果的に削減します。

注：この機能はアンチクローラー設定の最適化バージョンです。もしアンチクローラー設定でアンチクローラーページを入力している場合、システムは自動的に対応するdisallowテキストをRobots.txtファイルの末尾に追加します。

 

 

メタフィールドの紹介

メタフィールド機能モジュールは、商品やカテゴリのための特定の拡張フィールドを作成し、ページ上に表示することをサポートします。テキスト（一行・複数行）、画像、URL、数字、色、JSON、参照商品などを追加して、顧客向けのメモをまとめたり、使用説明を提供したり、より多くの商品詳細を紹介したりして、ストアが顧客からより多くの好感と信頼を得るのに役立ちます。

 

機能効果

女性服のストアを例にとると、その商品詳細ページでは、服のメイン画像、素材、詳細な色の表示、洗濯推奨、ダウンロード可能なファイル、デザイン仕様などの標準化された紹介情報を表示する必要があります。メタフィールドを利用して標準化された手順を作成できます。情報を統一的に設定した後、異なる商品の紹介情報を自動生成でき、設定作業の複雑さを軽減します。

  1. 商品管理ページで商品にメタフィールドを追加します。
    image.png
  2. ストアデザインページの商品ページ > 画像とテキストパーツで画像とテキストのメタフィールドを追加できます。追加後、各商品の対応する画像と説明テキストが画像とテキストパーツに表示されます。
    EN_MetafieldThemeDesign_ImageTextModule.png
     

 

適用範囲

対応するページとパーツ：

所有リソース ページ パーツ

商品


 

 

 商品詳細ページ/ 商品詳細ページ内のヘッダー/フッターおよびその他の全ページパーツを除く、すべてのデフォルト/任意セクションを含みます。

トップページ/ 商品一覧ページ/ カスタムページ

カテゴリページ/ ブログ/ ブログカテゴリ/ カートページ/ 404/ 検索ページ

 単一商品にのみ適用

カテゴリ


 

 

 商品一覧ページ 商品一覧ページ内のヘッダー/フッターおよびその他の全ページパーツを除く、すべてのデフォルト/任意セクションを含みます。

トップページ/ 商品詳細ページ/ カスタムページ

カテゴリページ/ ブログ/ ブログカテゴリ/ カートページ、その他のページ-404/ 検索ページ
  • 注目商品パーツのみ
  • 商品カテゴリ用のカテゴリブロックのみ（設定は除く）

 

 

追加可能なコントロール

各コントロールに追加できる動的ソースとそのメタフィールド設定は、データタイプに連携しています。以下の表は、現在のエディターで各コントロールがサポートするデータタイプを示しています。

コントロール名 サポートされているメタフィールドデータタイプ 単一/複数選択
richtext/textarea

テキスト：単一行、複数行テキスト

数値：整数、浮動小数点数

 複数選択：一度に1つの動的ソースのみ選択可能ですが、1つの入力ボックスに複数の動的ソースを追加できます。
text

テキスト：単一行

数値：整数、浮動小数点数

 複数選択
color カラー 単一選択

url

 

 URL 単一選択
image_picker 参照：ファイル 単一選択

page_picker

 

 参照：カスタムページ 単一選択
product_picker 参照：商品 単一選択

 

 

手順

メタフィールドの設定は以下の4つのステップで行います：

  1. メタフィールドの作成
  2. メタフィールドへの値の割り当て
  3. 要件に応じたストア装飾時のメタフィールドの選択
  4. メタフィールドの修正

この記事では、女性服のストアを例にして説明します。

メタフィールドの作成

  1. トップページに移動し、左下の設定 > カスタムデータをクリックします。
    image.png
  2. メタフィールドページでは、商品、商品カテゴリ、商品バリエーション、ページ、顧客、ブログ、ブログカテゴリ、および注文のメタフィールドを定義できます。ここでは、例として商品を取り上げます。
    image.png
  3. フィールドを追加をクリックします。
    image.png
  4. 商品メタフィールドの定義を追加します。
  • フィールド名：SHOPLINE管理画面でメタフィールドを識別するために使用します。例：Color（カラー）。
  • ネームスペースとキー：メタフィールドの一意の識別子です。類似のメタフィールドをグループ化するためにネームスペースを使用できますが、各ネームスペースとキーは一意でなければなりません。例：「custom.color」。
  • 説明（任意）：メタフィールドに入力する値などの説明情報を提供します。
  • データタイプ：メタフィールドが格納するデータの種類です。テキスト、ドキュメント、URLなどがあります。単一または複数のデータタイプの設定が可能です。
  • アクセスオプション：自動生成されるカテゴリを設定できます。
    image.png
    例えば、Sales Copy（セールスコピー）を設定し、ネームスペース、キー、説明を入力します。データタイプを選択します。ここではテキストを選択します。さらに、必要に応じてカラー、ドキュメント、数値、URL、重量、サイズなども選択可能です。
    image.png
    テキストを選択すると、単一行テキストまたは複数行テキストの選択ボックスが表示されます。要件に応じて複数行テキストを選択し、内容を入力して追加ボタンをクリックします。

    作成が完了すると、自動的にリストページに戻り、作成成功を確認するポップアップが表示されます。リストの最上部には新しく作成されたメタフィールドSales Copyが表示され、現在のフィールド値の数は0です。
    image.png 

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

要件に応じて、商品に対して複数のメタフィールドを作成できます。例えば、詳細画像-カラー表示、詳細画像-生地表示、セールスコピー、商品ケアガイドなどです。メタフィールドを作成した後は、商品管理ページに戻り、各必要な商品のメタフィールドに対応する値を入力してください。

  1. 商品 > 商品管理ページに移動します
  2. ページの一番下までスクロールすると、メタフィールドのテキストボックスが表示されます。該当するフィールドに入力するか画像を追加し、入力後に更新をクリックします。
    image.png
  3. 完了したら、右上の更新をクリックし、複数の商品に対して上記の手順を繰り返します。
  4. メタフィールド管理ページに戻ります。フィールド値の数が0から1に変わっており、これは販売用コピーのメタフィールドに値が割り当てられた商品の数を示しています。
    image.png

要件に応じたストア構築時のメタフィールドの選択

メタフィールドを作成し値を割り当てた後、ストア構築で統一的に設定するためにメタフィールドを選択できます。

  1. 商品詳細の下に画像とテキストパーツを追加し、メイン画像と生地情報を表示します。
  2. 画像とテキストパーツをクリックし、アイコンをクリックしてメタフィールドを追加します。
    image.png
  3. 画像とテキストパーツ：
    タイトルを選択し、右上のアイコンをクリックして動的ソースを商品タイトルに変更し、最後に保存をクリックします。
    image.png
  4. リッチテキストを選択し、右上のアイコンをクリックして動的ソースを販売用コピーに変更し、保存をクリックします。
    image.png

メタフィールドの修正

メタフィールドの修正、値の変更、表示方法の変更も可能です。

  1. メタフィールドの修正：トップページの左下をクリックし、設定 > カスタムデータ > 商品 > 商品メタフィールドに進み、特定のメタフィールドをクリックします。
    image.png
    この時点で、フィールド名と説明のみを修正できます。
    image.png
  2. メタフィールドの値の変更：商品 > 商品管理ページ > メタフィールドセクションに進み、メタフィールドをクリックして直接修正し、修正を保存します。
    image.png
  3. 表示の修正：メタフィールドをクリックし、値を修正、動的ソースを変更、動的ソースを削除から選択します。
    • 値を修正：商品管理画面にリダイレクトされ、商品メタフィールドの値を直接修正できます。
    • 動的ソースを変更：別のメタフィールドに切り替えることができます。
    • 動的ソースを削除：直接削除するか、キーボードの削除キーを押して削除します。

 

実用的な提案

1. フィールドを独立して拡張し、商品詳細ページを柔軟にカスタマイズする

優れた商品詳細ページは、顧客が購入判断に必要な情報を提供できます。競争の激しい越境ECマーケットでは、細部が成功を左右します。マーチャントが商品詳細ページで独自の細部を顧客に示すことができれば、より多くの顧客の好意と信頼を得て、差別化された競争優位を形成し、競合を凌駕することが可能です。

例えば、マーチャントが商品の洗濯情報を追加したい場合、その商品に対して洗濯情報の拡張フィールドを作成できます。これにより、顧客は商品詳細ページで洗濯情報の注意事項を確認でき、商品への信頼と好意が高まり、洗濯ミスによる返品の可能性を減らせます。

洗濯情報に加え、マーチャントは必要に応じて素材、原産地、サイズなどの情報をメタフィールドを通じて商品詳細ページに追加できます。
 

2. 簡単なコードカスタマイズ：個別の機能要件を実装する

注意：開発者はメタフィールド概要に進むことができます。


より多くの情報を柔軟に表示できるだけでなく、メタフィールドは特定のビジネスシナリオに基づいた個別の機能要件のカスタマイズにも利用できます。これにより、マーチャントがストアをカスタマイズする過程で直面する技術的コストや技術的障壁を効果的に低減できます。

例えば、商品説明のTAB切り替えの実装、関連資料のダウンロードセクションの追加、または関連商品レコメンドセクションの追加などがあります。

  • 商品説明のタブ切り替え：商品詳細ページには多くの情報を表示する必要がある場合があります。すべての情報を商品詳細ページに配置すると、ページが散らかって見え、顧客が探している情報をすぐに見つけにくくなり、ショッピング体験が悪化し、顧客離れの原因となることがあります。そのような場合、マーチャントはTAB切り替えテンプレートを使用して情報を分類・整理し、単一のコンテンツボックス内で均一に表示できます。顧客はタブを切り替えることで異なる情報カテゴリを閲覧できます。この方法により、商品詳細ページに表示される情報は総合的でありながら、視覚的にも見やすくなります。以前は、この機能をページに追加したいマーチャントは、開発のために技術者を雇うために追加費用がかかり、利便性が低かったです。メタフィールド管理ツールを使えば、マーチャントは独自に新しい拡張フィールドを作成し、基本的なTAB切り替えテンプレートのコードをコピー＆ペーストするだけで済みます。これにより、商品説明のTAB切り替えテンプレートを簡単に設定し、商品詳細ページに表示できます。
     
  • 関連資料のダウンロードセクションの追加：すべての情報を商品詳細ページに直接表示できるわけではありません。設置マニュアルや素材構成説明など、内容が多岐にわたる必要な資料説明は、文書の形で顧客に提供する方が適しています。メタフィールドを使うことで、マーチャントは関連資料のダウンロードリンクを対象商品に追加でき、顧客はクリックして資料をダウンロードし、ローカルで閲覧できます。
     
  • 関連商品レコメンドセクションの追加：データによると、個別の商品詳細ページに関連商品レコメンドを組み込むことで、顧客のページ滞在時間が効果的に増加するだけでなく、ストアの平均取引額も向上します。以前は、関連商品レコメンドを実装するために特定のアプリが必要でした。メタフィールド管理ツールを使えば、マーチャントはいつでもどこでも簡単に関連商品レコメンドモジュールを作成できます。メタフィールドは、商品、カテゴリ、顧客、注文、ブログ、ページ、ストアなどのリソースに対して拡張フィールドを作成し、特定の情報を保存できるだけでなく、Admin APIを通じて他のECシステム（CRM/IMS/ERP）とのデータ送受信や連携も可能にします。これにより、SHOPLINEストアは他のシステムとよりシームレスに連携でき、マーチャントはさまざまなデータを便利に管理・閲覧できます。
 

この記事はAIを使用して翻訳されており、不正確な箇所が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。