SHOPLINEでは、商品詳細ページや商品一覧ページを柔軟にカスタマイズできるよう、メタフィールド機能モジュール をアップグレードしました。このアップグレードにより、テーマデザインの視覚的な設定を通じて、独自にフィールドを拡張し、個別の要件を反映したカスタマイズが可能になります。これにより、ストアデコレーションの柔軟性、拡張性、カスタマイズ性が大幅に向上し、カスタマイズに伴う技術コストが効果的に削減されます。
Note: この機能は、従来の「アンチクローラー設定」の最適化バージョンです。「アンチクローラー設定」にページを入力済みの場合、システムは対応するRobots.txtファイル末尾に自動的にdisallowテキストを追加します。 |
目次
メタフィールドの概要
メタフィールド機能モジュールは、商品やカテゴリごとに特定の拡張フィールドを作成し、ページ上に表示するためのツールです。これにより、テキストや画像、URL、数値、カラー情報、JSON、参照商品などを追加でき、顧客向けのメモや使用方法の説明、さらに詳細な商品情報を提供することで、顧客の信頼を高めることが可能になります。
機能の効果
たとえば、レディースファッションストアの場合、商品詳細ページでは衣類のメイン画像や素材情報、詳細なカラー表示、お手入れ方法、ダウンロード可能なファイル、デザイン仕様などの情報を表示する必要があります。メタフィールドを活用することで、これらの情報を標準化されたプロセスで作成できます。一度設定を統一すれば、異なる商品の紹介情報を自動的に生成することができ、設定作業の手間を大幅に削減できます。
-
商品 ページで対象の商品を選択し、メタフィールドを追加します。
- ストアデザインページの 商品詳細ページ > 画像とテキスト モジュールで、画像とテキストのメタフィールドを追加します。
適用範囲
サポートされるページとパーツ:
所有リソース | ページ | パーツ |
商品 |
商品詳細ページ | ヘッダーやフッターや他の全画面パーツを除く、商品詳細ページ内のすべてのデフォルトやオプションセクションを含みます。 |
ホームページ / 商品リストページ / カスタムページ カテゴリページ / ブログ / ブログカテゴリ / カートページ / 404 / 検索ページ |
単一商品のみ | |
カテゴリ |
商品リストページ | ヘッダーやフッターや他の全画面パーツを除く、商品リストページ内のすべてのデフォルトやオプションセクションを含みます。 |
ホームページ / 商品詳細ページ / カスタムページ カテゴリページ / ブログ / ブログカテゴリ / カートページ、その他のページ-404 / 検索ページ |
|
サポートされるテーマ:
- Ariseテーマ
- Alongテーマ
- Impressテーマ
- Brooklynテーマ
- Blouseテーマ
Note: 現在、上記のテーマに加えて、メタフィールドを構成するためのエントリは、注目商品 > カテゴリブロック でのみ利用可能です。 |
追加可能なコントロール
各コントロールに追加できる動的ソースとメタフィールドの設定は、データタイプに関連付けられています。現在のエディターでサポートされている各コントロールに対応するデータタイプは、以下の表に示されています。
コントロール名 | サポートされているメタフィールドのデータ型 | 単一・複数選択 |
richtext/textarea |
テキスト:単一行、複数行のテキスト 数値:整数、浮動小数点数 |
複数選択:一度に1つの動的ソースのみを選択できますが、1つの入力ボックスに複数の動的ソースを追加できます。 |
text |
テキスト:単一行 数値:整数、浮動小数点数 |
複数選択 |
color | カラー | 単一選択 |
url |
URL | 単一選択 |
image_picker | 参照:ファイル | 単一選択 |
page_picker |
参照:カスタムページ | 単一選択 |
product_picker | 参照:商品 | 単一選択 |
設定手順
メタフィールドの設定は、以下の4つのステップで構成されます。
以下に、具体例としてレディースファッションストアを参考に、詳細な設定手順を説明します。
メタフィールドの作成
- SHOPLINEの管理画面で、左下の 設定 > メタフィールド に移動します。
- メタフィールドページで、商品、商品カテゴリ、商品バリエーション、ページ、顧客、ブログ、ブログカテゴリ、注文 などの対象を選択します。ここでは、商品 を例に取り上げます。
-
フィールドを追加 をクリックします。
- メタフィールドの設定画面で以下の情報を入力します。
- フィールド名: メタフィールドを管理画面で識別するための名前(例:「カラー」)。
- ネームスペースとキー: メタフィールドの一意の識別子。関連するメタフィールドをグループ化する場合に役立ちます(例:「custom.color」)。
- 説明(任意): メタフィールドに入力する値について説明を記載できます。
-
データタイプ: 保存するデータの種類を選択します(例:テキスト、ドキュメント、URLなど)。単一または複数のデータタイプを設定可能です。
たとえば、フィールド名を「セールスコピー」と設定し、ネームスペース、キー、説明を入力します。データタイプを「テキスト」に設定し、シングルラインまたはマルチラインのいずれかを選択します。必要な内容を入力したら 追加 ボタンをクリックします。
作成完了後、自動的にリストページに戻ります。新しく作成したメタフィールド(例:「セールスコピー」)がリストの最上部に表示され、現在のフィールド値の数が「0」と表示されます。
メタフィールドに値を割り当てる
要件に応じて、商品に複数のメタフィールドを作成できます。たとえば、「詳細画像-カラー表示」「詳細画像-素材表示」「セールスコピー」「商品ケアガイド」などが含まれます。メタフィールドを作成した後は、商品管理ページに戻り、必要な商品の各メタフィールドに対応する値を入力してください。
- 商品 に移動し、該当する商品の詳細ページを開きます。
- ページ下部までスクロールすると、メタフィールド入力ボックスが表示されます。必要なフィールドにテキストを入力したり、画像を追加してください。その後、更新 をクリックして保存します。
- 入力が完了したら、右上の 更新する を再度クリックします。
- 最後に、メタフィールド管理ページに戻ります。「フィールド値」の数が「0」から「1」に変わったことを確認してください。これにより、「セールスコピー」メタフィールドに値が割り当てられた商品の数が反映されます。
要件に応じたストア装飾でメタフィールドを選択する
メタフィールドを作成し値を設定した後、ストア装飾で統一的な設定を行うためにメタフィールドを選択できます。
- 商品詳細の下に 画像とテキスト パーツを追加し、メイン画像と素材情報を表示します。
-
画像とテキスト パーツをクリックし、アイコンをクリックしてメタフィールドを追加します。
-
画像とテキスト のタイトルを設定します。タイトルを選択し、右上のアイコンをクリックしたら、動的ソースを 商品タイトル に変更し、保存 をクリックします。
-
テキスト の設定を行います。タイトルを選択し、右上のアイコンをクリックしたら、動的ソースを セールスコピー に変更し、保存 をクリックします。
メタフィールドを変更する
メタフィールドの値や表示方法は、必要に応じて簡単に変更できます。以下の手順をご参照ください。
- メタフィールドの編集:ホームページの左下をクリックし、設定 > メタフィールド > 商品 > 商品メタフィールド に移動します。編集したいメタフィールドを選択してください。
この時点では、フィールド名 と 説明 のみを編集できます。
-
商品 > 商品管理詳細ページ > メタフィールドセクション に移動し、該当するメタフィールドをクリックします。値を直接変更し、保存 をクリックしてください。
- メタフィールドの表示方法を変更:メタフィールドをクリックし、以下の3つのオプションから選択できます。
-
- 値を編集:商品管理画面にリダイレクトされ、商品メタフィールドの値を直接変更できます。
- 動的ソースを変更:別のメタフィールドに切り替えることができます。
- 動的ソースを削除:直接削除するか、キーボードの削除キーで削除します。
効果的な活用方法
-
フィールドを独自に拡張して柔軟に商品詳細ページをカスタマイズ
魅力的な商品詳細ページは、顧客が購入を判断するために必要な情報を的確に提供します。特に競争の激しい越境EC市場において、細部が成功を左右します。商品詳細ページで他にはない情報を顧客に提供できれば、顧客からの信頼や好感を得られるだけでなく、差別化された競争優位性を築き、競合他社を凌駕することが可能です。
たとえば、商品の洗濯方法に関する情報を追加したい場合、専用の「洗濯情報」拡張フィールドを作成することで、商品詳細ページに洗濯方法の注意書きを表示できます。これにより、顧客は商品への信頼感を高め、洗濯ミスによる返品の可能性を減らすことができます。
また、「洗濯情報」以外にも、素材、原産地、サイズなどの商品情報を、必要に応じてメタフィールドを使って商品詳細ページに追加することができます。これにより、顧客に対してより充実した情報を提供し、購買意欲を高めることができます。
-
シンプルなコードのカスタマイズ:パーソナライズされた機能要件の実装
Note: 開発者は『メタフィールド概要』をご確認ください。
メタフィールドは柔軟に情報を表示するだけでなく、特定のビジネスシナリオに基づいてパーソナライズされた機能をカスタマイズするためにも活用できます。これにより、ストアのカスタマイズを行う際に発生する技術的なコストや障壁を大幅に軽減できます。
例:-
商品説明のタブ切り替え機能の実装
商品詳細ページには多くの情報を表示する必要がある場合がありますが、すべての情報を1ページに詰め込むと、見た目がごちゃごちゃしてしまい、顧客が必要な情報をすぐに見つけられない可能性があります。これにより、購買意欲が低下し、離脱につながることもあります。
こうした場合、タブ切り替えテンプレートを使用することで、情報をカテゴリごとに整理し、1つのコンテンツボックス内で統一して表示できます。顧客はタブを切り替えるだけで、異なる情報を簡単に閲覧できます。この方法により、情報の網羅性を保ちながら、商品詳細ページの視覚的な魅力を維持できます。
従来、この機能を追加するためには、技術者に依頼して開発を行う必要があり、コストや手間がかかりました。しかし、メタフィールド管理ツールを使用すれば、拡張フィールドを作成し、基本的なタブ切り替えテンプレートのコードをコピー&ペーストするだけで、簡単にタブ切り替え機能を設定し、商品詳細ページに表示することが可能です。
-
関連資料ダウンロードセクションの追加
すべての情報を商品詳細ページに直接表示するのが適切とは限りません。例えば、取付マニュアルや素材構成の説明など、内容が多い資料は、ドキュメント形式で提供した方が適している場合があります。メタフィールドを活用すれば、関連資料のダウンロードリンクを商品に追加できます。顧客は必要に応じてリンクをクリックし、資料をダウンロードしてローカルで閲覧することができます。 -
関連商品おすすめセクションの追加
データによると、商品詳細ページに関連商品のおすすめを追加することで、顧客がページ内で閲覧する時間を延ばすだけでなく、ストアの平均取引額も向上します。以前は、関連商品をおすすめするために特定のプラグインを導入する必要がありましたが、メタフィールド管理ツールを使用すれば、いつでもどこでも関連商品おすすめモジュールを簡単に作成できます。
さらに、メタフィールドは、商品、カテゴリ、顧客、注文、ブログ、ページ、ストアなどのリソースに拡張フィールドを作成して特定の情報を保存するだけでなく、管理者APIを通じて他のECシステム(CRM/IMS/ERP)とのデータ連携や相互運用をサポートします。これにより、SHOPLINEストアは他のシステムとシームレスに統合され、様々なデータを便利に管理および確認できるようになります。
-
商品説明のタブ切り替え機能の実装
コメント