How to Use Wix in 2024: Complete Wix Tutorial for Beginners

hey there everyone today we're diving into an awesome project that is creating a pet store from scratch using Wix I'm here to walk you through every step of the way highlighting the cool features Wix offers and how to customize them just right and even if you're trying to start a business site or maybe a personal portfolio instead these tricks will still come in handy I've made sure it's as simple as possible to follow so whatever your expertise with site making is you're not going to feel lost and you'll be right at home and if you don't have wig you can use it for free by clicking the link in the description just a heads up though if you want your site to go live you're going to need to buy a domain which does cost [Music] extra good news is our link gets you a 10% discount I do get compensation when you use the link but remember just getting a domain doesn't get you all the cool features like being able to accept payments or unlimited bandwidth those come with the bigger plans so if you want the full experience you might want to look into those that being said though let's get started so it's really easy to actually start making your site on Wix because you're not bogged down with too many details all you have to do is click on get started from their homepage then it'll take you here to create your account and once you've done that you'll be taken through a tutorial but since this is a tutorial I'll be showing you all of this myself meaning you can just skip these two pages you'll then be greeted with the dashboard but there are still some more questions questions you'll be asked like the name of your site not really important right now so just go ahead and skip the next three questions as well because we'll cover them as we go along and then some so once you've skipped all of those you can finally continue to the dashboard from here go to the top right and click on design site where on the next page you'll be asked whether you want Wix to make a site for you or if you want to do it yourself we're going to go with the ladder following this we'll find a page where you can look for a particular template to make this easier you can look through the categories up here which include business sites stores maybe your creative so you want a site for your Arts Community sites are great for tutoring or wedding Caterers or perhaps you have a Blog in mind whatever it is you can scroll through the templates available and you can preview it by hovering over it and selecting view from there you just have free range to check out this site and its entirety to see whether it's something you like and if you do you can go to the top right and click on edit this site to use it otherwise you can go back to templates furthermore on the right side of the sites or the page rather you can filter through which templates you want whether that's all of them the blank ones or see which templates are new and most popular now we're starting from scratch so I'll pick the blank ones and as you can see now they're more cookie cutter where you can place your content directly I want the entirely blank one so to use it like we said just hit on edits on the next page you'll find the Wix creative dashboard where we have our tools and other settings that'll Aid Us in making our site most importantly on the left hand side our tools consist of the elements where you can grab all sorts of bits and pieces like pictures text boxes and cool buttons to really personalize your site and more that will find out soon now the sections tab consists of just that different sections that you can ad Wix has some templates that you can use but you can also start with a blank slate next up is where we manage our menu and Pages which is super convenient that it's in one place as you'll come to find and just below this is the site design where we can choose the s's theme and also mess around with the color palette below that is the Wix app store which we'll need to use later on to be able to add items to our website and more and generally the wig store app is is such a Saving Grace because it really makes everything so much more convenient but we'll get to that eventually now the my business tab helps you manage your online shop and website offering tools for selling and talking to customers as you can see here it already includes the chat box this already helps you keep track of all of your apps which you'll see once we add some the next tab is the media tool which is where we'll be adding pictures and they'll be stored here subsequently and lastly is the content management system which helps you keep your website's text and pictures neat and lets you update your site easily however it's not something I can really do justice in this video because it's a very deep system that requires a video in of itself so subscribe to stay in the loop for when I upload that it's also not integral to this tutorial either so we'll be fine moving back to the top here we have a section where we can easily switch between the pages on our site to the right of that you can also switch layouts between between desktop and mobile wig does a pretty good job of adapting the desktop changes you make to the mobile site but we won't be focusing on the mobile side of things but you can switch layouts as you go along to see what it looks like above this Insight you can save preview get feedbacks from Wix themselves on your site publish and then view it on desktop but also get a QR code to see what it looks like on your phone in settings you can work on your SEO and update your business information in Dev mode you can add code and in help you can search the editor and the editor help center on the right hand side you can save your progress preview the site in another tab then publish it once you're ready a NE thing about Wix is that if you hover over a section on your page and click on quick edits here you can see an overview of your whole site and quickly replace certain Elements which we'll get into once we get plug in away which brings me to my next point so every site has a header footer and the content in between to get started with making our site let's begin with customizing the menu to do that head over to the pages and menu tab and create a few menu items now go to the top right of this window and click on ADD page from here you can select various templates ranging from an about us page to a 404 error page since we're using a blank one we'll click on blank page in the top left and then it'll take you back to this window to name it I'll call this one pet Essentials and then hit done and there you go one page is made we'll revisit that page later on but now you know how to do it and so I'm just going to use that same method to make my health and grooming and accessory Pages now that I've done that I can add these to my menu by going to the elements tab up here and finding the menu and anchor section here you have a variety of menus to choose from whether that's themed which means it's handpicked to match your sight's theme then there's the horizontal themes which are presets that have different colors and designs designs and the same idea also applies to the vertical menus too moreover an anchor is something that you would use if you want to direct a customer to a specific part of the page that they're on instead of taking them to a whole different page now the great thing about Wix is that it's drag and drop so to add something to my preview I'll just pick one of the themed menus and drag it over to the right and drop it into my header it's also very convenient that Wix immediately applies your pages to your menu items saving us some time you'll also notice that there's this orange highlight on the header which means that this is going to be present on every page anything highlighted in Orange is consistent throughout your whole site and this purple highlight means that it's just for this page additionally these grid lines here are the boundaries for smaller screens so anything outside of them might not show up on the mobile or iPad version of your site for example but if you want to alter any of these changes well you can simply adjust it in the mobile Tab and it will adapt accordingly fortunately like I said Wix makes it accommodates the layout as you can see here for the mobile version the menu is organized into these Stacks so just keep that in mind now let's head back to our desktop editor and put the menu in a better spot further to the right works for me since it just makes sense in my head but you might want it to be centered or some other version of a menu I haven't thought of following this I need to add my logo so we'll head down to the media tab here you can search for stock images upload your own you can also edit your photos and make videos with this option and then the rest of the things here are stock photos and videos to upload something you can click on upload media right here or go to the top and click on upload media from there it'll pop up with this window where you can find the file directly or just open the file up yourself and then drag whatever images you have the pictures I have are some that I found so in case that you were wondering well they're just something I found on Google I always recommend though to gather all of your images in into one file so that you can easily access them and save yourself time so what I'll do is drag all of these pictures into Wix so I don't have to keep going back and forth all right so now that all my photos have been transferred over to Wix let's apply my logo to my website so this is my logo right here whiskers and wonders I made it using a website called canva you can edit photos and do all kinds of cool things like make logos with it so if you want to try that out I'll put a link to that website down below in the description and if you want to use an AI bot that just makes it for you you can use a website called photo leap where you can describe what you want the photo to be and it will make it for you so I'll put a link to both of those websites in the description below so to apply any of our pictures to our website just click on set picture and I'm going to add it to Page using this blue button now this whole header has been resized because well the picture is bigger than the header so to resize our photo we just want to grab it by the edges here and then minimize it now the rest of the header has also been expanded so to shorten it a bit we just go on to the edge of this rectangle and then we minimize it now these notifications that you have here are just um kind of warnings so that you know okay you're doing this this is what the uh consequence of that will be um so just don't pay too much attention to that if there's anything you need to know I will make sure that you know it so we're just going to readjust our header up here and make sure that it is to our liking so just make sure that it balances out very nicely and so now now let's take a look at what this header looks like in a preview so we know what it would actually look like when a customer or viewer comes to see it to do so just go to the top right and click on preview and you can see everything without all the clutters so that looks good to me let's go back to the editor now so to do so just click on back to editor in the top right the next thing you should know is that you can rearrange the menu items so if you click on the menu you'll see a whole toolbar that we'll get through as we go along through the video and to manage the menu click on manage menu here and to switch things up you can just grab it and then move it over top of another one like this so that's generally how it works nothing too complicated but I'm just going to keep the same essence of what we had before so pet Essentials first and then everything else afterwards so that's how you rearrange the menu now what I'm going to do now is I'm going to go to the footer and start adding things to the footer so we can get those two things out of the way the header and the footer are the most let's say menual tasks that we have and then we can get to the fun part which is customizing the middle part part of our website and everything else now before we go ahead and customize our phoo there's an important thing that we need to do so we need to go to the top and click on our main menu and select this settings button because when we click on it it's going to ask us if we want to set this main menu to be Advanced and we do because this allows us the freedom to add individual items to our main menu and our footer menu without having any crossover trust me it saves you a world of a headache so now we just go to the uh pages and menu tab we add a first page that is the address page and I'm going to add the rest of the pages well in the background obviously so we're just going to create this page click done and now I'm just going to add the three other pages that I have in mind which are the socials frequently asked questions and privacy in terms of service so now we're going to go back to our elements up here click on the menu and anchor and we're going to drag them down to the footer and I know you're thinking well you just said there's no crossover between these menu items well don't worry I got you covered so click on the settings and you're going to have to set this one as advanced as well and there you go now it's adapted to have the other items that we included now I don't want to have the home uh menu item on here so I'm just going to click on these three dots and I'm going to hide this from my menu now I don't have the privacy in terms of service items so we're going to click on ADD menu item site pages and we're just going to find it so privacy in terms of service we're going to apply it and there you go who's working for you buddy all right so let's touch upon the other items on this toolbar so we already know what the manage menu does the navigate allows you to navigate to other pages that you have made the settings well that's just how you uh activate the advanced menu the layout is also very simple so this allows you to determine the uh spacing and alignments and how the text is set up and which direction the text goes now what these two options the wrap and scroll mean so basically if you have too many items in your container this orange rectangle is the container then it will put the rest of the menu items on a line below that so if you fill out this container it's just going to put something below that so it's going to start a whole new line and the scroll is if you have a lot of those items it's just going to allow the audience or the viewer rather to scroll through the rest of the menu items so it's simple as that and for the rest of these things well it's just your typical spacing and Alignment options like you see here you can move these to the right to the center and then the text can be reversed to be in the other direction of course we're not in Japan so we're going to keep it left to right and that's how that works now the submenu allows you the option of making a drop- down menu so if you want to drop down menu for one of these options then you can do that from here and the mega menu is not really something that I've used as it says it's a more robust version of a menu but we're not going to dive into that because similarly to the um to the CMS settings it's very complicated so we're not going to touch upon that I don't feel like I can do it justice now the next thing is the design so the design is similar to the menu options we had in the elements tab so you have the other templates and the presets that they've made for you and so it's not too detailed there but once you go into the customized design section you can customize very very specific things such as the background the borders Corners shadows and the layout now I don't use this very frequently but if you want to touch upon those areas then you can customize it to your liking and be more specific and the menu containers so essentially what this does is as you can see I mentioned in the container so this whole rectangle box is the container so you can customize that entirely or the menu items individually so if you want to touch upon those different aspects of your menu then you can do so but for now we're good to go and then lastly is the animation or second to last uh the animation option allows you to customize how this menu pops in when someone visits your website or reaches that part of the page so it's pretty neat we're going to use this on different parts of our website we don't need all this fancy stuff for our uh footer so we're going to keep it simple and then lastly is the stretch which I actually want to use so what this does allows you to stretch your menu items across a certain section so let's do this so to do so you click on stretch to full width right here you enable it and you can see how it spreads across now I want to keep it a little more to the center because it looks awkward if it's too far apart so we're going to bring this a little closer to the middle and 66 works just fine so there we go now we have spread our menu items and the next thing we need to do is just give ourselves a little more room in this section so we can put some other information and the first thing we need to cover is our address so we'll start by adding text which means we head over to the elements Tab and the first option is the text we have our themed text which we already know about then the titles which are essentially just different fonts you can pick from then the paragraphs which we're going to use as well as some collapsible text to include the info but save the space and lastly is the text mask which allows you to place a background or picture behind your text like they do here now let's head back to the paragraphs and drag this block into our footer to find the format options you click on edit here you can change the heading depending on the size that you want the font is also below here so you're not stuck with the one that you chose from the elements tab right under that is the size of your text which we will increase this right here is your typical bold italicize and underline as well as changing the color of the text there's two options that allow you to change your alignment as well that being here and the line spacing the effects are similar to The animations you just change the texture and depth of your text lastly is your vertical text which is pretty straightforward enable this so it's vertical to undo things by the way I figure you should know you just hit this backwards arrow in the top right and to redo it you just hit the other Arrow going forward and I will undo this change because well I don't want it to be vertical now I'll just include my address and edit this to be slightly larger and bold so that it stands out it takes some tries to get it lined up which is why I use the preview to make sure it fits just right so now that I've set the address and lined it up we can go ahead and add our socials which you can find in the elements Tab and head down to social to find you have a variety of individual platforms to pick from like Facebook or Pinterest but I personally go with the Social bar since it has more variety so we'll grab this one here and drop it into our footer now to add your own Social Links you just click on set Social Links and then you select any of these platforms go to the right here where this URL is and then you would include your own URL you can also change whether or not you want this to open in a new window or a current window I recommend a new window so you're not taking your customer totally off your site so when you're done with that just exit of this and then click on done now the layout options gives you the option to change the icon size and spacing as well as making this horizontal or vertical now I'm not going to make this vertical in my footer but I will make it vertical in another part of my site so what I'm going to do here is rightclick and when you right click you get a variety of options so I'm going to make this duplicates and then layout again hit vertical and then we're going to drag this all the way to the right side of our page right to the edge and then we're going to right click again and then pin this to the screen now it's going to give you an option to set where you want this to be pinned can at the top which obviously you won't do or to the side now I'm going to leave it in the middle right there and then once you're happy with whatever alignment you want you just hit X right there and then now when we go to preview up top we can see how this stays put when we scroll through our site so it's pretty neat not a huge Innovation but still something worth trying out so let's head back to our editor now the last thing we need to do in our footer is just to add some text below the FAQ so we'll go grab some paragraph text from the elements drag it into the footer put some text in there something about go check out our FAQ or something adjust the size and then simply align it to balance everything out there we go so now let's preview this sucker one more time to see how everything's looking before we move on I just want to make sure that everything is balanced when we go over here and from the looks of it we did good the main menu is set up just right and when we scroll further down to the footer all of our edits were applied nicely and we don't have to worry about the menu now if I click on the FAQ for instance it takes us to that designated page of course we have nothing on here but it works which is the most important thing so now let's head back to our editor and change the site design though right now we're still on the FAQ page so just remember to check which page you're on when making edits by going to the top left and selecting it I'll go back to the homepage in this case from here head to the site design tab which will be the fourth one down first let's check out the site theme so what these are is a variety of themes that you can immediately apply to your site for example let's go down and pick the natural theme and you're also not stuck with this theme either you can go back using this backwards arrow and click on color theme to change the palette itself adding your own flavor by clicking on these bars and tweaking it to your liking now these up here are your base colors so these affect your background and text then the accent colors are colors you pick to make parts of your site stand out like buttons and links going back now the text theme allows you to pick the font for both your heading and paragraph text across your whole site a cool thing about this is that you can add languages really easily just by clicking down here and selecting it and you can add your own fonts too if you want so you have quite the variety of choices here now the page backgrounds are exactly what you think they are you can select a whole image to be applied to your background or even a video as you can see here when I click on this picture it takes over the whole page it's not my cup of tea in particular but maybe you can find a use for it and lastly for this section we have the page transitions which is also pretty straightforward you can spice up how it looks when a customer switches between pages of course all my pages are the same now so I can't really show you the difference but perhaps later on I'll come back to this and there you go that wraps up the design tab let's get to stripping now and by that I mean going to the elements tab up here and heading down to the strip option now you do have some feature templates available to you but we're not going to use those because well we're starting from scratch and we want to make this our own so I'm going to grab this place it into the preview and I'll just minimize this a little bit and you have this toolbar here that is kind of arbitrary because it changes once we've added a column so just stick with me so you can change the strip background similar to the site design over here you can uh customize the background scroll effect someone Scrolls past this it can either fade in or Fade Out we'll play with that as well then we have the layout which is how we can add a column this gets in a little more depth once you've added a column so I'll touch upon that in a second then you can change the shape of the strip so there's that option as well it's very flexible which I like but I don't see any use for this for this tutorial at least then the last thing is the stretched so you can either stretch your strip to be the width of the screen or the width of the page so you can see what you like what fits you better now we're going to right click here and I'm going to add a column now you can see that the entirety of this strip is changed because we can't change the strip Background by itself so we have to click on one side of the column and now we can do so so we can manage the columns in a different way now so we can add a column through this or we can select which column we want to use by either clicking on it or just picking which one we want from here now we don't need any use for that right now we're going to click on this column and I'm going to change the column background and I'm going to click on color right here and the theme colors are obviously the ones that we selected from a moment ago so it's very handy now I'm going to select an orange background for the left side and on the right side all you got to do is just click here change the column background go to Colors again and then I'm going to go with something a lot more peachy and there we go so we changed the back backgrounds now the next thing we need to do is we need to add text and pictures to fill this section out a little more and as you know to do that we got to go back to the elements tab at the top left here and select one of these headings so I'm going to go with the third heading because it's a nice balance between the other sizes and here I'm going to be promoting pedigree so I'll write something in relation to that and that should be perfectly fine now let's just adjust this to be in a perfect spot and the next thing I need to do is just change the font because I'm not liking the avenure light we'll go with the azer mono and then change the size again and of course when you change the size of anything your strip is going to change accordingly so you just grab it at the bottom here and just drag it a little higher up and then we're going to just make this bold really quickly and take advantage of the space we have in this column so I want to make sure that it's all aligned and then spread it across the rest of this strip so you might as well take advantage of it because we want it to be front and center and something that our customers can see and that looks to be perfectly fine for me now I'm not sure about the font I think this might just be a result of the font yeah so I wrote it per perfectly fine the font just makes it look like that so yeah there we go so we added the text now the next thing we need to add is the pictures on the right side and again of course like clockwork we go to the top left in the elements head down to the image and here we just want to go to our library which is the site images and click on show more so I'm just going to scroll through this to find a pedigree product there we go head to add to page and then all I have to do here is just to adjust the parameters or the size of this picture now this is relatively easy to do the most important thing is how you want to adjust this because I'm going to add two other pictures in this section and now that I have done that I'm just going to go add the other two pictures and then we'll proceed with the rest of what we need to do all right so I added the other two pictures and you can see how they're all line up perfectly fine but there's another piece missing here and that is a button so we're going to swoop down to the buttons or swoop up to the buttons I suppose and that's in our elements Tab and we're going to go down to our third option here which are the buttons so we're knocking these down as we come across them so you have similar to these other sections that we've touched upon you have various versions of buttons in various versions of this particular object that you can try out there's these different icon buttons that you can look look through and images that you can try as well but uh what I want for my uh strip here is to add a themed button right here so we're going to grab this and we're going to drag it oh not that far whoopsies we're going to drag it right here make sure that it is centered and not out of place all right so we're going to move that a little bit to the right now there's a key thing that we need to do here so we need to name it now of course just like the other sections we've touched upon you can change certain things on this toolbar so you can change the layout which involves if you want to have the text if you want to have the text and uh for example an arrow which is the icon and you can change where the icon is pointing like that for example but we don't want to do that so we're going to have the text only and I'm going to align this so of course this comes in handy so align it in accordance to well naturally where you want it to be but I don't know why you'd want it to be out of alignment now you can also have only the icon or you can have nothing which isn't the most efficient but it doesn't look great but hey people have different taste and you can change the design here so similar to what we did with some backgrounds we can check the customized design options and you have the same kind of tools here so you have the background fill so you can make this black background you can change the text the font and the coloring here and it's very similar to what you did with the uh with the text here so nothing too different but it has the same kind of essence that you can customize it yourself and you have a lot of options here corner shadows and also whether or not you want the icon to be shown at all but we touched upon that uh earlier on in the in the layouts now what I do want to do is I want to just change the text here so we're going to change this so we're directing the viewer or the customer to where we want them to go so we're going to change the text here and I'm just going to write check it out and that looks fine no spelling mistakes and now what we want to do is click on here because obviously you want to send the customer to the right page so you click on links to choose a link and I want to send the customer to the uh to the pet Essentials so to choose a page just click up here this uh well the settings the menu options here will pop up or you can add a new page if you want if you want to do it uh two onone which is very efficient like I said Wix is very efficient I love how it works now what I want to do is click on pet Essentials and click done here and then now when we go to our preview it will take us to that page so we're just going to exit of this let's check it out in our preview and we're going to click here and it takes us to that page so let's go home and go back to our editor so we've made our first strip we've customized it and now we just got to do the rest for the subsequent sections on our page so let's get to it and let's get plugging away so to do that we go to our elements up top again and then we go to strip so we pick our first strip bar is that going to get me in trouble no we'll go with it so this is our strip bar and place it into the preview and I'm going to it's a little awkward right now so we're going to have to readjust the edges here so we're going to have to pull up the strip here from its box and then once I adjust this we're going to to do the same for the section bar so the section bar is just just below here and you can grab it by grabbing these arrows and pull it up and you'll know when it's in line once we have this this highlight yeah so we have like a faded highlight over this strip bar I shouldn't probably say that too much but now we're going to add a column so we're going to add a column by right clicking and adding a column that way or just going to the toolbar and adding it through the manage columns option over here I'm going to add text so I'm going to be promoting some uh automatic dog feeder so we're going to grab our text we're going to go down here actually I'm going to take the big title place it right here and you'll see what I'm talking about once I just put the picture we're going to get there eventually so I'm going to put massive capacity as one of the qualities of this dog feeder and I'm going to change the color so I'm going to make it peachy as again to match our theme now it doesn't seem to show up so if it doesn't show up just highlight the text itself go back to the colors and then click on it and then it will work so keep that in mind in case it's not showing up okay so I've adjusted the text box I've aligned it now let's go and right click here I'm going to copy this and I'm going to paste it into the other two columns so I don't have to go back to the elements Tab and then do this all over again so it makes my life a lot easier so now that I've done this I'm going to go ahead and add the other two uh descriptors for my dog feeder and then we'll get to actually making that section itself and to add the section we're going to go an alternative route so we're going to add the section using this button here just hovering in between sections and as we did before on the left hand side we can grab these templates but we don't like to live life easy we're going to grab a blank section and after I adjust this again I want to add some text which is obviously crucial because I want to name my brand of feeder to be fair it's not a dog feeder in particular it's just a general feeder so I made a mistake there don't crucify me and the feeder is named as such now I'm going to save you the time of me editing this because it's not important for you to see and then we're going to add add a button so we're going to add a button here so we can link it to the accessories page but we'll do that in a second so I'm going to just place it here change the name and it's going to be find out more we're going to go with that instead right and then I'm going to save you the time of watching me adjust that again and the next thing is to add the the the image that we need now the dog feeder I made sure to grab a PNG you want to make sure the pictures are as clean as possible you don't want to have any of the background so as we've done before we go to the library and we scroll down there is the feeder and I'm just going to minimize this again it's actually kind of fun to minimize these things cuz it's just a really easy layout so again we're going to save you the time of watching me adjust this but now what we need to do is add a link to this button so go to the toolbar click on this link and then as we did before choose a page and we're going to link this to my accessories page and then there we go now we have one more thing to add actually before we go on I just want to talk about this sidebar because with this you can move entire sections up or you can move them down according to what you want and then the quick edit option actually has a little more depth to it all of the uh content within a particular section is here and you can change it from here and I want to change the background section color so we're going to go on color and I'm going to choose the peach color because I want it to be in line with the rest of my theme here now we're going to go back and following this we're going to add another section like I already mentioned and we're going to use the method that we use used for the previous section and here I want to include a digital book or an ebook I suppose and we're going to first add the picture of the particular title that I want and I know it's at the bottom here because I saw it when I was yeah this is the one so we're going to place this over here and I'm going to make sure that it's on the left side just to add some variety I don't want the site to be Bland and I'm going to save you the time uh of me editing this and the following thing is just the text because naturally like I mentioned these are this is one of the three elements that I typically like to have on my page and I'm going to save you more time on my editing because well nobody wants to see my OCD and lastly to download this ebook I want to add a button now we're going to talk about this once we're adding contents so once we're adding our products I want to include uh how we can actually add digital products and we'll get there very soon so I just got to name this here and then uh make sure that I align this to be in place and there we go so now the next thing we need to do is start adding our products which is a very crucial part and we're well over 50% of the way done and to add the e-commerce part of our store let's head over to the elements tab of course where else would it be and we want to find the store option which is located near the bottom right here we're going to click on the add to site button here and it's going to start installing the Wix store to your sites and when it does install you'll have this really sweet template for you to play around with you can change the text the pictures the prices essentially you have the freedom to adjust this to your liking and we'll do that soon but on the left side we have these filters and uh categories and up top are the profile and uh cart or bag features which will have to change in a bit now when we look at this without all the Clutter we can actually see this as a functioning site there are rotating pictures this price bar works as well so generally this really improves our quality of life and saves us time on working on something for our site so I mean I couldn't be happier trust me but that wasn't the only thing that was added throughout that installation process because if we go to the left hand side we'll see a new category called store pages in our Pages section so we have the product page car page and thank you page now the product page is as it says the description for the individual product so the customer can get a closer look at this one product in particular see the description and the return and refunds policy then the next thing is the car page which is pretty self-explanatory once the customer clicks on the bag here it's going to take them to the car page and they can see what's in their car and afterwards once they've actually bought a product it's going to show them this thank you page at which point they've confirmed their order and they're good to go and the last page that Wick's added is a member page all the way down here for people who have an account and want to log in or want to create an account and check things like their orders address and update their information and essentially they can track their order status and things of that nature but now let's go back to the homepage so we can change the location of those profile and card icons because I'm not liking where they are right now and it's not that hard to customize all I did was send them to the far right and made sure that they weren't intrusive but that they were present and that they didn't distract anyone so I made a F balance between the two and the great thing about this is that once we click on this the drop down menu of Our member page is going going to show up and essentially they have access to that as well so once they click on that they can look through what they want and yeah giving that option is always key because you want the customers to feel like they have control over their purchase and their account in particular if they made an account with you and the card page is crucial to have because well you want to get the customer to the checkout as soon as possible and now we're going to get to adding our products it's about time so let's go to the top left where it says home and then find our way down to the category page right here and the reason why we're doing this is so we can access a few other features that we need so first off I'm going to click on this right here and then I'm going to click on manage products on this left side and from here it's going to load up a little bit and then it's going to show you your products dashboard now the products that you have here are all just the presets you might have seen them when I added the products a few moments ago but we're going to just delete all these by clicking on this box up here and then heading over to more actions and then deleting them very nicely now from here on out what we want to do is we want to go to the top right actually and you'll have two options here physical and digital I'll get to the digital in a moment but it's very similar to the physical product so it's not too much of a hassle now the first thing you want to do when you add products is you want to add images and the process is largely the same as it was when we were adding pictures uh beforehand so you just go down to find your picture this is mine and then you just click add to page over here you you can also add some more pictures if you have them then down below I'm going to add a name for my product and then the ribbon is essentially standout words for something for example if you have a new arrival or sale you can make it look a little more snazzy then down below is the description which just gives more context to the product I'm just going to place my own description here that I may or may have not copied from somewhere else but that's okay this is a tutorial so don't worry about it and down below is the pricing so this is very simple you input the price for your product and then if you have a sale you can enable this option right here and then you can put the discount that you want to place on that particular product and then down below is the cost of goods which is how much it costed you to provide this product then you have the profit and then the profit margin on the right side I can't tell you what those would be because those are totally personal to you and highly customizable but down below you have the product options which are the variables for your product such as size color weight and I have size so I'm going to input my size which is 12x 100 G and then once you're done with this just make sure to hit the enter button so that it actually saves it and you hit uh add once you're done with that if you want to add more variables you can click on this option right here or to manage the pricing enable this and you'll have all the variants of your products in this particular section you can track the inventory by enabling this as well and you can input how much you have in stock or disable it and you can choose whether or not you want to label it as in stock or out of stock if you just don't want to input how much you have on your site and then down below you can edit the variants you can just access that page we were just on by clicking on edit and then you have the pre-order options as well and then the subscriptions although I don't really find that's too important for me to talk about right now now if we scroll back up on the right side we should address this you have the product or Tax Group which we'll touch upon soon once we get to that section and down below is something you can add such as the brand of your product this is a pedigree product so I'm just going to label label it as such and yeah so that's basically all we have for the for the products and how to add them I'm going to just add the rest of my products and then we'll get to the categories in a quick minutes and now that I've added my last product let's go back to the products dashboard so we can add that digital product and you do that just by clicking on this product tab right here and to pick the digital product like I mentioned earlier just go top right and click on digital file and similar to what I've said in the past the information is very very similar to the uh physical product you just don't have the pre-order and subscription options but I'm sure you'll get over that now what you need to do the only difference is by clicking here you have a variety of files that you might want to upload I'm going to click on the audio file cuz that's what I'm going to upload to my website I'm going to grab that file oh wait almost grab the file and place it into this and let it just process the whole file itself once it's done doing that all you do is just click on it go down to the bottom right adds a product and there you go much like what we did with the pictures now all I have left to do is to add the rest of the information here and then we'll go back to our product dashboard and now we're going to add some of those categories so to go to your categories it's pretty simple go to this third tab click on the big plus sign right here and the first thing on our list is to add a category name this is going to be pet Essentials down below add a description to add some context to this product and over here on the right side you can add images to include for your banner so it's just going to include a banner across the top of the page like this and then finally is to add the products so to add products you click right here and then you pick the products you want now I want the pet food so I'm going to click on those by clicking on these circles check marking them and then when I'm done hitting add now all of my pet food is in this category and I'm set to go and lastly when you're done just make sure to save it in the top right and then it's going to take you back to the the categories dashboard now what's left for me to do is to add the accessories category and then we're going to place our categories onto our website with that added now let's head back to our website and go back to our homepage before we focus on this right here because I want to add a category gallery to our homepage first so to do so let's head down and find a nice place to put this I'm thinking right between the pet feeder and the ebook now go to the blank section in the top left of course we've done this before and then it's going to open up a whole different strip so we're going to head back to the elements tab go down to the store section and in the store section you have a variety of templates and Galleries and presets that you can use and apply to your site it's quite flexible so you can be quite creative with them uh in terms of what I'm looking for I'm going to use the slider product gallery and you'll notice once I place this on my website it already has applied the changes to my categories and products list so now I just need to adjust that and then I'm going to add a piece of text up here just labeling it as let's say what's hot so just to give it a little more flare and now I have to change the color of that strip just so it actually lines up with the rest of the page and doesn't look too basic let's say and with that taken care of let's add our pet Essentials category to our pet Essentials page so go to the top left click on the pet Essentials Tab and now once this loads up go to the elements Tab and we're already in the store section so easy enough we're going to grab the grid product Gallery because it provides all the products we want now you'll notice that we have a combination of all of those products including the accessories and the pet Essentials as well as the audio or ebook rather and I don't want that so to change that choose the category and then you're going to get a grid gallery of all of the categories you've made here's the pet Essentials one I'm going to close this and then you'll notice how we only have the pet Essentials so really it's as easy easy as that now the next thing to do is to add some spice to this and the way we're going to do that is by clicking on the gear up here in the tool box and the first tab that shows up is the category tab which we've already talked about so I'm not going to go into too much detail about that the next tab includes certain details such as product descriptions now I have most of these checked off except for the name and price divider and that's how it looks when I have that activated below this is the image hover effect which is the effect that appears once someone hovers over an image for an item following this is the view more products option so if there's a lot of products the customer can either click on the load more button or the pagination which allows them to scroll through various pages and then the infinite scroll is pretty self-explanatory they just scroll until there's well nothing left to show underneath that is the add to cart button which displays the option to add to cart from this page so they click on this and then it will go to the cart in the top right and then there's also the option of the determining what happens when they click on that button I like to keep it on this page because it allows the customer to keep scrolling through the rest of this page picking other items and including quantity so they can keep track of how much they have in their bag and then also you can show options like the size and pick how much of this item someone might want now the layout tab allows you to change where this information is placed so you can stretch this to full width which I don't personally like because it just looks really bloated and then down below this allows you to change whether you have words in your product description or just no description at all and I like the third one personally because it just looks the cleanest and below this is the product alignment which is something we've already covered a 100 times already underneath this is the grid Behavior so if you choose fixed you set up how many columns and rows there are as opposed to responsive which adjusts the amount of rows and columns to the size of the customer screen which I personally prefer then down below here are just the image placement options and you can resize it and choose the image ratio as well and in the next tab you can change certain text within the add to car button or the pre-order Button as well as the add of stock message and so on and so forth following this is the design tab which has a lot of depth you can change the background the borders as well as the shading so there's so much depth here you just got to dive into it and play around with it next up is the filters so the filters show up on the left side and you have some options from the presets but you can also add your own filters from here or hide some filter fils if you don't want them to show up either the sort by options is similar to the filters except this creates the filter for the category based on their price or name and lastly is the quick view now the quick view shows up once a customer hovers over an image and then they'll get a little looky into what the product is all about and you can customize everything about the quick view from there now all I have to do now is just adjust the size and parameter of this I'm going to add the title labeled as the pet Essentials and now what's left to do is to move on to the more technical aspect of this which is the policies the shipping the payments you know well basically the last part of this video so how about we get into it the first thing I'm going to show you is how to set up payment methods and accept payments now to do that head over to the left hand side and click on manage products then go down to settings from the dashboard and then head over to accept payments on the right heads up though in the top right you'll see the business location make sure that the business location is in the location you're selling your products from and to connect a payment method you just go over to the right hand side where it says connect simply and then from here I'm going to enable all of these payment methods so I can give the customer the option of which one they want to use and make it more convenient for them overall and when I hit continue we'll confirm that you do need to upgrade to a business and e-commerce plan to actually start accepting payments however it is totally worth the money and investment and you can take advantage of that 10% discount code to upgrade because let me tell you it makes life a lot easier and it'll get you on the right foot immediately and once you've purchased it go down to complete setup right here and the reason for this is you need to fill out this form to be able to receive payouts it includes information like your address your business details and your bank account information and on that note let's head back and talk about how to set up shipping details now the shipping details are on the left hand side this time and once you click on it you'll notice that there are two different regions already provided for you so you have the domestic and and then you have the international if you want to add another region go to add region right here and you can do so by clicking on ADD destination I'm going to go with the fictional country of Canada in this case and once you have selected your country you can also choose which parts of that country or regions you want to sell to by clicking on edits and then you can select or deselect any of the regions that are provided for you once you're done that go down to select the shipping rate you have anything from free shipping to a USPS calculated rate I prefer the flat rate to keep things consistent first thing you do is name it and then if you know the estimated delivery time you pick that you set up the rat and then I like to offer free shipping when a customer buys over a certain amount so I go on $50 just to incentivize them to buy more and when you're done that go to the top right and hit on Save and that's pretty much all you have to do for shipping down here you'll see Canada which doesn't actually exist so I can't ship to it but now let's talk about taxes we all love taxes don't we but it's actually not so bad because once we go to taxes we can use avalara to automate our taxes for us so to do so go to the top right click on automate and then agree to the conditions you're just going to have to make an account with avalara and then once you've done that you go down to add location I'm going to add the United States of America add it to that and then choose which states I want I can select all of them or just one of them but I'm going to go with all of them and then go down here to make sure that it is calculated through avalara and not manually cuz good grief and then you add it and afterwards it's just going to generate all of these states the good 51 and there you go that's pretty much all you have to do just go down here to make sure that your taxes are either generated at checkout or it's already included in your price which customers would like because well free shipping so that's how I see it now let's go back and check out our policies now the policies are located in the e-commerce settings so just scroll down a little bit to find them and to open up these fields just click on the Box on the left now keep in mind that these are not actual terms and conditions these are just placeholder terms and conditions as well as the rest of the policies I've written here to show you how they look once we actually view them from the customers perspective and to view this from the customer perspective I want to show you that these are the checkout policies which they'll see at the checkout now of course uh we have to see that stage of the process of buying something and to do that we're going to go to the sites and in the top left we're going to view the site from the perspective of the customer so click up here go down to view site and we're going to go and try to buy something so click on pet Essentials well at least I will and then go to add something to carts and then you're going to see a bit of a preview of the product you're buying the quantity the size then I'll add it to cart again and from there you'll see what your cart contains and then you can confirm whether or not you want to proceed with your purchase so I'm going to hit checkout and then here are all the fields that the customer is going to have to fill out once they want to decide to buy something and at the very bottom you're going to see the terms and conditions and how they're actually a joke now yours definitely have to abide by legal processes and the law so make sure that you consult a legal professional before you actually go ahead and uh make sure people purchase things so keep that in mind now when you're ready to publish your site you just hit publish up here and then it will finally be live for the world to see of course like I mentioned at the beginning of the video you do need a domain to do so unfortunately you get one with the business unlimited plan which is another reason to pick it up with our 10% discount to lighten the load on your wallet and allow yourself the flexibility to do what you want with your sites and on that note we wrap up this very brief tutorial where you learned to add pictures Pages how to work a strip bar include menus and that the US apparently has 51 states this is all the essential info you need to know to get yourself started and sell your products in just under an hour if you guys enjoyed it please hit that like button and subscribe to the channel to help me make more videos like this one it takes a lot of time time and effort to put something like this together so it would mean the world to me and if you have any questions as well do leave them down below and I will get back to you ASAP whatever that means nevertheless thank you so much for watching everybody and until next time take care and I will catch you in the next one

Channel: Dropship Dreams

Views: 36,586

Keywords: how to use wix tutorial, wix tutorial, wix, how to make a website, how to use wix website, create a website, how to use wix, is wix easy to use, what is wix app used for, websites created using wix, wix website tutorial, how to use wix to create a website, how to create a website, wix tutorials for beginners, wix tutorials, wix site tutorial, wix website builder tutorial, complete wix tutorial, wix tutorial for beginners, wix website tutorial for business, make a website

Id: 01mqFSWq_W4

Length: 52min 45sec (3165 seconds)

Published: Wed Mar 27 2024