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

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

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

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

A. この機能はどこにありますか
D. 製品詳細セクションの設定

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

テーマエディターを使用して製品ページで、テンプレートセクショングループの下に製品の詳細セクションを作成します。
この構成セクションでは、さまざまなカスタマイズオプションが提供され、簡単にナビゲーションできるように 3 つの個別のブロック (説明、折りたたみ可能な行、および仕様ブロック) にまとめられています。

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 つの仕様を表示するには、次の手順に従います。

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

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

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

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

このプロセスは、次の 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製品 >技術仕様>エントリの選択>リスト内のこの製品のエントリを選択します。