Page Content renderings

Abstract

Overview of rendering variants and how they are configured.

The Page Content section in the SXA Toolbox contains a variety of renderings that you can use to add content to your storefront pages. Commerce renderings for SXA include a Product Information rendering that is used to show the product title and description on the Product Details Page (PDP). An alternative method to display this information is to use variants of standard SXA renderings.

The product page in SXA Storefront uses a variant of the Page Content rendering (Experience Editor\Page Content) to display product information. The Product Information rendering contains these fields:

  • Display Name

  • Item Number

  • Description

  • Features

You can insert the Page Content rendering on a page to display product information. You do this in the Experience Editor by dragging the rendering from the toolbox onto the page and then selecting the Product Information variant from the drop-down menu.

Page Content toolbar with variant selected

In the Experience Editor, if a product has been selected, the Product information variant displays the product information from the commerce system.

Page Information variant displayed in the Experience Editor

Unlike the Commerce Product Information rendering, the Page Content rendering variant cannot display placeholder data. If data is not available for a field, then the Page Content rendering displays the field name, for example, Features field. If no product is selected, the product title is displayed as * and field names are displayed for all fields.

Page Content rendering displayed in the Experience Editor

On the live storefront, the product information is displayed. If there is no data available for a field, the field is hidden.

Product information displayed on the live storefront

Tip

Another way to display product information is to use two rendering variants.

  • To display the product name, insert the Title rendering and select the Display Name Heading variant.

  • To display the product description, insert the Rich Text rendering and select the Description variant.