There are three types of navigation menus you can use in your store:


index:

  • This is located in Design→ Navigation.



  • To choose a menu, click Edit under the one you want.   
  • You will see a 'checkmark' appear in the corner of the image once you have chosen one.   
  • This will activate that particular menu on your storefront.   
  • Each menu is saved separately, so you can switch between them without overwriting any data.   



  • This menu is a simple, static menu—meaning there are no drop downs or special effects.    

 


  • When you edit this menu, you will enter an Item Name (the words the appear in the menu) and the URL that corresponds with that item.     
  • If you are linking to a page in your store, you can enter just the page name and not the full URL.                                  
    • For example, if you want the link to be http://mystore.com/about-us.html or https://mystore.com/about-us.html all you have to enter is ../about-us.html into the URL field. If you enter an external domain, like google.com, the system will look up that domain to see if it exists and if so, will automatically add http:// or https:// to the beginning of it.


  • You can also choose to open the link in a new window. You can add as many items as you'd like, but keep in mind that only so many items will actually fit in the navigation bar.   
  • You will also be able to center the links by choosing Center Navigation and if you are using multiple languages, you will see a Choose Language drop down on the screen that will let you set up different Item Names for each language.  

Note: At this time the Standard Menu is the only menu that supports multiple languages.  

  • The drop down menu allows you to add up to two additional levels to your navigation, including a primary and secondary sub-menu.   

 

  


  • When you edit this menu, the first step is to add your main navigation items.   
  • Click the Add Item button to add a new menu item.   

    

You will need to input the Title (what shows in the menu), then choose a Link Type:   

  • URL: Enter a specific URL, such as to an external page.   
  • Existing Page: Choose an existing content page.   
  • New Page: Create a new content page. You will be able to edit the new page under Site Content > View Pages.   
  • Category: Choose an existing category or subcategory.   
  • New Category: Create a new category. You will be able to edit the new category under Inventory > View Categories.   
  • None: If you don't want to make the menu item open a new page, select this option.   
  • You can also choose to have the page open in a new window (typically this is only used for external pages). Once you've created your main navigation items, you can drag and drop them to rearrange their order.   
  • To add a drop down to a menu item, click on the item and then click the Add New button that appears to add a second level link.   


  • Once you've created a second level item, you can now add a third level to that item by clicking the + sign. You can drag and drop links between drop down menus.   



  • Mega Menus unlike regular drop down menus tend to expand across the entire page. They oftentimes include not only text links but also plain text and images, split into columns and sections.   
     
  • When you get to the setup screen, click the Add New button to create a main navigation item.   
  • Once a main menu item is created, click on the item to add a mega menu.   
  • You can then add columns to your mega menu.   
  • You can add up to 5 columns for each menu, however these menus do expand towards the right, so navigation items on the far right of the screen may not work well with more than 1 or 2 columns.  


Once a column is added, you can add additional menu items to it, either from the tool bar at the top, or from another column. There are several types of elements you can add:   

  • Link: A regular text link. 
         note: See the Link Type explanation in the Drop Down Menu section above for more info.                      
  • Title: This is essentially the same as a Link, but it has a different formatting to make it stand out more.   
  • HTML Code: HTML, CSS, and JavaScript.         
  • Image: Upload or link to an image. You can also add a 'hyper-link' to the image, as well as an alt/title tag. If the image is larger than the column, it will automatically be resized to fit.    
  • Text: This is just plain text, which can be used for descriptive text.  
  • Horizontal Line: This is a horizontal line that can be used to separate other elements in a column. You can customize the Line Style (Dashed, Dotted, Double, Groove, Inset, Outset, Ridge, Solid), the Line Width, and the Color.  
  • Spacer: This element allows you add to extra space between other elements in a column.