1. Commerce renderings

The Toolbox

Version:

To take advantage of changes and new features in the Sitecore Experience Accelerator (SXA), SXA Storefront includes updated renderings. For a comparison of the new renderings and their precursors, see Choosing between available renderings.

The following tables describe the commerce-specific renderings available in the Toolbox.

Commerce Account

CategoryRenderingDescription
Commerce AccountAddress EditorUse the Address Editor rendering to enable the customer to add a new address, edit an existing address, or delete an address from the address book.
Address ListUse The Address List rendering to display the customer's shipping and billing addresses. For example, this rendering is used on the Account Management page in the SXA Storefront template.
Change PasswordUse the Change Password rendering to validate the password and redirects the customer to a new page or displays a message confirming that the password has been changed.
Forgot PasswordUse the Forgot Password rendering to enable the customer to enter an email address, which is validated by the system, and then a random password and a link to the Change Password is sent.
LoginUse the Login rendering to enable a returning customer who has already  registered an account to access their account once again.
Profile EditorUse the Profile Editor rendering to enable the customer to edit their profile information including first name, last name, telephone number, and email address.
Profile ViewUse the Profile View rendering to display the email address for the current customer account.
RegistrationUse the Registration rendering to insert a registration form for your website.

Commerce Cart

CategoryRenderingDescription
Commerce CartAdd to CartUse the Add to Cart rendering to let the customer add the current product to the shopping cart.
MinicartUse the Minicart rendering to display a summary of the contents of the shopping cart. You use the Minicart rendering on catalog and product pages.
Promotion CodesUse the Promotion Codes rendering to enable the customer to enter discount codes for their order.
Shopping Cart LinesUse the Shopping Cart Lines rendering to display the content of the shopping cart with a line for each product item.
Shopping Cart TotalUse the Shopping Cart Total rendering to summarize the total amounts for the shopping cart contents.

Commerce Catalog

CategoryRenderingDescription
Commerce CatalogCatalog item ContainerUse the Catalog Item Container rendering on a landing page to set a product item as the data source for a group of catalog renderings.
Category NavigationUse the Category Navigation rendering to display the top-level categories of your product catalog (in a menu or navigation bar for example).
Commerce NavigationUse the Commerce Navigation rendering when you want to target items in content to retrieve menu items instead of using the index. This rendering requires direct navigation. It supports multiple menu levels, rendering variants, and responsive design.
Commerce Search ResultsUse the Commerce Search Results rendering to query the index when retrieving items. This rendering limits the search to only the items directly under a given category as defined in the search scope.
Product BundleUse the Product Bundle rendering to display related products and services sold together as a group.
Product FacetsUse the Product Facets rendering on the category page to display a list of available facets for the currently selected category.
Product ImagesUse the Product Images rendering to display thumbnail images for each image related to the selected product.
Product InformationUse the Product Information rendering to display the product title, description, and item number.
Product InventoryUse the Product Inventory rendering to display the current stock status and number of items in stock as [stock status] / [stock count].
Product ListUse the Product List rendering to display a list of products with the product image and price, and a link to the product page.
Product List Items per PageUse the Product List Items per Page rendering to enable the customer to select the number of items displayed per page.
Product List Page InfoUse the Product List Page Info rendering to display the total number of items in the category or search and indicate which items from the list are shown on the current page.
Product List PagerUse the Product List Page rendering to enable the customer to navigate through the product list.
Product List SortingUse the Product List Sorting rendering to enable the customer to sort the category or product list.
Product PriceUse the Product Price rendering to display the product price. If the product is on sale, the discounted price is displayed, and the original price is displayed with a strikethrough font.
Product VariantsUse the Product Variants rendering to display a drop-down menu for each variant field (for example, one for size and one for color).
Promoted ProductsUse the Promoted Products rendering to display a list of products in a format similar to the Product List rendering.
Search Initiated, Visited Category Page, and Visited Product PageUse the Search Initiated, Visited Category Page, and Visited Product Page renderings to track visitor behavior. Each of these renderings makes an individual call to the Commerce Connect API to trigger an associated page event in xDB.
Subcategory NavigationUse the Subcategory Navigation rendering to display a list of the subcategories of the selected top-level category.

Commerce Checkout

CategoryRenderingDescription
Commerce CheckoutBillingUse the Billing rendering to enable the customer specify payment information.
DeliveryUse the Deivery rendering to enable the customer to specify where and how items are shipped. By default, delivery is the first visible step in the checkout process.
Order ConfirmationUse the Order Confirmation to confirm that the customer order has been submitted.
ReviewUse the Review rendering to enable the customer to review and confirm the order.
Start CheckoutUse the Start Checkout rendering to enable the customer to initiate the checkout process.
Step IndicatorUse the Step Indicator to show progress through the steps of the checkout process.

Commerce Orders

CategoryRenderingDescription
Commerce OrdersOrder History and Recent OrdersUse the Order History rendering and the Recent Orders rendering to provide order details for the customer to review.
Order Header, Order Lines, and Order TotalUse the Order Header, Order Lines, and Order Total renderings to display details and totals for the order.

Commerce Shared

CategoryRenderingDescription
Commerce SharedLanguage SelectorUse the Language Selector rendering to enable customers to select the language that they want to see on the storefront and in Commerce emails.
Message SummaryUse the Message Summary rendering to display messages that have been triggered by other renderings and pushed to the Message Summary.
Search BarUse the Search Bar rendering to display a text box with placeholder text and a search button identified by a looking-glass icon.
Top Links BarUse the Top Bar Links rendering to display a number of links for the customer.

Email Catalog

CategoryRenderingDescription
Email CatalogEmail product recommendationUse the Email product recommendation rendering in any of the following scenarios:

If you have suggestions for improving this article, let us know!