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.

ToolboxCommerceCatalog.png

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.

Mobile.png

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.

CommerceNavigation.png

To specify navigation settings, from the More menu, click Edit component properties and, in the Control Properties dialog box, in the Navigation Settings section, modify the relevant fields:

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

NavigationCtrlProperties93.png

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