Skip to main content

Commerce Orders renderings


Overview of the Commerce Orders renderings, which are used to enable your customers to view a list of their orders.

You can add the Commerce Orders renderings to your storefront to enable customers to see a list of their orders, and details for a single order. The order details and lists are only visible to customers who have logged into their account.

This topic describes the renderings accessible from the Commerce Orders section in the Toolbox.

You use the Order History rendering and the Recent Orders rendering to provide order details for the customer to review. The Order History rendering contains all of the orders placed by the customer, while the Recent Orders rendering displays only orders placed by the customer within the last 30 days. When you add either rendering to a page in the Experience Editor, it looks like this:

Orders displayed in the Experience Editor

Both lists contain the following information for each order:

  • Order Number – the order number assigned to the order by Sitecore Commerce.

  • Status – the order's current status in the commerce system.

  • Date –the date on which the order was placed.

  • Order details icon – a link to a page with order details.

In the Experience Editor, the list contains placeholder data, and links are disabled.


You configure the Order History rendering and the Recent Orders rendering in the Control Properties dialog box. The following configuration properties are available in the Recent Orders Title section in the dialog box.



Display Title

Configure the Recent Orders header.

Display View All Orders Link

Display or Hide the View all orders link.

View All Orders Link

Configure the View all orders link.


For both renderings, you can configure text, tooltips, and the number of orders displayed. In the Experience Editor, click the rendering and, on the rendering toolbar, click Add or edit the associated content, Edit the related item.

In the Experience Editor, the Order Details page in the SXA Storefront template looks like this:

Order Details displayed in the Experience Editor

Order Header

The Order Header rendering contains general information about the order: the order number, date, and status. It contains placeholder data in the Experience Editor.

Order Lines

You use the Order Lines rendering to display one line per product in an order, with the following details on each line: a product image, title, unit price, discount type, quantity, total price and, if applicable, a free gift label. In the Experience Editor, the rendering displays placeholder data.


Images displayed for the Order Lines rendering are configured at the site level.

The following configuration properties are available in the Control Properties dialog box.



Styling - Commerce

Compact Cart

Displays the Shopping Cart Lines component in smaller and compact view.

Main Title

Sets the font size to 30px for Shopping Cart Line content.

No Margins

Sets a narrower margin.

Primary Button Filled

Displays a solid primary button (if displayed).

Primary Button Line

Displays the primary button with a border.

Rounded Corners Container

Displays the Shopping Cart Lines container with rounded corners.

Secondary Button Line

Displays the secondary button (if displayed) with a border line.

Secondary Title

Sets the font size to 18px for Shopping Cart Lines content.


You customize the Order Lines rendering by modifying the Scriban template.

Order Totals

You use the Order Totals rendering to display total amounts for an order. In the Experience Editor, no products are included in the order so the rendering displays 0 for all amounts.