Nearly every customer who shops in your store will interact with the navigation menus, so their design and functionality are extra important! Read on to learn about making them look – and function – great.
The Basics – Adding Categories to a Navigation Menu
To view the menus and categories you currently have set up in your store, go to Inventory > Categories.
From here you can change menu titles, edit categories and subcategories, and reorganize the order in which they are displayed by dragging and dropping them.
To add a new category:
- Click Add.
- Enter a Category Name and select the menu in which you want it displayed from the Show in Menu drop-down menu.
- Click Save.
To move an existing category to a different menu:
- Click View List.
- Click on the Category number.
- Select the menu in which you want it displayed from the Show in Menu drop-down menu.
Advanced Navigation Menu Customization
To customize your menus, go to Design > Navigation Menu in your Admin Area.
From here, you can get fancy by changing the style settings and menu formats for the navigation bars within your store template!
Basic Menu Settings ⚙️
The display settings for each navigation menu level within your storefront can be configured so each menu level is independently styled. Here you can change the menu background, text color, alignment and more!
FYI: the settings that can be configured for each navigation menu level change depending on the display type chosen for each menu.
Each menu within your storefront can be customized 11 different ways. Here are some details you'll want to know!
Rollover Colors 🌈
This lets the store's navigation menu to change either the text color or background color, creating a highlighting effect whenever a menu element is moused over.
Rollover Colors Popout
Lets you assign colors to navigation menu item text and backgrounds, as well as alternate colors for each to switch to when rolled over with a mouse. Additionally, sub menu items will pop out from their parent elements in the menu when they are moused over!
Navigation menu elements within your storefront can be represented by image files, instead of basic text and links! You may have to generate and upload your own images to your store's active template directory to activate this option. This is only recommended for advanced users, as are the next two menu options!
Rollover BG Images 🖼️
Displays a specific image when the basic navigation element text is moused over. As with Rollover Images, you may have to generate and upload your own images to your store's active template directory to customize this type of menu.
This menu type displays each navigation menu as a basic link. However, this option will display a specific image within the background of the navigation element. As with any menu type using background images, you may have to upload your own images.
Displaying navigation menu elements as a list of links is the most basic menu option available! No additional features such as bullet images or background color/image settings are available with this setting. Text color and rollover color for text are still customizable with this menu type.
Tree Always Expand 🌲
This menu type will set all elements within the navigation menu to display in a bulleted list. For any sub-elements or sub-categories that have been configured to this navigation menu, elements will display below their parent elements, indented and with an alternate bullet image to show that these elements have a parent-child relationship with their associated categories.
Smart Tree Expand
This menu type behaves like the Tree Always Expand menu type with the exception that any sub-category elements will not be automatically revealed within the navigation menu. Links will be displayed beneath the main category link in the navigation menu when a shopper clicks on a category link that contains sub-categories.
Similar to the Links option, this menu type will display a list of all categories or navigation elements in an unordered list, complete with bullet images.
List Items Popout
This menu type is intended for use with responsive templates. Categories display in an unordered list, with subcategory menus popping out from their parent elements when moused over.
This menu type is only recommended only for advanced users! This option overrides all navigation menu settings and instead provides a text box to enter their own, custom HTML to style and define the navigation menu elements.
The Navigation Menu is a great way to change the look and feel of the navigation elements within your storefront. This can make it even easier for visitors to interact with your storefront, find products and place orders!