プロダクトページ¶
eコマースのプロダクトページには、関連するプロダクトのすべての詳細とメディア項目が表示されます。:ref:`画像と動画セクション <ecommerce/product_page/image-customization>`をカスタマイズし、:ref:`表示するプロダクト情報を選択 <ecommerce_design/product_page/customization>`し、特定の:ref:`ボタン <ecommerce_design/product_page/buttons>`を表示し、:ref:`属性詳細セクション <ecommerce_design/product_page/attributes>`をカスタマイズし、:ref:`追加の整理機能 <ecommerce_design/product_page/page-features>`を有効にし、:ref:`ブロック <ecommerce_design/product_page/building_blocks>`を使ってコンテンツを追加できます。
プロダクト画像および動画¶
:ref:`プロダクトフォームにメディア項目を追加 <ecommerce/products/images>`した後、または:ref:`フロントエンドでプロダクトを作成 <ecommerce/products/product-creation>`した際に、フロントエンドのプロダクトページでそれらをカスタマイズします。そのためには、オンラインショップの該当するプロダクトページに移動し、右上隅の:guilabel:`編集`をクリックし、:guilabel:`スタイル`タブに移動します。
ちなみに
バックエンドの:ref:プロダクトフォーム <ecommerce/products/product-form>`から関連するプロダクトページにアクセスするには、フォーム上部の:icon:`fa-globe :guilabel:`ウェブサイトへ移動`スマートボタンをクリックします。
個別のメディア項目を管理するには、プロダクトページで項目をクリックし、ウェブサイトエディタの:guilabel:画像`セクションまでスクロールします。その後、画像や動画を:guilabel:`置き換え`または:guilabel:`削除`し、項目を:guilabel:`並べ替え`できます。:icon:`fa-angle-double-left (左二重矢印) または:icon:fa-angle-double-right (右二重矢印) を使ってメディアを最初または最後の位置に移動し、 (左矢印) または:icon:fa-angle-right (右矢印) を使って1つずつ移動します。
画像と動画セクションのレイアウトを調整するには、:guilabel:`画像エリア`に移動し、画像のサイズと:guilabel:`位置`を定義します。次に、:guilabel:`画像`セクションに移動し、以下のオプションを使ってこのセクションをカスタマイズします:
メイン画像: :guilabel:`置き換え`をクリックして、メインのプロダクト画像を変更します。
注釈
動画をメインのメディア項目として使うことはできません。
追加メディア: 画像や動画を:guilabel:`さらに追加`(URL経由を含む)、またはすべてのメディア項目を:guilabel:`削除`します。
表示: 複数のメディア項目を使う場合、以下のレイアウトから選択します:
自動切り抜き: ページのレイアウトに合わせて画像を切り抜くサイズを選択します。これは、 モバイル :ref:`レイアウト <website/visibility/mobile-and-computer>`をデザインする際に便利です。
クリック時にズーム: 訪問者が画像をクリックしたときに画像ズームを有効にします。
ページレイアウトと製品情報表示¶
プロダクトページのレイアウトをカスタマイズするには、任意のプロダクトページにアクセスし、右上隅の:guilabel:`編集`をクリックして、:guilabel:`スタイル`タブに移動します。次に、:guilabel:`ページ幅`管理設定に移動し、:guilabel:`通常`または:guilabel:`全幅`オプションのいずれかを選択します。
ちなみに
:ref:`ショップページ <ecommerce/catalog/customize-layout>`には異なる幅を選択できます。
:guilabel:`製品詳細`セクションで利用可能なオプションを使用して、プロダクトページに表示されるプロダクト情報を選択します。:ref:`ボタン <ecommerce_design/product_page/buttons>`を設定したり、:ref:`属性の表示方法 <ecommerce_design/product_page/attributes>`を定義したり、:ref:`ページカスタマイズ機能 <ecommerce_design/product_page/page-features>`を使用してページを整理したり、:ref:`ビルディングブロック <ecommerce_design/product_page/building_blocks>`を使用してコンテンツを追加したりできます。
属性¶
プロダクトページの:guilabel:`仕様`セクションで、プロダクト:ref:`属性 <ecommerce/categories_variants/attributes>`の表示方法を選択します:
なし: 詳細を表示しません。
ページ下部: ページの下部に詳細を表示します。
アコーディオン形式: 注文オプションの直下に折りたたみ可能なテーブルを表示します。
注釈
仕様セクションは、:ref:`製品バリエーション <ecommerce/categories_variants/product-variants>`が有効になっており、かつプロダクトに少なくとも1つの属性が定義されている場合にのみ表示されます。
ページ構成オプションと追加機能¶
次のオプションをオン/オフに切り替えて、すべてのプロダクトページで機能を有効化または無効化します:
区切り線: ページを整理し、視覚的な明瞭性を向上させます。
税金表示: 価格が:ref:`VAT込みまたはVAT抜き <ecommerce/prices/taxes>`かを示します。
タグ: :ref:`バックエンド <ecommerce/catalog/filters>`で作成されたタグをプロダクトページに表示し、顧客がそれらのタグでプロダクトをフィルタリングできるようにします。
取引条件: :doc:`支払条件 </applications/finance/accounting/customer_invoices/terms_conditions>`へのリンクを表示します。
確認: ログイン済みのポータルユーザ </applications/general/users/user_portals>`がプロダクトレビューを投稿できるようにします。レビューを追加するには、ページ下部の:guilabel:`顧客レビュー`セクションに移動し、:icon:`fa-plus (プラス) アイコンをクリックします。その後、 (星) アイコンを使用して評価を選択し、コメントを残すことができます。 (星) 評価はプロダクト名の直下に表示されます。
検索バー: :ref:`ショップページ <ecommerce/catalog/toolbar>`とは独立して表示または非表示にできる検索バーを表示します。
リボン (またはバッジ): 特定のプロダクトを強調表示します。
ちなみに
バックエンドで事前に設定された追加機能を有効にし、情報を表示することができます:
クリック&コレクト: プロダクトページに注文受取場所と配送可否を表示し、顧客が希望する受取拠点を選択できるようにします。
説明: プロダクト名の直下にeコマース固有のプロダクト説明を表示します。
梱包: さまざまなタイプの梱包を提供します。
ドキュメント: ユーザマニュアルなどの関連ドキュメントやその他のサポート資料を追加します。
代替プロダクト: 類似プロダクトを提案し、セクションをカスタマイズします。
対応可能数量を表示: 数量が指定されたしきい値を下回った場合に、対応可能なプロダクト数量を表示します。
在庫切れメッセージ: 在庫切れのプロダクトに対してカスタマイズされたメッセージを表示します。
在庫が戻ったら通知を受け取る: 顧客はメールアドレスを入力して、件が在庫に戻ったときに通知を受け取ることができます。
プロダクトページ追加フィールド: プロダクトページの特定の追加フィールドを有効にするには、:doc:`開発者モード </applications/general/developer_mode>`を有効にします。次に、:menuselection:`ウェブサイト --> 設定 --> ウェブサイト`に移動し、該当するウェブサイトを選択し、:guilabel:`プロダクトページ追加フィールド`タブに移動して、:guilabel:`フィールド`の下で:guilabel:`明細追加`をクリックし、プロダクトのバーコード番号など、必要な数の追加フィールドを追加します。
ビルディングブロック¶
ビルディングブロックを使用して、すべてのプロダクトページまたは特定のページにコンテンツとデザイン要素を追加できます。これを行うには、任意または該当するプロダクトページに移動し、右上隅の:guilabel:編集`をクリックします。次に、:icon:`fa-plus (プラス) :guilabel:`ブロック`タブでビルディングブロックを選択し、ドラッグ&ドロップします:
プロダクトページの上部または下部の青色のエリアにドロップして、*すべての*プロダクトページで利用可能にするか、または
プロダクトタイトルの下または注文オプションの下の青色のビルディングブロックエリアにドロップして、現在のプロダクトにのみ表示します。
注釈
これらのビルディングブロックは:ref:`ショップページ <ecommerce/catalog/customize-layout>`には表示されません。
参照