I’m going to go over how to add drop-down menus to your Shopify store. This is something that comes up quite often on desktop machines, for a good user experience, where you hover over top of an item, and then scroll down, and you can go to the different items on it. I’m also going to show you how this affects it on a mobile site, as well. I’m going to hop over right now to the demo store, and we will look how to do that.
Okay, I’m going to walk you through how to make a drop-down menu in Shopify. This is a standard way of doing it for all of the Shopify branded themes. If you’ve gotten your theme through Shopify dot com, then this will work for you. If you’ve gotten your theme through someone like Theme Forest, or you had it custom built by a developer, they might not have used this technique. For 99% of all themes that I’ve run into, this is how you add a drop-down menu.
I’m using the launch pad theme, it’s a very simple theme, and I want to add a drop-down underneath “catalog”. What I’m going to do, is I’m going to go to my dash board, and I’m going to go to “online store”, and then I’m going go to “navigations”. The way drop-downs work, is basically … Shopify goes through and first looks through the main menu, and then it goes and looks at all the other menus that are created in your dash board. It looks for any one that have the same name as an item in main menu.
Here’s an example. If you have a menu created called “catalog”, and you also have one underneath main menu as “catalog”, it’s going to list it underneath. For this example, I’m going to go and create a submmenu of “catalog”. First thing I’m going to do, is I’m going to go “add menu”. Then I want to put in “catalog”. Then, I’m going to put my first item underneath here. We’re going to “about us” first. We’re going to go to “page”, we’re going to select a page, and then we want to put another item underneath that, so “add menu item”. We’re going to go put “t-shirt” underneath here. Then we’re going to select a product. Then we’re going to save this. I added two in there, just so that you could see how it acts when you go into mobile, and that sort of thing.
If we go back over to our store, and we refresh our store, we can see this little arrow has come up, and now you have two items underneath your drop-down menu. If you have a mobily-responsive set theme, which you should have in this day and age, we can go in, and we can turn on the mobile responsive view port. Then, when we click on “menu”, we can see “catalog” shows up, and we can click on the plus sign, and will show us the items underneath it as well.
That’s basically how you set up a drop-down menu in Shopify. Don’t forget to like and subscribe to this video. In the comments, if you have any questions that are specific on drop-downs, you can leave them there, and I would love to get back to you. Have a nice day.