---
title: "デフォルトのストアフロントサイトテンプレートページを、商品リストとプロモート商品レンダリングを使用するように変更してください"
slug: "modify-default-storefront-site-template-pages-to-use-the-product-list-and-promoted-product-renderings"
abstract: "ストアフロントのデフォルトのテンプレートページを、商品リストやプロモート商品レンダリングを使用する方法。"
---
# デフォルトのストアフロントサイトテンプレートページを、商品リストとプロモート商品レンダリングを使用するように変更してください

Storefrontサイトテンプレートには、さまざまなデフォルトページやレンダリングが含まれています。Sitecore 9.3からは、Commerce Search結果レンダリングがStorefrontサイトテンプレートのデフォルトレンダリングとなっています。以下の手順では、Storefrontサイトテンプレートで商品リストレンダリングおよびプロモーション商品レンダリングを使い、この方法を希望する場合について説明します。両アプローチの比較については、「 [製品リストの利用可能なレンダリングの選択](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/choosing-between-available-renderings-for-product-lists.html "Choosing between available renderings for product lists")」をご覧ください。

## コマースホームページを修正する

コマースホームページを修正するには:

1.  コンテンツエディターで *sitecore/Content/Sitecore/Storefront/Home*へ行ってください。
2.  リボンメニューで「 **プレゼンテーション** 」タブをクリックし、 **レイアウト** グループで「 **詳細**」をクリックしてください。
3.  共有**レイアウト**タブの**デフォルト**セクションのレイアウト詳細ダイアログボックスで、**編集をクリックします。**
4.  **デバイスエディター**のコントロールタブで、以下のアイテムを選択して**「****削除**」をクリックします。
    -   リッチテキスト /main/row-2-2/container-4
    -   Commerce Search 結果 /main/row-2-2/container-4
    -   追加 /main/row-2/container-4
    -   リッチテキスト /main/row-1-2/container-3
    -   Commerce Search 結果 /main/row-1-2/container-3
    -   追加 /main/row-1-2/container-3
5.  **コントロール**タブで「**追加**」をクリックします。
6.  「 **レンダリングを選択する** 」ダイアログボックスで、 *Renderings/Feature/Commerce Experience Accelerator/Commerce Catalog*に行き、「 **プロモート製品**」をクリックし、「 **プロパティをすぐに開く」ダイアログボックス** を選び、「 **選択**」をクリックします。
7.  **コントロールプロパティ**のダイアログボックスの**プレースホルダー**フィールドで、*/main/row-1-2/container-3*と入力してください。
8.  **「一般**」セクションの**「データソース**」の下、「**ブラウズ」**をクリックします。
9.  **「関連コンテンツ選択**」ダイアログボックスで*Home Page Promoted Products*をクリックします。
10.  **コントロールプロパティ**ダイアログの「**Promoted Products**」セクションで、「**Product List**」欄をクリックし、「*On Sale Televisions*」をクリックし、その後**OK**をクリックします。
11.  Miraのノートパソコンについては、以下を除いて5から10までのステップを繰り返してください:
     -   ステップ7で、/main/row-2-2/container-4を入力します。
     -   ステップ10で *Mira laptops*を選択します。
12.  リボンメニューで「 **保存** 」をクリックして、 [Incremental Publish](https://doc.sitecore.com/xmc/en/users/xm-cloud/en/publish-a-website.html#UUID-b488994e-7783-d736-a32d-1dc81d569557_para-idm273155995872004)を使って変更を公開してください。

## 商取引カテゴリページを修正する

商取引カテゴリページを修正するには:

1.  コンテンツエディターで*sitecore/Content/Sitecore/Storefront/Presentation/Page Designs*へ行ってください。
    
2.  **コンテンツ**タブの**デザイン**セクションで、**Commerce Category**横のフィールドをクリックし、*Commerce Category Page*をクリックします。
    
    ![Map the page to the partial design](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/Revert2OldRenderingsPageDesigns.png)
    
3.  リボンメニューで「保存」をクリックして、[Incremental Publish](https://doc.sitecore.com/xmc/en/users/xm-cloud/en/publish-a-website.html#UUID-b488994e-7783-d736-a32d-1dc81d569557_para-idm273155995872004)を使って変更を公開してください。
    

## 製品詳細ページを修正する

製品詳細ページを修正するには:

1.  コンテンツエディターで、 *sitecore/Content/Sitecore/Storefront/Presentation/Partial Designs* に行き、「 *デフォルトのメインプロダクトページコンテンツ*」をクリックしてください。
2.  リボンメニューで「 **プレゼンテーション** 」タブをクリックし、 **レイアウト** グループで「 **詳細**」をクリックしてください。
3.  共有**レイアウト**タブの**デフォルト**セクションのレイアウト詳細ダイアログボックスで、**編集をクリックします。**
4.  **デバイスエディター**のコントロールタブで、以下のアイテムを選択して**「****削除**」をクリックします。
    -   リッチテキスト /main/column-1-3
    -   Commerce Search 結果 /main/column-1-3
    -   ロード もっと /main/column-1-3
5.  **コントロール**タブで「**追加**」をクリックします。
6.  「 **レンダリングを選択する** 」ダイアログボックスで、 *Renderings/Feature/Commerce Experience Accelerator/Commerce Catalog*に行き、 *Promoted Products*をクリックし、「 **プロパティをすぐに開く」ダイアログボックス** にチェックを入れ、その後 **「選択**」をクリックします。
7.  **コントロールプロパティ**ダイアログボックスの**プレースホルダー**欄で*、/main/column-1-3*と入力してください。
8.  **「一般**」セクションの**「データソース**」の下、「**ブラウズ」**をクリックします。
9.  **「関連コンテンツ選択**」ダイアログボックスで**「関連商品**」をクリックし、「**OK」**をクリックします。
10.  **コントロールプロパティ**ダイアログボックスのプロ**モート製品**セクションで、「**関係タイプ**」フィールドをクリックし、次に**「関連製品**」をクリックしてください。**「OK**」をクリックして**コントロールプロパティ**ダイアログボックスを閉じます。再度**OK**をクリックしてデバイスエディタを閉じます。
11.  リボンメニューで「 **保存** 」をクリックして、 [Incremental Publish](https://doc.sitecore.com/xmc/en/users/xm-cloud/en/publish-a-website.html#UUID-b488994e-7783-d736-a32d-1dc81d569557_para-idm273155995872004)を使って変更を公開してください。

## 部分的なデザインをページに関連付けてください

部分的なデザインをページに関連付けるには:

1.  コンテンツエディターで*sitecore/Content/Sitecore/Storefront/Home/Search*へ行ってください。
    
2.  **コンテンツ**タブの**デザイン**セクションで、**ページデザイン**フィールドをクリックし、*Commerce Search Result Page*をクリックします。
    
3.  コンテンツツリーで、*sitecore/Content/Sitecore/Storefront/Presentation/Page Designs*へ行ってください。
    
4.  ページデザインの下のすべてのページでは、**コンテンツ** タブの **デザイン** セクションで*Default Commerce Header*を*Commerce Header*に置き換えてください。
    
    ![Assign the page designs to the page](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/Revert2OldRenderingsHeaders.png)
    
    > !重要部分設計を上記の画像のように正確に順序付けてください。
    
5.  リボン上で「 **保存** 」をクリックして、[インクリメンタルパブリッシュ](https://doc.sitecore.com/xmc/en/users/xm-cloud/en/publish-a-website.html#UUID-b488994e-7783-d736-a32d-1dc81d569557_para-idm273155995872004)で変更を公開してください。