Menus are used to control all your site links like top navigation links, sidebar links, footer links and sub-menus. When you are building your theme any menu display widget will require a menu to operate. This article will show you everything you need to know about creating a menu.
First to create or manage menus go to Content > Menus & Navigation
Once you are in the Menus and Navigation Section, you can create new menus or edit existing menus.
To create a new menu select the green "New" button in the top right corner.
To edit an existing menu select the "Edit" icon under actions next to the menu you are wanting to edit. (It looks like a piece of paper with an arrow on it)
When a new menu is created, you will need to build out all the links that you want customers to be able to navigate while viewing your site. There are a few different options and methods that you can use to build a menu. Let's take a look at all of them in depth.
To get started we need to add a new link to the menu. To do this simply select the "Add New Link" button as illustrated below.
Once you have that selected you will see the options as shown below. The screenshot below explains what each option does.
Link Types Explained:
Blog
This is a link to your blog roll page. Spark Pay online stores supports multiple blogs so if you have multiple blogs, they will be selectable in the drop down list once you choose this link type.
Blog Category
This link type leads to a page showing only blog posts that use the category you have selected. Once you select this type a drop down list will appear for you to choose from a list of categories that you have set-up on your store.
Product Category
This is a link to a specific category page showcasing all the products in the category you select. A drop down list will appear for you to choose from all your categories.
Content Page
This is a link to a content page you have created in the Content > Pages section of the Spark Pay online stores admin. Once you select this option, a drop down list will appear for you to select a page in the content management system.
External URL
This link can be a link to anywhere across the web using a full URL path: For example if you wanted your menu to link to go to Spark Pay you would enter the URL as http://www.sparkpay.com.
Product
This is a direct link to a product in your catalog. Simply select this type and begin to enter the name of your product and our auto-search will locate a list of products for you to select from.
Storefront Page
These links are based on our prebuilt pages for common areas of the store. Select this option and choose from a long list of options including Home Page, Category Page, My Account Page, Wishlist Page and Checkout Page.
Now that we know how to add different menu options and what each menu type is we will work on menu structure. We will use a lot of images to illustrate the organization accurately.
You may use the use the four-directional intersecting arrows to drag and drop the menu links in whatever order you would like. If you are using a vertical menu the menu items will be listed as they are shown. If you are using a horizontal menu the menu items will be listed from left to right.
Now you should know that dragging and dropping a menu item underneath and to the right of the option above it will make it a sub-navigation link. These sub-links can be stacked for multiple layers.
If you do not want a link to be clickable but rather be a placeholder that only allows customers to hover over it to see more options you can use the same set-up as the Company Info link in the example. To do this all you have to do is set the Display Text to the name of the link, set the Type to External URL and set the URL as #.
Let's take a look at our menu set-up so far and see what it looks like on the front end.
Great! Our menu is expanding multiple levels just like we wanted!
One last organization option that we need to cover. What is a Max Dropdown Level? Some link types (Blog , Blog Category & Product Category) have an option for Max Dropdown Levels. This setting controls how many sublink levels will appear when you hover over that menu option.
Let's use a good example to illustrate the use of this setting.
In our creation above there are 2 dropdown levels. The first dropdown level is Company Info since we hover over it and another set of links appear. Then the second dropdown level is About Us because when we hover over it another menu link appears. So a dropdown level can be defined by the number of sublinks that display more links on hover.
This setting can help because it will allow you to quickly set-up your entire catalog to view all categories without manually dragging and dropping. Let's see what the effect is on the display.
When we have the Max Dropdown Levels set to 2 the Shop Online dropdown shows Pants , Shirts & Shoes. Then when I hover over Shirts I see the Mens & Womens categories.
Now after changing the Max Dropdown Levels to 1 we still see Pants , Shirts & Shoes but we no longer see the Mens & Womens categories when we hover over Shirts. Restricting the dropdown levels can be very helpful when you have a large catalog and you do not want your menu to take up the entire site.
Now that you know how to create your perfect menu you can add that menu to your theme and your site navigation will be built. You can go here to see how menus are selected within your theme for a top horizontal nav bar.
Change The Top Navigation Links