プロダクトカタログ¶

eコマースカタログには、顧客が閲覧できるプロダクトが表示されます。これは:ref:プロダクトカテゴリ <ecommerce/categories_variants/categories>、対応可能な:ref:プロダクトバリアント <ecommerce/categories_variants/product-variants>、並べ替えオプション、およびナビゲーションパスを使用して整理されています。基本的に、eコマースカタログはウェブサイトのショップページです。

プロダクトカタログには、サイドバー(またはスライドアウトメニュー)に:ref:ツールバーといくつかのフィルター <ecommerce/catalog/toolbar-and-filters>、および専用の:ref:プロダクト一覧エリア <ecommerce/catalog/product-listing>`があります。さらに、ショップページとカテゴリページの:ref:`レイアウト <ecommerce/catalog/customize-layout>、および:ref:`eコマースフッター <ecommerce/catalog/footer>`をカスタマイズでき、必要に応じて:ref:`ビルディングブロック <ecommerce/catalog/catalog-blocks>`を追加できます。

カタログをカスタマイズするには、ショップページに移動し、右上隅の:guilabel:`編集`をクリックし、変更したいセクションを選択して、:guilabel:`スタイル`タブに移動します。

カテゴリ¶

ツールバーに:ref:`カテゴリ <ecommerce/categories_variants/categories>`クイックアクセスを作成したり、サイドバーに一般アクセスを作成したりするには、:guilabel:`カテゴリ`の横にある:guilabel:`トップ`および/または:guilabel:`サイドバー`ボタンをクリックし、それらの:guilabel:`スタイル`を選択します。:guilabel:`サイドバー`が選択されている場合、:guilabel:`カテゴリを再帰的に折りたたむ`オプションが表示され、サイドバーでカテゴリを折りたたむことができます。

注釈

サイドバーにあるカテゴリフィルターは、:guilabel:`フィルター`設定の影響を受けません。

フィルター¶

:guilabel:`フィルター`フィールドを次のように設定します:

サイドバー:サイドパネルにフィルターを表示します。
オフスクリーンメニュー:ツールバーの:icon:`fa-sliders` :guilabel:`フィルター`ボタンをクリックすると開くスライドアウトメニューにフィルターを表示します。
非表示:フィルターを完全に非表示にします。

デフォルトでは、2つの:guilabel:`フィルター`が有効になっています:

価格: スイッチを使用して:guilabel:`価格範囲`バーを表示します。これにより、顧客は調整可能なハンドルをドラッグして、特定の価格範囲に応じてプロダクトをフィルタリングできます。

タグ: スイッチを切り替えて、ショップページにプロダクト:guilabel:`タグ`を表示し、:guilabel:`タグ`セクションに移動することで、顧客がそれらのタグを使用してプロダクトをフィルタリングできるようにします。

ちなみに
eコマースでプロダクトタグを作成するには、:menuselection:`ウェブサイト --> eコマース --> プロダクトタグ`に移動し、:guilabel:`新規`をクリックします。:guilabel:`タグ`名を追加し、:guilabel:`顧客に表示`スイッチを切り替え、:guilabel:`色`を選択します。オプションで画像を追加します。その後、プロダクトフォームに移動し、必要に応じて関連するタグを割り当てます。

:doc:`レンタルプロダクト <../../../sales/rental>`の場合、:guilabel:`レンタル日`オプションを追加して、特定の期間の在庫状況を確認するための日付範囲カレンダーを表示することもできます。

属性¶

異なる:ref:`属性 <ecommerce/categories_variants/attributes>`を持つ:ref:`プロダクトバリエーション <ecommerce/categories_variants/product-variants>`を提供する場合、フィルターが表示されると、それらのオプションがサイドバーまたはスライドアウトメニューに表示されます。メニューは属性セクションの数に自動的に適応します:

4つまでの属性: すべての属性値が表示されます。
5つ以上の属性: セクションは自動的に折りたたまれます。

注釈

ラジオ`および:guilabel:`選択:ref:`表示タイプ <products/variants/attributes>`の場合、**8**を超える値がある場合は:guilabel:`さらに表示`ボタンが表示され、値の数が**20**を超える場合は検索フィールドが表示されます。
フィルターを表示するには、少なくとも2つの属性値が必要です。
サイドバーまたはスライドアウトメニューにある属性フィルターは、:guilabel:`フィルター`設定の影響を受けます。

参照

プロダクトリスティングエリア¶

ショップページに表示するプロダクトの数を定義するには、ページおよび行ごとに表示される:guilabel:`サイズ`を設定し、:guilabel:`モバイル`デバイスの列数を指定します。

注釈

ページに表示されるプロダクトの数は、パフォーマンスとページの読み込み速度に影響を与える可能性があります。

さらに、ショップページまたはプロダクトカテゴリページでプロダクトの位置を手動で変更できます。これを行うには、特定のプロダクトをクリックし、サイズ`を変更し、:guilabel:`スタイル`タブの:guilabel:`プロダクト`セクションにある矢印を使用して:guilabel:`順序変更`します。:icon:`fa-angle-double-left (二重左矢印) および:icon:fa-angle-double-right (二重右矢印) ボタンを使用すると、プロダクトを極端な左または右に移動でき、 (単一左矢印) および:icon:fa-angle-right (単一右矢印) ボタンを使用すると、1行左または右に移動できます。また、特定のプロダクトを強調表示するために:ref:`リボンまたはバッジ <ecommerce/products/additional_features/product-highlight>`を選択または作成することもできます。

ちなみに

また、menuselection:`ウェブサイト --> eコマース --> プロダクト`に移動し、リスト表示に切り替えて、リスト内のプロダクトをドラッグ＆ドロップすることで、ショップページ上のプロダクトの位置を変更することもできます。

プロダクトカードのデザイン¶

プロダクトカードのデザインをカスタマイズするには、プロダクトデザイン`を選択し、その横にある:icon:`fa-paint-brush :guilabel:`(ペイントブラシ)`アイコンをクリックして:

:guilabel:`プリセット`レイアウトを選択します。
:guilabel:`全般`デザインを調整します。
:guilabel:`テキストとコンテンツ`をカスタマイズします (例: :guilabel:`説明`および:guilabel:`評価`を表示)。
:guilabel:`画像`のレイアウトをカスタマイズします (例: :guilabel:`セカンダリ画像`を有効にして、ショップまたはカテゴリページでプロダクト画像の上にカーソルを合わせたときに2番目の画像を表示)。
一部の:guilabel:アクション`（例：:icon:`fa-shopping-cart カートに入れる、比較、または:icon:fa-heart ウィッシュリスト）を有効にし、配置をカスタマイズします。

ちなみに

プロダクトカードに:ref:`バリアント画像 <ecommerce/categories_variants/attributes>`を追加することもできます。

ショップおよびカテゴリページデザイン¶

ショップページと個別カテゴリーページのデザインは次のようにカスタマイズできます：

ショップページとカテゴリーページの:guilabel:`コンテンツ幅`を:guilabel:`標準`または:guilabel:`全幅`から選択します。
ヘッダーを定義：関連ページに移動し、必要に応じてページ上で直接ヘッダーを変更します。:guilabel:`タイトルを表示`および/または:guilabel:`コンテンツを中央揃え`スイッチを切り替えます。プロダクトカテゴリーページの場合、:guilabel:`説明を表示`スイッチを切り替えて:ref:`カテゴリー説明 <ecommerce/categories_variants/categories>`を表示します。
:doc:`ビルディングブロック <../../website/web_design/building_blocks>`を使用して、ショップページ全体または特定のカテゴリーのページの上部/下部セクションにコンテンツを追加します。後者の場合、ブロックはそのカテゴリーでフィルタリングしたときに*のみ*表示されます。これを行うには、ブロックを最上部または最下部セクションに移動して一般的なショップページに表示するか、カテゴリー名の下の上部エリアまたはプロダクトリストの下に移動して、その特定のカテゴリーでフィルタリングしたときにのみ表示します。
ちなみに
- eコマースカテゴリーページにコンテンツを追加すると、:doc:`SEO <../../website/structure/seo>`戦略の改善に役立ちます。プロダクトやeコマースカテゴリーに関連するキーワードを使用することで、オーガニックトラフィックを増やすこともできます。さらに、各カテゴリーには独自の固有URLがあり、それを参照でき、検索エンジンによってインデックス化されます。
- eコマースカテゴリーは、クイックアクセスのために:ref:`メガメニュー項目 <website/header_footer/mega-menus>`として追加することもできます。
- 個別の:doc:`プロダクトページ <product_page>`をカスタマイズすることも可能です。

カタログブロック¶

カタログ :doc:`ビルディングブロック </applications/websites/website/web_design/building_blocks>`は、例えば、ショップページへのクイックアクセスの作成、特定のプロダクトカテゴリーの紹介、特定のプロダクト選択のハイライト、または一般情報やプロモーションを含むバナーの追加に使用できます。

選択したテンプレートによっては、:guilabel:`スタイル`タブでブロックを:ref:`カスタマイズ <website/building_blocks/edit>`できます。

Example

例えば、この特定の:guilabel:`カタログ`ブロックテンプレートはプロダクトの選択を表示し、次のようにカスタマイズできます：

ブロックのデザインを調整します。
カードデザイン`を選択し、:icon:`fa-paint-brush :guilabel:`（ペイントブラシ）`アイコンを使用して:ref:`設定 <ecommerce/catalog/products-design>`します。
関連する:guilabel:`フィルター`オプションを選択して、ブロックに表示される項目を定義します。例：:guilabel:`最新プロダクト`を選択すると、最新の入荷商品が表示されます。
:guilabel:`カテゴリー`ドロップダウンリストで特定のプロダクトカテゴリーを選択します。
:guilabel:`タグ`および/または:guilabel:`バリアントを表示`オプションを切り替えて、プロダクトをフィルタリングします。

eコマース専用のウェブサイトフッター¶

The website footer can also be configured to use the e-commerce-specific template. Then, add the relevant links, and adapt the footer's text and layout as needed in the website editor. The available payment methods are also shown in this footer. To adapt their display, go to the Supported Payment Methods section in the website editor.

注釈

カテゴリーごとにカスタマイズされたフッターを作成することはできません。