Create Tab Navigation

To create a tab navigation bar (tab navigation menu) for your web store, do the following:

• Log in to the 'Anywhere Commerce Control Panel' by using your User Name (Email Address) and Password.

• You will be navigated to the 'Dashboard' page.

• Click the  icon. The Design & Content section will be displayed as shown in the figure.

• Click Design Navigation. You will be navigated to the Design Navigations page.

• You can find the list of available navigations under the List of Navigations section.
• To create a new navigation, click Add New Navigation. You will be navigated to the Add/Edit Navigation page.

Add/Edit Navigation:

• Select the type of navigation as the Main Navigation from the Type of Navigation drop-down.
  • Note:
    • Main Navigation - These are normal navigation bars and are used for main navigation of the store.
    • Sub Navigation - The ‘sub-navigation bars’ can be associated for the menu items of the 'main navigation bars' so that when those menu items are clicked, the associated 'sub-navigation bar' will be displayed.
• Enter a title for the navigation (for your reference) in the Name of Navigation text box.
• Enter a reference code for the navigation (for your reference) in the Reference Code text box.
• To create a 'Tab Navigation', select Tab Navigation from the Template drop-down.
• To create the navigation for your web store, select Web Store from the Channel drop-down.

• To make the new navigation active, select the Active radio button of the Status parameter.
  • Note: For each 'business channels', you can create multiple navigations (Navigation bars) as per your requirement, but only one navigation bar from each channel can be in the active mode at any point of time.
    
    
  • That means, if you make this new navigation active, the previously active navigation for the respective business channel will be deactivated automatically.

Displaying the navigation menu items only if they are having the products:

• You can also display only those menu items which have products. To do so, select the Yes radio button of the Show only menu items which have products parameter.
  • Note: This is applicable only to the Category & Brand pages. That means, if these pages are not having products, the respective page links also will not be displayed through the respective navigation set (bar)

• To save the configuration (i.e. to create the 'Tab Navigation Bar'), click Save. Your configuration will be saved (i.e. Tab Navigation Bar will be created) and you will be displayed a Add new Menu Items dialog box. Now you can add the 'menu items' (Links) to the newly added 'Tab Navigation Bar'.
  • Note:
    • i) For adding menu items to the navigation bar for the first time, you can also navigate to the Add new Menu Items dialog box after clicking the '' icon of the respective navigation under the List of Navigations section in the Design Navigations page.
      
      
    • ii) If you have already added menu items, and you want to add few more menu items (in the root) to the same navigation bar, you can navigate to the Add new Menu Items dialog box after clicking the '' icon of the respective navigation under the List of Navigations section in the Design Navigations page and clicking the Add new Menu Item button in the Add/Edit Menu Items page.

• Here, you can add menu items (Links) to the newly created 'Tab Navigation' Bar.
  • Note: You can add menu items (Links) to the both 'main navigation bar' and 'sub navigation Bar.'
• There are different types of menu items you can add to the tab navigation bar namely:
  • Categories
  • Pages (Custom, Section and Standard Library pages)
  • Internal or External Page Links
  • Sections (i.e. 'Blank Custom Titles' under which you can add other menu items)
  • Brands
  • Product Groups
  • Product Tags

• By default, the 'Categories' tab will be opened in the Add new Menu Items dialog box. Expand the root and select the required category (categories).
• If you have selected a single option (category), you will be displayed the available options in the Manage Display of Menu Item section.
  • Note: If the multiple options are selected, the Manage Display of Menu Item section will not be displayed and all the selected options are added to the tab navigation menu(bar) with their original names (i.e. you can't alter those names).
• The selected category name will be displayed in the Link name text box.
• You can customize the same as per your requirement. To customize the link name (if required), enter the customized name in the Link Name text box. The name that is mentioned in the Link Name text box will be displayed in the storefront against the selected menu item.
• Enter the number of columns in which the selected menu item should be displayed in the No of Columns text box. i.e. if the sub-menu items are configured under this menu item, those sub-menu items will be displayed in the configured number of columns.
• Select a CSS Class (not Mandatory) from the CSS Class drop-down for choosing the display style of 'Link Name'.
• Select a 'sub-navigation' (if required) from the Sub Navigation drop-down. The 'sub-navigation bar' will be displayed when the respectively associated menu item is clicked.
• To open the page in a new browser when a menu item is clicked, select the checkbox Open in New Browser.
• To add the selected menu item (items), click Add. The Add new Menu Items dialog box will be closed and you will be navigated to the Add/Edit Menu Items page. You will be displayed a relevant success message. You can also find the selected menu items under the Name of the Navigation:'Name of the selected Navigation bar section in the Add/Edit Menu Items page.

• To add the custom, section and standard library pages of your store to the navigation bar, click Add new Menu Item in the Add/Edit Menu Items page. You will be displayed the Add new Menu Items dialog box.
• You can add the custom, section and standard library pages to the navigation bar through the Pages tab.
• Click Pages. The Add Custom/ Section/Standard Library pages section will be displayed.

• All the 'custom, section and standard library pages' are listed in this section. Select the Page ID(s) that you want to add to the navigation.
  • Note:
  • You can view the pages by clicking the View Page link under the URL column.
  • You can search the 'page titles' or 'page ids' by clicking the respective 'filter items' '' icon. You will be displayed a Show items with value that: dialog box.

• Select the search condition from the drop-down having the options: Is equal to, Contains, Does not Contain*
• Enter the respective search criteria (i.e. Page ID, Page Title) in the text box.
• Click Filter. The respective 'page id, page title' will be searched (if any).
• If you have selected a single option (page), you will be displayed the available options in the Manage Display of Menu Item section.
• Note: If the multiple options are selected, the Manage Display of Menu Item section will not be displayed and all the selected options are added to the tab navigation menu(bar) with their original names (i.e. you can't alter those names).
• The selected page name will be displayed in the Link name text box.
• You can customize the same as per your requirement. To customize the link name (if required), enter the customized name in the Link Name text box. The name that is mentioned in the Link Name text box will be displayed in the storefront against the selected menu item.
• Enter the number of columns in which the selected menu item should be displayed in the No of Columns text box. i.e. if sub-menu items are configured under this menu item, those sub-menu items will be displayed in the configured number of columns.
• Select a CSS class (not Mandatory) from the CSS Class drop-down for choosing the display style of 'Link Name'.
• Select a 'sub-navigation' (if required) from the Sub Navigation drop-down. The 'sub-navigation bar' will be displayed when the respectively associated menu item is clicked.
• To open the page in a new browser when the menu item is clicked, select the Open in New Browser checkbox.
• To add the selected menu item (items), click Add. The Add new Menu Items dialog box will be closed and you will be navigated to the Add/Edit Menu Items page. You will be displayed a relevant success message. You can also find the selected menu items under the Name of the Navigation:'Name of the selected Navigation bar' section in the Add/Edit Menu Items page.

• To add the Internal or External Page Links to navigation bar, click Add new Menu Item button in the Add/Edit Menu Items page. You will be displayed the Add new Menu Items dialog box.
• You can add the internal (from your own store) or external page links(from web) through the Link Name tab.
• Click Link Name. The Add External or Internal Page URL section will be displayed.

• Enter the URL of the page link in the Link URL text box.
• Enter the name for this link in the Link Name text box under the Manage Display of Menu Item section. The name that is mentioned in the Link Name text box will be displayed in the storefront against the internal or external page link.
• Enter the number of columns in which the menu item should be displayed in the No of Columns text box. i.e. if sub-menu items are configured under this menu item, those sub-menu items will be displayed in the configured number of columns.
• Select a CSS Class (not Mandatory) from the CSS Class drop-down for choosing the display style of the 'link name'.
• Select a 'sub-navigation' (if required) from the Sub Navigation drop-down. The 'sub-navigation bar' will be displayed when the respectively associated menu item is clicked.
• To open the page in a new browser when the menu item is clicked, select the Open in New Browser checkbox.
• To add the selected internal or external page link, click Add. The Add new Menu Items dialog box will be closed and you will be navigated to the Add/Edit Menu Items page. You will be displayed a relevant success message. You can also find the selected internal or external page link under the Name of the Navigation:'Name of the selected Navigation bar' section in the Add/Edit Menu Items page.

• To add the sections (i.e. 'Blank Custom Titles' under which you can add other menu items) to the navigation bar, click Add new Menu Item in the Add/Edit Menu Items page. You will be displayed the Add new Menu Items dialog box.
• You can add the sections (i.e. 'Blank Custom Titles' under which you can add other menu items) to the navigation bar through the Section tab.
• Click Section. The Add Section (Blank) Menu Items and Manage Display section will be displayed.

• Enter the name of the section in the Section Name text box. The name that is mentioned in the Section Name text box will be displayed in the storefront against the 'Section Link'.
• Enter the number of columns in which the selected menu item should be displayed in the No of Columns text box. i.e. if the sub-menu items are configured under this menu item, those sub-menu items will be displayed in the configured number of columns.
• Select a CSS Class (not Mandatory) from the CSS Class drop-down for choosing the display style of 'Section Name'.
• Select a 'sub-navigation' (if required) from the Sub Navigation drop-down. The 'sub-navigation bar' will be displayed when the respectively associated menu item is clicked.
• To add the 'section' or 'blank custom title', click Add. The Add new Menu Items dialog box will be closed and you will be navigated to the Add/Edit Menu Items page. You will be displayed a relevant success message. You can also find the selected menu items under the Name of the Navigation:'Name of the selected Navigation bar' section in the Add/Edit Menu Items page.

• To add the brands to the navigation bar, click the Add new Menu Item button in the Add/Edit Menu Items page. You will be displayed the Add new Menu Items dialog box.
• You can add brands to the navigation bar through the Brands tab.
• Click Brands. The Add Brands section will be displayed.

• All the brands of your store are listed in this section. Select the required brand (s) that you want to add to the navigation.
• If you have selected a single option (brand), you will be displayed the available options in the Manage Display of Menu Item section.
  • Note: If the multiple options are selected, the Manage Display of Menu Item section will not be displayed and all the selected options are added to the tab navigation menu(bar) with their original names (i.e. you can't alter those names).
• The selected brand name will be displayed in the Link name text box.
• You can customize the same as per your requirement. To customize the link name (if required), enter the customized name in the Link Name text box. The name that is mentioned in the Link Name text box will be displayed in the storefront against the selected menu item.
• Enter the number of columns in which the selected menu item should be displayed in the No of Columns text box. i.e. if sub-menu items are configured under this menu item, those sub-menu items will be displayed in the configured number of columns.
• Select a CSS Class (not Mandatory) from the CSS Class drop-down for choosing the display style of 'Link Name'.
• Select a 'sub-navigation' (if required) from the Sub Navigation drop-down. The 'sub-navigation bar' will be displayed when the respectively associated menu item is clicked.
• To open the page in a new browser when the menu item is clicked, select the Open in New Browser checkbox.
• To add the selected menu item (items), click Add. The Add new Menu Items dialog box will be closed and you will be navigated to the Add/Edit Menu Items page. You will be displayed a relevant success message. You can also find the selected menu items under the Name of the Navigation:'Name of the selected Navigation bar' section in the Add/Edit Menu Items page.

• To add the product groups to the navigation bar, click Add new Menu Item in the Add/Edit Menu Items page. You will be displayed the Add new Menu Items dialog box.
• You can add product groups to the navigation bar through the Groups tab.
• Click the Groups tab. The Add Product Groups section will be displayed. Select the required product group(s).

• If you have selected a single option (product group), you will be displayed the available options in the Manage Display of Menu Item section.
  • Note: If the multiple options are selected, the Manage Display of Menu Item section will not be displayed and all the selected options are added to the tab navigation menu(bar) with their original names (i.e. you can't alter those names).
• The selected name of the product group will be displayed in the Link name text box.
• You can customize the same as per your requirement. To customize the link name (if required), enter the customized name in the Link Name text box. The name that is mentioned in the Link Name text box will be displayed in the storefront against the selected menu item.
• Enter the number of columns in which the selected menu item should be displayed in the No of Columns text box. i.e. if sub-menu items are configured under this menu item, those sub-menu items will be displayed in the configured number of columns.
• Select a CSS Class (not Mandatory) from the CSS Class drop-down for choosing the display style of the 'link name'.
• Select a 'sub-navigation' (if required) from the Sub Navigation drop-down. The 'sub-navigation bar' will be displayed when the respectively associated menu item is clicked.
• To open the page in a new browser when the menu item is clicked, select the Open in New Browser checkbox.
• To add the selected menu item (items), click Add. The Add new Menu Items dialog box will be closed and you will be navigated to the Add/Edit Menu Items page. You will be displayed a relevant success message. You can also find the selected menu items under the Name of the Navigation:'Name of the selected Navigation bar' section in the Add/Edit Menu Items page.

• To add the product tags to the navigation bar, click Add new Menu Item in the Add/Edit Menu Items page. You will be displayed the Add new Menu Items dialog box.
• You can add product tags to the navigation bar through the Product Tags tab.
• Click the Product Tags tab. The Product Tags section will be displayed. Select the required product tag(s).

• If you have selected a single option (product tag), you will be displayed the available options in the Manage Display of Menu Item section.
  • Note: If the multiple options are selected, the Manage Display of Menu Item section will not be displayed and all the selected options are added to the tab navigation menu(bar) with their original names (i.e. you can't alter those names).
• The selected name of the product tag will be displayed in the Link name text box.
• You can customize the same as per your requirement. To customize the link name (if required), enter the customized name in the Link Name text box. The name that is mentioned in the Link Name text box will be displayed in the storefront against the selected menu item.
• Enter the number of columns in which the selected menu item should be displayed in the No of Columns text box. i.e. if sub-menu items are configured under this menu item, those sub-menu items will be displayed in the configured number of columns.
• Select a CSS Class (not Mandatory) from the CSS Class drop-down for choosing the display style of 'Link Name'.
• Select a 'sub-navigation' (if required) from the Sub Navigation drop-down. The 'sub-navigation bar' will be displayed when the respectively associated menu item is clicked.
• To open the page in a new browser when the menu item is clicked, select the Open in New Browser checkbox.
• To add the selected menu item (items), click Add. The Add new Menu Items dialog box will be closed and you will be navigated to the Add/Edit Menu Items page. You will be displayed a relevant success message. You can also find the selected menu items under the Name of the Navigation:'Name of the selected Navigation bar' section in the Add/Edit Menu Items page.