SXA Storefront includes a number of renderings that you can use together to build a catalog on your storefront.
The following screenshots show examples of a product page and a category page from the SXA Storefront. The red boxes indicate the Commerce Catalog renderings used to build the pages.
Product detail page example
Category page example
This topic describes the following renderings, which are located in the Commerce Catalog group in the SXA Toolbox:
- Catalog Item Container
- Category Navigation
- Subcategory Navigation
- Product Facets
- Product Images
- Product Information
- Product Inventory
- Product List
- Product List Items per Page
- Product List Page Info
- Product List Sorting
- Product List Pager
- Product Price
- Product Variants
- Promoted Products
- Search Initiated, Visited Category Page, and Visited Product Page
Catalog Item Container
You can 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. All the catalog renderings added inside the container rendering will use the product you select as the product context. This allows the renderings to display product information on a page where there is otherwise no product context available.
When you add this rendering to a placeholder, it does not display anything. The rendering contains a placeholder where you can drop other renderings.
Setting the data source
In the Control Properties dialog box for the rendering, you can set the data source to a product item:
After you set the product item and add catalog renderings inside the container rendering, product information for the selected product is displayed.
Catalog renderings added inside the container rendering have the same appearance as if they were added directly to the page, so the landing page looks the same as the product detail page for the selected product.
You can place the Category Navigation rendering on a page to create a Navigation bar that displays the top-level categories from your product catalog.
The customer can navigate to a category page by clicking a category in the Navigation bar.
The displayed categories are based on the content of the search index.
You can use the Subcategory Navigation rendering to display a list of the subcategories of the selected top-level category. In the Experience Editor, if no top-level category is selected, the rendering is displayed with placeholder text.
You can add the Product Facets rendering to the category page to display a list of available facets for the currently selected category. If no category is selected, then the rendering is displayed with placeholder text.
The Product Facets rendering is also used on the standard storefront Search page.
Filtering a list on the live storefront
When the customer clicks a facet value in a facet list, the facet list is filtered to only show the selected facet value, and the product list is filtered based on the selected facet value.
It is possible to narrow a filter by selecting multiple facets at once. If the customer clicks a selected facet value, the facet is removed from the search filter.
You can add the Product Images rendering to a page in the Experience Editor to display thumbnail images for each image related to the selected product. One thumbnail is selected, and a larger image of the selected thumbnail is displayed. If no product is selected, placeholder images are displayed.
You can add the Product Information rendering to a page in the Experience Editor to display the product title, description, and item number.
Alternatively, you can use variants of standard SXA renderings to display product information. This allows you to control the placement of the product name, description, and item number independently of each other.
You can add the Product Inventory rendering to a page in the Experience Editor to display the current stock status and number of items in stock as [stock status] / [stock count]. When no product is selected, placeholder data is displayed.
If the product is out of stock, the Add to cart button is disabled.
The Product List rendering displays a list of products with the product image and price, and a link to the product page. If you place the Product List rendering on a category page, it displays the products for the selected category. If no category is selected, placeholder images and data are displayed.
The Product List is also used on the Search page to display search results, which can be a combination of products and categories.
You can place the Product List Items per Page, Product List Page Info, and Product List Sorting renderings above the product list to enable the customer to configure the order of the products in the list and the number of products displayed per page.
If you prefer to display all products in the list on the same page, you can configure the list to use lazy loading.
When a product has variants of different prices, the lowest available price is displayed, prefixed with a text, for example, Starting from. If no variants are defined, or if all variants have the same price, the price is displayed without the text.
If a product is on sale at a discounted price, an overlay banner appears overlapping the product picture and displays the amount of the discount as a percentage of the original price. The price that appears in the product list is the discounted price.
The current stock status of the product is displayed.
The customer can navigate to the product details page by clicking the product image or the Details link.
Product List Items per Page
If you place the Product List Items per Page rendering above the Product List rendering on category and search pages, the customer can select the number of items displayed per page.
Default items per page
In the Commerce Control Panel, you can define a default value for all pages. Enter the overall default value in the Catalog Configuration item, in the Default Items Per Page field:
This is the number of items that will appear on the page until the user selects a different value.
You can configure the value in the Items Per Page field for a specific category page on the Category item. This value overrides the default from the catalog configuration. In the following example, the default number of items that will appear on a page for the Appliances category has been defined as 4:
Options in the drop-down menu
You can change the options included in the Results per page drop-down menu by changing the settings in the Control Properties dialog for the rendering:
Product List Page Info
If you place the Product List Page Info rendering above the Product List rendering on category and search pages, the rendering indicates the total number of items in the category or search, and it indicates which items from the list are shown on the current page.
Product List Sorting
If you place the Product List Sorting rendering above the Product List rendering on category and search pages, the customer can use the rendering to sort the category or product list.
The options available in the Sort by drop-down menu are the sort fields that have been defined for the category item. You can configure the sort fields on the Category item. The following is an example of the defined values for the Appliances category in the Habitat catalog:
The Sort by field lists the sort criteria in the Selected field, with an ascending (Asc) option and a descending (Desc) option for each.
This gives the following result on the live storefront:
Product List Pager
You can use the Product List Pager rendering on category and search pages. It allows the customer to navigate through the product list. The current page is highlighted in the Product List Pager rendering. The customer can click a page number or they can click Next or Previous to navigate between pages.
In the SXA Storefront, this rendering appears twice on each category and search page – above and below the Product List rendering.
You can 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 in strikethrough font.
The Product Variants rendering displays a drop-down menu for each variant field (for example, one for size and one for color). If the customer selects an invalid combination, an error message is displayed in the message area and the Add to cart button is disabled.
In the Experience Editor, the rendering displays only a placeholder.
In the case of gift cards, the value of the card can be a variant.
The Promoted Products rendering displays a list of products in a format similar to the Product List rendering.
There are three types of lists that can be displayed in the Promoted Products rendering:
- Named search – a dynamic list of products that is created by searching the product catalog at runtime.
- Selected products – a static list of selected products.
- Related products – a list based on relationship data from your commerce system.
In the SXA Storefront, the home page contains an example of a promoted products list that was configured for the page, and the product details page contains an example of a related products list based on relationships in the catalog.
When you insert the Promoted Products rendering in the Experience Editor, it contains placeholder data:
After you add the Promoted Products rendering to a page, you must configure it. You create a Product List and configure the Promoted Products rendering to display it.
You enable lazy loading to make a Show More button appear underneath a list of products, as illustrated in the previous screenshot of the Promoted Products rendering. When a visitor to your storefront clicks Show More, more items are loaded and displayed in the list. This is an alternative to displaying a fixed number of items at a time.
You can configure lazy loading for either the Promoted Products rendering or the Product List rendering. In the Control Properties dialog box for the rendering, under Lazy Loading, select the Use Lazy Loading check box. In the Max Page Size field, indicate how many items you want to appear in the list when the visitor arrives on the page. This is also the number of items that are added to the list each time the visitor clicks Show More.
Normally, you either enable the Show More button or insert a product list header that includes the Product List Items per Page rendering. They are not designed to be used together, and the lazy loading settings override the selection in the Results per page field if they conflict.
Search Initiated, Visited Category Page, and Visited Product Page
From SXA Storefront 1.0.2, y
These renderings are invisible on the live storefront, but they appear on the page in the Experience Editor so that they can be located and edited. For example, the Search Initiated rendering appears like this in the Experience Editor:
When a search is initiated from the search bar on a page with the Search Initiated rendering, the rendering triggers the Search Initiated page event in Commerce Connect. In the SXA Storefront template, the Search Initiated rendering is included on the Default Commerce Header partial design.
When a customer visits a page with the Visited Category Page rendering, the rendering triggers the CategoryPageVisited page event in Commerce Connect. In the SXA Storefront template, the Visited Category Page rendering is included on the category pages, in the main content area.
When a customer visits a page with the Visited Product Page rendering, the rendering triggers the ProductPageVisited page event in Commerce Connect. In the SXA Storefront template, the Visited Product Page rendering is included on the product detail pages, in the main content area.