The Header Navigation links in Commerce allows for more efficient browsing through the product catalogue. Users experience a smoother experience as they can enjoy a purchasing process just like regular consumer online shopping. 

Customisation of the header navigation is allowed, providing flexibility to re-sequence navigational links, create new links, embed external applications and ensure localisation of links to different languages. 

This can be maintained in 'Commerce Administration' > 'Global Settings' > 'Header'.

Pre-delivered header navigation

To support respective business processes, the following parameters for global navigation are available out-of-the-box, and can be enabled/disabled: 

The labels, order and settings for these parameters can be maintained in 'Commerce Administration' > 'Global Settings' > 'Header':

Sequencing and Localisation

The sequence of how navigation links appear in the navigation bar can be easily altered by dragging and dropping each line listed:

The displayed menu text on the navigation bar can be customised with the use of labels. This also allows for localisation, showing appropriate translation according to users' language preferences. 

Clicking the button would prompt a pop-up showing a list of the various languages available, together with customised labels and translated text: 

For localisation of other elements of the Commerce portal, see "Localisation" for more information.

Assign Product Category or Material Group

Pre-delivered navigational parameters can be refined with an additional step taken during setup. Particularly for Spare Parts and Consumables, assigning the appropriate product categories or material groups would help finetune the items shown on the page after clicking the header navigation link, and provide users a more focused browsing experience of the product catalogue. 

This can be maintained in 'Commerce Administration' > 'Global Settings' > 'Header':

Clicking into a parameter, either product categories or material groups can be assigned to the navigation link. In this example, we clicked into 'Products' which has been assigned 'Product Category': 

Clicking the ‘Add’ button in the above image will prompt a pop-up with a list of categories available for selection. Selecting a category and clicking 'Save' will add it to the list:

This update is reflected accordingly in the Commerce portal, where clicking into the 'Products' header navigation displays the new category added to the list: 

If the above step of configuring the pre-delivered navigational links, by assigning the specific product categories or material groups, is not performed, clicking in would display the entire product hierarchy with relevant product filters: 

Note: When changing the assignment of a navigation link from product category to material group, the system will discard all previous selections: 

Note: Product visibility within the various navigation product categories or material groups is still subject to individual product settings. (See "Product Master Pre-Requisites" for additional information) 

Create New Navigation links

In addition to pre-delivered header navigation parameters, more navigational links may be added. External applications can also be embedded using iFrames. 

From 'Commerce Administration' > 'Global Settings' > 'Header', click on 'Add' to create a new navigation entry and use the localisation feature to provide a name/label for the entry:

Click into the newly created entry to decide if the navigation link will lead users to either: 

1. a URL (inside the current or in a new browser tab; iFrame toggle switch 'no / false');  or
2. a new page with an embedded application (iFrame toggle switch 'yes / true').

Defining Hyperlinks

The URL parameter defines the link to the site that users should be taken to when the iFrame toggle switch is set to 'no / false'. The link can be set to open in the current or new browser tab: 

Embedding External Applications / Links

External applications can be embedded by toggling the iFrame toggle switch to 'yes / true'. Once enabled, the administrator can select from available destinations. (See "Create Destinations" for more information) 

For embedded iFrames, the mode and dimensions control the formatting and size of the iFrame which will hold the embedded application. Available options include: 

• Fill
• Centered
• Left Aligned
• Right Aligned

Width and Height parameters are defined in conjunction with the specific fill mode. 

Create Destinations 

Embedding external applications into Commerce requires destinations to be configured in the SAP Cloud Platform (SCP) Cockpit. 

Note: if you do not have access to SCP Cockpit, contact your customer success manager or submit a ticket to technical support. 

Inside SCP Cockpit, the destinations need to be created on a sub-account level. First, the correct sub-account need to be selected:

Then, the destinations can be selected from the left-hand navigation:

Selecting from existing destinations, the following details are revealed:

The following parameters are required to successfully save a destination:

The following additional properties need to be entered / maintained:

https://acme.com/trial-signup?param1={firstParam}&param2={secondParam}