The Toolbox

Abstract

Overview of the renderings available in the Toolbox.

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.

Note

Several renderings have been deprecated and, in the Toolbox, are identified with a "deprecated" tag. New sites use the updated renderings by default.

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

Category

Rendering

Description

Commerce Account

Address Editor

Use 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 List

Use 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 Password

Use 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 Password

Use 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.

Login

Use the Login rendering to enable a returning customer who has already  registered an account to access their account once again.

Profile Editor

Use the Profile Editor rendering to enable the customer to edit their profile information including first name, last name, telephone number, and email address.

Profile View

Use the Profile View rendering to display the email address for the current customer account.

Registration

Use the Registration rendering to insert a registration form for your website.

Category

Rendering

Description

Commerce Cart

Add to Cart

Use the Add to Cart rendering to let the customer add the current product to the shopping cart.

Minicart

Use 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 Codes

Use the Promotion Codes rendering to enable the customer to enter discount codes for their order.

Shopping Cart Lines

Use the Shopping Cart Lines rendering to display the content of the shopping cart with a line for each product item.

Shopping Cart Total

Use the Shopping Cart Total rendering to summarize the total amounts for the shopping cart contents.

Gift With Purchase

Use the Gift with Purchase rendering to provide a list of products from which a shopper can select a free gift when a product that qualifies is added to the cart.

Category

Rendering

Description

Commerce Catalog

Catalog item Container

Use 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 Navigation

Use the Category Navigation rendering to display the top-level categories of your product catalog (in a menu or navigation bar for example).

Commerce Navigation

Use 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 Results

Use 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.

Free Gift Selection

Use the Free Gift Selection rendering to display the selection of products from which shoppers can select free gifts. In the XC Business Tools, add a Free Gift benefit to a promotion to configure which products are available as part of the free gift promotion.

Product Bundle

Use the Product Bundle rendering to display related products and services sold together as a group.

Product Facets

The Product Facets rendering is no longer the recommended rendering. For the recommended alternative, see Choosing between available renderings.

Product Images

Use the Product Images rendering to display thumbnail images for each image related to the selected product.

Product Information

Use the Product Information rendering to display the product title, description, and item number.

Product Inventory

Use the Product Inventory rendering to display the current stock status and number of items in stock as [stock status] / [stock count].

Product List

The Product List rendering is no longer the recommended rendering. For the recommended alternative, see Choosing between available renderings.

Product List Items per Page

The Product List Items per Page rendering is no longer the recommended rendering. For the recommended alternative, see Choosing between available renderings.

Product List Page Info

The Product List Page Info rendering is no longer the recommended rendering. For the recommended alternative, see Choosing between available renderings.

Product List Pager

The Product List Pager rendering is no longer the recommended rendering. For the recommended alternative, see Choosing between available renderings.

Product List Sorting

The Product List Sorting rendering is no longer the recommended rendering. For the recommended alternative, see Choosing between available renderings.

Product Price

Use 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 Variants

Use the Product Variants rendering to display a drop-down menu for each variant field (for example, one for size and one for color).

Promoted Products

The Promoted Products rendering is no longer the recommended rendering. For the recommended alternative, see Choosing between available renderings.

Search Initiated, Visited Category Page, and Visited Product Page

Use 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 Navigation

Use the Subcategory Navigation rendering to display a list of the subcategories of the selected top-level category.

Category

Rendering

Description

Commerce Checkout

Billing

Use the Billing rendering to enable the customer specify payment information.

Delivery

Use 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 Confirmation

Use the Order Confirmation to confirm that the customer order has been submitted.

Review

Use the Review rendering to enable the customer to review and confirm the order.

Start Checkout

Use the Start Checkout rendering to enable the customer to initiate the checkout process.

Step Indicator

Use the Step Indicator to show progress through the steps of the checkout process.

Category

Rendering

Description

Commerce Email

Product recommendation

Use the Product recommendation rendering to upsell and cross-sell products to customers based on recently placed orders.

Note

It is also used as part of email campaigns used in marketing automation such as in the New Order Placed campaign or as part of an email campaign targeting a segmented list of customers.

Category

Rendering

Description

Commerce Orders

Order History and Recent Orders

Use the Order History rendering and the Recent Orders rendering to provide order details for the customer to review.

Order Header, Order Lines, and Order Total

Use the Order Header, Order Lines, and Order Total renderings to display details and totals for the order.

Category

Rendering

Description

Commerce Shared

Language Selector

Use the Language Selector rendering to enable customers to select the language that they want to see on the storefront and in Commerce emails.

Message Summary

Use the Message Summary rendering to display messages that have been triggered by other renderings and pushed to the Message Summary. 

Search Bar

Use the Search Bar rendering to display a text box with placeholder text and a search button identified by a looking-glass icon.

Top Links Bar

Use the Top Bar Links rendering to display a number of links for the customer.