Header

The front-end IRP header area supports several key features and offers you flexibility for your brand messaging and design across all channels.

The desktop header appears as follows (note that several components depend on configuration):

The mobile header appears as follows:

The header has the following elements:

• The search function for your entire site is located on the left side of the header on desktop and in the centre of the screen on mobile. Depending on configuration, search suggestions appear as the customer types and, on desktop, they can select an option using their keyboard arrow keys or their mouse. For more information about how search works on the IRP, see the Search History help topic.
• Your website logo is located right in the centre of the header. Customers click this to return to the home page at any time.
• The customer's international settings feature (shown as a country flag) allows them to change their country, currency, language and tax settings (depending on configuration).
• Signed-in customers can link through to their account details and order history and view their loyalty points (if enabled). For more information, see the Customers and Points Loyalty Schemes help topics.
• Signed-in customers can click through to their wish list page where they have saved items for future purchase. For more information, see the Wish List help topic.
• Customers can see at a glance how many items they have in their basket, the total value of their purchases and can click through to the Basket.aspx page where they can proceed to checkout. For more information, see the IRP Checkout Overview help topic.

International settings

The tooltip on the settings icon uses Small Translation 3129. When the customer clicks the flag icon, they see the following drop-down menu:

When the customer clicks the 'Change Settings' link, they see the following window (note that the 'Display Prices' section will be shown only if the 'Allow User Vat Status Changes' Application Setting (in the 'Tax' grouping) is enabled):

Customers can then use the drop-down lists to change those settings.

Account

The tooltip on the account icon uses Small Translations 3058 (My Account) and 3073 (Account login). When logged in to your website, customers can click the 'my account' icon:

From here they can select from the following options:

• See at a glance how many loyalty points they have (if this feature is enabled).
• Click the 'My account' link to go to the /MyAccount/MyAccount.aspx page (or MyAccount/MobileMyAccount.aspx on mobile).
• Click the 'My orders' link to go to the /MyAccount/OrderList.aspx page (or MyAccount/MobileOrderList.aspx on mobile).
• Log out of your website.

Wish List

The tooltip on the Wish List icon uses Small Translation 2969. When a logged-in customer clicks the 'heart' icon, they can visit their Wishlist.aspx page (or MobileWishlist.aspx on mobile). The 'heart' icon will have a red dot superimposed on it when the customer has items in their wish list.

For more information, see the Wish List help topic.

Basket contents

When a customer adds an item to their basket:

• The basket icon animates.
• The basket count value appears over the basket icon.
• The basket value updates in the customer's currency.

The customer can then expand the basket as in the following example:

From here, the customer can proceed through to the checkout or use the Email Basket link to send their basket to a chosen email recipient:

As shown in the screen capture, customers can also elect to join your mailing list at this point.

Note that the basket icon on mobile opens a basket modal on all pages except the basket page and checkout pages.

Application Settings

You can use the following Application Settings to configure the appearance of the header on desktop and mobile devices:

• Header Desktop Display Style: ('Navigation - Top' grouping) This determines which display style to use for the header area of the desktop site:
  • Display Style 1: This is the legacy version of the header.
  • Display Style 2: This is the all-new, improved header.
• Header Mobile Display Style: ('Navigation - Top' grouping) This determines which display style to use for the header area of the mobile site:
  • Display Style 1: This is the legacy version of the header.
  • Display Style 2: This is the all-new, improved header.
• Mobile Search Bar Display Option: ('Mobile Site' grouping) This determines which display style to use for the search bar of the mobile site:
  • Always Hidden: The search bar is always hidden until the customer clicks the search icon. The search icon is always shown and acts as the switch to toggle the search bar on and off.
  • Hidden When Scrolling: The search bar disappears as the customer scrolls down the page but the search icon always remains visible. When the customer clicks the search icon, the search bar appears. The search bar will always be shown when the customer is at the top of the page.
• Header Trade Display Style: ('Trade Site grouping) 'Display Style 2' uses the standard components for the header elements. You can customise the styles under 'Header Controls' on the Standard Controls Stylesheet page (CssStylesStandardControls.aspx).

Notes:

1. Before enabling the header Display Styles, please review the header CSS variables to ensure that they are consistent with your current website styles. In particular, note the --header-logo-image-max-height variable which may require a custom value for desktop and mobile, depending on the size and shape of your site logos, to avoid overlapping with surrounding elements.
2. The top settings link on mobile shows only when the Application Setting called 'Show Mobile Top Settings Link' is enabled. In addition, there are several other Application Settings that impact the header or top navigation area, for example 'Enable Fixed Top Navigation Desktop' and 'Enable Fixed Top Navigation Mobile'. For more information, see the IRP Mobile Website Overview help topic.
3. The new header display style is not compatible with the old navigation tabs style that can be set via the Application Setting called 'Set Top Navigation Tabs Display Style' (located in the 'Navigation - Top' grouping).

Header CSS

You can style various elements of the header using the Header Controls CSS classes on the CssStylesStandardControls.aspx page. For more details see the Standard Controls Stylesheet help topic.

Note: Extensive changes are discouraged as the new desktop and mobile headers have been designed with UX and accessibility in mind.