Commerce Navigation renderings

Abstract

Overview of the Commerce Navigation renderings and how they can be configured.

Enabling your customers to navigate your storefront quickly and easily is a key consideration when building your web store. To help you address this, two navigation renderings are available from the Commerce Catalog section of the Toolbox.

Commerce Catalog in the Toolbox

Note

By default, from Sitecore 9.2 onwards, existing sites use the Category Navigation rendering and new sites use the Commerce Navigation rendering.

The Category Navigation rendering is a commerce-specific component that queries the index to retrieve menu items, which are then rendered on the storefront site. This rendering:

  • Supports wildcard pages but only one level of menu items.

  • Supports responsive design and mobile devices.

  • Does not support rendering variants.

The Commerce Navigation rendering is a clone of the SXA Navigation component that targets items in content to retrieve menu items, which are then rendered on the storefront site. This rendering component does not use the index. The difference between this navigation rendering and the SXA navigation rendering is the MVC rendering view (sitecore/Layout/Renderings/Feature/Commerce Experience Accelerator/Commerce Catalog/Commerce Navigation) and the separate rendering variant root. Unlike the SXA navigation rendering, this view uses Bootstrap to support responsive design and mobile devices. The default Storefront Branded theme adds JavaScript and styling to the component to make it look and feel like the Category Navigation rendering.

This rendering:

  • It requires direct navigation to be enabled because it targets items in the content instead of using the index.

  • Supports multiple menu levels (although the default JS and styling in the Storefront Branded theme only targets the first top level).

  • Supports rendering variants.

  • Supports responsive design and mobile devices.

As shown in the following illustration, on a mobile device, the storefront navigation menu is collapsed by default.

Storefront navigation on the live storefront

The following figure shows an example of the Commerce Navigation rendering on the storefront. It has the same look and feel as the corresponding Category Navigation rendering using the Storefront Branded theme. Currently, the Storefront Branded theme only supports one menu level, but you can customize it to support more levels.

Commerce Navigation rendering on the live storefront
Configuration

You configure the Commerce Navigation rendering in the Control Properties dialog box. The following configuration properties are available in the Navigation Settings section of the dialog box.

Property

Use

Start Page

Specify the first-level category you want the navigation to start on. By default, this field is configured to a category in the Habitat catalog. If you are not using the Habitat catalog, this field displays a GUID and no category navigation displays on the storefront site until you configure it to point to a category in the catalog you are using.

Important

To ensure that the canonical URLs are output in the meta data, you must also configure the category navigation on the catalog.

Top Navigation Level

Set the level (counted from the root) that you want the navigation to start on. By default, this is set to 1.

Bottom Navigation Level

Set the level (counted from the root) that you want the navigation to end at. By default, this is set to 1.

Navigation Filter

Set the style of the navigation used on the storefront site (for example, Breadcrumbs Navigation, Footer Navigation, Main Navigation, Sidebar Navigation, or Sitemap Navigation).

Flat Page Structure

Specify whether all items appear on the same level.

Include Root Page

Specify whether the Start page is included as a separate level.

You can customize the Commerce Navigation rendering to fulfill your brand requirements.