Play Video

How to create a drop down menu header page wix & home page image buttons

This wix tutorial explains how to set up your wix ecommerce store pages with a non clickable menu page, with sub pages underneath in a drop down menu. It also shows you how to create new collections (ie store categories), assign products to collections and assign collections to pages It also shows how to create a visual menu on your home page linking to each of your categories / collections.

Create your free wix website today using this link:

hi guys Nicole Harry here with another week’s tutorial a lot of people have been asking me lately how do I add store pages and change the location or the the click ability of my main store page so it’s just great one of the basic online store templates for mix and if I hover here I can see these little little boxes over here shows me that this is a store page if you don’t already have a store page in the current template that you’re using all
you need to do is implement it again add a store element so if it’s not here you can go to the App Market and search for the Wix stores app ok and then add that and then you’ll have this little option over here to be able to add elements so at the moment I’ve got a preview so I can see what’s happening it’s only got one store page and it’s just quick people and there’s no sort of sub pages or anything like that and if I go home there’s just a
link to it here and it’s just all of the products in here or what I want to do is create a non clickable header that’s called shop online and then have my sub categories underneath ok so the way to do that is to add a page but choose menu head up OK so let’s call this one shop online ok I’m going to click done so these little three bars just here the neat that this is a menu head up and then it’s not clickable but you can put sub pages under it
ok so now what I want to do is create and you sorry we want to make this a sub page so to make it a subpage all I need to do is click on these little dots right here drag this to the right underneath here say for example if it was actually down here sorry no matter where it is in the audio you can actually bring it up to your sub header here you can make a sub page below any of these pages but this one is just we want to use this because we don’t
want this to be a clickable page we just want to have sub pages underneath so if I go to prove you now you can see that if I hover over this we have a sub page here that’s clickable but this heading is not clickable which is what we want okay because pages again now usually you would want to be able to duplicate the page but because this is a store page we can’t actually duplicate it so we need to make one page that’s the same as this first okay
so what I’m going to do is add a new page just a regular page and I’m going to call this earring okay that’s not how you’re still feeling so okay and I’m going to add this as a sub page underneath my collections page so what I want to do is grab the heading from here if I’m happy with the way that this font is I’m going to copy tools I’m sorry what do you copy on this one okay copy which is control see he’s doing shortcut and then we want to go
to our earrings page click on the page and then press paste and it’s going to paste it in the exact same position now we want to add the store element as well so you can’t actually copy and paste this one what we need to do is go to our store panel let’s get started and one thing that I noticed is that it kind of goes back to your first page that you created so let’s click out of there and go back to the earrings page the milling it on the weight
of that so we’re on the earrings page I’ll just actually change this to say earring so that helps me figure out whether I’m on earrings or collection page and now I want to add a store element so ad store elements and I’m going to add a product the greed product gallery so I just drag that on wait for it to load and then let’s move that into place good and we can actually resize the store element here if we want to but I’m just going to leave
that where it was and one thing I want to make sure of is that this is sitting at the same height as the other one so to make sure that that’s right I’m going to go to my collection page and it will click on this store element and I can see that it sits at a height of C Y is 2 4 4 so this is the height on the actual page earrings click on the element that’s no idea – 4 4 sorry click on the element 2 4 4 enter alright so now it’s going exactly the
same spot as my other one okay so now this is going to be the page that we’re able to duplicate now you can also add some other elements on this page before you start duplicating them you might want some breadcrumbs which are just some little text links sort of go back to the main page or the another page you could add a little checkout button over here if you wanted so instead of having it up here in the footer you could move that down to here
so that’s just on the shop pages you could add anything else that you would like you can change this to be the right font that you want anything at all and now we’re going to use this as a template page so what I want to do is go down to here to the earrings page and I’m going to duplicate in this page it could have told this lesson soon done and so I’ve got here but still fit earrings so to make it easier for myself whether I get confused that
where I am change the header straightaway okay and I’m also going to duplicate that and create another page that is called slip okay done okay and I’ll change the header straightaway okay great so now I have bracelets necklaces earrings and I’ve got this one which was originally cool collection but I’m going to rename this one to be all and like what’s shop and make that lowercase rename all okay so now when I go preview I have a non clickable
link here shop or earrings necklaces bracelets okay let’s go back to the editor I can also reorder these if I would like so I might say look necklaces is more important so I just click and drag up the position okay so at this stage we want to have added some products into our store so if I go to so I go to our store tab and then store manager so internally to your store and then serve with this template it’s given me some products already in
there so I’m just kind of be loading those but what I want to do so if you haven’t already added some products you can add your box or with this stage I’m just going to use the ones that the template came with so I want to go to collections and you can see that it’s given me sort of a default all products and then a new collection that has all the products in it as well so this one I want to actually make my necklaces collection so I’m going to
call this necklace okay and I am going to delete anything that is not a necklace there we go yeah my necklace ooh and going to click Save so here we go we’ve got necklaces now I’m going to add another collection cold bracelet okay and I’m going to add some products so anything that is a bracelet and and save so just just don’t worry about that for the moment because the way I’m teaching you you don’t really need to add it this way and then one
more for the earrings okay add some products and it will just be big earrings the earrings I have and save okay I’ll just cancel that alright so we have our collections now so I want it close out of the shop manager and all right so the pages are mine is necklaces I want to assign the necklaces to this particular element okay so I want to click on it once and click settings and this brings up an options panel and I want to so it comes up with
collection and I want to change the collection to necklaces and voila we have just the necklaces okay you don’t see the way that the products look with the flow Spock image is quite a good new feature that they have you can add filters and sorting quick you so that’s really good all the new features now I’m going to go to my other pages shop all already have shuffle aside show you that by just going here so it’s got all products signed to this
collection I’m just meant to say shut all that one has to be called collection anymore we’ll go to the earrings page click on this one and choose settings and assign the earrings collection and I come my earrings go to our bracelets page click on at once settings and okay there we go okay now what I want to do is add some clickable links on the home page to get to these different collections so I go to my home page at the moment it doesn’t really
have much other than a slider gallery on the home page but what I want to do is add some visual buttons or links if you like some remove this down and I’m going to add an image okay so let’s go and upload some images to use as our visual buttons okay so on empty folder here that I’m going to put them into and upload images and I’ve created three images already it’s going to upload Thoreau’s just take a few seconds and we are done okay so I’m
going to take the tip of that and use the necklaces one first and add two Fletch okay so I’ve got my first visual on here I’m going to drag this down I’ve got some space and I’m going to pop this just here I’m going to make this much display so what I want to do is add a button to this so add button and I can just choose one that serve roughly looks like I want so I kind of like just a rectangular one that I’m going to spread all the way across
to put in okay I’m going to change the color that doesn’t match with my website so come to my sign don’t want it to be a gradient button just a really plain color I’m going to make the background white and just drop down that epatha T maybe about 50 ish and I’m going to change the text color for black and the salt is disgusting but don’t worry about that I’m going to make it a small thing instead okay and the whole bar just see what that is gray
maybe I just like that alright so now that we have this one ready what I want to do is I’m going to make this one linked to the right place first so mixes it can be practiced okay add a link and I’m going to link this to the networking page alrighty that’s done and also I’m going to link the images well if I click on the image and Liz Lemon confuses my link button and this is going to also link to the necklaces page okay now I have my very first
template and actually I’m going to take the shadow of that because that looks to be all right so now I want to select these two elements and I’m going to copy and paste let me go to that one and in the center of the page so now I’m going to change this image to my bracelets I’m going to change the link and it can be linked to bracelets and I’m going to change the button and it’s going to be cooled slow flip and it’s going to be linked to
bracelets done okay and now I’m going to select both elements copy paste go and I’m going to just click the image change this to earrings to go link it to earrings okay change the button click airings ecology dividers stop that correctly okay okay I’m going to go into preview and to show you how this all works okay so in the menu I have a non clickable header with sub pages that are clickable so I can go necklaces and it shows me the necklaces
page besides I go back to home I want to show you the visual buttons that we created it for the home page so if I click on necklaces it takes me to the necklaces and this is the swap image feature that’s quite cool and if I go to earrings and I just click on the image rather than the button it will still take me to earrings so hopefully that was helpful guys if you’ve got more questions for me give me a shout and if I have time I’ll make a
tutorial for you you