BACK

shopify responsive theme how to create drop down menu

How to Add Drop down Navigation Menus Shopify Dawn Theme Tutorial 2022 this is kevin with pi nurse w

Kevin King

Updated on Mar 01,2023

How to Add Drop down Navigation Menus Shopify Dawn Theme Tutorial 2022

The above is a brief introduction to shopify responsive theme how to create drop down menu

Let's move on to the first section of shopify responsive theme how to create drop down menu

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

shopify responsive theme how to create drop down menu catalogs

How to Add Drop down Navigation Menus Shopify Dawn Theme Tutorial 2022

this is kevin with pi nurse websites and,today i'm going to show you how to,create a drop down menu on the,the new dawn theme so the first thing,you want to do is make sure you have the,dawn theme of course that's one of the,shopify's new 2.0 themes uh if you want,to look at all the 2.0 themes and i,recommend that you get that one because,they've been designed for speed,uh on shopify uh just go to the theme,store and then go to all themes and then,you'll get all these filters and you can,find the features that you want the one,i always look for is uh the online store,2.0 you're going to see the paid ones,and then you're going to see uh the free,ones it'll say whether it's free or paid,if it's free it'll say free if it's paid,it'll have a price next to it so,you can go to the theme store and look,at other shopify 2.0 themes but i do,recommend that you get one of those if,you don't have one so,the important thing to understand about,navigation menus is they'll display,differently depending on the theme that,you're using so you can just go to the,customized theme,this is on the debut theme and this is,how some navigation menus this is a,nested navigation menu,it displays differently on the dawn,theme which we're going to show and then,this is a straight down drop down,on the uh,debut theme so let's go over and that's,all we're going to look at of the debut,theme let's go over,and we don't have to make it the publish,theme we can just go into customize on,the dawn theme once you've downloaded it,but if you do,make it the pub,you can see how your menu navigation is,a little different than what we just saw,this is your nested navigation this is,how it displays on the,dawn theme,compared to what we were just looking at,on the debut theme,so let's go ahead and,make um,let's go ahead and make some menu so you,can kind of understand how they work so,what we want to do is we want to make a,straight drop down menu like this one,right here and that's one of the easiest,menus to make so let's go ahead and go,first we're just going to make this the,published theme,over here we're just going to go to,action,and,let's go to,whoops wrong theme let's go to action,and let's go to publish,and now the date,the dawn theme is replacing the,debut theme i haven't set up the theme,so when you look at it you're going to,see,that nothing's been done it,automatically brings over the navigation,that i've already created so let's go,back over here and we're going to go to,online store and we're going to go to,navigation,and you want to go to main menu and this,is one of your default menus that's in,your,navigation automatically,so you see i've made a bunch of,navigation menus by default it's got,home and catalog,so i added about us and then all of,these other,menus and submenus so,at the bottom you're going to see add,menu,and this will add something to the top,level navigation and let's just take a,look at the top level navigation,these are all top level navigation menus,so i'm just going to create a navigation,menu,called,water filters and so i click down here,and then the menu will come up up here,let's say water filters,just so it's a little different,and then we're just going to connect it,to a collection,and we'll connect it to a collection and,let's go ahead and add that,and let's hit save menu,so now that creates a top level,navigation menu so if we go back to,preview this,you're going to see we have a new,navigation menu called water filters at,the top,so,i'm going to go over here back to the,navigation and you'll notice when we,created this is connected to a,collection when you click on it,it's going to go to that collection but,once you make it a drop down you can no,longer click on that top level,so you want to make sure that say if you,want people to get to water filters you,want to put something in there that,allows them to go to that collection so,you may want to put something like,see all water filters somewhere in the,drop down that you've created here,because once you make this a drop down,uh when you click on it it will just,open up the sub menu that's what happens,on free themes on some of the paid,themes,you can click on those top level menus,but let's go ahead and take a look on,how to make this a,a sub menu so if we add another item and,let's just call it um,whirlpool,that's a type of water filter,and we're just connecting it to a,generic collection right now we're not,connecting it to water filters because i,don't have any water filters in here but,we just connect that,and in order to make it a sub menu you,just pull it over if you see that little,blue circle,when it's here it's on the main menu,when it's here it's underneath of an,item so now that i've created a sub menu,it's asking me if i want to add anything,else to the water filters menu,so let's go ahead and put samsung,which is also another water filter and,we'll just connect it to the samsung,collection i don't have a samsung,collection so i'll just connect it to,any collection just so it's connected to,something,so then we could make uh additional,items but this is enough to give you an,idea let's connect something to all,water filters as i was saying before,and then this would show,all the water filters that you have and,i'm just going to connect it to a,collection,and that would connect it to all the,items in the collection then you just,click save now you've got a drop down,and you'll know that you have a drop,down when you have this little icon,right here,that's a drop down menu and you can,collapse all of these to uh see this,one's a multi-level drop down menu right,here uh the most levels that you can go,in,on sub menus is three levels down so you,can have,this is called your top level then you,can have one more level and one more,level underneath of that so you got top,level second level third level three,levels is what you can go in navigation,menus so let's go ahead and look and see,how this is now displaying on our,website,so we've just created water filters is,no longer,it is clickable but no longer goes to a,collection so now you can go to,the first link or the second link,whatever you linked it to or the final,link which is you know all of the items,in the collection,so that's all there is for creating a,drop down menu using the dawn theme so,if you want to learn more about menus i,have more extensive videos that tell how,you can use,you'll see that you have the option for,collections uh to be filtered,so you can show part of a collection let,me just show you how that works so,if we take a look at uh this right here,let's go to edit this menu,and if we want to filter it by,only certain items in that collection,we can filter it by a tag so if we've,tagged a product and added this tag to,the product in these collections uh,so the 20 by 20 is only going to show,the merv 11 in that collection now so,i've now filtered this collection of,what's going to be seen so if i apply,changes and i save that,when i go to my navigation menu it's,only going to show a portion of that,collection and that's how you can use,product tags,to filter,your collection so that you don't have,to make a million different collections,you can just add tags to products and,let's go ahead and take a look at that,uh by previewing that new,uh navigation so when we go back to this,we're showing only a portion and we're,only showing 20 by 20 by one filters uh,that are tagged with merv 11. so,that's how you can filter collections so,that you don't have to,create a ton of collections you can just,put tags on those items,and you can show those items through,navigation menus with,uh only a portion of what's in that,collection so,i hope this was helpful for you please,uh subscribe and like this video,and check out more of my tutorials and,you'll you can find in-depth deep dives,on things like navigation menus and,we'll go over a little bit more how,navigation menus work in my next video,thank you

Congratulation! You bave finally finished reading shopify responsive theme how to create drop down menu and believe you bave enougb understending shopify responsive theme how to create drop down menu

Come on and read the rest of the article!

Browse More Content