All Collections
Getting Started
Appearance
Creating a Menu/Header Menu
Creating a Menu/Header Menu

How to create your header menu using the menu widget and the menu manager

Niall Diamond avatar
Written by Niall Diamond
Updated over a week ago

What is the header menu

The header menu is the main navigation bar usually at the top every page of your store. 

See an example below 

How to make a menu

The menu is made up of 2 parts a Menu widget and the Menu manager links

Part 1 - Menu manager 

  • Found in Appearance => Menu Manager

  • Create your links by adding them to your "Header menu"

Part 2 - Menu widget 

  • Found in Appearance => Layouts => Header 

  • Associate your "Header menu" to the widget that's in your  header layout

Menu Manager 

The menu manager allows you to create lots of different menus that can be used in areas all over your website e.g. in your footer, sidebar, or content pages. It also controls your main navigation links for your main menu bar. 

Setup 

  • Navigate to Appearance => Menu Manager

  • Open the "Header menu"

  • Add your links using the "Link Type" dropdown 

  • Drag-n-drop your links into position

Important: The dropdown menus only support up to 3-4 levels deep. This is to provide a better user experience for your users and to insure it work in all screen resolutions. 

Best practice: 

  • Add only a few links at a time, then save your menu and check how things appear on the storefront. 

  • Remember not to add too many links as they won't be shown on the storefront and may cause your menu to break for your users. 

Menu widget

The menu widget is designed to give you control over the position of your menu on the page. You can drag-n-drop it into different positions based on your design. You might want it below your logo, or above your logo, or even further down the page. 

Setup

  • Navigate to Appearance => Layouts => Header

  • Open the widget settings

  • Scheme Layout dropdown and choose either the vertical or horizontal 

  • If you use the Vertical layout, you will get a choice for additional links that will appear to the right of the "Shop by" dropdown flyout. 

Important: The "Additional links" should be pulled from another custom menu. Simply create another menu in the menu manager. Then return to the menu widget and select it from the "Additional links" dropdown.

Navigate to the menu widget

Widget selections/settings
Each widget has its own selections when you click inside it. These will allow you to make changes to the look

Types of Menus

Vertical Menu


Horizontal Menu 


Did this answer your question?