Commerce Product Detail page

Abstract

Overview of the renderings used for the default Commerce Product Detail page (PDP).

The Storefront site template, by default, includes a Commerce Product Detail page.

Commerce Product Detail page as seen in the Experience Editor.

The Commerce Product Detail page contains the following renderings:

  1. Product Images rendering (Experience Editor/Toolbox/Media).

  2. Product Information rendering (Experience Editor/Toolbox/Commerce Catalog).

  3. Product Inventory rendering (Experience Editor/Toolbox/Commerce Catalog).

  4. Product Price rendering (Experience Editor/Toolbox/Commerce Catalog).

  5. Product Variants rendering (Experience Editor/Toolbox/Commerce Catalog).

  6. Add to Cart rendering (Experience Editor/Toolbox/Commerce Cart).

  7. Commerce Search Results rendering (Experience Editor/Toolbox/Commerce Catalog).

    Note

    This is a versatile rendering that can have many different uses. With the Storefront site template, this rendering is used, by default, on the category page, the related products page, the promoted products page (on the home page), as well as on the Search Results page.

  8. Load More rendering (Experience Editor/Toolbox/Search).

The following is an example of the default Commerce Product Detail page displayed on the live storefront.

Commerce Product Detail page as seen on the live storefront

For all the individual renderings on the page to be considered together as one result when searched, all of the renderings must use the same search results signature so that they are bound together. By default, the Product Detail page uses the search signature related-product.

Note

You can control the number of items displayed using the style sheet so that the container automatically determines how many products can be displayed given the defined width.