Customize the Commerce Navigation rendering

Abstract

How to customize the Commerce Navigation rendering.

You can customize the Commerce Navigation rendering to add your own branding by copying and customizing it. For existing styles, you modify CSS classes in the navigation rendering but for new styles you need to update the .css file.

The Start Page settings for the Commerce Navigation rendering are located at sitecore/Content/<tenant>/<site>/Settings/Commerce/Catalog Configuration while you define the Start Page settings for the SXA Navigation rendering in the control properties for the rendering.

Item

Description

Dependencies

CSS Class

Link Identifier

Contains the category item ID used for highlighting active navigation.

None

Navigation Link

Contains the link and name of the navigation link.

None

cxa-navigation-component

To customize the Commerce Navigation component:

  1. On the Storefront Launchpad, click Content Editor.

  2. In the Content Editor, go to sitecore/Content/Sitecore/Storefront/Presentation/Rendering Variants/Commerce Navigation/Default.

  3. Right-click the Navigation rendering and click Duplicate.

  4. Type a name for the rendering copy and click OK.

    The duplicate navigation component is added to the Available Renderings folder.

    Copy of Navigation rendering in the Available Renderings folder.
  5. On the Content tab, make the necessary changes.