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:
-
On the Storefront Launchpad, click Content Editor.
-
In the Content Editor, go to sitecore/Content/Sitecore/Storefront/Presentation/Rendering Variants/Commerce Navigation/Default.
-
Right-click the Navigation rendering and click Duplicate.
-
Type a name for the rendering copy and click OK.
The duplicate navigation component is added to the Available Renderings folder.
-
On the Content tab, make the necessary changes.