Edit The Homepage Navigation
Last Updated -
There are three types of navigation menus you can use in your store: 1) Standard Menu, 2) Drop Down Menu, and 3) Mega Menu.
These can be found in your store's admin under Design > Navigation.
To choose a menu, simply click the one you want—you'll see a checkmark appear in the corner of the image—and then click Save. This will activate that particular menu on your storefront.
To edit a menu, click "edit" under the image (note that this will not actually activate that menu). 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, 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:// 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.Drop Down Menu
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. Simply click the "Add New" 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 are a popular trend in web design right now, especially with eCommerce sites. Unlike regular drop down menus, mega menus tend to expand across the entire page, and 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. 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.
- Image: Upload or link to an image. You can also add a hyperlink 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.