Create and configure a sort order for a list of products

Abstract

How to add a sort option to storefront search results.

You can add the Sort Results rendering to pages with the SXA Search Results rendering or the Commerce Search Results rendering to make it easier for customers to find what they are looking for by sorting the product cards. In the following figure, the product cards are sorted by Relevance.

Product cards on the Search Results page

By default, with the Storefront site template, a customer can sort products by Title, Brand, and Manufacturer when you define a data source and sort options for the Sort rendering. The following default sorting orders are available:

  • Ascending - displays search results by brand in ascending order (A-Z).

  • Descending - displays search results by the display name in descending order (Z-A).

  • Randomize - displays search results in a random order.

  • Relevance - displays search results using the defined boosting rules specified for the associated search scope.

The Commerce Sort Results folder contains the sort options that are available by default with the Storefront site template. You can extend the existing Commerce sorting group by adding new sort options or you can create a new one.

To create a new sort option:

  1. In the Content Editor, go to /sitecore/Content/<tenant>/<site>/Data/Search/Sort Results/Commerce. The following figure shows the sort options available in the Commerce sorting group with the Storefront site template.

    The sort options in the Commerce sorting group
  2. Right-click Commerce and click Insert, Sorting.

  3. In the Message dialog box, enter a name for the sort option, and click OK.

  4. On the Content tab, in the General section, in the Title field, enter a title for the sort type, for example, Relevance. This is a required field.

  5. For any sort options except Relevance, click in the Facet field and then click the facet you want to sort by, for example Title.

  6. Click in the Direction field and then click how you want to sort results, for example Relevance.

    The Title, Facet, and Direction fields
  7. On the ribbon, click Save.

To add and configure the Sort Results rendering:

  1. In the Experience Editor Toolbox, in the Search section, click Sort Results, and drag the rendering onto the page.

  2. In the Select the Associated Content dialog box, click a sorting group, for example Commerce, and then click OK.

  3. On the Sort Results toolbar, click More, Edit Component Properties.

  4. In the Control Properties dialog box, in the SearchCriteria section, in the Search results signature field, enter the same search results signature you used for the SXA Search Results or Commerce Search Results rendering, and click OK.