Modify default Storefront site template pages to use the Product list and Promoted Product renderings

Abstract

How to modify the default Storefront site template pages to use the Product List and Promoted Products renderings.

The Storefront site template includes various default pages and renderings. Beginning in Sitecore 9.3, the Commerce Search Results rendering is the default rendering used with the Storefront site template. The following procedures explain how to use the Product List rendering and Promoted Products rendering with the Storefront site template if you prefer this approach. To see a comparison between the two approaches, see Choosing between available renderings for product lists.

To modify the Commerce Home page:

  1. In the Content Editor, go to sitecore/Content/Sitecore/Storefront/Home.

  2. On the ribbon menu, click the Presentation tab and, in the Layout section, click Details.

  3. In the Layout Details dialog box, on the Shared Layout tab, in the Default section, click Edit.

  4. In the Device Editor, on the Controls tab, select the following items and click Remove.

    • Rich Text /main/row-2-2/container-4

    • Commerce Search Results /main/row-2-2/container-4

    • Load More /main/row-2-2/container-4

    • Rich Text /main/row-1-2/container-3

    • Commerce Search Results /main/row-1-2/container-3

    • Load More /main/row-1-2/container-3

  5. On the Controls tab, click Add.

  6. In the Select a Rendering dialog box, go to Renderings/Feature/Commerce Experience Accelerator/Commerce Catalog, click Promoted Products, select the Open the Properties dialog box immediately check box, and then click Select.

  7. In the Control Properties dialog box, in the Placeholder field, enter /main/row-1-2/container-3.

  8. In the General section, under Data Source, click Browse.

  9. In the Select the Associated Content dialog box, click Home Page Promoted Products.

  10. In the Control Properties dialog box, in the Promoted Products section, click in the Product List field, click On Sale Televisions, and then click OK.

  11. Repeat steps 5 to 10 for Mira Laptops except:

    • In Step 7, enter /main/row-2-2/container-4.

    • In Step 10, select Mira laptops.

  12. On the ribbon menu, click Save and publish your changes using Incremental Publish.

To modify the Commerce Category page:

  1. In the Content Editor, go to sitecore/Content/Sitecore/Storefront/Presentation/Page Designs.

  2. On the Content tab, in the Designing section, click in the field next to Commerce Category, and then click Commerce Category Page.

    Map the page to the partial design
  3. On the ribbon menu, click Save and publish your changes using Incremental Publish.

To modify the Product Detail page:

  1. In the Content Editor, go to sitecore/Content/Sitecore/Storefront/Presentation/Partial Designs and click Default Main Product Page Content.

  2. On the ribbon menu, click the Presentation tab and, in the Layout section, click Details.

  3. In the Layout Details dialog box, on the Shared Layout tab, in the Default section, click Edit.

  4. In the Device Editor, on the Controls tab, select the following items and click Remove.

    • Rich Text /main/column-1-3

    • Commerce Search Results /main/column-1-3

    • Load More /main/column-1-3

  5. On the Controls tab, click Add.

  6. In the Select a Rendering dialog box, go to Renderings/Feature/Commerce Experience Accelerator/Commerce Catalog, click Promoted Products, click the Open the Properties dialog box immediately check box, and then click Select.

  7. In the Control Properties dialog box, in the Placeholder field, enter /main/column-1-3.

  8. In the General section, under Data Source, click Browse.

  9. In the Select the Associated Content dialog box, click Related Products, and click OK.

  10. In the Control Properties dialog box, in the Promoted Products section, click in the Relationship Type field, and then click Related Products. Click OK to close the Control Properties dialog box. Click OK again to close the Device Editor.

  11. On the ribbon menu, click Save and publish your changes using Incremental Publish.

To associate the partial designs to the page:

  1. In the Content Editor, go to sitecore/Content/Sitecore/Storefront/Home/Search.

  2. On the Content tab, in the Designing section, click in the Page Design field, and click Commerce Search Result Page.

  3. In the content tree, go to sitecore/Content/Sitecore/Storefront/Presentation/Page Designs.

  4. For all the pages beneath Page Designs, on the Content tab, in the Designing section, replace Default Commerce Header with Commerce Header.

    Assign the page designs to the page

    Important

    Order the partial designs exactly as shown in the image above.

  5. On the ribbon, click Save and publish your changes using Incremental Publish.