BACK

how to make menu items expand shopify

Shopify Navigation Tutorial ( Mega Menus/Multi Level Menus/Dropdown Menus/Header Menu and more...) 7

Rihab Seb - eCommerce Coach

Updated on Mar 28,2023

Shopify Navigation Tutorial ( Mega Menus/Multi Level Menus/Dropdown Menus/Header Menu and more...)

The above is a brief introduction to how to make menu items expand shopify

Let's move on to the first section of how to make menu items expand shopify

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 Navigation Tutorial ( Mega Menus/Multi Level Menus/Dropdown Menus/Header Menu and more...)

76 percent of online consumers said that,what they care about the most in a,website design is how easy it is for,them to find what they are searching for,yes 76 and this tells you how much it is,important to make sure that when people,land on your store they can easily and,smoothly move around and they can easily,explore what you offer and get to know,your brand more and this honestly can,never be done without a very clear and,organized navigation menu,hi there I am jihab and on this YouTube,channel I share with you videos related,to e-commerce entrepreneurship and more,and in today's video I'm going to show,you how to set up your Shopify,navigation menus in the best way,possible but quickly and before jumping,to my PC I want to tell you some things,that you need to keep in mind while,organizing your navigation manuals my,first tip for you is to always put your,customers in mind put yourself in your,customers shoes and ask yourself what,would make sense for your customers what,would they be searching for let's say,for example you sell it jewelries so,most of probably your customers will,want to find your products based on the,product type so you need to have a Rings,collection a bracelets collection maybe,a watch collection in this case you need,to link to all of these collections,within your navigation menu but not only,that let's say I'm shopping online for,Rings there might be a specific kind of,rings that I'm interested in so maybe I,want to buy a wedding ring maybe I want,to buy an engage engagement ring or,maybe I want to buy an everyday ring in,this case you need to have the,subcollections within your navigation,menu as well and in order to do that you,need to create a multi-level navigation,menu and I'm going to show you exactly,how to do that when you move to my,screen my second tip for you is the,following when you are naming your menu,navigation tabs always use names that,make sense to your customers so let's,say for example you want to link to your,wedding rings collection simply use,these same exact words to name your tab,this will not only help your customers,to find what they are searching for and,understand what you are selling but it,will also help your store for SEO,purposes my third tip for you is the,following when you are creating or maybe,redesigning your navigation menu always,keep your tabs condensed don't exceed,seven tabs for your navigation menu and,I'm talking about the first level tabs,and I'm going to tell you why our brains,usually can't hold more than seven,things or seven ideas at the same time,on the short term so if you don't want,your customers to get frustrated and,leave just keep it simple and keep your,tabs to seven or maybe even less to five,my final tip for you and it is actually,a sacred tip always make sure that your,manual looks good on mobile so now we,are going to move to my screen to start,setting up your Shopify navigation menus,are you ready let's start so here I am,inside of the Shopify dashboard and in,here I want you to go to online store,and to navigation and in here under,menus this is the section where we are,going to set up our navigation menus and,as you can see by default we have two,different menus we have the menu and we,have the main menu the footer menu is,the one you see below in here where you,link to all of your policies let's say,to the secondary type of links so they,are not as important as the one you find,in the main menu which is the menu you,use in here and this is a an example,actually about a store with a good,navigation menu as you can see in here,they have six different elements and,under under each of these elements they,have different sub Collections and sub,tabs I'm going to show you how to set up,something very similar to this in a few,seconds but I'm going I'm using this,website as an example so you can get,inspired okay this is also another,website in here and as you can see they,have the main tabs and then under each,tab they have different sub tabs and,different subcollections,this you see in here are the mega menus,this let's say design or this look is,the Mega menu,and here I need to tell you something,if you want to have mega menus on your,store you must make sure that you are,using a VM that supports Mega menus and,it's even better to make sure that your,theme supports Mega menus on the mobile,version okay the theme I'm using in here,is the focal theme and it's a theme that,I usually recommend to all of my clients,and it supports the mega menus in both,the mobile view and the desktop view,okay so if you are exploring new theme,if you want to upgrade to a new online,store 2.0 theme make sure that your,theme supports Mega menus usually most,of the professional themes support Mega,menus I don't think that the three,themes like the don't see for example,has this option you might need to do,some coding in order to implement this,option within your store if you are,going to use a theme like the dawn theme,a very big part of the work we are going,to do now will apply no matter what team,you are using okay so don't worry but if,you want to have like a design the,appearance of Mega news make sure that,you have a theme that supports this,option and now let's get back to my,screen and let's start creating our,Shopify navigation menu so going back,again in here I want to show you now my,current menu which is a very basic menu,I just have the home I have the catalog,and I have the contact okay obviously,this is a trial store so I didn't put,any effort in here but I'm going to show,you how to transform these into,something as professional as these tabs,in here okay it's very important also to,note that this preview is from the dawn,theme I'm not going to use this theme in,this tutorial but I'm going to show you,how my navigation menu will also appear,in this theme okay so going in here I'm,going first to create my navigation menu,then I will see how it looks on my store,from here I will go to main menu you can,create a new menu if you wish to start,from scratch I'm going to do that,actually I'm going to click on ADD menu,and I will create I'm gonna call it,navigation,menu,header,okay and I will start to create my menu,items okay let's say I want to create,something something similar to this in,here so I want to have man woman Kids,gear videos magazine journal and so on,okay I'm going in here,and I will start my first menu item okay,this item will be man,but since I don't have the collections,instead of fear linking to the,collection itself I'm gonna,put the symbol and Shopify will accept,that this tab doesn't have a link okay I,click on ADD,so this is my first element in here then,I will move to create the second element,which is woman,I would put also,a hashtag because I don't have the links,then in here I will put kids,you must include something in here you,can't keep leave this uh empty so,include the hashtag in order to just,create like the shape of the menu then I,will click here on,right here then I will put also the,hashtag,later on we will fill these then we have,videos and so on I'm not going to,continue creating these I like in here,to usually link to the about us in my,opinion this is extremely important so I,will see if I have an about us page on,this website I don't have so I'm gonna,use any page as an example let's say,this one,okay sometimes I also link to the,contact us page but for now I guess this,is fine you can also link to the home,page but I don't see act honestly a,reason to do that we are already on the,homepage and if we want to return to the,homepage we can always click on the name,in here and go back to the home page,okay so this is let's say the main tabs,my main tabs these are the first double,tabs the ones I'm gonna see in here okay,I'm Gonna Save this menu,then I will start creating sub menus so,I'm gonna in here to click on ADD menu,item let's see what do I have in here in,this example so under man I have tops,and bottoms and headwear I'm gonna start,by tops,I will also link it to nothing for now,so I have tops,I have also buttons,then I have let's say Footwear,I will only keep it 2 3,okay,I will click on ADD what I'm going to do,now is to move this in here and drag it,down demand collection so it's down,demand collection I'm gonna do the same,for button buttons and I'm going to do,the same for Footwear so now I have like,my main Tab and I have this which which,are my let's say second level the tops,buttons Footwear and so on then I will,create the third level which are the,items within each Tab and as you can see,in here they have done a very good job,at creating sub collections so for,example I landed on the store and I want,to buy uh pants I know exactly where to,go I will go to woman and under that I,will go to buttons and I will find pants,that's what I was talking about that's,exactly what I was talking about create,your navigation menu in a way to help,your customers to navigate and move,around your store okay going back in,here I will just create in here a new I,menu item I will call it a type one just,because,I don't want to continue typing I will,also link to nothing like this,I will create another one let's say type,two,foreign,just an example,and I will create pants too,just stay with me everything will make,sense in a few seconds okay then I will,have for example under Footwear what,would I have I have boots and that's it,so I have woods and I will link to,nothing for now,okay so I will be moving these to be my,third menu level so I will move this one,under tops like this,this one under tops as well then under,bottoms I will move the pants,okay I need to make sure that it's under,button so it's like this then I will,move the second pens and under Footwear,I will add boots okay,so uh just let me move it around in here,the first first one the first level in,here then I have my second level tabs,which are the tops bottoms and foot red,then I have my remaining tabs so I have,them in here can you see them okay so I,will click on Save,and I will head to my online store I,will head to customize in here under the,focal theme,and as you can see in here I'm still,seeing my old menu and this is because I,didn't link to the new menu within the,header section so I'm going to header,and in here I'm going to select my main,menu and here instead of having this one,I will click on Change menu and I will,choose the navigation menu header which,is the navigation menu I've just created,and I will click on select,okay let me save,so as you can see now we can see the,tabs that I have created in my,navigation menu,so this is the man and I can see my,three level,multi-level tabs this is the woman I,didn't create anything in here Kids gear,and about us okay so now I have this,appearance but I don't want to do to do,that I want to have something similar to,the menu in here what I need to do is to,go in here to header click on ADD Mega,menu,okay and this is the feature I told you,about this is a feature that's related,mainly to the theme you are using so if,you want to use Mega menus please make,sure that you are using a theme that,supports Mega menus okay so from here I,will click on Mega menu and in here I,just need and believe me all themes work,in the same way you need to precise,where you want to put your mega menu so,you need to precise under which of these,tabs your mega menu would be in this,case I wanted to be under man okay,and as you can see now I have my mega,menu but this is not it I can also add,photos in here like they have done in,here for example I can add these photos,so what I can do is under this Mega menu,as you can see I have the option to add,one two three four and five wow six even,six images but this is too much I I,guess you need to keep it simple maybe,add one or two images and that's it okay,use this space in here to promote,something special so if for example you,are doing a sale or if you have a new,item on store or if you are launching,something new or something is back on,stock use this area to highlight your,most favorite products okay or maybe,your best sellers so use it in a way to,always show your customers something,that would be very helpful for them okay,and remember since it's since we are we,can and remember since we can put photos,in here so they will be very attractive,they would be visually very attractive,so if you have a say for example or,something like that also include the,promotion in here,okay,let me go back in here so under man I,will go and select my first item and,it's gonna be for example let's take,this image as an example can you see it,I will click on select and here I can,add heading I can add text I can add the,link and so on let me let's say for,example I want to link to one of my,products,the headache could be for example 50,sale,or check out our new product or,something like this and so on,okay let me add another Mega menu let me,actually another promotional blog so let,me add in here a different one let's say,for example I will add let me pick a,free image as an example,so I will click on insert,and I will do the same I will add a,heading for example 20 off,and I will in here at the link for the,product,so as you can see creating this in here,it was super super simple okay now let's,see how our Mega menu will look like or,how how our menu will look like on that,Dawn theme I'm going back and from here,I'm going to click on customize,I will go to Heather and select my menu,in here,so as you can see when I click in here I,have the three levels like this but I,don't have the option to add Mega menus,okay,get going back to the focal theme I want,actually to show you how the mega menus,look on mobile,okay and this is something I highly,recommend you to do all the time from,here choose the mobile view,Okay click in here and see you in mega,venues as you can see the font is big I,can easily see that the menu tabs when I,click on man I can see the different,levels very clear very easy I have even,the promotional blocks in here when I do,women the same and so on this is,actually a very good example and I,highly recommend you to check your theme,to make sure that it has a smooth,navigation menu on mobile so this is it,to how you set up your Shopify,navigation menus now if you want to,create your footer navigation menu you,just need to do the same thing okay,create your menu levels and just link to,your footer menu from your theme,dashboard okay so you go in here and you,scroll down to the section which is the,footer section and in here you link to,your menu okay this is gonna defer,depending on the theme you are using but,most of the themes work in the same way,thank you for watching this video and,for staying up until the end I truly,appreciate that before leaving I want to,invite you to sign up to the free,Workshop I'm currently offering in this,Workshop I show you the exact framework,that you should be applying to your,business in order to make it strong and,sustainable this Workshop is 100 free,and you just need to sign up so go down,to the description click on the link and,sign up and that's it thank you again,for watching this video before leaving,don't forget to smash the like button to,subscribe to my channel and to hit the,notification Bell because in this way,you will get notified every time I,publish a new video soon next week bye,bye

Congratulation! You bave finally finished reading how to make menu items expand shopify and believe you bave enougb understending how to make menu items expand shopify

Come on and read the rest of the article!

Browse More Content