Customize the Commerce Navigation rendering

Current version: 9.2

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.




CSS Class

Link Identifier

Contains the category item ID used for highlighting active navigation.


Navigation Link

Contains the link and name of the navigation link.



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.

Do you have some feedback for us?

If you have suggestions for improving this article,