You can find this section under Interface & Design > Navigation in the IRP Admin left navigation menu.
The Top Navigation section provides a visual representation of the Top Nav. This allows you to see how your Top Nav will appear on the front end, making it easy to apply any changes or updates through the use of free-form HTML which will allow you to create a custom format/structure for the Navigation Top Tab Menus.
You can restrict some top tabs to specific countries. To find tabs for specific countries you can use the Filter Tabs section at the top of the page. Simply select a country from the drop-down list, check the box if you want to view only active tabs and click the Filter Tabs button:
You can add Navigation Tabs dynamically to the Top Nav using the + Add New Top Tab button. This creates a new blank Top Tab which can be repositioned and edited as required. You can edit Top Tab text directly in the Top Tab and you can change the ordering by dragging the Tabs to a different position.
Top Tab Settings
There are several expandable sections that you can use to update/edit Top Tab settings and appearance:
| Setting |
Description |
| Basic Tab Details |
| ID |
The unique IRP identifier for this navigation tab, added automatically by the IRP. |
| Active |
Active Top Tabs will be visible to the customer on the front end. Inactive tabs will not be visible. |
| Link URL |
The URL for the Top Tab. When this Top Tab is clicked on the front end, the customer will be redirected to this URL. The Link Generator (described below) can be used to automatically generate Link URLs. NOTE It is best to not fully or partially qualify link URLs as fully-qualified URLs can cause major issues in terms of cookies and settings. For example, you may find that language and currency settings selected on the front end will not stick because the link URLs have /en/gb/ pre-pended to them. |
| Tool Tip |
The language specific Tool Tip text that will appear when a customer hovers over this Top Tab on the front end. |
| Admin Name |
Add a name to make the navigation tab easily identifiable in IRP Admin. |
| Allow Search Engine to Follow |
If selected, this will allow the linked page to be indexed in search results after a search engine robot discovers it. |
| Has Hover Menu |
If a Hover Menu is created in the Hover Menu Contents section, it will display when a customer hovers their mouse over this Top Tab on the front end of the site. This must be checked to allow you to create a Hover Menu. |
| Hover Menu Contents |
| Please note, this section is only available if the Has Hover Menu option is selected. |
| Display Full Content Width |
Check to stretch this Hover Menu over the full width of the content on the screen. |
| Hover Menu Alignment |
Check to automatically align the hover menu in relation to the position of the Top Tab on the browser window. |
| Language |
Hover Menu Content is translatable. Select the language you wish to enter here. Note: In the absence of translated content, in certain aspects (Top navigation, Bottom navigation, Brand and Category information) the system locates any links it finds that it can translate and does so automatically. |
| HTML Content |
Free Form HTML Content for the Hover Menu. HTML content will allow you to use Hyperlinks, Images and any other HTML content that can be used across the site. You can also Upload Files, Generate Links and Clear the content here. Please note, all functionality mentioned here is described below. |
| Country Restrictions |
| The tab will be visible in All Countries if there are no restrictions in place. To add a restriction, click the Add Country Restrictions button. You can now use the Add button to move countries from the 'Select Countries to Restrict' box to the 'Countries Tab Visible In' box. When you are finished, click the Save Top Tab button. |
| Translations |
| Please note, these three options appear for each active Language on your site. |
| Language Text |
The Top Tab text that will appear when a different language option is selected. If no Top Tab text translation is entered, the English version will be shown by default. Make sure that you use HTML character entities for foreign character symbols and don’t paste in translations, otherwise the character may not display correctly. |
| Language Tool Tip |
The Tool Tip text that will appear when a different language option is selected and a user hovers over the Top Tab. If no Tooltip text translation is entered, the English version will be shown by default. |
| Language Link URL |
The URL that should be redirected to when a customer clicks on this Top Tab. If URL Rewriting is enabled, the URLs will have different language settings. For example, English URLs will have /en as the language setting, e.g. www.yourIRP.com/en/product-name/m-13459.aspx. These settings should be changed depending on the language, e.g. German = /de, French = /fr, Spanish = /es, etc. Please note that these translations only need to be added if the main URL is supported by URL rewriting. Standard URLs do not require a translated value, e.g. SetProperty.aspx?NavigationID=1&SuperCategoryID=114&ReturnUrl=default.aspx?HomepageID=658
NOTE: The offers.aspx URL cannot be translated (and a redirect would also go back to offers.aspx. Instead you should create separate Custom Content Pages in the same way as you do for the other URLs. . |
| Additional CSS Styles |
| Tab Specific CSS Styles |
This is CSS content that can be output specifically for customers viewing the site with this tab selected. For example, you may want to override the colour of the main tab and options bar. Please note this CSS is output everywhere the main Website stylesheet is output, therefore it is site wide. Do NOT include surrounding style tags. |
Upload Files
You can add files or images to the content editor quickly by clicking the Upload Files button. This opens the file management functionality in a light box:
After adding an image to the file management Top folder, you can add it to the content by highlighting the image, copying the link and adding it to the HTML content.
Link Generator
You can use the Link Generator to add hyperlinks to the content quickly. The IRP automatically rewrites the URLs to be “friendly”. Using search-engine friendly URLs is important for conversion:
- Friendly URLs contain keywords such as product and brand names that search engines can index. If a URL contains query string parameters, search engines can get confused and you risk your page not being indexed.
- Friendly URLs are easier for customers to view and remember. This is especially true if they bookmark some of your pages or send links to others – having friendly URLs makes it much easier to understand what the link, and therefore the page, is about.
To use the Link Generator, click the Get a Link button. There are currently two versions of the Link Generator:
The Basic Settings Generator creates links for the Navigation Tabs:
The Hover Menu Link Generator creates links for the Hover Menus:
You have the following choice of settings:
Hover Links Only:
- Link Text: The text that will be displayed on this link.
- Link Tool Tip: The tool tip text that will appear when a customer hovers over this link.
- Allow Search Engine to Follow: If selected, this will allow the linked page to be indexed in search results after a search engine robot discovers it.
Basic Settings Links & Hover Links:
- Make Tab Selected When Clicked: If you check this box, the tab will appear selected when a customer clicks it.
- Change Department: Specify whether the customer’s department should change when they click this tab.
- Is Mobile: If selected, a mobile URL will be generated, otherwise a standard desktop URL will be generated.
- Link Destination: Specify where the browser should redirect to once this link has been clicked. You can select from the following options:
- Brand: Select a brand from the drop-down list.
- Brand Category: Select a brand and a category from the drop-down lists.
- Brand List: Selecting this option means that the customer will be directed to the BrandList.aspx page when they click the navigation button.
- Category: Select a category from the drop-down list.
- Current Promotions: Selecting this option means that the customer will be directed to the CurrentPromotions.aspx page when they click the navigation button.
- Custom Content Page: Select a custom content page from the drop-down list.
- Homepage: Select a home page from the drop-down list.
- Information page: Note that this is a legacy feature that uses large translations; you should use custom content pages instead of this feature. For legacy purposes, select a page from the drop-down list.
- Model: Enter a model ID.
- Offers Page: Selecting this option means that the customer will be directed to the Offers.aspx page when they click the navigation button. You can then select an Offer Type (the Offer Status that will be directed to by the link - if any Custom URL content has been entered for this Status that will be used to create the link). (For more information, see the Offer Status Content and Models help topics.)
For example, having first set up content for each of your Offer Statuses and your default Offers.aspx page using the OfferStatusContent.aspx section (see Offer Status Content for details), you could then use the 'Get a Link' feature for one of the top tabs to select a Link Destination of 'Offers Page' and for the Offer Type you would choose one of the Offer Statuses (or, for the default page, 'Any Offer Status'). When you click Generate a Link, you will see that the URL looks like one of the following, depending on which Offer Type you have selected:
- Not On Offer – this creates a link ending with Offers/o.aspx.
- Sale – this creates a link ending with Offers/o-1.aspx.
- Clearance – this creates a link ending with Offers/o-2.aspx.
- Sale and Clearance – this creates a link ending with Offers/o-3.aspx.
- Back In Stock. – this creates a link ending with Offers/o-4.aspx.
- New – this creates a link ending with Offers/o-100.aspx.
- Custom Offer Type 1 – this creates a link ending with Offers/o-101.aspx.
- Custom Offer Type 2 – this creates a link ending with Offers/o-102.aspx.
- Custom Offer Type 3 – this creates a link ending with Offers/o-103.aspx.
- Custom Offer Type 4 – this creates a link ending with Offers/o-104.aspx.
When you then click Insert Link and uncache your site, you will see that, on the front end, when you click the relevant tab, you will go to the URL that you have configured above.
- Other Page on Different Site: Select either a ‘http’ or ‘https’ protocol scheme and then enter the rest of the URL for the page.
- Other Page on This Site: Enter the rest of the URL for the page (the protocol scheme and domain name are provided already).
- Product Search: Enter a search term which will then be displayed on a search results page when a customer clicks the navigation button.
- Promotion: Select the product-based Promotions Listing page that the link will go to.
- Site Map: Selecting this option means that the customer will be directed to the sitemap.aspx page when they click the navigation button.
After selecting a Link Destination, you can also select a Traffic Partner to append to the link and, for several of the Link Destinations you can also select Attribute Values.
After generating a link, you can test it by clicking the View This URL button. This will open the link in a new browser tab. Once satisfied, you can add it to the content editor automatically by clicking the Insert Link button.
Clear Content
You can use the Clear Content button to completely clear the content of the Hover Menu. This is handy when editing content if you want to completely remove all content. Please note that the clear will not be saved unless the Save Top Tab button is clicked afterwards.
Delete Top Tab
You can use the Delete Top Tab button to delete the currently selected Top Tab. All Content and settings for the Top Tab will be deleted once this button has been clicked and approved.
Saving Changes
Once you are happy with the content, click the Save Top Tab button to save it (you must click this button for changes to take effect). Changes will not be visible on the front end until the website is uncached in the Reload Settings section or when you click the Uncache button in the bottom navigation bar of the IRP.
CSS
When you click the CSS button at the top of the screen, you can select one of the following options:
Application Settings for Top Navigation
In addition to the Application Settings described in the Product Settings and Interface Settings sections, you can use the following Application Settings for the Top Navigation (these are located in the 'Navigation - Top' grouping):
- Enable Category Image Hover: If enabled, and if Logo Top Hovers have been added, the hover equivalent will appear when a Customer hovers over the Logo Top.
- Enable Fixed Top Navigation Desktop: (Navigation - Top grouping)When enabled the top navigation on the desktop site will remain fixed to the top of the screen when scrolling (this is sometimes called ‘sticky navigation’).
- Enable Fixed Top Navigation Mobile: (Mobile Site grouping) When enabled the top navigation on the mobile site will remain fixed to the top of the screen when scrolling (this is sometimes called ‘sticky navigation’).
- Fixed Top Navigation Include Heading Banners: When enabled the heading banners on the desktop, mobile and trade sites will be included in the fixed top navigation. This requires the corresponding fixed top navigation to be enabled.
- Set Recently Viewed Display Style: Display Style of the Recently Viewed hover (either 1 or 3).
1: (Pre-Requisite that Customer VAT changes are not permitted) - Recently Viewed link will appear on the right hand side of the Top Navigation Product Options bar.
3: Recently Viewed link will appear to the right of the History Menu.
Both these display styles will only work if the Enable Recently Viewed Application Setting is set to true.
- Show Site Time: If set to true, the Website Time will be displayed on the Top Navigation to the left of the Product Options panel.
- Show Top Nav Icon For Basket: If set to true, a Basket Icon located at '/Interface/Icons/Basket.gif' (accessible from the Interface Manager Admin section) will be displayed beside the Basket link. If set to false, the text Basket will appear on its own.
- Show Top Nav Icon For My Account: If set to true, a My Account Icon located at '/Interface/Icons/MyAccount.gif' (accessible from the Interface Manager Admin section) will be displayed beside the My Account link on the Top Navigation.
- Show Welcome Message: If enabled, the text from Welcome Message field in the Languages table will appear on the website's Homepage just below the Top Banners section.
