「製品の詳細」セクションで主要な製品の仕様を強調表示します。

製品情報を効果的に提示する能力は、電子商取引の生命線です。しかし、商人は、豊かさが過負荷に変わるというもどかしいパラドックスに直面することがよくあります。厳格なレイアウト、無味乾燥なプレゼンテーション、雪崩のように情報が押し寄せると、製品の魅力がかき消され、顧客は当惑し、関心を失ってしまいます。

これらの障害に対処するために、 Conceptテーマは、製品コミュニケーションを合理化し、最適化するように設計された強力なツールである製品詳細セクションを提供します。このセクションでは、販売業者が仕様に焦点を当てて、明確かつ簡潔な製品説明を作成できるようにします。

このチュートリアルでは、「製品の詳細」セクションを段階的に構成する方法を示します。

A. この機能はどこにありますか

    1. テーマ エディターを使用して製品ページで、テンプレートセクション グループの下に製品の詳細セクションを作成します。

    2. この構成セクションでは、さまざまなカスタマイズ オプションが提供され、簡単にナビゲーションできるように 3 つの個別のブロック (説明、折りたたみ可能な行、および仕様ブロック) にまとめられています。

B. 製品詳細の設定

  1. セクションの設定
  2. ブロックの設定

1. セクションの設定

「製品の詳細」セクションの設定
セクション設定説明
製品詳細
最初の折りたたみ可能な行を開く

最初の折りたたみ可能な行を開くことができます。

仕様の見出し

テキストを入力します

見出し
見出し

セクションのタイトル。

見出しのサイズ見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 Left 、 Center 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
小見出し見出しの小見出しは見出しの上に配置されます。
説明見出しの説明テキストは見出しの下に配置されます。
ハイライトされたテキスト

ハイライトされたテキスト次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
  • 文字の色
  • 文字の背景色
  • 派手な下線
  • 通常の下線
  • ステンシルテキスト
  • 手描きの落書き
ハイライトされた落書き

強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。

この設定では、テキストを強調表示する 5 つの方法が提供されます。
  • 丸
  • 基本的な下線
  • スケッチの下線
  • 波線の下線
  • 波線の下線 2
色

必要に応じて、次のセクションの色をカスタマイズできます。
  • 文章
  • 背景
  • 背景のグラデーション
  • ハイライト
  • ハイライトグラデーション
  • ボタンのテキスト
  • ボタンの背景
  • ボタンの背景のグラデーション
セクション
上部パディングと下部パディングを0px から 120px まで 4px 刻みで調整できます。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを全幅にするコンテナを全幅にします。
断面を丸くする上の 2 つの角に丸いエッジを適用します。

2. ブロック設定

2.1.説明

このブロックは、有益で魅力的な説明を活用して、製品の詳細を最適に紹介し、顧客エクスペリエンスを向上させることを目的としています。

見出し- ブロックのタイトル。 (例:説明)

[説明]ブロックには、管理ダッシュボード> [製品] > [Flow Harmony]にある[製品の説明] フィールドの内容が入力されます ( Flow Harmony はこの記事のサンプル製品です)。参考までに、下の2枚の画像をご覧ください。

説明ブロックフローハーモニー製品
2.2.折りたたみ可能な行

折りたたみ可能なタブを使用して、顧客が十分な情報に基づいて購入の意思決定を行えるようにする補足情報を便利に表示します。

  • 見出し- ブロックのタイトル
  • 行の内容- 顧客の理解を深め、自信を持って購入の意思決定を容易にする詳細を提供するメタフィールド(メタフィールド アイコン)を入力または選択します。

    メタフィールドのアイコン:

  • メタフィールド- 値を保持するメタフィールドの名前空間とキーを入力します。各メタフィールドは独自の行になければなりません。

例えば:

このFlow Harmony製品の例では、プログラムでサウンドメタフィールドを取得することによって行コンテンツの値が決定され、データの一貫性と正確な表示が保証されます。

行の内容フローハーモニー製品

製品情報をさらに強化するために、メタフィールド: tech_specs.batteryにバッテリー メタフィールドの名前空間とキーを正確に入力することにより、バッテリー情報が追加されました。

2.3.仕様

仕様ブロックの構成プロセスでは、次の 2 つのアプローチが提供されます。


2.3.1.マニュアル仕様追加

最初のメソッドの動作を視覚化してみましょう。 Flow Harmony 製品の5 つの仕様を表示するには、次の手順に従います。

  1. 5つの仕様ブロックを追加
  2. 関連するアイコンとテキストを使用して各ブロックをカスタマイズします

視覚的なサポートを提供するために、以下の 2 つの画像は追加のコンテキストを提供します。


2.3.2.メタオブジェクトとメタフィールドの統合

2 番目の方法では、 MetaobjectとMetafieldの組み合わせの力を利用します。ここで、メタオブジェクトはすべての製品仕様の集中リポジトリとして機能し、個々のメタフィールドは特定の製品ごとに仕様を動的に表示します。

このプロセスは、次の 3 つの主要なステップで構成されます。

  1. メタオブジェクトの作成
  2. メタフィールドの作成
  3. 仕様ブロック構成

1. メタオブジェクトの作成

  • 管理者ダッシュボードから設定に移動します。

    [設定]で、 [カスタム データ]タブ > [定義の追加]をクリックします。

    [定義の追加]をクリックすると、次のウィンドウが表示されます。

  • 参考として、データの配置が以下の画像に示されている例と一致していることを確認してください。

    • 名前- Tech specを入力します

    • フィールド-ファイルと単一行テキストを選択します

      • ファイル-名前にIconを入力し、 1 つのファイルを選択します。

      • 単一行テキスト- [名前]にLabelと入力し、 [1 つのファイル]を選択します。

    このステップが完了すると、メタオブジェクトの構成は、以下の画像の視覚的表現を反映したものになります。

  • メタオブジェクトの作成に続いて、包括的な製品仕様 (ヘッドフォン、 USB-C ケーブル、1.25 m 、スピーカーなど) を設定します。これは次の方法で実現します。

    • エントリの追加をクリック

    • 代表的なIconを選択し、 Labelにテキストを入力します。

      たとえば、ここでは「USB-C ケーブル、1.25 m」というエントリを追加します。

    • 残りの「Entry」値に対してこのプロセスを繰り返します。

このステップを完了すると、メタオブジェクト技術仕様にはすべての製品エントリ (この例では 8 つのエントリがあります) が包括的に格納され、仕様情報の中央リポジトリとして機能します。

2. メタフィールドの作成

このステップには、各製品に固有の固有の値を保持するように設計された「技術仕様」という名前の新しいメタフィールドを確立することが含まれます。

  • 新しいメタフィールドを作成するには、管理者ダッシュボードから設定>カスタム データ>製品>定義の追加に移動します。

  • 名前- Tech specsを入力します

    名前空間とキー- custom.tech_specsを入力します

    「選択」タイプでメタオブジェクトを選択します

    参照では、 [技術仕様]を選択し、次に[エントリ タイプのリスト]を選択します。

  • 「保存」をクリックしてこのステップを終了します。

  • このステップを完了すると、新しく作成されたメタフィールドがすべての製品に自動的に設定されます。これで、必要に応じて個々の製品に特定の値を割り当てることができます。

    たとえば、 Flow Harmony製品 >技術仕様>エントリの選択>リスト内のこの製品のエントリを選択します。

3. 仕様ブロックの構成

  • 「製品の詳細」セクションの「仕様」ブロックに戻ります。

  • この手順では、右上にあるメタフィールド アイコンをクリックして技術仕様メタフィールドを選択するだけです。

  • 指定された製品仕様が自動的に入力されます。

この記事がお役に立てば幸いです。この機能についてご質問やご不明な点がございましたら、お気軽に弊社チームのサポートまでお問い合わせください。

さらに支援が必要です

コンセプト テーマに関して問題が発生した場合、または追加のサポートが必要な場合は、8 時間以内にチケット システムを通じてサポート担当者にご連絡ください。

以下の QR コードをスキャンして WhatsApp コミュニティに参加し、最新情報、ニュース、お知らせを入手してください。

WhatsApp でチャットする