Up next in 10
How To Create Navigation Menu On Shopify (2024)
2K views
May 9, 2024
Creating a navigation menu on Shopify in 2024 is essential for providing a user-friendly shopping experience. In this video, you'll learn the step-by-step process to create and customize navigation menus that guide your customers through your online store. The tutorial will cover adding menu items, creating nested drop-downs, and linking to collections, products, pages, or external URLs. You'll also discover best practices for organizing your menu to improve user experience and drive conversions. This guide is ideal for Shopify store owners looking to enhance their site's usability and create a clear path for customers to explore and shop.
View Video Transcript
0:00
how to create a navigation menu on Shopify. Hi guys
0:03
welcome back to another video. And in this video, I'm going to be telling you how you can create your very own navigation menu on
0:10
Shopify. So having said that, let's just jump into the video. So over here, as you can see this right here at the top that we have right here
0:17
this is called a navigation bar, right over here. You can navigate to anything or something in particular of a website such as a
0:26
catalog or a contact page. And it depends on you, what you add over here
0:30
So that's why we're going to go ahead and add or customize our navigation bar
0:35
So let's get started. So first things first, what we're going to do is we're going to come over here onto our Shopify store
0:42
And what we need to do is we need to go ahead and click on settings and over here
0:48
And what we need to do is we need to go over here into our online
0:53
store. And over here, we will have the option of navigation right here
0:58
underneath pages, blog posts, themes. We have navigation. We want to click on navigation and over here we can go ahead and add stuff to
1:06
our menus, right? So over here, as you can see, we have the main menu, we have home catalog and contact. Those are the things that we have added
1:13
We can add more menus over here. So as you can see, we have titles, right
1:18
Menu items. We'll click on add menu. And over here we click on sidebar menu
1:22
And this menu doesn't have any items and we can add more items to a specific
1:26
menu. And we can add that menu to our navigation bar. So currently we have our main menu right here and we want to click on main menu
1:36
And over here we have home, we have catalog and we have contact, right
1:40
And if you want to edit some of those, you just simply click on edit and you change the name and you add in the link
1:47
to it. So let's go ahead and do it. It depends on us
1:51
Let me open up right here. So we have a bunch of different products, right
1:55
We have, as you can see, men's clothing, we have jewelry, we even have women's clothing as well
2:01
And on our top we already have shop for men shop women
2:05
but we also want to add it right here, right? We're going to add like a collection page or quickly shop for men shop women
2:13
So let's go ahead and add these two options right here on the navigation bar
2:17
So for that, we just simply come over here, we click on edit or add menu and we add or type the name for men
2:27
right? And then underneath links, we just select the thing that we want to select
2:33
We could go with collection or products or pages. So let's go ahead and select our collection
2:40
So we want to select for men's collection, right? We already created that
2:43
If you don't know how to create it, you just simply open up your products right here
2:48
I opened them up in another tab right here and underneath products
2:52
you will see you have the collections option right here. And underneath collections, you see, you have your men's rings, you know
2:59
women's rings for men, for women. You create these collections by clicking on create a new collection button right
3:06
here, or create a collection, name that collection, you know, add a description if you want to
3:12
And then you can even add a specific like tag right here for your products
3:19
right? And whenever a product has that tag, they would automatically placed into that collection
3:25
So as you can see, if I go into the women's rings, I added the tag women's rings
3:32
And each of these different products has the women rings right here tag
3:37
So they're automatically added into the collection. So if you didn't know how to create a collection, that's how you do it. Right
3:43
So now let's go ahead and select collections and underneath collections, we have four men right here and we select that or
3:53
and, or, you know, over here, you can add what type of collection it is, right
3:59
You can even say you want rings for that. You can create a collection for that. We're going to click on. Okay, there you go
4:06
We have four men right here. And we also want to create a menu item, you know
4:11
for women right here and we'll just go ahead and click on collection and select
4:16
for women. There you go. We click on, add, we save menu
4:20
And here we go. Our now are, you know, menus for the navigation bar is set
4:28
We could also go ahead and edit, you know, catalog. And over here we have all our products and think we'll leave that
4:34
And for the contact, I don't think we need contact. So we'll just remove that
4:38
There you go. And then we just simply click on save menu and our menu has been saved
4:44
Now, if you come over here, right, and we go into, uh
4:48
let's say customization and over here, as you can see, we automatically have more options for our navigation bar or our header or
4:57
navigation, whatever you want to call it. And over here, if you want to add some more details, you click a logo or something
5:03
then you just simply select it right here. As you can see, we'll click on section and over here we can add our own section if you want to
5:10
within the header, or we come over here on the right hand side and we have a bunch of different
5:16
options. So for logo, we have middle left, right? We added that to the middle left. We can add that to the middle center
5:24
There you go. Or you could go with the top left right here like that or top center
5:31
If you want to, depends on you. I think the middle left looks pretty nice
5:35
So we're going to leave it at that. And you also have an option for a sticky header, meaning sticky navigation bar
5:42
So for this one, I chose always reduce size or you could select always that way
5:48
Even if you scroll, there's a navigation bar at the top, but if you go with always reduce logo size, if you, you know
5:55
scroll down, you can see that it's moving a little bit bigger and smaller as
6:01
well. Let me select this one. So as you can see, if I go scroll down
6:05
as you can see right here, the logo goes small and big sizes
6:10
adjustable and, but yeah, it depends on you or you could select on scroll
6:16
So right now it's not sticky as you can see it's unsticky and it just goes up
6:23
But if you scroll up, there you go. You have yourself a navigation menu
6:27
So it depends on you how you like it. I go with always reduced logo size. That looks good
6:33
And we can even show separator line as well. So if I scroll down, you can see a little bit of line there
6:41
but if we select, unselect this show separated line now there's no line or the navigation menu
6:48
I think I like that much better than before. So we're going to keep that. And we also have our, you know, mobile logo, you know, uh, position
6:56
I'll go with the left as well. And then we have our earthest setting, but I think it looks good. We can even change the color to different accents
7:04
So right here, as you can see, action to background, one background
7:08
two, a little bit darker, but it depends on you. And then you can just simply save it and you are good to go. Now
7:14
let's go ahead and take a look over here into our live store
7:18
And over here, it looks pretty good. Now, if we have four men, four women, if I click over here, there we go. We have all the shirts for men
7:27
And if I want to go to four women, we have all the clothes that are available for women as well
7:32
And if I go to catalog, we have all of the products that I have on my store page two
7:37
as you can see. Now you could also add, or if you go to four men
7:43
you want to might want to have, you know, rings over here
7:47
all the products that are associated to men for that. What you could do is if you come back over here
7:54
you go into products and collections, right? And you go into men's rings, right
8:03
You can see it right here. You can even add another condition right here if you want to
8:08
but it depends on you. But if you go back over here
8:12
we go to four men. This is the tag that I had for all the clothes
8:17
What we could do now is go into here and go into each of these
8:23
rings, right? And we also add this tag as well, right here underneath tags
8:31
you add men and you just simply select that as well. Now you have two tags. Now
8:39
if you do this with all the products, there you go. It is saved. Now, if you do this with all of the products
8:45
what would happen is these rings would also find their way over here
8:52
So if I can reload this, the ring should appear right here
8:57
Let me check. There you go. So as you can see, now we even have the other rings for men and we can
9:05
slowly add all the products here. So that's how you can add different stuff to the navigation menu and quickly
9:11
access, you know, main or key parts of your website. So that is it for this video guys. Hope you guys enjoyed this video
9:18
If you did be sure to hit the like button, subscribe to the channel and turn on post notifications
9:23
And I will catch you guys in the next video. And until then, take care and goodbye
#Clothing Accessories
#Consumer Resources
#Retail Trade
#Shopping
#Shopping Portals
#Women's Clothing