what's going on guys in this video I'mgonna show you step-by-step how tocreate an e-commerce website so thewebsite I'm going to show you how tomake has an awesome sleek design I'mgonna show you how to change thesebackgrounds how to change the text allthe colors how to change your buttonsand I'm going to show you how to createyour very own products with the productimages I'm gonna show you how to makesale items as well as show you how tocreate product categories for thesedropdowns so you can shop men-women andso on I'm gonna show you how to createyour my account page and set up yourcart and I'm also going to show you howto make your own logo for your websiteand you don't need any software to do itand I've also included a latest productsection as well as a sale productsection I'm also going to show you howto change these banners change thisvideo as well as the counter and set upyour own custom footer so withoutfurther adieu my name is Dale McManusI'm a web developer a youtuber and I'dlove to make awesome websites and I'mhere to teach it to you so think of meas your spirit guide through thistutorial I'm gonna show you step by stepwhat to do to come out of this with anawesome ecommerce website so wheneveryou're ready let's get started so beforewe begin let's just give this site alittle demo so if you wanted to go ontothe site and shop by men you could justclick on shirts under men and shop buyshirts and if you click on it it comesup with this awesome pop-up that allowsyou to select different colors or sizesand you're able to add them to your cartI'll also show you how to make theseitems go on sale I'll show you how toset up your cart page so that you canadd or subtract quantities of items fromyour cart and I'll even show you how todo cross sells and upsells which is justhow to promote different products beforeyour customer checks out I'm going toshow you how to change all of thesebuttons as well as their backgrounds allthe colors and every customization thatyou could think of I've also alreadycustom coded these sections so that yoursale products automatically show up downhere as well as your latest productsautomatically get added up here I'm alsogoing to show you how to use an awesomepage builder called Elementor to buildyour own pagesit's a drag-and-drop software and it'ssuper easy to use and the best part thiswebsite is also a hundred percent mobileand tablet responsive so no matter howmuch you resize it everything perfectlyfits within the window on your phone Ialso created a custom template forElementor that you can download in orderto get the look in the style of thiswebsite so before we begin we're justgonna need a few things first I'm gonnashow you how to get so first you'regonna need a domain name and a domainname is a must-haveyou really can't have a website withoutthis so normally this is about twelve tothirteen dollars in a year but Ipartnered up with Hostgator and got anawesome discount for you guys for thisit'll be about $4.99 instead so in caseyou don't know what a domain name is letme explain it so every website has an IPand that's just a random string ofnumbers so when you register andpurchase a domain name it's kind of likesaving your home address as home intoyour phone it takes this ridiculous setof numbers and assigns them a verysimple name that you can type in anytimeyou want to go there okay and you'realso gonna need web hosting web hostingis also a must-have normally it's aboutsomewhere between seven to ten dollarsin a month but again with this discountthat I'm going to provide you it's gonnabe somewhere around two to seven dollarsin a month depending on which plan thatyou choose so if you don't know what webhosting is let me explain that – webhosting is just a service that allowsyou to rent space on the internet fillit with all of your media and go livemuch like renting space out of ashopping center if you wanted to open upa shop so when you want to start a website all of your text pictures buttonsand so on have to be stored on a serversomewhere that's connected to theinternet no if ands or buts about it andweb hosting companies have buildingsfilled with these servers they alsoprovide you with design softwaresecurity and support next you're goingto need to install WordPress and this isalso free wordpress is just what we'regonna use to design our website andnumber four we're gonna need to activatea new theme and this isfree theme called ocean WP so wheneveryou're ready let's get startedall right so step number one is tosecure a domain name and web hostingplan all right so to do this just goover to hostgator.com and you'll seethis page pop-up just click on webhosting and Hostgator is an awesomecompany I've been using them for a whileI actually use them for all of my websites they are quick easy and affordableand they also have awesome customerservice and if anyone reads my aboutpage on my website I am all about no BSso I'm not gonna pitch you anything thatI don't actually use myself and I useHostgator for all of my websites alrightso once we're on this page we're justgonna scroll down and you'll see thehatchling plan the baby plan and thebusiness plan the baby plan is best ifyou have multiple domains you see itcomes with unlimited domain names forthat web hosting plan and business planis best for if you're pulling in a lotof money with your website you mightwant to consider switching there's a lotof awesome tools in the business planthat'll really help but for the sake ofthis lesson and if this is your firstecommerce site we're gonna go ahead andselect the hatchling plan alright so nowthat you're on this page you can enterin your domain name and if you alreadyhave a domain name you can just click onthis tab right here so if this is ane-commerce site I wanted to do my lastname a lot of people do last names askind of like a luxury brand sort ofthing but my last name is taken so if Iput in my last name com you'll see it'lltell me it's unavailable and it'llsuggest all these other ones and youknow dot Club that site I highlyrecommend sticking with a.com if you canthat's what legitimizes your website anda lot of people don't go to the theydon't think to type in dot site forinstance so what I'm gonna do is switcharound a couple letters in my last nameand do Mik Mason com which is availableand you want to make sure that domainprivacy protection is checked I highlyhighly recommend doing this I did not dothis on the first website that I everboughtmy phone got bombarded with solicitorstrying to sign me up for their plan todesign my website and all this othernonsense literally like ten phone callsa day it was awfulso I highly recommend checking that it'sonly $1 25 extra a month so you reallyshould do itso that is checked we're gonna go downto choose a hosting plan and we are onhatchling which is correct and here iswhere you can choose your plan so themore months that you do the less it isso you can see 275 here versus one monthwhich is 1095 all of these will actuallybe lower than they are because I workedout an awesome deal with Hostgator I metup with those guys and told them what Iwas doing and they put together anawesome coupon code that will save youat the time I'm recording this aboutsixty percent depending on which one ofthese plans you pick so I highlyrecommend going with the twelve monthsbecause you're buying your domain namefor twelve months so you might as wellbuy your hosting plan for twelve monthstoo or if you want to commit to thethirty-six and save even more money andthat is great but for the sake of thislesson I'm just gonna go with the onemonth just so I can show you guys how tosign up for this and get your websitegoingso now just create a username which forme is just going to be my name and enterin a pin and now you can enter in all ofyour billing info so you can also paywith PayPal or credit card so I'm goingto put all this information in right nowalright so scroll down and you will seeadd additional services and at the topyou'll see assure safety to yourvisitors and that's included free thisis an SSL certificate and what this isis this little secure tab up on the topof your website and unless people knowthat this is a safe websiteyou're not going to scam them especiallyif you have an e-commerce website Ihighly recommend leaving this checkedHostgator will do it all for you it'spretty awesome so we can also go downand uncheck protect your site fromhackers unchecked get your professionalemail backup your hard work and so on wedon't need these things right now if youwant Iother videos on my site that show youhow to get some of these things for freesorry on my youtube channel so if youwant to check that out go ahead and nowwe can go down and enter in our couponcode so it'll say something like shared3 6 6 or some sort of number just deletethat and you can type in create a prowebsite so this discount code is myaffiliate link with Hostgator and theyreally hooked it up at the time I'mrecording this it saves you about 60%depending on what plan that you chooseand this coupon code also gets me acommission which helps fund these freetutorials and videos that I put out soit's a win-win for everybodyso once that is put in you can hitvalidate and you can see our price justdrop so instead of a $15.00 domain nameit's now $4.99 and our plan per monthalso went down so again if you choosethe 12 months this would be more like a60% discount regardless it drops youfrom 40 down to 27 for this current planso once that's done we can agree to theTerms and just click checkout now allright cool so it says payment completedget ready we're setting up your accountso you just got to let it build for asecond alright and here we are so nowthat you're in the Hostgator customerportal which is also called your cPanelyou can now go up to the hosting tab soonce you're in hosting just confirm thatyour hosting account is on your newdomain name right here and the nextthing that we want to do which is stepnumber two install WordPresssimply put WordPress is just a softwarethat you use to design and publish yourwebsite or your blog WordPress is by farthe most popular website builder on themarket and it powers about 30% of theInternet WordPress comes with over11,000 different themes that you canchoose for your website and also over55,000 widgets and plugins to help youoptimize the functionality and the toolson your website and WordPress is freeit's an open source software so there'stons of developers all over the worldworkingit every day to make it better so toinstall a wordpress just go over toWordPress one-click installation downhere and now just select your domainname and leave this empty and click Nextand just give your site a title I'm justgoing to say Nick Mason admin I'm goingto put my first and last name first namelast name and then the same email thenjust agree to the terms and clickinstall cool now WordPress is installingand now it's done so first thing youwant to do before anything else is tocopy all of this information right hereand put it somewhere write it down andcopy it over to a note section whateveryou need to do because you are going toneed this ridiculous password later andyou're gonna be happy that you saved itso now just go ahead and click login andyou're brought to this site because onceyou purchase a new domain name andhosting plan basically Hostgator needsto send this new domain out across theentire world to let it know that itexists so that every DNS every servercan go and find it so while this ishappening it takes about two hours atthe most they say it could take up to 24hours I've never actually had it takeany longer than maybe 20 minutes so inabout 20 minutescould be two hours come back and we willpick up where we left off alright sowe're back and the way to check on yourwebsite is to just type in your newdomain name and you will be brought tothis page whenever it's ready so that'sawesome instead of logging in toWordPress through this admin loginbutton the way that you should get usedto logging in is by going up to the topand just typing in slash WP dash adminafter your domain name and then clickingenter because this page is going to goaway once you publish your websitealright so cool now we can log in andwe're gonna log in using that ridiculouspassword that I told you to save fromearlier andyour username so my username was just myname and that password let's just copyand paste that and I just click loginBAM there we are we are in the WordPressdashboard it looks a little dauntingright now but we are gonna clear up allthis nonsense on the dashboard so justgo ahead and dismiss you can dismissthis ad just literally click out ofeverything close everything up BAM sothat's what we want it to look like niceand clean now step number three is toreset your WordPress password this is animportant step because you don't want touse that ridiculous password that youhad to save from earlier every singletime you want to create something thatyou can remember so in order to do thisjust go down to users go to all usersand just click on your name and scrollall the way down to the bottom of thispage and you can see new password andjust click generate password and deletethat ridiculous one that they give youautomatically and you can create yourown so I'm just gonna create my own nowand then just click on update profileand that's it pretty simple now you canuse that new password anytime you wantto log on to WordPress and remember touse your domain name slash WP dash adminalright so step number four is toactivate a new theme and page builder alot of people get confused between atheme and a page builder because theyare pretty similar but I'm gonna explainthe difference right now so a theme isusually just what determines the lookand the style of your website but inthis case we're using a page builder toedit this homepage so really the themethat we're gonna get is strictly justfor the header which is this whole whitesection here at the top and the pagebuilder is what builds all of thiscontent down below that's in between theheader and the footer and even thenwe're still going to use a page builderto do this footer as well so let's goget ourselves our theme we're going tobe using a free theme called ocean WP soin order to get this theme just go overto appearanceand click on themes and I'm just gonnaclose out of this so it's a little bitcleaner and we can click on add newtheme and you can see there's all thesedifferent themes that WordPress issuggesting for us you can search bypopular latest all that stuff but we'regonna be using ocean WP which is anawesome theme and it's free if you wouldlike to use a paid theme which paidthemes have a lot of advantages they'reway more customizable with almost everyaspect and my favorite paid theme to useand it's well worth it it's called DiviDivi has a drag-and-drop builder muchlike what we're gonna use today but justa little bit more powerfulit's very beginner friendly so I highlyrecommend this if you would like tospend the money on a theme it's about$89 right now I think so I spent dayslooking through free themes and testingthem out for this ecommerce tutorialonly to find out that there was reallyno good free themes out there that wouldgive you the customization that I wantedyou to have and what I came to was usingocean WP and using a page builder tobuild the whole homepage for you and Imade it into a template that you canjust download so it's very simple to useand I'll show you how so first we'rejust gonna need to install ocean WP andnow you can just activate it alrightcool so now it's activated and you cansee there will be a notice up here thisyellow one that says this themerecommends the following plugins and itsays Elementor which is the page builderthat I was talking about so we're gonnaneed that ocean demo import and oceanextra these are just extra features tothis theme which I highly recommendgetting those as well so you can justclick on begin installing plugins and itwill install all three of those so justclick on all three go to bulk actionsinstall hit apply and that will nowinstall all of those plugins and thereit goesso if you don't have that notice at thetop and you need to download thoseplugins all you have to do is go down toplugins and go to add newand you can just search in the searchbar right here for element or clicksearch and you can see element or pagebuilder right here I already have itactivated but you'll see an Install Nowbutton there so you can just click thatso now that we've activated the theme inour page builder you can just go up toyour title here and click visit site I'mjust going to open it up in a new windowso you can see our site here is prettyboring but we are gonna fix that in acouple steps from now so step numberfive is to install WooCommerce so firstbefore we do any customizing with thehomepage we need to set up WooCommerceWooCommerce is just a plugin that allowsyou to create products and productcategories set prices do all the funstuff with e-commerce it's what adds thee-commerce to your website so let's godownload it so just go back to thedashboard and go down to plugins go toadd new and we're just gonna go to thesearch bar and type in WooCommerce andnow you'll see WooCommerce it's thefirst one it's got over 1 million activeinstallations so let's just install thatand activate it alright cool so we justactivated WooCommerce and we are alsogoing to go into plugins add new againand we're gonna activate stripe sostripe is what allows people that entertheir credit card information to pay forproducts so I'm going to show you how toset up paypal and do stripe so thatpeople can pay either way so to getstripe just type into the search barstripe and you'll see whoo commercestripe payment gateway just clickinstall and then click activate and it'sgot four hundred thousand activeinstallations so you know it is not asketchy plugin and cool so that's doneas well now you can ignore thisfollowing theme recommends these pluginsand now I'm just going to go through theWooCommerce settings in order to showyou everything that you need toconfigure so just go to WooCommercesettings okay so I'm gonna go throughall these different tabs and first oneis general so in general you've got yourstore address so I'm just gonna put inwhatever my store address is now sellinglocations you can determine where youwant to sell – so all countries allcountries except for and you could typein whatever country that you don't sellto or you could do specific countries ifyou've only got a few and you want toput those in and not do except for everysingle country so it'll save you sometime in this case I'm going to putselect all countriessorry sell to all countries shippinglocation so ship to all the countriesyou sell to or you can determine ship tospecific countries only same thing asselling so default customer location Iwould keep that as geo locate so there'sa few other options here geo locate willsearch their IP address and determinewhere exactly they are so I would keepit thereyou can enable taxes for this if you'dlike not going to get too far into thatcoupons yeah we want to use coupons ifyou don't you can uncheck that ourcurrency I'm gonna put that as USdollars so USA oh sorry no let's justtry a dollar and let's just go down toUnited States dollar currency you candetermine whether the dollar sign isgoing to be on the left right or so onit's always on the left in US dollars soI'm leaving it on the left same with thethousand separator decimal separator andso on I'm gonna keep that as a comma ina period and then just click SaveChanges cool now we can go up toproducts so in products the first thingwe've got is our shop page which wedon't have one yet so let's go ahead andjust make one now so just go over topages which is up top go to add new andjust type in shop and we're just gonnascroll down and make sure that ourcontent layout in the ocean WP settingsis at a full width and just clickpublishso now let's go back to WooCommerce goto settings and go back to products andnow select your shop page will justclick shop we will be able to edit thatpage later but for now we're just goingto assign it here so add to cartbehavior you can redirect to the cartafter a successful addition that'll takethem away from any other products thatmight want to buy so I don't recommenddoing that and under measurements we'regonna put in how we want to weigh andmeasure our products so us I'm justgoing to do pounds and dimensions I'mgonna do inches so if you're on themetric system you can put in kilogramsor centimeters whatever you want to useand here we can do enable reviews andreviews are just what somebody can typein to rate your product and the productratings down here they can also leave astar rating so one through five starsI'm assuming your product is going to beawesome so I'm gonna leave enable starrating on and reviews you can also doshow verified owner label so they haveto be a verified owner they have to signup in order to actually leave a verifiedreview so if you want to do that you canenable reviews can only be left byverified owners but I am NOT gonna dothat I just want anyone to do it I justhope some guy comes along and rates myproduct five stars so that other peoplewill buy it so now we're gonna go up totax oh sorry so it's gonna say do youwant to leave site changes may not besavedclick cancel go down Save Changes almostforgot that now go over to text and hereyou can determine all of your taxinformation I'm not going to get too farinto that but you can tell it whetheryou want to enter prices inclusive oftax or exclusive of tax you can tax itbased on their shipping or billingaddress and so on so now I'm just goingto click Save Changes one more time andgo up to shipping and here you can add ashipping zone so if you would like toput in wherever your products are comingfrom you can enter that in here but fornow I'm gonna move on because I don'thave an actual manufacturer yet and I'mgonna go to payments andnow you can determine how people willpay so this is where I told you aboutPayPal and stripe so we are going toenable PayPal and we are also going toenable stripe which is the credit cardso if anyone has a credit card they canenter in their information and you'lljust want to run the setup for both ofthese so it'll ask you about yourinformation it'll hook up your PayPalaccount and with your credit cardaccount you'll have to create an accountwith stripe so that the money can besent to your account and then you cantransfer it to your bank so this is animportant step if you actually want toget paid for the products that you'reselling coolso click Save Changes and go up toaccounts and privacy and you can doguest checkout which I would allowaccount creation so if you want peopleto be able to make an account on yourwebsite so that returning customers canhave all their information saved you cando that so you can do allow customers tocreate an account during checkout youcan also allow customers to create it ontheir my account page which I'm going toshow you how to set up later so you canalso set up a privacy policy and you canjust create a page for that and thenselect it in this drop-down I don't haveone right now you can actually Googlehow to write up the correct privacypolicy page for whatever your industryis and if you go down this willdetermine how long you want to keep yourcustomers personal information so let'ssay after a year if they haven't boughtanything you can determine that here andit'll get rid of their information or ifyou want to keep it indefinitely you canjust leave it all unchecked so I'm justgoing to leave that unchecked and clickSave Changes and we can go up to emailsnow okay so now that we're in email youcan see that if we get a new order it'llgo to our email if somebody cancels anorder it'll go to our email as well asfailed and the rest is what goes to thecustomer so if we put an order on holdrefunded it Yatta Yatta all this stuffright here and you can manage them andchange the emails just by clicking onmanage and if we go down you can seethat now we can determine who the orderis coming from so if we're sending anemail to a customer we've got our ourcompany name here you can change it ifyou want and you can put in a wholeemail template here with an image andtext and all that stuff but I'm notgoing totoo far into that it's prettyself-explanatory so click Save Changesand just go up to advanced last but notleast and from here we can determine ourcart page and check out my account andso on so step number six is to add newpages okay so in order to add thesepages in we're gonna have to create themso let's go back to pages and go to addnew alright so we are just going to callthis one cart and what we need to do isadd a small shortcode here that'll allowWooCommerce to put in some tools on thecart page for our customer and I'll showyou what I mean in a second so just typein open square bracket woo commerceunderscore cart close bracket prettyshort and simple wouldn't really evencall that coding and just scroll downand change the content layout fromdefault to full width and that is veryimportant do not forget that and thenjust scroll up and publish then go toadd new and we're gonna do my accountand then short code is open bracketWooCommerce underscore my underscoreaccount pretty simple scroll down andmake sure you change the content layoutto full width and then go up and publishand click add new and while we're herewe'll also do a terms and conditions I'mnot going to go too far into that withcreating that but you might as well makeit while you're here let's click publishand again add new and we'll do a privacypolicy as well click publish ok so let'sgo back to WooCommerce and go tosettingsand we can go back to advanced ok so nowwe're just going to put in the cart inthe cart page we didn't do a check outwe'll do my account in terms andconditions and here you can also force asecure checkout so theyneed that SSL certificate on their pageto be able to check out but I'm gonnaleave that unchecked and just go down toSave Changesalright and to show you what I'm talkingabout you don't actually have to do thispart I'm just going to show you if Iwere to click on my account on ourwebsite it would then take me to myaccount page and these are the tools I'mtalking about so you've got your ordersyou've downloads etc and again if you goto cart you've now got your cart pageit's currently empty right now but thesetools in here will allow you to add orsubtract things from your cart so thatwas how to add new pages so you don'tjust have to add customer tools pagesyou could also do an about Us page or anew collections page it could beliterally anything all right so let'smove on to a fun part now we're gonna dostep 7 which is customize your websiteI'm gonna show you how to get yourhomepage set up with all your images andyour text and your buttons show you howto change fonts all that fun stuff solet's jump in and do that so in order tocustomize a homepage we got to make ahome page so just go to pages and thengo to add new and we're just gonna callthis homepage then you're just gonnascroll all the way down to the ocean WPsettings down here and we are going tomake this a full 100% width in thecontent layout and then just go toheader and we're gonna disable that topbar top bar is just this little tiny barat the top where you can put some extrawidgets we don't really want it andwe're also gonna go to title and we aregoing to disable the page title so wedon't want our homepage to say homepageon it now just go up to publish and oncethat's published just go up to your nameup here your site name and go to visitsite alright so here we are andWordPress writes up this automatic postcalled hello world and it sets that asyour automatic home page so we have totell WordPress to go reset to our newhome page so just click on customize uphere alright and we're just gonna godown to homepage settings and we'regonna tell it to be a static pageand it's gonna say homepage we're gonnawant to select our homepagepage and now we have our new homepagecontainer and what we're going to do isbuild our home page with Elementor andagain I have a free template for youguys so all you have to do is justreplace the pictures replace your textand so on it's really easy I'm going toshow you how to do it right nowso go ahead and click publish so firstwhat we need to do is upload thetemplate so we're just going to click onthis X and we're gonna go back to ourdashboard and we're going to go all theway down to Elementor and then just goto my templates and we're just gonnaclick on this import templates button atthe top and then just choose the fileand again I provided this template foryou so if you haven't downloaded it godownload it and it's right hereElementor templates ecommerce and we'regonna click on homepage and then importnow alright cool so we just imported ournew homepage template so now just goback up to your site name and clickvisit site and then just click Edit withElementor all right so this is Elementorand this is the drag-and-drop pagebuilder and what we're gonna do is addour template here but first before we dothat I just want to show you you cangrab all these different widgets so ifyou click on this plus sign and youcreate a new row or structure you cannow add stuff to that box so if youwanted you could click on this Rubik'sCube thing up here and you can add aheading and you can change the color youcan change the the font everything aboutit you can add widgets you can addbuttons all sorts of stuff and you justdrag them in and you can see there'slike a blue line whenever you are gonnaplace it above or below something sothat's pretty cool and you can justdelete by clicking this X but like Isaid I have everything built for you sojust click on this add template buttonand go over to my templates and now youcan see the template that we justimported so click insert and it'll askyou if you want to import the documentsettings just click yesand here we go so this is the page I'vebuilt for you there's no pictures on ityet but I'm gonna show you how to addall of those pictures replace the textbuttons and so on so let's get startedso first we are just going to rightclick within this main section so you'vegot this main container and then you'vegot these widgets inside of it so we'rejust going to click right in here andclick Edit section that was aright-click by the way and we're justgonna change the background so we'regonna go over to the style tab and it'snot the background tab because thebackground is actually black it'sbackground overlay because we have ablack that's behind it and then wechange the opacity so that the image isa little bit darker so that our textshows up so in order to change thebackground just click on this plussymbol in here and you can now uploadyour files so we're just going to clickupload files select files and then justnavigate to the follow along images thatI provided and just go to page imagesand we're gonna do homepage backgroundwhich is 1800 by a thousand pixels thisis about the perfect size for thishomepage image so we're just going toopen that and you can click insert mediaso you can change some of the settingsdown here you've got the position thesize and you can also do the opacity soif you want to make it darker you can dothat hereI had it around a seven and again thisis background overlay only for thishomepage image this top image so that ishow to change that background image andnow you can change this text by simplyclicking on it right here and you canedit it to whatever you want to say so Ican add an exclamation point you couldsay new releases you know whatever youwant to put I'm just controls eing thatand you can also edit it here in thisbox as well and you can also put a linkon it so if you click on it it will takeyou to that link you can change the sizeso if I wanted it to be medium textsmall largeand then the heading 1 so heading 1 isyour largest heading all the way down toheading 6 which is your smallest butchanging these here won't change thesize whenever you have this size set tosmall medium large XL or double XL ifit's on default then those will changebut I have it set to large as well asthe alignment here you can do left orright which is pretty coolsame with the text below it the subtextyou can change it the same way and nowthe button so if you come over here andright click on here and click Editwidget you can now edit the button soyou can put whatever you want in here soview clothes you know whatever you'dlike to put let's just go back to thatyou can put the link here so you canlink to a different page on your site oryou can link to a whole different URL ifyou want but you just take that hashtagout and put your link in there and youcan also change the size so an extrasmall button a large button and so onwhatever you'd like to do and you canalso add an icon here so you can look upwhatever icon so let's just say Facebookjust as an example you can add thatlittle Facebook icon there's a bunch ofchoices in here so just go nuts and youcan also change the style so if you goto the style you can change thetypography and again you can do this forthe heading as well I forgot to mentionthat but you just click on thetypography pen and you can go in hereand select any font that you want youcan just type one in and find it and youcan change the size so that's prettyhuge I'm just gonna delete that go backto default and you can change the weightyou can do all sorts of stuff with itthe height letter spacing you know getcreative with it whatever you'd like todo and if you click on that again itwill close out of that window and youcan select your text color so I havethis just set to default right now whichis a white you can select any color thatyou want so it's changing that textthere and you can also do the backgroundcolor of the button whatever you'd liketo change it to I had it set to blackand you can also click on hover andwhenever you hover over it you canchange those colors as well which ispretty awesome and you can also add ananimation to it so if I wanted it togrow a little bit on a hover it kind ofpulses out let's see what else sorryhere's a pulse you can do all sorts ofcool different animations so just kindof flip through those this is a reasonwhy I really like Elementor there's alot of customization you can add aborder to it a shadow to it all this funstuff and again you can change thetypography of the header as well just bygoing to style and doing the exact samething so we're just going to scroll downagain this is a header as well you canchange that and now we're gonna addimages to these buttons here so shop menshop women changing these backgrounds isgoing to be a little different so samething just click Edit widget right clickand click Edit widget and you can changethe text which I showed you how to doearlier but to change the backgroundwe're gonna go to advanced and underadvanced you'll see background so thisis a little different we're not doingbackground overlay and it's also not instyle it's in the Advanced tab so we'rejust gonna add an image here and uploadfiles select files and we're gonna addthe shop men which is 900 by 500 pixelsso if you're creating your own imagesfor these I highly recommend downloadingthese images and mimicking the samesizes so click open insert media andthere we goand we're gonna change this other one aswell so the same thing right click editwidget and go over to advanced and godown to background and just click hereupload files then we're gonna click theshop women which is the exact same sizeand insert that as well and I want toadd once in a while you might want toclick update it will save your workwhich is very helpful it sucks to buildan entire page and then lose all of yourwork because something happened so youcan also resize all this so if you godown to a responsive mode it's thislittle computer symbol down here you canclick on mobile or tablet and you canalso look at how this is gonna look onmobile so right here I don't really likethe way it's just this guy's legssticking out here so maybe I want tochange that so in this mobile menu hereI'm just gonna right-click and clickEdit section and I'm gonna go over tostyle background overlay and instead ofCenter Center I'm gonna change it toCenter right so that this guy is morecentered in that in this window now sonow I'm just gonna go back to desktopactually let's check the tablet realquick it's a tablet looks pretty goodsame thing so I'll go back to desktopagain another reason why I love elementor you can edit for all devices so let'sroll down and now our latest productsand our sale products I'm gonna show youhow to set up your products soon butbasically I have this Auto coded so thatwhen you create products or you putproducts on sale all the recent ones getput into this section so again I willshow you that later so scroll down andwe are gonna edit these banners now sothese banners are just headings withbackgrounds so they work the same as thebutton so just click Edit widget andthen go up to advanced background andthen just put an image in there so wewill upload files select files and we'regonna do banner image one open insertmedia and same with the other oneedit widget which again I'mright-clicking go to advanced go down tobackground put in an image banner imageto open again those are 900 by 500pixels as well go to insert media andthere we go and I'll show you one extrasetting that you can also play with solet's just close this background hereand go up to advanced you can also add alittle bit of a marginhere so if you don't want this to beflush with each other or against thewindow over here you can add a littlebit of margin so just click this linkbutton and then you can just add somespace to that so that'll add some spacethere and you you should do the same tothe other to keep it symmetrical but I'mjust gonna take that off and just wantto show you that real quick and nextwe're gonna go down and change thisvideo here so right-click on the pensorry so if you right click here you'regonna activate the video you want toright click up on this pen tool and thenselect edit widget and you can changethe video url here so it's set toYouTube you can do Vimeo dailymotion orself-hosted the most videos are off viewtube so I recommend YouTube but you canjust go into YouTube and grab a new URLand then just paste it in here and itwill change that video and you can setyour own custom start time and end timeto it you can do all these options herelike auto play or loop the video you canget rid of the player controls so nobodycan pause the video all sorts of stuffand again let's click update to save ourwork and if you'd like to change thesize of this video all you have to do isgo up to advanced and then you can justadd your own custom margin to it andthat'll also make the videos smaller andjust make sure that you have this linkbutton checked because if not you'reonly gonna change individual values likejust the top or the bottometc so link that I'm just going todelete it because I like the size andanother fun trick that I forgot to tellyou about on the texts and pretty muchanything really you can do it with thevideo as well but if you select the textyou can go to advanced and then go to anentrance animation so right now I havethis set to a fade in so whenever yourestart the page it will fade you canalso add zooms bounces slides all sortsof fun stuff alright so we're gonna goback down and last but not least we'regonna change this banner here so if Ijust click on that it will go to ouredit countor you can just do right-click and thenedit widget and you can change thenumber so if I want to do let's say 23 56 8 I don't know anything it will countup to that exact number so I'm going tochange that back you can change thestarting number the speed at which itcounts and so on and then you can changethe title down here so you can edit thishowever you want and if you'd like tochange the background of any of thesesections so this one's white this one'skind of a light gray and so on you cando that just by clicking on the outsidehere going to edit section and then goover to style and on background it's setto this light grey color so you canchange that as well to whatever coloryou'd like obviously this doesn't lookvery good so I'm gonna put it back to DSacross the board there we goand again update got to get in the habitof that alright I'm also gonna show youhow to make a footer down here as wellas a header with your own logo andeverything but first we need to createsome product categoriesso let's go ahead and do that now makesure that this is updated and then justgo up to this little hamburger symbol uphere and go to exit to dashboard alrightso step number eight is to createproduct categories alright so now we'rejust gonna click on products and then goto categories so we don't have any sowe're just gonna start by making ourfirst one and these product categoriesare gonna appear at the top of your pageso that when somebody goes to yourwebsite they can go click on it and sayI want to shop men or women or so on sowe're going to start with men in thename section and the slug it's justgonna be men so the slug is what goesafter this Nick Mason calm or yourdomain name.com slash and it'll say likeshop / men or so on so we're just goingto put men and parent category is noneand we're not going to add anydescription we're gonna do display typesince the what youwant to display on that page so whensomebody clicks on it what I want to dois display subcategories so instead ofso if I go to a subcategory like let'ssay shirts then I would want to displayproducts but if we click on men we wantto see things like shirts pantsaccessories and so on so I'm just gonnado subcategories and then you can alsoadd a thumbnail image if you'd like andI'm just gonna click add new categoryactually you know what we're gonna go ata thumbnail to that right now so justclick on edit right here underneath menand go all the way down and we're justgoing to add the same thumbnail imagethat we used on the homepage so justselect that one and then click use imageand just go to update now back tocategories and let's create another oneso let's do women slug is women andwe're gonna do display typesubcategories add an image upload filesselect files sorry media library womenand add new category we're also gonna doaccessories slug is accessories displaytype this one I'm gonna do productsbecause there's not a lot ofsubcategories to accessories I meanmaybe you could do bracelets orsunglasses or things like that but inthis case I'm just gonna leave it asproducts because I only have a fewaccessory products that I want todisplay on that page so let's just doproducts and we're going to upload a newimage that we don't have yet so go toupload files select files and instead ofpage images we're gonna go back and doproduct images and we're just gonnaupload let's say this bracelet righthere that's an accessory so open andthen go to use image and then add newcategory all right cool so now we've gotmen women and accessories we've gotthese base categories so now we're goingto add a few sub catso under men we're gonna do let's sayshirts and Slug will be men's – shirtsand parent category is now going to bemen because we wanted to show upunderneath men and then display type wewant it to be products because oncesomebody goes to men then they click onshirts we now want products to show upon that page so cool and you can alsoadd images to these as well so we couldjust upload an image of a shirt so justgo to upload files select files andwe'll just do this red shirt here clickopen and then go to use image add newcategory so I'm gonna do this again forpants I'm gonna do this for dresses forwomen and so on so I'm just gonna speedthis up real quick all right cool sowe've now created all of our categoriesand subcategories so you notice hereI've got one that does not have athumbnail image so let's say I need togo find an image what I'm gonna do isjust go to a new tab and then type inpixabay.com click enter and pixabay.comis all free images so non-copyright soyou can use them as much as you want andyou can make money off of them and so onand you're not going to get penalizedfor it so you can search for anythinglike let's say men pants maybe let's trythat and then we could just select animage so I like this one right here sothen you can just go over to freedownload and I'll just download let'ssay the 1280 by 8:15 and click downloadso we can go back and we'll just go overto pants and shorts click Edit and we'llgo all the way down and just add in thatnew imageclick use image and then update allright so now just go over to yourwebsite and I'm just opening up in a newwindow and if we were to click on a fullcategory like men or even men shirts forinstance you'll see that our page hasthis sidebar right here and we want toget rid of this so to do that just go upto customize and then just scroll downto WooCommerce and then go to archives Iknow it's kind of a weird place for thisso all we want to do is change thelayout to a full width and there we goso pretty quick and simple so just clickon publish and we can go back to ourcategory so that is how to createproduct categories as well as getroyalty-free images so now step numbernine is to build a header a menu and afooter so let's start with the header sojust go up to your website title and goto visit site and I'm just going toclose out a pixabay so instead ofediting with Elementor which is the pagebuilder for all this area right herewhat we're gonna do is use the customizetab because this is for the header whichis this white area at the top it's gotits own edit menu so let's just go tocustomize now before we begin I justwant to explain that a header is alittle different from a menu so theheader is basically the container it'sjust this white area and a menu is whatwe're gonna put inside of the headerwhich is all the buttons that you clickso the menu is buttons that you clicklike men or women or accessories sowe're going to go ahead and get that setup right now so first we're just goingto go over to header and then we'regonna go to general and we're gonna goto style and change it to medium and itjust added this search bar up here andI'm also going to show you how toreplace this with your own custom logobut for now we're just going to scrolldown and you'll see elements positioningand we're gonna change it to logo firstand then social buttons and then searchform what we're actually going to turnoff social buttons because we're gonnahave our own social buttons on ourfooter and you can turn off any of thesejust by clicking on the eyeball and whatwe're still in this menu we're alsogoing to change the padding right hereto about a 10 by 10 so just click thislink button and then just highlight thatand change it to 10 because we want itto be a little bit thinner so if younotice you can change it to be reallysmall which is a zero or you can reallyboost it up to 44 which is hugeI'd say a 10 is a pretty good spot sonow just go up and then go to this backarrow go back one more time and thenjust go down to menus right here andwe're just gonna create a new menu withthis button right here so again the menuis what's gonna go underneath here it'sgonna be all those buttons that youclick so we're just gonna call thisprimary menu or actually let's call itheader menu so you don't get confusedand just go down and check on main wewant this to be our main header and thenjust click on next and we're gonna addsome items to this so just click the additems button and we are gonna search forour product categories so right nowwe're under pages so we're just going toclose this little arrow and we're justgoing to go down to product categoriesright down here and just expand that sowhat we're gonna do is add men womenaccessories and then all of oursubcategories so we're just gonna godown the list and add them all and whilewe're here we're also just gonna closethis product category section go up topages and we're gonna add my account andyou could also add cart if you want oryou could create your own page so youcould just type in a new page here andyou could add a new one but I am NOTgonna add cart because we've actuallygot a little symbol right over herewhich is for your cart so you can clickon that and actually get to your cartpage and I'll show you that later sowhile we're here we now have twoyour eyes these correctly so right nowthey're all showing up on our headerright here in a row and what we want isto be able to hover over men and get toa drop-down of shirts pants etc samewith women we want to hover over it andget two dresses swimwear and so on so inorder to do this let's just go up andpublish our work so that it's saved andwe're just gonna click on this X andwe're gonna go back to our dashboard andthen just go all the way down toappearancewhereas appearance right thereappearance and we'll go to menus and nowwe're just gonna restructure these bydragging and dropping so we want let'ssay shirts to be a subcategory of men soinstead of being right underneath itwe're gonna drag it to the right andthat is now a sub-itemso we'll do the same with dresses forwomen drag it to the right as well asthese other subcategories so if you wantto check and see which one the slugbelongs to under pants and shorts orduplicates just click on this arrow andyou can just go down and click on theoriginal right here just open that up ina new window and you'll see this isunder the women slug so we'll close thatand add this under women's so that meanswe can add this other pants and shortsunder men so we'll do the same withswimwear we'll just go down open that upthat is also women's so we're just gonnaclose that drag that underneath women sowe'll add swimwear for menwe've got accessories and my account sothis is looking pretty good now so we'lljust save menu and then go back to oursite and we'll click on customize againso now you can see if we hover overthese we've got these subcategories in adrop down menu which is pretty awesomeso we're gonna change a few more thingsto the style of this menu so what we'regonna do is go over to header then goover to general scroll down and we'regonna change the menu height all the waydown hereto about a 40 we want that to be a bitsmaller and then we're going to changethis menu items padding to about a 60each so make sure you click that linkbutton and then highlight these andchange them to 60 so we want these to bespread all the way out so you can see ifwe decrease it they get closer to themiddle and as we increase they becomeall the ways spread out and 60 isactually the highest you can go so let'sgo back to the header and we'll go tomobile menu and we're gonna change themobile menu style to instead of asidebar we're gonna do a drop down sonow if you just go all the way down inthe bottom right corner of this menuhere and click on the phone you can nowsee if we click on this it comes as adrop down so before it looked like thisso you could do that if you'd like I'mnot as much of a fan so I'm gonna goback to drop down so let's just go backto desktop and we're gonna publish ourwork so that was how to create a menufor your header now I'm going to showyou how to make a logo and put that onthe header as well as your site identityso instead of having this plain old texthere that has the name of your companyup there we're gonna replace it with areally cool logo so in order to do thisjust go to a new tab and just type inthe logo maker without the e.com and hitenter and you can just skip thistutorial because I'm gonna show you howto do it so this interface is super easyto use it's really clean so what we'regonna do is just go up to the top hereand you can browse by all thesedifferent categories of logos and itgives you just almost an endless page ofgood simple logos and you can also typein any sort of key word for whateveryou're looking for so for me it's kindof a summer clothing company I'm gonnado like a wave for instance and I justhit enter and then you can scrollthrough all these different symbols andthe simpler thatstay the better because you really don'twant a distracting logo you just wantsomething really clean and simple thatyour customer is going to remember andevery time they see it they're gonnaassociate good products with that symbolso for me I'm gonna pick this squaremountain wave symbol and you can justresize it by just going up to one of thecorners and just say drag to resize youcan resize that up so I'm just going todrag that off to the left and I'm alsogoing to add some text just by clickingon this T and I'm just going to type inMick Mason and I'm also going to makethat black so I'm just going to go overto the color wheel and you can dragaround and select any color that you'dwantso with this outer wheel or you can dothe saturation with this inner one soI'm just going to go all the way toblack and I'm just gonna drag this up soI can see it and you can also move it soif you drag inside so you got to clickout and then you can drag this wholetitle around anywhere you'd like so inorder to change the font family you justgo up to here to font category and youcan select all these differentcategories so you've got fun and funkyand you can select all these crazy onesif you want I'm not gonna do that I wantthis to be a very clean brand so I'mjust gonna stick with simple and modernor maybe something like traditional butlet's see what's in simple and modernand we'll go down to the font family andlet's just pick something real nice andclean I'm gonna go with something likeopen sans Extra Bold so I want this iskind of bold I want my text to beequally as bold so if you have a reallythin logo you're gonna want thinner textso let's just drag that and resize thisso it's about the same drag that up alittle more select them both and move itover actually I'm gonna make this alittle smaller alright so there we gothat was really simple so what we wantto do is just go up to this little savelogo buttonwell click that and you've got optionone where you can buy it it comes as avector file so you can scale it as highas you want without losing quality andit's just $19 or you can do option twowhich is free and all you got to do iscredit logo maker so it'll just saydownload and agree to give credit sowe'll just do that and while we're herewe're also gonna make a white one solet's just exit out select both of thesedrag the color to white and then go upto save logo and do the exact same thingdownload and agree to give credit andnow we're gonna go back to our websiteand put the black logo up on our headerso in order to do this just go back andjust go over to logo and you can justselect a logo upload that file just goback to the follow along images ifyou're following along go to logos andthen we're gonna do the long logo blackopen and go to select and you can justskip cropping and we've got our logo uphere now it's a little huge so let'smake that a bit smaller so just go overto max width so we're gonna go down toabout a 200 so I'm actually just gonnatype in 200 and you can also do this byheight as well but I'm just gonna leavethat back at the default actually I'mgonna put that at a about a 30 there wegoclick publish now we're just gonna goback and we're also gonna add our siteidentity which is what this little Gatorsymbol is right here we're gonna changethat to our own logo so just go backagain and we're gonna go over to siteidentity at the top and then we're justgonna select an image upload filesselect files and we're just going totake this square black logo open it andclick select skip cropping and there yougo so now we've just changed that to ourown logo so if anybody's on our tab thisis what will pop up on their browser andagain click publishand you can also change your site titlein your tagline so right now it is McNays'en which is fine by meyou can change it to whatever you'd likei'm also gonna add a tagline so I'm justgonna say summer clothing I'm just gonnaleave it at summer clothing because whatwe want to do is hit keywords so thesite title and the tagline are whatcould pop up in Google so you want theseto be keywords that people are searchingso clothing is a good keyword as well assummer clothing is a good keyword phraseso go ahead and click publish all rightso now it's time to set up our footerand I actually made this footer for youand I included it in the downloads solet's go ahead and do that now alrightso we're just gonna click on this littleX so that we can go back to ourdashboard and let's just go back todashboard so from here just go down toElementor and then just go to mytemplates and we were going to import anew template so go to choose file andwe're going to go to the element ortemplates and we're going to do footerecommerce create a pro website open andthen just select import now all rightcoolso we just added our footer over here sofrom here we're just gonna scroll downand go to theme panel and then just goover to my library and from here justclick on add new now we're gonna justcall this create a pro website footernow we're just gonna go down and makethis content layout a hundred percentfull width and then just go up and clickSave draft or you could publish iteither one and then just go to edit withElementor alright cool so here is wherewe're gonna import our new template sojust go to add template with this littlefolder icon go to my templates and thereis our footer so we're just going toinsert that import the document settingsyes we want to do thatand it is actually not going to bespaced like this it's actually going tolook a little more like that – thisdarker area at the bottom so we're justgoing to open that back up and clickpublish now go up to this littlehamburger icon and go to exit todashboard now we're just gonna add thatto all of our pages so let's just go upto visit site and we're gonna click oncustomizenow just scroll all the way down and goto footer widgets and there's gonna be abunch of settings here you can kind ofignore all of these and the only thingwe really want to look at is this selecttemplate area and one other thingbut for now click select template and goto see APW footer cool so now if we goall the way down you can see we've nowgot our footer but looks a little bitfunny still so we're gonna fix that andit's real quick so all you got to do isuncheck add container which makes itfull width and then just simply checkthis link values button on the paddingand just change the padding to zero andthere we go so now we've got this niceclean footer and we've also got our copyright here at the bottom which is reallycooland if you'd like to change that just goback up click on the back arrow thenjust go down to footer bottom rightunderneath footer widgets and you canchange that here so we could just doNick Mason copyright let's just say 2018so there we go and it's updated downhere now I'm just gonna show you realquick how to edit these things to makeit your own so just click on publishclick on the X now just go back to thedashboard and we're gonna go all the waydown again to theme panel and my librarythis is where we added that footertemplate so we're just going to selectthat or click on it now just do editwith Elementor so what we're doing hereis editingthe individual footer page and not theentire home page so the footer and ourhome page are two separate things butjust like the home page you can actuallyclick on any of these just right clickand do edit widget and you can changeall the texts if you do this widgetright here if you right click and editon the links here it's an icon list soyou can actually just click on whicheverone of these you want like my cart andyou can change the name here you canalso add a completely different symbolhere if you like and you can put thelink so you'll want to link none ofthese are linked right now you're gonnawant to link these to your cart to youraccount and so on and you can also go upto style and then just go down to iconor text you'll have to do them both ifyou're changing the colors but you canchange the colors here so the text coloris kind of this light gray you canchange it to whatever you'd like or thehover over color I have it kind of setas a light blue you can change that andas well as the font if you click ontypography and you can do that for allof these items now if you'd like tochange this logo here to your own justright click and edit widget and you canjust choose a different image right hereand you can also change the image sizeso I have it set to full you couldchange it to any one of these sizes ordo custom and you can actually enter inyour own values so I'm gonna go back tofull and this button if you want tochange thatjust right click Edit widget and you canadd a whole different link so I putsubscribed there just as kind of afiller template you could make it anyother button that you'd like as well aschange that icon here as well I have itset to an envelope as well as changethat icon here as well same with yoursocial icons and so on it's all kind ofthe same you just right click editwidget and you can change all these youcan actually add text so that it's notjust the symbols but all pretty quickand simple to make your own and once youchange it here it will change throughoutall of your pages awesome so let's justclick on update so next is the step thatyou've probably all been waiting for itis step 10 create products alright coolso let's do this so let's just go up tothis little hamburger thing and go toexit to dashboard so from here just headon over to products and then go to addnew so there are a few different typesof products that we can make number oneis a simple product and a simple productis probably what you'll use most oftenI'll get into it in a minute and numbertwo is a variable product so a variableproduct is if you need to change like ashirt size or color as a customer numberthree is a grouped product so that'smany products combined into one sale andnumber four is the affiliate linkproducts so let's get started with asimple product so for our first simpleproduct we're just gonna make a blackand white bracelet real simple I alreadyhave the image laid out for you as wellso if you'd like to add a description ofthe product here you can I'm just gonnainsert some dummy text and this is thelong description of the product now ifyou go down you actually have a productshort description all the way at thebottom so we could just say this is asuper awesome bracelet now going back uplet's just clean this area up a littlebit and get rid of the ocean WP settingsjust close that and you'll see productdata here so we're already on simpleproduct if you're not then make sureyou're on simple product and if it'svirtual you can check that here so we'rejust going to set a price for this so wewill just say that this is a $24bracelet and let's just say the saleprice is $19so when you have a sale price it'llactually X out the regular price andshow the sale price and when you createa sale price product here you willactually have these automatically addedto your home page under the saleproducts section you can determine yourtaxes down here and if we go over toinventory you can set a SKU number youcanmanager stock so if you check this youcan actually tell it how many you havein stock so we'll just say we have 20left in stock and this will actuallyshow up on the page well wheneversomebody goes to that product you canallow back orders or not allow them andif we go over to shipping you candetermine its weight and dimensions sowe'll just say that this is a 0.5 poundbracelet that might be heavy but I don'tknow and we'll just do these are ininches by the way we'll just do thesedimensions as I don't know 4 by 4 by 4and now just go over to linked productsand here we have upsells and cross-sellssomeone explain this a customer will seean upsell whenever they go to thatproduct to go check out and an upsell isbasically just a higher-end version ofthat product so in this case I cancreate an upsell for an even betterbracelet it's a little bit moreexpensive while a cross sell is wheneverthey're actually in the checkout pageand about to check out all of theiritems and it will promote a completelydifferent product so upsells happen onthe individual product page andcross-sells happen on the checkout pageit's just a way to say hey you're aboutto checkout do you want to buy maybe onemore thing cool so you can actually addthose in here and you would just type inthe product that you want to look forright now we don't have any made sowe're just gonna leave these blank nowwe're gonna skip attributes for nowbecause we're gonna get into that in thevariable products and we're just gonnago over to advanced and you can add apurchase note like thank you forordering or so on and you can alsodetermine if you want to enable reviewsfor this product which are the like5-star ratings that people can leavebecause your product is going to beawesomeso moving on over to product image wecan now set this product image so we'regoing to just click that and we're goingto go up to upload files select filesand we're just going to go up to wherewe have our images so go to follow alongimages we're going to go to productimages and we're going to do black andwhite bracelet which is 600 by 600pixelswhich is about the perfect size for aWooCommerce image thumbnail so clickopen and now set product image all rightcool so right above that you can now addproduct tags so if somebody typed intothe search bar on your website they cantype in bracelet for instance and get abracelet so we're just going to type inbracelet and we're gonna add that andthen we'll say maybe accessories and addthat and so on you could add as many asyou'd like now we're just gonna addthese two categories so this is veryimportant if you don't add it to acategory it's just going to show up inthis uncatted eyes section which is notvery sexy to look at on your website sowe're just going to add this bracelet tothe accessories and let's just go aheadand add it to men and women as well justfor the heck of itso now just click publish all right sobefore we move on to variable productlet's just go check on that so let'sjust go over to visit site and open thatup in a new tab and if we scroll all theway down you will see it justautomatically shows up in our latestproducts and you can see we've got thesale price here we've got our categoriesthat it's in as well as the name andthey can just add it to cart here orthey can click quick view as a customerand you can see that we've now got ourproduct and you can just add as many ofthem as you'd like and it also shows howmany we have in stock awesome so let'sgo back and do a variable product allright so just go up to add new and weare just gonna call this let's saybaseball tee I'm gonna add some dummytext and I'll go down and you could adda short description so this is a 100%cottonbaseball tee I don't know you can addwhatever you'd like now going back uplet's make sure that this has changed toa variable product that is veryimportant so we just lost our pricingbut we're actually going to set theprice depending on thetributes so we're gonna go over to firstlet's do linked products so now that wehave that other product we can set thatbracelet as a cross sell so when they goto the checkout page we will be like heyyou want to buy this bracelet so we'lldo black and it should pop up there itis black and white bracelet just selectthat now here is the fun part so go overto attributes and we're just going toadd a new attribute so we're gonna do asize attribute so just click Add andwe're just going to name this size andit says enter some text or attributesseparating it with this little symbolhere and that symbol is right above theenter key and you have to hold shift inorder to get it so we're just gonna addsmall small there we goand that symbol will do medium thatsymbol and large and we're just going toclick use for variations make sure thatyou click that and we're going to addanother one and we're gonna call thisone color and again do soul do red anduse that symbol to separate we'll dogreen use that symbol and we'll do ablue and make sure you click used forvariations now just click on saveattributes and then just head on over tovariations and we're just going to add anew variation so just go over to createvariations from all attributes and thenclick on go and what this is gonna dosorry just click yes it says are yousure you want to link all thesevariations just click on OK it's gonnatake all these attributes and makecombinations out of all of them so asmall red a small green and a small blueas well as medium and large so ninevariations added ok and there we go sosmall red small green small blue mediumred and so on so now we have to setimages and prices for all of these sowhat you need to do is just go up towhatever theRho is for the small red and just expandthat and you can add your SKU number allthe same stuff here you can do theweight and the dimensions so we're justgoing to set a price we're just going tocall this $30 and we'll do a sale priceof 24 and to add an image just go overhere and click on upload an image andthen select upload files actually waitwe already have that red one in there sowe'll just click on that red shirtbecause we added that earlier in thetutorial it's a new set variation imageand now just to stay organized we'regoing to close this and we're gonna godown to the next onesmall green again same thing we're gonnado regular price of 30 sale price of 24we want all these shirts to be the sameprice we don't want somebody to getgypped just because they chose a greenshirt or a medium shirt for instance soalso add the image so go up to uploadfiles select files and we're just goingto add that green shirt click open andthen set variation image close that andwe'll do the blue same thing 30 sale of24 upload an image upload files selectfiles blue one and set variation imageand now we'll close that one now I'mjust gonna speed up and do all of theseright now all right there we go so alittle bit tedious so the morevariations that you have the more ofthat you're going to have to do so keepthat in mind so just go over to SaveChanges now we are gonna go do ourproduct image over here so let's justset the product image and this is ourbase image I'm just going to pick thered one and we'll also do our tags sowe'll just say shirt add we can dobaseball tee add and we'll do ourcategories so here it's importantwhenever you create a product to notonly add it to theof shirts which is under men but to alsoadd it to the men category so ifsomebody clicks on men it may show upwith all of those products if you chooseto show products under the men pagewhich again you can edit in the productcategory section so let's go over topublish and let's go check out thatproduct so just go over to your mainhome page and let's just click visitsite and I open that up in a new windowand then scroll down and there it isthere's our new product so if we just goto select options so you can kind ofzoom in on it you can select thedifferent options here and you'reprobably thinking well why does thispage look so terrible there's this bigol column over here that we don't evenwant and where's our different colors soif I choose green why doesn't it go togreen well let's go fix that so just goback to our page with our baseball teeand in order to make that a full widthpage what you need to do is go to oceanWP settings which we closed earlier andexpand that again and you'll see contentlayout just change that to a full widthnot 100% full width because then yourproduct your shirt will be all the wayup against the side of your window herewe just want it to be a regular fullwidth and in order to get the differentcolors we need to set a product galleryso if you go to add product galleryimages what you want to do is select theother two so the regular product imageis the red we want the green and theblue to be added as well so if you hitcontrol and hold it down and then selectboth you can select both of those at thesame time and then click Add to galleryand you can also change their order justby dragging and dropping and theseactually go in order so we want toactually drag the green first so that itgoes red green blue and I'll just go upto update and now I'll go over andrefresh this other page all right sowe've got our new page over here itlooks a lot better it's more centeredand we can also select aand do a color so we'll do green and itchanges to green same with blue and itis very important that you make sure youhave small or medium or large selectedbefore you select the color so if youhave both of these set to choose anoption and you just go to color it's notgoing to do anything you actually haveto select a size but it's alrightbecause they can't even add it to theircart without selecting a size likemedium or large so that is how to createa variable product so now I'm going toshow you how you would create a groupedproduct and an affiliate product solet's just go over to add new and let'sjust say our grouped product would be anentire collection of shirts so we'lljust say the summer collection and youcan add in a description here and againmake sure that your settings are on afull width and go down and change thisto a grouped product so you've got thesame inventory as simple and variableand if you over two linked products youcan now put whatever products you wantto put into this group so I could justsay that shirt sorry it was calledbaseball tee and I can add that and if Ihad two or three more shirts I could addthose in as well and you can also addattributes to this exactly the same asvariable products and set prices likethat and as everything else you can do ashort description your images your tagsand categories so I don't actually haveany images to put in this so I'm notgoing to publish that but that is how tomake a grouped product and we'll justrefresh this page and we'll just sayreload because we're not going to savethose changes all right so here we willdo our affiliate link and an affiliatelink is basically just taking somebodyelse's product and selling it for themand then they give you a commission forbringing in the sale so to do this youcould just create your product name solet's say I sell web hosting throughHostgator for instance which I actuallydo do soI'll just put Hostgator web hosting andyou can also add in your descriptionsame thing and if you go down make surethat this is in full width don't forgetand if you go down change this to aaffiliate link so external slashaffiliate and you can add in the URLhere so when you sign up with anaffiliate program you'll be given aaffiliate link so I'm just gonna addmine in here paste that and you can alsochange the button text so it'll say buyproduct you could also do get hosting Idon't know whatever you want to put andyou can set the price here we'll justsay $1 for now and I'll do a descriptionhere so I'll just say 60% off webhosting don't miss out and then you cando your product images and your tags andso on so I'll just set a quick productimage here let's go up to upload selectdesktop set product image and then makesure you put in your tags and yourcategories and then just click onpublish now I'll just go over to oursite and preview this so here you cansee it and we can just click on gethosting and it just took us directly tothat link that I put in there or if yougo back you can also click on the imageand it'll take us to our own separatepage for this as well so that was how tocreate products for your e-commercewebsite so step number 11 is to publishyour website so whenever you're ready topublish on any page you should have thismessage right here that says you arecurrently displaying a coming soon pagewhenever you're ready to launch justclick here so just click herecool so once that's published let's justgo take a look at our sitealright so our site is comelelee done it looks awesome and theseimages here the ones that have galleriesthey actually change to other images sothat's pretty cool and you've got yoursale products most likely not all ofyour products will be on sale like mineare so you'll have different productshere in the sale products and differentproducts under latest and the otherawesome thing is that this whole thingresizes for mobile perfectly so likethat we can scroll down and see all ofour products perfectly aligned which isreally cool even our video here and ourcounter everything is looking awesome sothat was how to make an e-commercewebsite thank you guys for stickingaround through the whole tutorial I knowit was a long one but before you goevery new subscriber that I get to mychannel helps my tiny channel blossominto something decent so pleasesubscribe if you haven't already or givethis video a like if you found ithelpful alright guys see you on the nextvideo[Music]
Source
