In this article, we will discuss How to create a navigation menu for your site? Menus are the tools that will allow customers to navigate within our site to find products as well as information about the brand.
The main menu corresponds to the cover letter of the site, where the client can quickly recognize its main contents. Having a well-structured menu facilitates the customer search, which leads to a better user experience and conversion probability.
It is important to understand that the main menu is read horizontally as well as vertically, from left to right, as well as from top to bottom when using dropdowns. The order of these can be alphabetically or by popularity.
On the other hand, the menus that are located in the footer, are usually displayed in columns with information about the store, policies and contacts.
Apart from these two, depending on the template you choose, you can create different additional menus (secondary menu in the header, for filters, among others).
When creating the navigation menu, different pages can be linked. The options that Shopify delivers by default are:
- Home of the site.
- Collections (one in specific or it can be all)
- Products (one in specific or it can be all)
- Page (content page)
- Blogs (a specific publication or all).
All material that you want to connect to the menu must be previously created. Only then the system will be able to recognize where you want to link the menu items.
Next, we will do the exercise of creating the main menu in Shopify. We will start with a simple horizontal menu. And then we will see how dropdowns can be added to it.
Let’s Start!
Once all the material that we are going to link is created, we will go in the left column, to Online Store> Navigation. Then select “Add Menu“.
A page will open where you will have to enter the name of the menu you are creating in order to identify it, followed by the field to start creating items from it.
When selecting “add element”, a pop-up will open in which you must enter two data. First, the ‘name’ corresponds to the word that the client sees. And the link that indicates where it goes when clicking on it.
In the case of the main menu, unlike some opinions. We advise adding the ‘start’ item. This is because not all types of public know that by clicking on the logo. They return to the home page of the site. Especially if your clients are older people, everything will depend on your public’s handling of digital tools.
Then when pressing the empty ‘link’ field, a drop-down will open which gives us different options. In this case “start” is selected and then “add”.
Following to ‘start’, we will locate the item ‘store‘. By selecting the “link” option, the “collections” option, the drop-down will load all the collections that you have already created in your Shopify. We will select and add the “All Products” collection.
Next, we will do the same for the content page “we are” and “contact”.
Once you have your menu with the linked elements. It is a matter of saving and you can connect it on your site by editing the template in Online Store> Customize. HORIZONTAL Menu Created!
Now, if we want to add drop-downs to this menu, we must return to the menu editor. We are going to add to the element ‘shop’ the options of man and woman. To do this, we must again select “add an item in menu” and create one of the options for the drop-down.
Once it is created, you will notice that each of the elements has 6 points at the beginning of the row. By clicking and holding on to the ‘Man’ collection, this item will be able to move within the created elements. The blue line indicates where it would go if you stop holding the selection.
Finally
You should move from the bottom to the space just below ‘store’ and move the item to the right. You will see that a triangle will appear next to the word ‘store’, this indicates that the item you are moving entered as a sub-item within it. Once you get the triangle to appear, you drop the element you were moving and you will see that now ‘Man’ is inside the ‘store’.
To continue creating elements within the ‘store’, it is a matter of using the button “add a menu item to Store” and the drop-down will automatically part.
After saving, if you go to the site display, the storage element will have a traditional dropdown. Menu with dropdown created!
Remember: You can create a various collections and page dropdowns, and you can even create subsections within the dropdown. Remember that it is a priority to have an orderly and clear menu, so we do not recommend having more than three levels in your drop-down.
How to create Mega Menu in Shopify?
There are also other navigation tools such as the ‘Mega Menu’. This corresponds to a drop-down that allows covering various category columns in the same panel and even locating images to promote products, collections and content pages. This tool allows you to hierarchize information visually.
Within Shopify, some templates come with this built-in tool. In the event that yours does not have it, there are applications such as a big Menu that allow you to install it.
You can activate the mega menu by going to the template editor in Online Store> customize. Once there, you can find the mega menu icon in three places:
- In ‘Sections’.
- ‘Theme settings’.
- Inside the ‘Header’ section.
Although the edition works in a similar way, each template will have different instructions for using the tool, so you must follow the specific instructions of this tool.
Conclusion
Always remember to check how your pop-ups work on the cell phone. Unlike desktop design, the use of dropdowns can make navigation from mobile more complex since its format changes to a side menu. This is very important since most people use their mobile devices to visit online sites. We are trying to explain here How to create a navigation menu for your site?
You can leave a comment below.
