Guess what, guys. Today is a really amazing day because finally I've been working on this ecommerce tutorialFor so long and, finally, it's out. Okay, so in this tutorialIt's going to be a simple Basic Ecommerce storefor example if you want to sell clothing if you want to sell arts and crafts if you want to selldownloadable products or virtual products for example logo design services then this is your tutorial.This isn't a tutorial like building a store like eBay or Amazon so don't expect thatI also wanted to announce that I'm going to do a giveaway for3 Apple iPadsso make sure to subscribe and also click the link in the description to actually verify that andIt will be awesome if this video can hit 200 likes as well. Okay, so in this video,I'll be going through everything from the start for example getting your domainsAnd getting that up and running firstAnd then I'll be going through how to build a really professionalhome pageusing the Drag-And-Drop builder which is super importantI'll also go through design techniques with you as wellSo to make sure that your website is really polished and they don't show you how to add in productsI'll show you how to add in variable products which is likemaybe like a jumper you might have a small size or you might have different colors of itAnd then I'll show you how to set up the tax settings. That is really hardI've been working on that for ages, and then finally I understand it so I can actually teach you guys about thatAnd then I'll go through the shipping options for exampleSetting in different prices for different areas and also different prices for different productsAnd then what we'll go through isThe coupons to show you how to set that up and also the payment options so you can actually get paid before youSend that product out and of course the most important part is actually setting in the colors, okaySo I'll be showing you how to create the perfect color palette and then apply it to your siteSo what we're going to donow is basically is go to into the screenAnd then I will walk you through a live transaction, and then we'll start building. All good?Ok so we're inside the store, so I guess I can get changed into my pajamas now(chuckles)just kidding. Anyways, so we're inside the store as you can see it's fairly basic, butYou can add all the bells and whistles and things like that later which I'll have additional videos forSo for example if the customer clicks on shop now they'll be directed into the shop pageWhere you'll have a product filter and let's say they're looking for a jumperThey can use it and just click on the jumper and they click into that jumperOkay, so they can read about the products and they can also select the different variations that they might likeFor example, a small onemight be cheaper, and they can read the description as well as the shipping information people can alsoleave reviews. They can also add to wishlist so basically that will add it there and if you add that to cartOkay, that will go there, and then they can just click on checkoutso once they check out they can also create ausername and login and then set in their information so that every time when they come to your storethey can justLog in and then check out really quickly, so for example as I said I'll show you how to add in a couponSo it might be Black Friday, and then they can apply that couponWhich you should get a discount. Okay, so you can get free shippingFlat rate or local pickup as well, so what we're going to do is I'll just quickly fill in that informationAnd we'll do a quick testtransaction. Okay, so I filled in all that information andthen what you can do is select the shipping options here as you can see Black Friday gives me a 90% discountSo I'd only have to pay $7 so if people don't have a PayPal accountthey can also use credit cards via Paypal. So they will click on proceed to PayPal andthen they basically log in to their PayPal account andIf they don't have PayPal they can pay with a credit or debit cardOkay, so let's click on Loginjust click on Pay NowOkay, so basically I've sent the amounts right now. We're going to go and check the emailsSo this is the order receipt that your customer will receive and you can actually change the design of it laterYou'll also get an email as well, so you can actually fulfill the orderBut you'll also be able to log into your dashboard areawhere you can manage the orders you can complete it and you can view it andAlso, you can click on the report section where you can get a report on your sales per yearlast month, this monthso you can actually track it accurately and you can also track the customers as well as the stock andTaxes as well, so that is basically itI will be going through an overview of exactly what we need and alsothe steps that we're going to be taking so the first thing that you guys will need is aDomain name and hosting. So domain name is basically like your web address so for example yourname.comOkay, Google's domain name isgoogle.com and hosting is basically where you actually save all the website files. You'll also might need aSSSL and basically this is the little green lock which is next to your web address. If you go to www.apple.comYou should see it in the browser sectionSo this is recommended for most ecommerce websites because you're actually collecting data from yourcustomers and you want to make sure that's secureso that's what that does. Then I'll show you how to install WordPress andWordpress is a content management system. In short, that basically means you're able to build a websitewithout needing to know how to code.And then I'll show you how to configure the settingsokay, and then the third step is installing the theme andPlugins so the theme is basically like a skin of the website and that would include the drag-and-drop builderand then I'll show you how to design the website and actually build the home pageby using the drag-and-drop builder andAlso show you how to add your products in so your simple products is variable products,And then I''ll show you how to set up theShop page and also add in the filterThen I'll show you how to configure the WooCommerce settingswhich includes the taxes, shipping, payment and coupons. Then I'll go through adding in your logo andChoosing colors and applying it properly to your websiteSo what is the cost of everything? So basically for your domain name the cost of that is around $5.99 per yearnow the hosting is around $10 a monthAnd the SSL normally is paid by the year, and I think that is around 19 dollars per yearOkay, so those few things are definitely required because you definitely need to addressYou definitely need somewhere to save it andDefinitely, I would recommend at least at SSL because you're an eCommerce websiteSo WordPress will be free and the theme is also free as well, but you do have the option to upgradeWhich means you get one-year support and also updatesSo this is the same thing that I use for my website at www.hoganchua.com, and it's awesomeIt's the best thing that I've come across. That's why I recommend it andThat's about it. So the total cost is around$15 to get started if you don't get the SSL but if you do then it would be around $35So it's much better to build your own site because then you'll have zero listing fees for exampleSome websites might charge you a listing fee to list your productsAnd you also have total control of what to display so for example. You can display which reviews that you wantThere's also fewer on-page distractionsso you're not listed against your competition and you also get more overall control andthat you can actually build a brand that people remember, sopeople won't say, you know, “I just bought it on eBay” or “I bought it from Amazon”they'll actually say your website name and I also want to point out that you can also email me if you haveany issues at [email protected]. But the fastest way toreach me is through YouTube comments. I normally back to those in 24 hoursYou can also follow my Facebook page. that's where I post updatesBut I do recommend you actually send in your url or at least a screenshot of your problemAs it helps me determine, you know, what's the problem and send you aFix for that. You can also press the left and right arrow keys on YouTube to rewind and fast-forwardIt's something that I learned just a few months ago, so I'm not sure how many you guys do it but for tutorialsIt's really, really usefulAnd also if I speak too fast or too slow you can actually speed and slow that downby checking the speed settings on the bottom right of the video, so let's get into itOkay, so to get your hosting and also your domain name, You can go to www.hostgator.comand basically HostGator is what I use for my website, but you can actually use any host you wantJust make sure that they have an uptime guarantee because you don't want your websitenot up when people actually go there, and you also want to make sure that you're able toeasily install WordPress and also look for services which provide really good support as wellBut I personally wouldn't recommend any free hosts because they have many limitationsare just not reliable in generalSo what we're going to do is click on web hosting but as you can see there are different services up hereFirstly, for beginners I recommend starting off with web hosting and if you get more trafficThen you can upgrade the plans later onSo basically there are three different plan: the Hatchling, Baby and also the Business plan. Personally,I'd go for the Baby because you can host unlimited domains so basically you can haveYour domain, your friend's domain, and you also have the option to get the SSL certificateSo that's recommended for e-CommerceSo just click on the sign up for it. So once you're here basically you'll need to choose a domain nameSo basically let's try and enterShop Demo 23and then you need to click on the outside here so basically sometimes it might be taken alreadySo you might need to be a little bit creative with your domain namePersonally I would recommend a .com because that's what normally people type in up here andalso, if you have a domain name already for example you might have it fromNameCheap or GoDaddy or something like that, then you can enter in your domain hereBut it actually won't connect to the hosting until you change the name serversAnd basically all you need to do is after you've purchased the hostingyou'll get the name server from HostGatorThen you need to log in to your domain registrar for example Godaddy to change the name serversAnd then basically you'll need to add the domain in your HostGator CPanel,and that's basically it and then you can follow alongSo let's scroll downOkay, so for the Package Type. Make sure to select Baby. Billing Cycle, we're going to selectI'm going to select 12 months because you get a bigger discount or you can go Month-to-month orif you want more discount, then you can go for36 months. Okay, so select that then I'm going to just type in a username andalso, a security pin, and then we're going to scroll down here andI'm going to enter my billing informationSo maybe pause the video and enter in yours and also your credit card detailsOr select Paypal if you have PaypalOkay, so I've filled it in and I've selected PayPal, and I'm just going to select Paypal agreement hereAnd then I'm going to scroll downOkay, so these are the additional services, so these are all optional so let me explain it. So the Domain Privacybasically means thatPeople can actually search up your website domain name add a website called(I think) WhoIs. And they can check your name and also your email and also your addressSo if you want that protected then you have to select this option here. So basicallywhat I recommend is if you're like a brick-and-mortar business andyou might want to put in the information anywayThen I probably wouldn't select it, but if you're like operating from homeAnd you want to keep all your details private then you would select itSo for the Hack Alert Monitoring. So what that does isIt will scan your website for any malicious code personallyI wouldn't select it because you can actually use some free WordPress plugins to actually scan andKeep your website safe, but if you're going to get it, then I would actually get this serviceAfter you've purchased your hosting and things because then you can get the onewhich actually scans your website and alsoautomatically cleans it. So it's a little bit more expensive, but I think that's way better andAlso for the professional email you can actually create your [email protected] in the CPanel section. So you don't need that then for the site backupI actually have a tutorial on how to backup your website using a free plugin on my channelSo you can check that out. For the HTTPS, this is basically the thing that you see here and the little greenlock symbol and you'll see a lot of e-Commerce websites will have itFor example: Apple, eBay, Amazon. They all have itBecause people are entering their information for example the shipping informationcredit card details, passwords, and things like thatThat's why they have the HTTPS that helpsbasically secure all that data and so I personally would recommend it because you're an e-Commerce storeBut if you were like a blog or a website, then I wouldn't select this option here. So you can also get it afterwardsbut I believe it's$29.95 so I would get it. And for the coupon code, we're going to enter shop nowAnd then click on validate, so this will give you a bigger discount. So if you scroll back upYou'll see that you get a 40% discount as wellAnd also the 36 month is 60. Let's scroll back down hereYou might see that they might check this again. So you might want to unselect that again scroll back downSo you've got your domain here. Which is also cheaper so 6 dollars and also your hosting for 12 months,and we'll come to $124.00 which is around$10.00 a monthOkayOnce you've done that then you can just click on “I read and agree to the terms and service”I also wanted to point out that if you do use this coupon I will get a small commissionand it basically helps me support these tutorials, okay. It'll be greatly appreciated but you don't have to use itThat's it. So we're going to click on checkout now andBasically I'm just going to log in with my PayPal account and pay for thatOkay, so for some odd reason not sure why because unable to processI think you might need to select the PayPal one-time agreement instead of the pre-approved paymentsSo I'm going to pay the bill and hopefully this time will actually workso I'm going to scroll down and then select to use PayPal and select PayPal one-time andRecheck these things here, and then click on pay now; or you can pay with the credit card in caseok and then click on continueokay, so I've successfully paid for that as you can see andbasically now you will either maybe receive a confirmation page if you pay by credit cardBut you'll receive an email which I'll go and check the emails nowso this is the email that you'll receive andbasically all you need to do is you need to click on the control panel url, and that will basically take you hereAnd then you'll need to copy over your username and also your password to login to your CPanelAnd that's where we install our WordPress. So I'm going to click on loginSo this is your WordPress CPanel and as I said before,You can actually add on the domains here, okayIf you got your domain from somewhere else and if you do have any issues, you can contactthe HostGator live chat supportSo you can just go to their home page, and it's on the top right hand sideSo what we're going to do is install WordPress. All you need to do is click here the one-click installationand then you need to select your domainand leave the directory part empty and then click on nextOkay, so for your blog title, I'm just going to set in logo, you can change this laterOkay, so don't worry about that. Your username, Tthis is what you login with your name and last name as well asYour email addressSo make sure this is correct because that will also send you their login information there as well,and then we're gonna click on accept andWe're going to click on installOkay, so that should take a minute or so or less than that, not sureOkay, once the installation is complete sometimes if you just bought your domain it might not have propagated yetAnd what that means is basicallyHostGator is setting your website up on the back endHopefully it will be up. If not, you just have to wait maybe 15 to 20 minutesHopefully, my one is up so what we're going to do is I'm going to copy over the passwords firstOkay, once you do that. Then I'm also going to actually just open this in a new tabOkay, so as you can see it's not up yetSo it might take 15 to 20 minutes for that to actually set upSo what I'm going to do is take a little break and then come back. Okay, so I'm back and the website is upSo we can actually login. I also wanted to point out that if you actually, for example, let's say we type in theURL here, and then you can type in WP Admin and then that will take you to the login areaso if you click on thatThat will take you to the login hereSo what I recommend is bookmarking that. So that also sends you a email with your detailsSo you can use the password there and basicallyenter in the usernamepaste in that password and then click on login okay, so we're in the WordPress dashboardI'll be showing you how to set everything up, so I'm just going to click onI don't need help and as you can see there's a lot of stuff popping upI'm going to close all of these to just clean things up a little bit and click on Dismiss; close that, close thoseOk so the first thing that we're going to do is go to users and click on all usersSo basically users. You're able to add in new users. So that's for exampleYou might have someone to edit your websiteThen you can create a username for them so they can log in with their username and you can set in differentroles as well. So we're going to click on edit for your usernameand then we're going to scroll downhere to the account management. Click on generate passwordso I'm going to set in my password which I remembe. Try to set astronger password than me. Okay, confirm the username password and update profileSo once that is done then the password is updated. So what we're going to do now is actually go toPluginsNow plugins are basically sort of software for your website to add functionality to itso for example you might haveApplications on your phone for example: social media apps, productivity appsbasically plugins are the same thing but for websitesSo it does come pre-installed with a lot of pluginsWhat we're going to do is actually deactivate them because sometimes they might conflict with ourBuilder and there's just too much stuff. So I'm going to clean everything up, and I'm also going to delete themBut you can actually add them on later as wellOkay, so once that is done, then we can actually go and open a new tab to view our websiteOkay, so as you can see this is the default WordPress website, and it looks nothing like a eCommerce storeSo what we're going to donow is actually install the theme and also the required pluginsSo we're going to hover over appearance and then click on themesSo what we're going to do is click on add newOk so we're going to upload our own theme, so there's a lot of free themes hereBut they're not really flexible and they don't have the drag-and-drop builder, so toupload the theme, first of all, we need to download the theme and the theme is actually inthe description down below. So make sure to download that to your computerand also download the images to computer as wellso you can actually follow along with the tutorialSo you'll probably get two files like this, okaySo what I want you to do is unzip it and then they'll become folders and then for exampleI'll have all the images ready so you can actually follow along with the tutorialAnd also the theme and also the required plugins will be in hereso what we're going to do is go back to our websiteand click on upload theme, choose fileso what we're going to do is find the folder which is the shop theme and plugins andmake sure to upload Themify Shop.zip. Make sure it's the .zip file otherwiseit's not going to upload properly and click on open andInstall Now. So as you can see, the progress briers down on the leftLeft hand side bottom. If you have any issues then you can go to hoganchua.com and then click on FAQSo I normally list out the most commonly asked questions on my website FAQSo you can actually go there and check out the solutions so for example if you have any problems installing the themethen you can check it outSo you can scroll down to the theme installation and a common issue that people have is the upload file exceedsSo what you can do is you can follow this video tutorial where I'll show you how to upload the themeVia your CPanel sectionWhat we're going to do is after you have actually installed it then we need to actually activate it to beActivated on our website. So skins and demos will actually pop out what we're going to do iswe're gonna close itOkay, make sure you close that so as you can see the version is 1.11 andthis is the version we're actually usingsometimes you might get an update so basically it means that a new update is availableBut you don't have to updateWhat I do recommend is that if you finish the tutorial then you can email me at [email protected] I'll be happy to update it for you, okayBut you can also update it automatically with a username and passwordso you can actually get the membership which actually includes the support and updates at Themify.me andthen this is the theme that we're actually using , the Themify Shop theme, andYou can actually purchase it for $49.00You can use the coupon “hogan” and that will give you a 30% discountSo it will actually be something like $34.00 or something like thatAnd that will give you access to the updates for a year and also supportSo it's actually really good if you actually want to customize your website even moreand it's just pretty useful in generalSo you can get itBut I do recommend updating once you finish the tutorial because sometimes the buttons and things changeSo what we're going to do now is let's go and head into plugins. So we're going to click on plugins hereand then click on add newand then we're going to upload plug-in, choose fileAnd we're going to upload the builder WooCommerce which is basically aplug-in which helps us easily add the products onto our homepage or anywhere on our website. Click on Activateadd newso click on upload plug-in again , choose file, and select the product filters zip and click on openand install now. So basically that is the product filter that will add to our shop pageand activate that pluginOkay, so as you can see it's not activated yetBecause we actually need to install the WooCommerce plugin and WooCommerce adds the e-Commerce functionalityto our website. So we're going to click on add newand we're going to click on search plugins. Type in WooCommerce here and click on enterthen we're going to click on install nowWe're also going to activate thatSo it's got over a million installs. Make sure you get the right oneOkay, so it's going to walk you through a quick setup. We're going to click on let's goAnd this is the page setup. So add the required pages to your websiteSo we'll be able to add in additional pages later which I'll show you. We're going to click on continueAnd then we're going to set out our store location so set in your locationI'm going to set it up to Australia and select your currencyI'm going to select yes. I'll be charging sales tax. We'll be going through the tax settings later onSo you'll probably just select yes, and then I will enterprises exclusive of taxNormally it will set up with the default tax rate. So just leave that as is and then click on continueSo for the ShippingI'm just going to set it as kilosand centimeters because that's the most common measurement in AustraliaYours might be in pounds or inchesSo that's optional. Click on continueafter that for paymentsI'm going to select PayPal StandardBut you can also select check payments and things like thatSo for your PayPal email address, you can put it in here. If you don't have a PayPal account yetthen go to www.PayPal.comand sign up for a PayPal business account. So you just need your basic information andBasically Paypal is really convenient because you can receive payment instantlyand then you can deposit it into your bank accountonce you receive money. So set that up andafterwards, just put your PayPal email in here and then click on continueI'll also be going through the payments settings later as wellOkay, so we're pretty much doneYou can actually click on watch the guided video tours, so I'm going to open that in a new tabSo WooCommerce has its own video Tutorials and also documentationwhich you can go through, but I'll be covering most of the stuff in the video anywaySo you might find it helpful for additional videos so you can bookmark thatWe're going to return to the WordPress dashboard. So with the framework versionsYou can actuallyupdate that for freeautomatically so you can update that now if you need toSo what we're going to do next is add in the pages set in the navigation menu and also set in the static homepageSo once your plugins have been added and set up then we're going to be adding in pagesSo just click on Pages hereAs you can see the pages were set up by WooCommerce are here alreadyWhat we're going to do is actually delete the sample page herethis is the default page WordPress has added and I'm going to delete it from the trash as well,so delete it permanentlyThen we're going to click on add newSo the first page, we're going to be adding is homeSo this will be where we're going to build our home page layout and then click on Publishwe're going to click on add newwe're going to add in the wishlist pagethen click on PublishSo you can add as many pages as you want. We're going to click on add new againI'm going to add in the about page, but I won't be showing you how to build a layout hereIt will be in another video because I didn't want to make the video too longclick on add newThe same for the contact page, you can add that in, and I'll show you how to buildthe contact page as well as add in the contact form inanother tutorialOk so as you can see the permalink here. So if you actually click that linkYou'll see that it has the index.php in thereBasically we want to remove that and to do that all we need to do is go to setting, click on PermalinksThen change it to post name. So basically you want the post name in the URLAlso the page title in the url, you don't want it to be the index.phpOr even ?p=123 because this is better for search engines and also for people as wellso they know exactlywhat you are talking about in that page alright? So once you've done that then you can actually save the changesOnce you're done with that then we're going to do is actually set up the menus. So with the menus herewe're going to go to appearance and then click on menusOkay, so we're going to click on the menu name and set in top nav for top navigation and click on menuOnce we've done that then you can select the page that you want to display on your menu. Which is up hereAlright, so the pages. I want to select is maybe my about page, contact pageshop pageAnd I think that is it. So I'm going to add those three pagesto the menu and you can rearrange it just by dragging and dropping andthen you can also make sure that it is a drop-down menu if you actually pull it in like that, soIn case, I'm going to show you an exampleSo select this if you want to add new pages directly to this menu when you add new pagesThat's optional. For the display location you have to set it to the main navigation though,So click on Save and if we refresh that page, then it will actuallyshow you a menu there and as you can see the contact page drops down from aboutbecause you put it under as a sub-itemSo I'm going to put that back where it is and then save menu so once that is doneI'm actually going to add the my account's little icon up here as well. which is the IconNavigation. So to do that we need to actually create a new menuSo for this one, I might put in icon nav. So this name is just optional. It's just for your own referencecreate menuSo this is the my account pageOkay, so people can actually come here and login and also register for an accountwhere they can actually put in their details so they can check out quickerOnce you've done that, click on Add to MenuSimply just click select icon navigation, okay, but I also want to click here on the down arrowAnd I want to insert an icon. So as you can see there's icons here. I want to insert like a littleuh, person. Click on Themify here. So as you can see there's tons of different iconsbut I'm going to click on the Themify one and let's look for the user icon. Click that in there andthen what we're going to do is save the menu, so if that is set in thereThen if we refresh the page then it should appear next to the heart thing. So once that is donewe'll actually need to set in a static home page so basically if you actually type in home hereYou'll be directed to your home page that you just created. So we want to set that home page to just be ourdomain name. So you want people to go to your home page just by typing your domain nameSo to do that click on the customize option up hereas you can see you'll be automatically directed here to Themify options. Click on the back arrow, andClick on static home page or static front page. Click on a static pageSet that to your home page there, okay, and save and publishAnd then close itSo basically as you can see yourdomainname.com, you'll be directed to your home pageWhich is where we will be building our home page layout and having the featured productsI'm going to show you how to add the social links and also go through the Themify settingsso basically changing the appearance of the layouts and also the pagesSo let's just go to our dashboard section andthen we're going to go to Themify shop andclick on Themify settingsWhat we're going to do is I'm going to scroll downOkay, make sure you're on the general tabScroll down to a lot of settings here, but I just want to go through the most important onesSo for your Google fonts to click on show all Google fontsso you'll be able to select more fonts and then click on savethen click on the default layoutsOk scroll up here. So you'll see the default archive post layout, so this is for your post layoutsWhich is for your blog post if you add in blog postSo we're not going to be going through that in this videoI'll go through that in another video, but this is actually where we change the default layout of thatthose posts. So we're going to scroll down to the default page layout andwhat I'm going to do is actually open it in a new tab so we know what's going onFor example, this is our home pageand we're setting in the default page layout for it. So what I want to do is select no sidebar and also hide thetitle in all the pages, and I also want to disable the page commentsas you can see this is title, this is the sidebar. And if we set those settings in, click on Saveand if you refresh it, then it would disappearOk so basically this gives you a blank canvas every time you create a new page. So you can actually createWhatever layout you want using the Themify Builder. So once you've done that, click on the theme settingsscroll back up. So for most of these just keep them as defaults, but you can edit them laterFor the theme appearance, so we're actually able to set in different header designsWe're able to select all these different options, but personally as a eCommerce storeI recommend either option 1, 2, orheader strike option here because it's just really good user experience to have your navigation bar on the topSo for the sticky header and if you disabled the sticky headerThis basically means, for example, if you're scrolling down,then the header stays there as a sticky. If you disable it then basically the header won'tscroll down with you all right. PersonallyI'm just going to keep it as is. You can also exclude the site logo and the tagline herewhich is that; which I might do. So I might exclude that site tagline you can also exclude the search icon andSearch icon here and also the menu navigationI'm going to leave those as is. So for your footer design you can also edit the footer design as wellSo personally I'm going to keep it as default but this is where you can actually change it alrightso I'm going to exclude the site logoleave everything as is. You might want to exclude the back to top buttonBut I think that's pretty cool when you press it scrolls back upThen we're going to scroll downNow for the footer text section. So as you can see it has “Powered By WordPress andThemify WordPress Themes” You might want to disable thatOkay, so to do that, all you need to do is hide footer text 2So footer text 1 is this thing here. So I'm going to keep it and then I'm going to click on saveand then I'm going to go back here and refreshSo we've removed the logo, and we'll also remove the Powered by WordPressOkay, so that's nice and cool. Then we're going to be doing is click on shop settingsSo your shop settings is basically editing the layout for your shop page herebut we haven't set any products in yetSo I'm going to be walking you through later on so you know exactlywhat each of thefunctions do. Alright, we're going to click on image scriptAnd I want to disable this because I want to be uploading the images which are cropped alreadySo I want to disable that and make sure this is set to original and then click on saveso if we use social links you can click on that andBasically you can open up all your profilesFor example, my Twitter. You just copy in your urlLet's just paste the link into there. Okay. That's all you need to doyou can also change the icon color here, but I'm going to leave it as defaults because we're going to be putting theThe links down below here, and we'll be changing the color for the footer links togetherSo just leave it as default as isFor Facebook, I'm going to copy that and you can also follow my FacebookThis is where I mostly post updates all right paste that into there. If you don't have a Google+ account youdon't have to enter a link and it won't show upFor YouTube. I'm going to grab my channel URL. Just copy that, paste that in there.And also you can follow that for more videosPinterest, I don't have a Pinterest. But let's just say you have an Instagram, you can click on the add link andtype in “Instagram”Then for your link, I'm going to copy my Instagram profileSo you can follow me if you like, but I won't be posting any website stuff on there. It's just generalWhat I do besides making tutorials. Let's paste that into there. For the icon we can click on insert iconOkay, so there's bunch of brand icons here. So you can be adding inOther accounts, which you have as well. So I'm just going to type in Instagram hereAlright and click on Instagram, and that will basically add it in. So we're going to do is click on saveSo once we have saved that then we actually need to set it into the footer section. So what we need to do iswe need to hover over appearance andclick on WidgetsBasically these are the available widgets which we can add to the widget areas. So for examplewe're going to grab the Themify Social LinksWe're going to grab that widget and put it below footer logo widgetAnd because these links are external pages. I'm going to open the link in a new window for the icon sizeI'm just going to keep it defaults and then saveOk once I've done that if we actually refresh itthen it should show up like that, okay, which is awesome andFor the footer widget 1, footer widget, footer widget 3, you can add in all sorts of widgetsand they will show up hereSo footer widget 1 will be here, 2 will be here, 3 will be there as wellSo I'll also make another tutorial where I'll show you how to make a advanced footerSo you can add different pageslinks and stuff like that. So what we going to do now is I'm going to go through somereally important design techniquesOnly after that I'll show you how to build the layout for the home pageBecause I think it's really important to understand it first. So you know why I do the things I do, alrightSo for those of you who actually got the SSL certificate from HostGatorYou should receive an email within 24 hours that they have activated the SSL for your websiteSo if you haven't got that then you can contact them but you should have that installed onto your websitebut as you can see if its been 24 hours and you don't see that sign which says that the HTTPSOr that lock icon then you can actually download a special pluginto display that. So if we go to our dashboard sectionIf we go to plugins, and then click on add new and then here we're going to search for a plug-inI think it's called Really Simple SSL and then click of enterSo we're going to install this one by Radiaokay, so click on install now, and then what we're going to do is activate itthen once that is done, then I think you can just go to the settings herethen as you can see in Detected Setup, you'll see that anSSL certificate was detected on your website, and then what you can do is go aheadand actually activate the SSLOkay, so that has been activated and let's go and refresh and see how that goesOkay, awesomeSo as you can see, it locked me out by basically you have the secure icon as well as theHTTPS thing appear for your website now. So I'm going to loginOkay, all good. So I've compiled a web design guide on my websiteYou can come here at www.hoganchua.com, hover over resources and click on it hereSo I wanted to go through this becausePeople don't really have that much issue with the technical part of building the web siteBut since I've seen a lot of websites 'cause people have, you know, asked me to solve problemsThe web sites don't really look professional, and I think that's a really important thing that you need to actuallyensure because if it's not professional, then people are going to click off your website,and you're not gonna make any salesSo I don't really want to create a tutorial which just shows you how to like do everything like step by stepBut I also wanted to ensure that you actuallywill become successful and actually sell stuff, so this is really important,and that's why I wanted to cover in this videoso if you click on the contentsYou can actually click on each of these things and it'll skip downto each of those sections which you can refer to afterso the first thing I want to talk about is I recommend sticking to one font family andBecause you are beginningIt's really important to make sure that everything is consistent and a lot of people choose too many fontswhich I think is just too much because you don't really need it. For example, apple only hasOne font family they useso you can download the plug-in or chrome extension called WhatFont and you can check out websitesYou can also go to Amazon and they're using the most basic one: ArialOkay, so you don't need anything fancy. I would focus onreadability rather than being fancySo there are two different typefaces one is called Sans Serif and the other is called SerifSo the difference here is, as you can see, the edges are plain and the strokes are also even withSo it actually appears more clean and modern and most websites that you see these days areusing the Sans Serif typeface. For example, Apple, that Sans SerifAmazon, that's Sans Serif as wellFor the Serif typeface, they have curves on the edges and also thick and thin strokesFor example, thin herethicker strokes there. So these websites a little bit more traditional and elegant. For example this website herethey use theSerif typeface in the navigation and also within the content itself, so it looks a little bit morehandcrafted, sort of. So if that's what you want your brand to represent then Sans Serif–I mean Serif is a good typeface to choose, but if you just want sort of like a simple web sitethen I recommend just sticking with Sans SerifThe font that we're using for this tutorial is Libre Franklinbut also a really good one if you don't know which one to choose is Open Sans andthese are some other good ones here as wellSo Serif typeface is also really good for long readingIf you have a lot of content, for example, a blog on your websitethen setting the blog post to this Seriftypeface is also a good idea because the lines sort of guide the eye a little bitThe second thing is making sure that your body font size is readableSo you don't want to change your body font size to something like this which I see a lot of peopledo. You want to make sure it's between 15 to 25But I think 16 to 18 is pretty good, really readableYou don't want to be too big because it just looks really sillyBut if it's like a headline or sub headline that doesn't really have any limitbut you want to make sure your body text is readable now the third thing is the line lengthYou'll want to keep it in between 45 and 90 characters long per line so it's an easy readYou don't want to go from one side to the other because itjust makes you feel like there's a lot of text. You don't want thatOtherwise people are just going to you know skip everything not read it, and yeah, that's just that badAnd also be consistent with capitalsupper case words will actually slow people down by 10%so I wouldn't use it for the content or any sort of long headingsI would recommend it if maybe your heading was like one or two words or something like thatNavigation menus, you can use it for that and also buttonsSo normally I would stick to using sentence case most of the timeSo basically a capital to start it off and then for the rest of its is just lower caseSo, for example, Amazon you've got just sentence case here right,. I think that's just more friendly as wellThe title case, you can use that for your blog post titles and also your product titlesso your product titles on your shop pageSo product titles, capital, capital, that's the title caseSo you want to make sure that is consistent for all your products, so it make sure that your website isjust really professional and really polishedThen for your headlines and sub headlines. You want to make sure you defineHierarchy by reducing the size andalso the font weights and also the colorYou don't have to use all of theseBut you just want to make sure that the headline stands out because that's the most important thingYou don't want it to be like this where it's sort of like you don't know which which team to focus onso if you look onwebsites like Apple's website: headline, sub headline. It just looks really nice orhere which is bold and then the sub headline is not boldSo that is really important to make a website really polishedNow I recommend using a lot of neutral colors especiallyfor separation of content for example this divider line andAlso, so Paypal actually uses this as well and a lot of professional websites will use it. For example hereIt's a white backgroundBut you'll see a neutral sort of background, a gray background for itbecause it separates the content and if you scroll down they also use their maincolor to separate content, and then they use the gray again, and you're scrolling downthey use a dark grey herescroll down and then they use a grey againSo it's really useful to separate content and alsofor your headers and footers. So for example, your header section up there and also your footersUsing neutral colors is really good and also using the colors when you don't know which color to useBut at the end of the tutorial, I also be covering how to choose colors and apply it to your websiteSo don't worry too much about it for nowSo another really important thing is actually adding text over imagesThe first thing I recommend is actually focus on relevanceyou'd want to pick the most relevant image to your business and brandSo personally I would recommend getting images done by a professional photographerSo you can get really nice grounded images for your businessAnd you can also get them to do your product images as wellIf you actually need to chooseimages like from free websites such as UnSplash which I'll show you in a second. Make sure to pick an imagewhere we e can actually apply text over easilySometimes it may not be easy to find the right imageBut you can actually edit it to make sure that the text is really visibleSo you need to add in like an overlay color which I'll show you and you can also use different methodswhere you just move the image a little bitand then move the text as well so as you can see you can't really see that white textSo if you move it on the left hand side, then you can easily see itOkay, you can also blur the image nowthis is really good if you want to add a lot of text because it blurs the details and it makes theText in front stand out moreOkay, so you can check out these examplesand I'll also try to make videos to show you how I did it as well using the builderPaypal does it really well. So as you can see, they added gradientand then for this part where they want it to stand outThey put a white background on top of that. Also a neutral colorSo the next thing is how to set in button colorsSo this is something that you probably didn't really pay attention to but it's also really important as wellSo let's say you hover over a button. As you can see, it goes a little bit now a lot of websitesthey use the formula whereIt goes darker and sometimes they might use itFor example, we might go lighter as wellso there's a formula that I will show you in a secondBasically it will keep everything consistent so your website isProfessional and also your images should be cropped before you actuallyupload it to your websiteSo for example, sometimes if you upload it directly from your camera, it might be just like a huge image andyour website's going to load super slow so you don't want your website to load super slow becausepeople are just going to click off your websiteso this is a basic image guide that I createdto explain itbasically, if you want an image about this size on your websitethen this is the approximate size that you can proper toall right, so I made one formedium images, large images, and also Hero images,I'll show you how to crop it here an image. The product imagesI will walk you through this when we're adding in ourProducts. So right nowwe're going to start building the home pageSo for your home page hero image, what I personally recommend is actually hiring a photographeror if you're good at taking photos then just do it yourself for your business. That wayit's way more relevant, and it looks more authentic, but you can actually go to website called Unsplash.comAnd they have free images which are really high quality that you can use for commercial and alsopersonal purposes, and you don't need to create them. So what I recommend is choosing a really good imagewhere you can put the text over really easilyFor example, this one is really good because you add it on top here this one's not too badbut something that is sort ofmore detailed like that, it might actually not be as goodSo try to pick one which you can easily add text over for example this oneso basically if you've been following along, I've already included the image in theImages folder, but if you want to choose your own then you can choose it here againanother really popular site is called Thestocks.im. And basically it compilesall the free image websites as well so you can check out them here and also video backgrounds as wellOkay, so download the image onto your computer. Just click on that button there, and that will downloadLet's go to fotor.com. This is basically we can edit your images. Click on editOkay, we're going to click on openComputer, and let's look for that imageOkay, so at the uncropped version here of our hero imageAnd you can click on that or you can just use your own imageBut I just want to show you how I crop it and you can use this software tohelp you crop all the other images on your website as wellso click on got it, skip all tutorials. Actually, close that so as you can see down herethis is the size of the image, and that is really big so we want to resize it. Click on resizeMake sure the lock is selected here, so once you put in the number hereit'll actually resize the height of it proportionally to the width of itOkay, so click on apply. Once that is applied,you'll see the change in the size here and then click on CropThe size that we're going to crop it to is about1800 and and also about a height of 1000so basically drag it to where it's most suitable for you to put the text. So somewhere like that andthen click on apply. And then you can actually click on one tab enhance which basically will actually enhancethe photo a little bit and you can also click on the basic settings to adjust itSo you can adjust the sharpness and things like that. You can also click on effectsSo you can add in different filters to your image as well, so you can play around with thatBut I'm just going to save it nowAnd just name your image properly, so name it like heroimage1800 x 1000. And you also want to save it as .jpgYou might want to save it as high-qualityBut all you need to do is log in to your Facebook account or you can create a new accountif you do want that and then that will download basically to your computer and thenwe can actually go to our home pageSo what we need to do is I recommend refreshing the website firstSo the builder will actually show you the live preview. So let's click on turn on builderso this is a rowyou can click on the row options hereWhat we want to do for the row width, we want to change it to full width row containerSo it goes all the way acrossIf you change the full width content, then the content area will actually go to the sides as wellBut I personally just select full width row container. And then I click on stylingNow for the background imageThis is where you can upload the image. Make sure to click on browse libraryinstead of upload because WordPress will automatically crop your image. So click on browse library andthen select filesSo we want to find the file from your computerSo let's say we want this imagewhich I cropped before. Click on open and then that will upload to your website and then insert that file URLFor the background mode we actually want it set it to full coverYou can also set it to Parallax scrolling, which is kind of cool as well, but I generally set it to full cover andFor the background position. I'm going to set as center itand then what we're going to do is we're going to scroll down hereAs you can see, you can't really see the full image, so we need to add some spacing. You want to click on — deselect that andSet the spacing to 17.5%The bottom, you want to set it to be the same as well17.5. So that way you can see the image more. We'll also be adding some text in the middleSo it's going to stretch it out even more. So once that is done, then you scroll back up hereAnd you can also select a gradient background. So you can select the different colors ingredientsyou can play around with that, as well as adding a video backgroundI personally recommend uploading your video to YouTube first andthen paste in your Youtube URL here. That way it actually loads a lot quicker, and you can disable the audio as welland for the slider, all you need to do is insert the gallery andupload the filesSelect the files. For example, this one this one and this oneand then once you've uploaded that for the image size, you want to set it to original imageFor the background slider mode, you want to set it to full coverSo make sure those are the settings . As you can see you can't really set in different text for each imageTo do thatI recommend using a plug-in called Smart Slider 3. So it's a free plug-in andhopefully, I'll make another video on that as well, but I wanted to really show you how to use the Themify builderSo I'm just going to select a default image. I personally prefer just one because it loads a lot quickerrather than loading three imagesSo once that is done, then I'm going to click on here oopsand then I'm going to click on this lock icon to set it there so does it move andThen we're going to drop a text moduleNow for the text, you'll want to type in your heading: eCommerce. I'm going to set it to heading 1Okay, so the reason why we set it to heading 1 is because it's good for SEO purposesso when Google actually scans your entire website, they'll look for the source code andif it's under the heading 1 tag, that means thatIt's basically like the title of your website. It will give whatever key word in here more importanceSo they actually know you know what content your website is actually talking aboutand that way, they actuallydetermine your ranking and of course you know you'll need to have backlinks and all that other stuff,but this is the basics ofOn-page search engine optimization and it's also good to keep things consistentSo anytime you want this size and this font for your headingsthen all you need to do is select heading 1 rather thanSetting the sizes and manually. I wanted to point out you can actually change the heading 1 font hereBut we don't want to do thatWe want to actually edit the heading 1 font universally, so that's when we actually go to the customize sectionand I think that is way more convenient in the long term becauseeverytime you set the heading 1 font youdon't have to set it here againIt will automatically apply to all the heading 1 fonts,so don't worry about that too much. I'll walk you through thatAnyways, you can actually go to the general tab here and we can text align everything to the middlejust like that. For the color you, can set it here on to white andthen click on save andBecause that is a text modul, what we can do is if you want to add the sub headlineYou can actually duplicate the moduleSo that's two modules there. And you can double click on that modulewe're going to add in the sub headline. So for example “create a beautiful online store for your business”Something like that. And then what we can do is go to stylingFor the fonts, as you can see, the settings have been savedpreviously already, but I do want to change it to 24 pixels for the sizeI think that is it so save itOkay, so that's pretty good then we're going to scroll down here and then click on the button and drag that inSo for the button text what we're going to do is type in shop nowOkay, or whatever text you want to put in there. For the linkwe're going to link it to our shop pageSo what I normally do is just copy the domain name (oops) and paste it into thereAnd then type in shop. So whether built the shop page yet, but that is the URL for your shop pageSo copy your domain and then type in shopOk just leave those as defaultsNow you can select the button style as wellso generally I recommend either circle, rounded, or squared.You can also select the outline but as you can see it's not very visible andI don't really recommend itLet's click on roundedLet's click on styling as wellYou want to make sure to click on button link because you want to edit the button onlyyou don't want to edit the moduleSo for example ifLet's say we add a background colorAgain that's going to add it to the moduleAll right, you don't want to add it to the module. You want to add the button linkOkay, so as I said before with thebutton hover colors, what you'll need to do is go to a website called 0 to 255So once you're there click on enter a colorOkay, so if we look at the background this depends on your own background. My background is kind of lightSo to make the button stand outI'm going to choose a darker button color. So the button color that I'm going to choose isthree 6s (666) which is a dark gray as a neutral color. Click on enterAgain if your background is a dark oneThen you might select a lighter neutral color. So once we have that, you can copy that therePaste in the color thereThat will change the background color. Now for the background hover,we're going to either select 2 shades darker here or 2 shades lighterSo this really depends on your preference and also on. The background as well the main purpose of it is toensure that people know that they're actually hovering over a buttonso that they can click it so whatever is more visibleThen just use that one . So you can also choose three shades lighter or three shades darkerJust as long as you keep everything consistentthroughout your entire website and then it's fine. So I might choose this onepaste that into there like that andFor the color of the link, I'm going to choose to be white , like that, and also the color hoverto be white as wellText Decoration, you want to select noneI think that is it. So if we actually save it. So as you can see, the button is herewe can actually move it to the middle using the button styling andtexting align it to the middle here. But I also want to show you that I can do it for the row options as wellso you can click on styling andbasically set the text on lines in the middleNow what that does is it moves everything within this rowInto the middle. So any of the settings that you setting here will control thisentire row only. So for example if you drag the button thing down to the new rowIt will actually won't applySo you actually need to set in the row options here again and set that to be in the middle all rightso once we've put that in , then let's just save it andClose the builderSo what we need to do is actually move the whole entire row up ensuring there is no space there and to do thatWe need to click on an edit pageOkay, and then scroll down to Themify custom panel, set the content with to full width and, then updateOkay, so I also wanted to point out if you scroll down to the custom panel, if you click on the page appearanceyou're able to set in the header design and all the other settings, for example, the footer design as wellspecific for this page onlySo what that is useful for is sometimes you might want to build a landing pageand you might not need a header or you might not need a footer then you can select no footerand no headerSo let's go back to our home pageOkay, so as you can see that's moved up. So what we're going to donow is edit the heading 1 font universally. Click on customizeAnd then I'll show you how to move this text up a little bit as wellSo once you at the Themify options, make sure you've selected the advanced tabWhich gives you more options and then you should see the headings tab. Click on heading 1 fontsWhich is the one we're editing and the size that I'm going to set in is 95so that's a good size and the font then I'm going to set in is Libre FranklinThen for the font weight I'm going to set it to be aroundBold, I think. That looks goodThen I would personally not edit anything. For example, these ones down here and also the colorsBecause if you set a heading 1 font somewhere elsethen you might automatically align it to some other place where you don't want it to alignSo only edit the size line height and also the front weight hereThen just Save and Publish. And close the optionsOkay, so if you actually want to move this text up a little bit, then I'll show you how to do thatAnd I'll also show you how to add in a overlay color so to make a text stand out a little bit moreso you can turn on the builder, and then we're going to click on this text moduleDouble-lick on that, go to Stylingand scroll down to MarginDeselect apply it all. Now, we're going to minus the bottom part some space. So – 2.00%(Whoops) – 2.00% like that, that will be good, or you can set it to 1.00% ; that really depends (on you)That looks alright, and then we're going to click on saveThen we're going to click on the row options here. Click on the styling. Now for the row overlayWe're going to add in an overlay colorLike that. And then you want to set it down to about15.00% or 10.00% depending on your imageFor the overlay hover, this is when you actually hover over the imageThen you can set it to that specific color. In this case, I might want it to be maybe 5.00% so it may be lighterSomething like that, and you can also select a gradient overlay as wellJust click on that option and select it inSave itSave itClose itHopefully that will be cool. And you can also add in animation effects if you want to as wellSo I'll just quickly show you guys just some really cool stuffclick on edit hereAnimation. For example we can set that to, let's say, fade inlike that andthen you want your other one to fade in as wellSo fade in. But this time you want it to delay it a little bit0.25 seconds delay, and then for the button as wellAnimation. Set that to fade in as well1 second DelayAlright, and you can also – let's say you accidentally moved somethingYou can also click on the undo button and you can also redo and undo. So let's say we finished our hero imagethen you can actually save as revision. So basically hero image done andIf you make any big mistakes, then you can actually click back here and reload that revision as wellYou can also save as layoutsSo for example, if you want to build a similar page and go want to rebuild everythingthen you can actually save it hereThen just name it a title and then what you can do is go to your new page and load that layoutSo you don't have to start all over againAnd if you want to create like a completely new domain and a new website you can also export layout as a.zip file andbasically import that onto your new page as wellSo we're pretty much all done. Now what I'm going to show you is how to add in your productsSo before we actually add in our productsI actually want to show you how to edit some image settingsotherwise the images uploaded will be really blurry on your shot pageso let's go back to our dashboard areaThen you want to hover over WooCommerce. You want to click on settingsSo for example, if you guys have added in your products alreadyThen what you'll actually need to do is download a plug-in called Regenerate ThumbnailsAnd it has over a million installs, and you'll need to install and activate it and then you'll need togo to tools andhere those show you aregenerate thumbnails optionsand then you need to regenerate the thumbnails after you've done the settings that are going to show you nowso click on the products tabthen click on displayThen scroll down. So for your product images, for your catalog images, we want to set it to be400 andfor the height you want to set it to 320for the single product image, you want to set it to 720and 456. And for the product thumbnails, you want to set it to 150and you also want to disable the hard crop because it's going to hard crop your images outand you don't want thatso we're just going to save the changesOnce you've done that, you'll want to go to your settings here, and then click on MediaNow for the medium size, you want to change that to 400. For the max height, 400. And then save changesSo the product image sizes the one that you upload should be cropped to around 800×800 pixelsOkay, so it's sort of like a square. It can be 700×800 or something similarBut just make sure that all the images you upload are the sameAnd you also want to make sure that is proportional. So it's actually zoomed incorrectly for all images. So you don't want to be different, you want them all to be like thisAnd then I also recommend using white background because the image size will be smallerthat means load times will be faster.But if you want you can also add in other images for your product gallery. So basically onthe shop page will be a white background, but when they click into that imagethen you can actually display your image like in the house or something like thatso people can imagine what that product will look like in their room,And then that's it. So let's go back to our dashboard areaYou want to hover over the products. And then just click on add newSo it's fairly simple: what you'll need to do is set in a product name so the first one that we're going to do isthe black dressNow this section is for the long description. Now, I've basicallytyped out the long description on my web design guide on my website,so I'm just going to directly copy that into here andand paste that in. So as you can see,I also recommended some books. For example, “The Everything Store”which is about Jeff Bezos and Amazon and also “Delivering Happiness”I think these two books are really eye-opening because you get some reallyinteresting information that will inspire you toto sort of build a better businessSo I highly recommend that and to check it outThen we're going to scroll down to the product data so for this section hereyou want to select sample productThen for your regular price, you want to set it in. So for example, $109.00Sale price, you might be $89.00. You can also schedule it as wellThen click on inventory tab. You can set in a SKU which is a specificidentifier for that product but if you don't have that many that you probably don't need itFor managed stock, then you click that and then you can set in a stock quantity. For example: 5You can also allow or not allow back orders. Then for your shippingThis is basically the shipping weight of the actual product which people receiveSo you want to set that in because you want to let people knowAnd the dimensions, set that in as well. 30cmx30x3And then for the linked products, upsells and cross-sellsso basically upsells is related products which will appear below yourproducts on your product pagesYou might have a more profitable item or you might have something similarthen that was where you can actually search for that productSo as you can see, we haven't added any products in yetbut once you have then you can search for that product andSet that in to appear below this black dress product. So for the cross cellsthis is basically your products which will appear in thecheckout section. So basically let's say you have a camera a nice cost cell might be a memory card orcamera batteries, so that is basically where we can actually set it inSo for attributes, that is for the variable products which I'll walk you through in a secAdvanced options, so you can add a purchase note. So the purchase note will appear in the orderemail which people will get. And you can also enable reviews as well, so the short descriptionI'm going to copy it from our website hereso you can include a summary of your products or you might even include shipping informationhow long that will actually take andIf it's a clothing, you might have a size guide, so you link it to a size guide. And to link it,you just select the text and then you click on insert link, click on the gear icon andthen link it towhatever page that you have the size guide onAnd then you can select open link in a new tab which I recommend and then click on updateNow for this one here, you might want to change the colorso to change the color as you can see there's no coloroption thing here. You want to make sure you toggle that toolbarand you can select the color here. So I'm going to select a custom colorSo I'm going to use this color code hereBecause it's the same as the stock count color and you'll see why in a momentDelete that space, Click on OKThen let's scroll back up here. You want to add a category for your productsFor example, Dresses. And click on Add NewFor your product tags, it might be the brand of dressYou might have maybe the colorof dressor maybe the material of the dress and then you can separate it by commas and then click on addso that will add two tags there. And then for the product image, you'd want it setSelect upload files, select filesNow go to the images that you have downloaded from the description belowand then click into the product imagesSo there I will have all the images for you to upload and follow alongSo I'm just going to select all of them and upload them all togetherselect the black dress and then click on set product imageNow if you have additional images you might have it on different anglesor you might have her in a different backgroundThen you can add in additional images here. So it pretty much is donethen what we can do is just click on PublishWe'll view that image and see what that looks likeSo I'm just going to right click and open that product in a new tabSo that look's pretty good. Image is nice and crisp and can click on that and then they canzoom in like that. As you can see here, the green text is the same here. So it all matches and is consistentI'll show you how to configure this page later. Don't worry about thatLooking good. So now what I'm going to show you is adding in a variable productAll right, so just click on add new herenow we're going to type in JumperThen I'm going to go here and copy my long description again. Just copy thatpaste that into hereScroll down. For the product data, you want to select the variable productThen for the inventory you can also set in the unique identifierFor a managed stock you probably want to manage it individuallyFor shipping, since they are pretty much the same, then you can set in the weight of the product here30, 30, and maybe 4cmThen you're linked productsSo let's say you want to link the black dress, then you can search it up like thatAnd it should appear as I said beforeBut we're not going to link. So then we're going to click on the attributes , we're going to add in the attributesThen we'll set up the variations. So we're going to click on addOk so this is, for example, the colorOk so we have a green jumperNow what we need to select is the pipe symbol and to do that you need to click onthe shift key and also the forward slash (/)button on your keyboard, so it should be above your enter button and below your delete button.So it looks something like that, so green,purple and then another pipe symbol, graySelect useful variation, save as attributes. And another variation would be sizesso we'll need to click on add againthen type in sizeSo we're going to have small, pipe symbol, mpipe symbol and large one. Click on useful variations, save attributesOkay, so once you've added in the different attributes you can add as many as you wantthen we need to create the variationsSo click on variations hereAnd then click the tab here and create variations from all attributesselect go andIt will create all the variations that you set. So click on okclick on okAs you can see, you've got the gray option with all the different sizes, purple with all different sizes greenwith all different sizes so you need to click on the down arrow,if you click here, you can upload specific images so click on thatLook for the grey jumperAnd then set variation image. So for example the large size I might charge$89.00 and you can also manage stock here by clicking this item hereYou can set in specific sale prices and specific sizes and even specificdescriptions for each and every product that you have here, but I'm going to leave them as defaultSo I'm going to click on the next one then what you need to do is select the jumper againNow the price might be a little bit cheaper because it's medium. $79.00scroll down to grayenter that in and then this one might be $69.00so I'm going to quickly do that for the rest of these so selecting the purple jumper and also the green jumperSetting in the specific prices, so I'm going to quickly do that nowSo I'm done and then just click on save changesThen we're going to add in this short description, so I'm just going to go back here and copy that overPaste that into there , change the colorEnter in the color code from my website, copy thatPaste it into there and click on ok. So we need to set in the categories. Click on thatJumpers. Add CategorySo for the tags, we're going to select brand ofjumper. Or maybeCotton jumper as well. And then click on addFor the product image, you want to set that in. And this is the default image that will appear on your shop pageSo I might choose the green one. Set that in. And you can also set in additional gallery images as wellso what we can do is I'm going to Publish it now andThen I'm going to open the product in a new tabso as you can see if you actually change the color option and also change the pricethe prices will change like that andsame with the color of the jumpersSo if you want people to actually arrive at yourProduct and have a default option set in , then you can go back to your product, the jumper products,scroll down tovariations and youcan set in the default form values to be whichever you wantso this one might be green and to set it to mediumclick on updatelet's say if we refresh the product page then it should show the default form values thereThat is pretty much it. We've set in the simple and also the variable productAnd I just want to quickly run through how to set up the downloadable. So it's fairly simpleLet's just say we go toAdd New againOkay, so scroll down here. You can do everything the sameall you need to do for a downloadable is select the downloadable tabAnd because it's downloadable, It's not shippableSo you need to select virtual and then you upload your files as well as setting in the download limitsand things like thatNow if it's just a virtual item, for example, logo design services, then you'll deselect downloadable and thenJust do thatSo for the advanced option, what you might do is you might leave a noteFor example, if it's a logo design service you might actually create aspecific form for themSo basically I created a form on Wufoo.comand it's basically like a little brief that I want people to fill outso and what I'll do is just copy the URLThen paste it into here and say “Thank you for the purchase. Please fill in this form here”So people will actually get the purchase note intheir order confirmation. So that's pretty much it. There's not much to it and just basically set everything asbefore. So what I'm going to do now is pretty much add in the rest of the productsBasically you can go to this demo websitewhich I will have created. Then you can just check out what I've typed in if you want to copy everything as is orwhat I suggest is you just add in your own products and things like that. If you had any questions,make sure to just drop it down below in the comment sectionSo once you've added all your products then you can click on all products here andYour products will be all listed hereand you can click to edit them or anything like that if you need to. And if you actually visit our store hover overyour little house thing here and right click open in a new taband your store should look something like this. All the images should be crispIf they are not, then maybe you need to regenerate the thumbnails as I said before. So what we're going to donow is add the products to the home page. So all we need to do is go and visit our home pageThen we're going to be turning on the builderScroll down to the second row here. What we're going to do is add in a text moduleSo this will be a title forfeatured productsSo it could be your featured products orspecific category products or most popular productsDoesn't really matter what you name it. I'm going to set it to heading 2Then I'm going to bold it a little bit like thatWhat I'm also going to do is because I'm going to set in the products below hereI want to add a little bit of spacing between the text and also the products. So I'm going to go to stylingScroll down to padding. DeselectFor the bottom padding I'm going to set around3.00% or 2.00%. You can see what's best for your website click on saveAnd then I also want to add some spacing between the text here and the hero imageand also align it to the centerSo click on the row optionsstylingScroll here, and since we're here, text align it to the middleScroll down to the padding. Deselect that. For the top padding, I'm going to add maybe 3.00%and also the same for the bottom. 3.00% as wellSave itAnd then we're done. Scroll down to the very bottom. You'll see the WooCommerce Builder ModuleIf you don't see that, then make sure to install the WooCommerce plug-in and install and activate itSo you need to go back to the plug-in sectionSo let me walk you through one important thing for us. So just watch this partI'm going to set the product to 8Then I'm going to order by price, set it to ascendingAnd change that to grid 4Okay, so I'm going to save itSave it and then close itrefresh the pageSo as you can see the product here, the title of the product, takes up two lines because it's super longSo as you can see it moves everything down and the second row will be moved down as wellSo if you want everything to be aligned like in one lineThen what I suggest you do is toDisable the masonry layoutSo most of the time you might have only four products, and you might not have a second rowAnd then don't need to do that or you can just make sure to keep the titles reallyshort or change the title size to be a little bit smaller then you wouldn't have the problemBut if you can't solve it using those solutions, then you can disable the masonry layout. Go back hereFor masonry Layout, select noHopefully if we select yes, and then save itClose itOkay, so right nowwhat happens is it adds the space for the rest of the products here. And the second rowis also aligned all evenlySo let's go turn on the products, and I'll show you some more of the features of the moduleClick on that so you can select specific categories to be displayedI'll also show you how to add specificfeatured products onto your home page in about a minute or soYou can select on sale and also top rated as wellSo for me I'm going to set in four products for the home pageFor the layout I'm going to select grid 4It's nice and simple. Or you can use the slider as well and you can play around with the settingsFor example for the slider options you might want to display 3Four the slider paginatio, you can hide that which is these little dots. For the arrows you can hide thatSo I'm going to go set it back quicklyto listNow for the content layout, for example, overlay. What happens isthe add to cart everything disappearsBasically what will happen is when you hover over the item the add to cart and also the name of the productwill actually overlay on top of the productSo the polaroid is also similar, but I'm just going to keep it as defaultThe post gutter is the spacing in between the products so you can change it to noand everything will basically stick togetherIf we do thatSo there's less spacing in between. I'm just going to keep it as default sobasically you can play around with these settings hereSee which one you like the best to actually display for your website so right nowI'm going to set in the featured products, so I might click on featured products here and click on saveLet's save it and close the builderWe need to go to our dashboardWe need to go to products. All productsSoyou can see the little star icon here. All you need to do is to select the star iconWait for it to actually save and it will become solid. So that's a featured product nowSo I'm going to select maybe a few morethis one hereThen I'm going to select one more. Maybe a dressOkay, so once that is done, we're going to go back to our home pageThen basically the featured products will show up thereOkay, so basically that's it and you can actually add the WooCommerce module to any page,so you might want to create otherproduct pages, and then you can add it in as well . So what we're going to donow is actually go to a shop page and basicallyconfigure the shop page layout and also add in the product filterThe first thing we want to ensure is the product filter being onso we need to go to dashboardWe need to ensure that the plug-in is actually activatedAll right, so we need to activate it hereAnd then it should show up on the product filter, and then it should show up hereSo we need to click on product filters andWe need to add a new oneWe're going to set in a title so “Shop Page”, perhapsSo for these settings here, I'm just going to leave it as defaults. You can come back and adjust thembut I like them just the way they are. So what we're going to do first is drop in aproduct titleSo this is basically a searchSo I'm going to type in a field title and I'm going to name it searchThe next one I'm going to put in is maybe a price widget. ThereAnd I'm going to display it as a slider or you can display it as a range where you enter in the priceI'm also going to put in a categoryOkay, so for the category one, I want to display it as radioNow if you select radio, that means you'll have the option to select all the products so that's importantSoo let's go to here and then dropit in on saleThat is pretty much it, the ones that I feel that is most usedSo once you've saved it, then we can scroll back up here and close the window . Once that is doneThen it should add your new shop page widget thing here. And then the shortcode, copy that to your clipboardSo what we need to do is actually go to appearanceoops, and click on widgetsSo we need to add that on our shop page sidebar. So we need to scroll down hereSo we need to drag a text module into the shop sidebar widget areaI'm going to paste in the shortcode right there. Click on save. Now if we go to the shop pageThen it's not going to display yet because we need to edit the layout for the shop pageSo go back here.Themify Shop, Themify Settingsnow scroll downto the shop settings tabSo for the product archive, You want to set the shop sidebar to appear on the left hand sideAlso for the product archive sidebar to be on the left. So those two have to be the sameclick on saveLet's refresh the pageAnd as you can see thefilter will show up, and it looks goodWhat we're going to do is I'm going to walk you through just some basics of the layout settingsso you can change the product layout. I'm going to display it as a grid of 3 so 3 images per rowYou can disable the masonry layout if ,for example, you might have a productlike this one and you want to make sure everything is alignedthen you would disable it, so I'm going to disable itFor the content style, as I showed you before, you might want to change it then I'm going to keep it defaultKeep that as defaultSo for each of these settings here, what I suggest you do is to maybe open up your shoppage like this in another tab and thenJust play around with the settings hereThese are basically all the display things on the shop pageAnd then you can just set it in, save it, and then refresh your page to see what sort of layout you want to displayAlright, so for example, I might want to hide the product shareThat one there. What else do I want to hide?I think that is pretty much it and let's say if I save itThen the product share thing which is this thing herethen it probably will disappearThen we're going to scroll down to the single product page. So what I like to do is just click into a productAnd we can edit the product page layout. So by default this is the layout and I personally like itIt's pretty goodYou might want to remove the tags and also the SKU if you set that inSo what you might do is you might hide the SKU, hide the product tagshide the product share buttonBecause I don't think that's that useful these days. Most people would probably justshare the link with their friends rather than using that to share itSo that's why I want to remove it, okaySo you can also change it to the default light box. I want to keep it as inNow for the wish list settings, you want to change it to wishlist pageFor example if – let's just save this firstNow for example if I click on this hot icon, then it adds the wishlistSo that will be added to the wishlist pageinstead of the contact. Now for this spark animation, and you want to disable that, then you canFor example if we go back to our shop pageLet's say we click on thatThat's the spark animation. So you can change the color and I'll show you how to set in the colors laterand then we can change it to our primary color or you can just disable it , keep this as defaultBasically that's it. So if we save itThen we're pretty much good to goSo what I'm going to go through next is the WooCommerce settings. For example, the taxesshipping, coupons andPayments. So right now,I'm going to go through the tax settings now what you want to do is hover over WooCommerceclick on settingsThen you'll be directed here. Then click in the tax tabSo the tax settings is something that I've found to be the hardest especially for the people in the US 'causeYou don't actually have a nationwide, like a standard tax rate. You have different rates for differentStates and different areas and things like that. So adding it into WooCommerce can be a little bit troublesomeBut I spent a long time trying to figure out how to do it the best wayso I'll show you how to do it in the tutorial. So it's going to be like semi-automated forthe people who are in the US. So the first thing is I do want to explain it forthe rest of the world where most places are actually just using a standard tax rate. So for exampleAustralia it is just like 10% standard for the entire country that meansit's just really simple. So to include it in Australiathen you just need to click on like standard ratesandIf you really set in your country then it should already add it for you, so AustraliaYou just need to add in your country code, and then just add in the rate for the country and then the tax nameLeave the priority as 1Compound is only for places like Canada where they have like a federal tax and also a province taxwhere you need to actually add them both together. But generally for most countries., you don't need to use itFor shipping, you just need to check if your country charges taxes on the shipping as wellFor example, I might show you an example, so insert rowLet's say you're in the UK. You need to click on this thing here in a new tabYou need to look for the country code for UK. And I believe that is GB because I checked it a while agoso scroll downGB . So put that in hereThen I believe the tax rate was, I think, 20%So we're going to put in 20%. And it is called thatAnd that's all you need to do. So if your country has just a standardnationwide tax, then that is all you need to do and just click on save changesAnd then you can click on the tax options as wellSo right here is basically you can display the prices in the shop excluding tax orincluding. So for example, in Australia most stuff like on the shelf the prices will include the tax alreadySo depending on the country and what people expect, then you can either excluded or includedSo for people in the US, you might exclude it because you might have different rates for differentcustomers, and that way you won't confuse themSo probably for the US, you set in excluding. For other countries which havestandard nationwide taxes like Australiaor you're just used to having prices included then select that. And then you can alsodisplay prices during checkoutand the cart as well. So you can select including and excluding for that. And then just save the changesIf we click on the standard ratesSo I'm going to basically explain it for my US viewersBecause I was looking like for information about this like all over the internetAnd I couldn't find it and even WooCommerce didn't really explain it properlyThey just told us to refer to our accountant and things like that. But I actually want to explain itSo what I do recommend is probably contacting an accountant, but againthey're not going to tell you how to add it in to WooCommerce. So that's something that I will show youSo what we need to do first is, if you're living in the United States, is you want toDetermine which type of state you are. So if your origin based or destination basedSo you can look at this map here andcheck out which type you areSo, for example, if you're living in Texas and your businesses operate in Texasthat means you'll be a origin state andwhat that basically means is the tax rate will be based on the location of your businessSo for example, your business is located in Houston, Texas. Your zip code is 77001What you do is you go to a website called TaxJar, Sales Tax CalculatorFor example77001. You just click on lookup rateYou can check your rate. So the rate 8.25. So basically you only need to pay and charge sales taxfor people who are in your statethat you're operating in. So for example, if someone from New York buys your productsThen you don't need to pay or charge sales taxOnly if the person is living inTexas then you charge them. So basically to add that in, it's also fairly simple as wellSo just click on insert row and if you're in the US, I can just type in USlike thatSo for the state code, you can look at the map hereSo that's TX for TexasPut that into there, so leave this one as empty, check your rate which is 8.25Then you just put in8.25 in there, and that will be your sales tax. Keep the priority as 1, compound as antiquesShipping, you need to make sure whether or not they charge shippingso you can check that out on TaxJar.comor just Google it or ask your accountant. So once that is done, then you can just save the changesSo if I go to the store page nowAnd if I add a product in, add to cart, and then I will check outFor the country I'm going to select, for exampleUnited StatesFor the state, this is going to be TexasZip Code, I'm not sure. Maybe 7705?Scroll there. So the tax is not going to show up yet. So I'm going to quickly put in the address, a random oneSo as you can see, the sales tax will be added. So that would be the8.25. And if for examplesomeone from New Yorkbuys your product, change the zip code to 001Then it won't actually add in the sales tax. So I'm going to explain the destination based one nowso if you go back hereThen if you're for example you live in and operate in the New York state then that's your destination basedstate. So what that means isyou'll need to charge the tax rate based on the location of your customer's shipping addressSo basically since every single area in the state will probably have a different rateThen you basically need to know thousands of ratesSo basically what we need to do is actually import the rates into ourTax settings, so I'll show you how to do it right nowWhat we need to do is we need to go to PluginsAnd click on add newNow what we're going to type in here is tax rateupload. Click on enterYou want to scroll down here. Tax Rate Upload by Adam Bowen. Install now and also activate itAlright, so once that is donethen you'll need to go to www.taxrates.com and then click on download sales tax tables here on top andselect New Yorkcontinue andall you need to do is enter in your name email. Just your name here again, and probably a phone numberI don't think it has to be real because after you click on download then it should download to your computerSo the file should look something like thisIn a .zip file. What you need to do after that is you need to actually double click itThen you'll actuallyopen up in a folder like thator unzip it. And inside the folder, they'll have an excel file with all the tax ratesSo we need to go back to our websiteand we need to upload those rates. So hover over settings, click on tax rate uploadYou want to choose file and then we go to our desktopClick the Folder and upload the CSV fileClick on open and thenselect add tax rates. So that's going to import everything from the CSVAnd I'll actually show you an example of basically how it worksSo scroll downYou want to change all the priority to 1. Click on yes and submitSo you also want to check if the shipping is taxable and I belive for New York it's a yes. So I'm going to submitNow you can also change the tax name. By default it will be thearea and also tax. You can actually change it to for example sales tax you can need toBut let's just leave it as default for nowSo as you can see it's added in 2000 zip codes for the New York StateThen what you can do is let's go tothe WooCommerce and click on settings. And then if you go to the tax options hereclick on standard ratesYou should see over 2000 rates added . So as you can see for this zip code hereyou're rated 8.625 and for other onesIt's 8.875. So it's all different per zip codeSo that's why we need to add in every single one.Sso once we do thatthen let's actually go to the storeLet me explain a little bit furtherso if we go to checkout nowSo basically let's sayyou're operating address is atzip code of 10001So if you actually check the rate here1001. Look up rateSo iit's 8.875. Now your buyer is fromSyracuse in New York. Hopefully, that's how you pronounce itBasically if we set in that zip code it's13201You will see that if you get the calculator out then it should be 8.00% . Different zip code which maybe14201 which is in BuffaloThen the rate is different again. So that is if your destination based stateSo by the way you also need to only pay and charge sales tax if you have a nexus in the stateSo that basically means that if you have a significant presencewhich means like do you have a shop there or employees there,and I recommend reading on that on the TaxJar Blog andThen I've explained all thatexplained all that andthen basically you'll be good to go. So what I want to walk you through now is setting in different tax classesSo for example, in the United Kingdomthe standard rate is 20.00%but you might also have different products, for example, home energy andproducts for renovation, and that's only charged at 5.00%Or you might have zero rates for life's necessities such as groceries and things like thatSo to set that in to the WooCommerce then you can click onsettings, taxes here, and then click on reduce ratesSo let's take the UK as an exampleJust insert row, set in GB for the country codeSet in the rate. So for example 5.00% for the reduced rate. This one might be a reducedrate and then save changesOnce that is done and set in, You can also set in the zero rate % for this tab herebut all you need to do is go to your productsLet's just say this thing is a life necessity, and it's set to 5.00%then just goes to productsscroll down to the product data. For the tax class, select reduced rate and then you just update theproducts and then pretty much you're good to goSo I'll also be making a separate video about how to add in the tax rates for Canada as wellwhich is a little bit complicated, but I've tried to make it as simple as possiblebecause we'll also be uploading the rates andit's sort of semi automated. So what I'm going to be walking you through now is the shipping optionsSo right now. I'm going to walk you through setting up the shipping zonesSo you'll need to hover over WooCommerce, click on settings, and click on to the shipping tabThen we're going to click on add shipping zoneOk so the first zone that most people will have is a domestic one. So that's within your own countryNow for the zone regions. For example, if you're located in United Statesthen just type that in. Now if the price to ship to Canada is very similar or the sameThen you actually might include that one as well in the zoneOkay, because it just saves timeinstead of creating so many zonesSo what I'm going to do is click on add shipping method. The first one that we're going to add is flat rateSo you can add that in. So basically offer a flat rate shippingmethod. You can click on edit and you can change the cost of it here. So $10.00Save changes and add shipping methodYou might also offer local pickup and then add shipping method like thatOkay, and you can also edit as wellAnd let's say you want to offer a express rate, then you can add shipping methodJust add in the flat rate so add that in. Now you can actually change the name from flat rate to expressrate and maybe change the pricing to $20.00. Save changesSo we're not going to add the free shipping here because it doesn't give us too many optionsWe're going to install a special plugin that gives us a lot more optionsso you can set it up with advanced parametersSo let's close that for now, and you can also rearrange everything just by dragging and dropping like thatSo once you're done, then you can click on the save changesI want you to click on the shipping zonesSo once you click on that, you'll see the domestic zone setup. So you'll need to setup all thespecific shipping zones that you ship to. If you don't, then it actually won't show any shipping methodsso if you ship to Australiaand New Zealand, you're going to have to set up a shipping zone otherwise when people actually checkoutand then it'll say there is no shipping to that area. So once that is donethen I'm going to show you the shipping classes. So if you click on shipping classesThen we're able to set in a shipping class. For example, a heavy item shipping classSo I'm just going to copy that and paste into the slot and descriptionso that's for your own reference, and save shipping classesSo once you're done, so this is really good if you have, for example, if we go to our productsFor example if you and heavy items such as a sofa or maybe a televisionThen you might set that to heavy item. So look for black leather sofa and click on editAnd then basically you can scroll downScroll down here to shipping and for the shipping class. I'm going to select heavy item and then just update itOkay, so once when you've done that, then you need to go back to the WooCommerce settingsThen click back to the shipping areaOkay, you need to click on editNow basically I'm going to show you how to set the price for itSo for your flat rate. Obviously it's not going to be $10.00It's going to be a little bit more expensive. So you can set in the price hereSo for example, if you want the total cost to be $100.00 then you're going to put in $90.00 because thestandard is already $10.00And then you can set it to be each shipping class orfor it to be the most expensive shipping class. And then click on the save changesAnd you probably also want to edit the express one as well. So for examplewe're going to change it to $180.00. So it's going to be a total of $200.00save the changesAlright, so once that is set in, I'm going to show you an examplelet's go to the storeand let's add, okay, we got the black dress in there. So we're going to click on checkoutThen we're going to scroll downSo as you can seeif we set it to United States, then the flat rate will be 20–I mean $10.00. Express will be $20.00. Now if we change it to maybe a different countrythen it'll say that no shipping will be off it because you haven't set in the shipping zone to the UK yetSo if we add the sofa in thereadd that to cartThen we go to checkoutWe need to set the country to United States firstSo as you can see, it is $100.00 nowAnd $200.00 forexpress. So once we've done that, then I'm going to show you how to set in the free shippingSo what we need to do is go to Plugins . Click on add newThe plug-in that we're going to download is Advanced…………Free Shipping. So it will be by your own sole money with20,000 installs. Click on install now and thenactivateSo once I've done that, we need to go back to the WooCommerce settingsThen click on the shipping tab and then click on advanced free shippingand then click on add free shipping rateOkay, so this one, I'm just going to name it free shippingFor example you might want to offerfree shipping for people who have spent more than $50 then you need to set in subtotal, equal toor greater than$50.00. So free shipping will only be enabled if it exceeds $50.00And then you can add in another conditionSo for this condition, since we have the heavier item which is the sofayou want to select contain shipping classSo you want to set to not equal toHeavy item. So what that basically means isfree shipping will only be enabled if in the cart there is no heavy itemActually you want to name it as well, so I'm going to name it free shipping in capsulesUpdate it againSo I'm going to open up a new windowI'm going to go to the shop pageLet's just add this black dress into the cartand click on CheckoutLet's scroll down, change the country to United StatesSo as you can see it offers free shippingbut let's just say we add a sofa in there. So we're going to go back to the shopThen we add the sofa to the cart which is the heavier item shipping class and we check outSo as you can see once that is added and free shipping will be disabledSo this plugin is really useful because you can also set in, for example, if you ship to Australiayou can actually add a different groupLet's say for Australia, you only want togive free shipping if they spend $100.00 or moreThen you set it to $100.00. Also add a conditionSet the country andthen set the country to AustraliaLike that. And then you can update it like thatSo you're going to make sure you set in the Australia shipping zone in firstAnd another Plugin which I think is really useful is the advanced free shipping validationso you can go to PluginsThis will basically tell the -click on add new- will tell the customer why certain items can't be shippedIt might be usefulI'm going to search it upSo if you want that plug-in, then you can install and activate it and set that upSo that's pretty much it for shipping. Right now, I'm going to walk you throughsetting up the payment and also the coupon options. So for your payment andcheckout options, you want to hover over WooCommerce and then click on settingsSo if you scroll down to the currency, make sure that is correct then you can save changesOnce that is done, then you can click on the checkout tab up hereIf you have the SSL from HostGator, then you can actually force secure checkoutScroll down, leave those all as defaultOkay, and then click on save changesNow let's say you want to enable bank transfer, then you can click on bank transferAnd you can enable it just by selecting that andleaving your instructions and also your account information to finish the transferSo you can also do that for the cheque payments andalso the cash on delivery. So for example, the cash on deliveryyou might actually do not accept it if it's a virtual product. So save changesNow generally I recommend Paypal as thedefault payment method because it's the easiest most efficient and probably the safestand PayPal also has its ownHTTP which they have the SSL certificateSo the payment is done on their platform and that means they handle the security as wellSo once you've enabled it, then enter in your payPal email. If you don't have oneI recommend signing up for a business account because you're going to be accepting moneySo if you scroll down, if you select Paypal Sandbox, so that will enable you to test paymentsSo you need to create a developer account and I do have a tutorial on that at my YouTube channelso scrolling downYou might also want to enable the API credentials so you can process your refund via PaypalSo you can click on that to learn how to get the APIand then just paste it into these sections and then save changesSo if we actually go to the accounts tab as wellYou'll want to enable customer registration on my account pageSo once that is done, scroll down and then click on saveIf you click on emails here as well, then you can actuallyset a different header. So for exampleyou can change a header image to your own header image. And what I'll do is click on media hereso open it a new tabLet's say you have a different header design you would add that via here and then after that you'll have a URLwhich you can copy andthen you just paste in the URL here andYou can change the footer text to your brand as well as changing the colorsso I'll be going through the colors in a second, but this is what you can actually edit. So save itAnd right now I'm going to walk you through how to create coupons as well. So click on the couponsAnd you can just click on add couponAll you need to do is set in a coupon name. So “Black Friday”. So I don't believe it's case-sensitiveSo people can type in all lowercase or uppercaseBut I think they will need to put the space thereYou can add a description, though you don't need to. For the discount typeyou can do percentage discount. So for example, 20 that would equals 20.00% discount. Or you could do afixe-type discount of like $20.00And if you want to allow free shipping you can tick that but you do probably want to put in a expiry dateSo let's say it expire at the 31st. And you can also set the usage restrictions hereminimum spend specific products or exclude products, that's all up to you, and also usage limitsSo depending on how generous you want to be, you might set a limit per userBut I normally just leave it as is . They can use it as much as they want because, you knowthey're just buying more stuff from your website. Click on PublishBasically that is done. So if you actually visit the storeLet's say you want tocheck outPeople will enter the coupon code here”Black Friday” and then applySo it says it'ssuccessfully applied. If you scroll down it would minus $20.00 from the checkoutSo that is pretty much it. So right nowI'm going to walk you through how to add in your logo and Favicon which is the little icon up hereAnd then we'll go throughchoosing your color scheme and also applying it to your websiteSo now I'm going to show you how to add in the favicon and also the logo up hereSo you need to click on customizeNow while that is loading you can also go to Fiverr.comYou can also search for logo design here. Click on search. So you can get logos for $5.00 hereAnd you can also get them to send you the favicon versionwhich is basically just the icon without the text alright. So if you go back hereThen, so click on Site Logo and Taglineclick on site logoSo if you don't have a logo yetjust set in a logo site title. And you can change the font weight to maybeBold like that and you can also change the font thereYou can click on logo image. If you have an image, click on that to uploadupload files, select filesAnd search for the folder if you have been following along. So there's two different logos hereWhat I recommend isensuring that is a PNG file which basically means that there is no background on that imageNow if you're doing it yourselfthat's what you have to make sure because sometimes you might save it with a white backgroundAnd you don't want it because if you have like a darkheaderthen that means the white background will actually show up. Now the recommended size is128 for the Height. For the Width,it doesn't really matter as much. But for the height you want to keep it 128 or belowSo let's just upload that one in there, click on insert image, and then it should show upSo this is the height setting, this is the width setting. So since the height is 128, you want to half itSo by halving it, it is 64So once you've set to 64, then it should be goodLet's just zoom out a little bit so you can actually see the whole menuYou can also arrange the position by clicking hereSet it to relative, and then you can adjust it padding for the top and also for the bottom like thatSo maybe plus two and then you move it down andjust play around with that until you get it exactly where you want it. So we can click on saveAnd close it and then I'll show you how to add in the faviconSo now for the favicon, we need to go to our dashboard areaAnd then we want to click on Media and then click on add newThen I'm going to select filesSo I'm going to select my favicon. It's also transparent and, as you can see, the size is 64 pixelsso it's 64x64And make sure that you crop it as the actual icon as possible and then click on openThen once that is uploadedthen you can click on editGrab the URL here. So double-click and select all copy the entire URL. Go back to the Themify settingsAnd then paste it into here, the URL. Click on saveAnd then we're going to go to our websiteThen it should load up on the top left here. And then you're pretty much good to goSo in this section, I'll be talking about choosing colors and creating your color paletteand then actually applying it to your websiteSo colors are really important because they evoke emotions and also ifpeople lgo to a website and they don't like the color scheme of it, then they might even click offSo it's really important to choose the right colors for your audienceSo the first thing now that I want you do is really understand your audienceThink about how old they are. Are they mostly male or female?What do they like? Where do they live? and things like that. And then once you have an idea ofwhat emotion you want to evoke as well, then go to a color meanings website, so you can go to HoganChuaWeb Design Guide and then you can click on this, the color meanings websiteBasically it will explain what each of the colors meanSo for example, I'll be applying the color to a hypotheticalmeal delivery service like fresh food and things like that delivered to your houseSo I'm going to be choosing the base color of GreenSo some of you might be selling clothes andBlack might be a really popular choice because it is kind of stylish and elegant and a lot offashion websites will actually use black or dark graySo choose a base color and then what I want you to do is go toMaterialuicolors.coSo I also have that link here if you click on it as wellBasically you want to select the right shade ofyour base color. Because, let's say if you move it here then it's like really darkFor example if you choose a dark blue, then it's more sort of corporately, it probably suits like a older audienceBut if you choose likea lighter version of it, then it's more young and energeticSo choosing the right shade for the, you know, right age group is really important as well. So for exampleI'm going to be choosing this light green hereNow if you want to choose like a black color, I would suggestmoving it into 900and using this really dark grey instead because most of the time on most websites, it is not 100% blackBecause the contrast between white and black is a little bit too muchso I prefer using really really dark grey insteadSo once you have your color code, my one is the green one, let's move that 600I want you to go to a website called PalEttonP-A-L-E-T-T-O-N.com, and then put in your base color code into here. Click on okSo once you've done that then click on add complementarySo that will use the Color Theory to select the best color that goeswith your base color. So if you don't like that color that they've chosen using the color theory, you can also usethese different ones here as well. So click on each of these ones andpick a color or you can also use the free style option hereAnd if you hold shiftyou can actually drag one of the color wheel things and it will select a color for youSo it keeps it on like this track thing so that ensures that it's like the same toneSo personally I'm going to selectthis color here and then what I'm going to do is copy itI'm going to go to color.adobe.comAnd if you go there click on customThen for the secondary color, I'm going to paste into there, and I'm also going to paste my primary colorSo my primary color is there. I'm going to paste it into hereand then click on enterAnd for the Middle one I'm going to set it to whiteSo this is going to be our accent color which is going to be used for our buttons like sale icons or things thatYou want to bring attention toThe other ones,I'm going to set it as neutral colors because you don't really need that many colorsIt's sort of like choosing colors is sort of like choosingwhat color to wear. So you can look good injust like one color , black suit or like a white dress or something like thatYou don't need too many colors, so especially if it's a eCommerce store. This oneI'm going to set it to be a dark graySo basically this will be your color paletteThis is going to be a base color, accent color andneutral colors that you can useSo you don't have to use exactly these color codes because sometimes it might not be visibleor it's just not practicalWhen that is the case, then what I'll do is copy the color code hereGo to 0to255.comEnter in your base color and also open up another oneThen I also want to copy over my accent colorand put it into there. So you can use different shades of your base colorif sometimes you can't use that color. And it's alsogood because if you have it open, then you can easily set the color in for your buttons and things like thatFor your button hover colors. So once we have that all set, then we're going to go to the websiteSo this is the other demo website which I've builtBasically I'll show you how to apply it on this website hereI also wanted to point out that if your –
let's say your base color isBlack here, then you can pretty much pick any color that you want alright. So maybewhat I'll suggest is just pick an accent color from here. If your were like a fashion storewhich will be mainly selling toteenage girls, you might pink as the accent color,.But if you're like a clothing store that sells likefor women and men, then you might choose a blue color because blue is the most popular color in the worldSo it might be a good choice as your accent colorand then just paste it into hereIt might also be a good idea to actually save it so you need to probably create a AdobeID if you don't have one andsign in. Or you can just make sure to write down the hex code on a piece of paperThen whenever you're building a website and just enter it hereSo you can just copy and paste every time you need to change the colorsWhat we're going to do now is go to our website and then click on customizeOkay, so make sure you are at Themify options and select advanced optionsThen you can click on the body. So for the body backgroundyou can change the background color. But I'm going to keep it as white because you are an eCommerce storeSo you want to bring the attention to the products rather than the actual brand of your websiteSo for the body fonts, you can also change the font colorBut personally I'll just keep it as default because it is alreadydark gray and it looks goodFor the body link, what I would set here is probably your base color so if you go to yourColor Palette here, you can copy overyour base colorThen go back to your website and then you can paste it into there. And as you can see it's changed to green nowSo if your base color is for example like the dark grey, then you might want touse your accent color. So as I said beforeyou might have picked a blue or a pink then that might be yourLink color. If it's sort of like a color which is like too light, for example, like this yellow hereit's like way too light,then you wouldn't use that as your link color at all. You'd probably use a underline insteadSo whatever you do on your website, you're going to make sure thateverything is visible. Then for the body link hoverThis is when you hover over the link what color it changes to. So as I said beforeearlier when we're setting in the buttons, we use the formulawhich you either choose 2 shades darker or 2 shades lighterSo in this case, I'm going to choose 2 shades darker and then I'm going to put it into the body link hoverSo when you hover over it, then it should be darkerSo it gives that little feedback there. So we're going to minimize this and we've set in the bodyThen we're going to go to the header sectionOkay, so as you can see, you can't see the header menus and things like that. So I'm going to zoom out a little bitSo I can see thatSo the header section affects everything up hereSo if you click on the header wrap, you can change the header wrap background colorSo, for example, if you were a fashion store, then I might change it to a darker colorSo the 3D3D or your base color which is that really dark grayBut since I am selling fresh food hereI'm going to keep it as white because it just looks really simple and sort of friendly. So I'm gonna keep that as isSo I wouldn't put the base color in there unless it's like a dark grey or something like thatBecause let's say if I put like a green in there, then it's just too much. So let's saylet's grab that greenLet's put that in there. So I just think that's just too muchSo it looks a lot better just white. So once you've done that, then you can go to the header font sectionSo the header font is actuallyanything without a link. So everything up here is actually a link so we don't need to change anythingSo if you click on header link, then this changes the color for all the links in the header sectionSo you might want to change this to a dark grey. So what I'm going to do is I'm going to use this color codeCopy that. Let's paste that into here like that. And as you can see that changes all the link colors to that dark graySo I would use a neutral color. If I put it to be the green one then it wouldn't be as visibleThat's why I like to use in you to a color for that. If your background was darkthen I will change the header link to whiteThe header link hover is when you actually hover over it. So you want to give it a nice effectSo what you can change it to is maybe like a green, your base color, or you can actually choose adarker version or lighter version of the color that you put in here. So for this instance,I might go for a 5D5D. So it goes a little bit lighterLike that. So it gives that slight effector you can choose your base colorSo as you can see when you're hovering here, you see that yellow underlineSo to change that color, you can actually go to the accent stylingClick on that. And I believe that's the accent border colorSo I'm going to set it to 5D5DAnd that will change like that and then I'm going to save itNow for the site logo and taglineThe tagline I might remove it to none so it's nothing thereLet's close that. For the main navigation, this is actuallythis here. So this is your main nav. So you can actually override the header link colors if you change it hereSo I'm going to leave it as is because I don't need to but you can if you change these settings hereSo for the menu active link, let's say if we click on the shop pageThen as you can see, if we change the menu active link andlet's change it to maybe like a green or something like thatLet's change it to a red. So that is the active link color. So for the active linkI'm just going to leave it as default because I think it just looks simple like that alright. And then for themenu active link hover, this is basically when you hover over the link then what color it changes toFor the drop-down container, if you have a drop-down container or link hereyou can change the background color and also the link holders hereAnd then if we click on the shop sectionSo we're able to change the product title, the price,and for the add to cart button what I'll change here is the background colorI'm going to change it to my base colorSo go here and copy that code overPut that into there. Now for the base hover color, I'm going to change it totwo shades darkerand then paste it into there. So when you hover over it, it should go darkerI'm going to save and publish and refresh it, then it will change. So for the sell tagThis is the tag here. For this, I wouldn't use the base color. I would use my accent colorSo I'm going to go hereGrab the accent color, paste it intobackground color andfor the text color, I'm going to change it to whiteSo change that to white like thatThen that's pretty much good to go. So for your sidebar hereYou can also change the colors hereSo for example, as you can see, the price slider background color, you can change that if you go tothe accent styling andI believe that should be the accent background color. So I might change that to a greenSo what I'm going to do is grab my green colorAnd then put that into there like thatand it should change that and it also changes that one. So once we've done that, then we can scroll down tothe footer sectionSo this is your footer. The footer wrap is basically the background colorSo generally you would choose a neutral color for this sectionYou wouldn't put your base color. Again, the green color is tooheavy. So what I do is I put a light gray. If you're a fashion store or something like thatYou might choose a dark dark greySo I put a light grey and because the footer section is not that importantI like to normally tone it down so I normally like to make it sort of lighter grey for the links and things like thatIf we go to the foot of fonts. So the footer font is this hereSo it's not a link, that is your fontI'm going to keep it as that color as default but we can change it there. For the footer linkthis is the footer link here, and I'm going to change it to alighter gray. So maybe let's try 5D5DLike that. So it's lighter and I think just looks nicerFor the footer link hover, so this is the color when you hover over itWhat I'm going to do is put a different shadeMaybe, let's say, a darker version. 3D3Dlike thatSo when you hover over it, then it gives you a slight effectJust really subtle and nice. So once you've done that then you can close it and that's pretty much itSo let's saveThen let's close itSo I'm going to briefly walk you through how I actually applied the color onto the homepageSo the first thing that you want for your homepage is picking the rightimage. So as you can see, I picked a image with fresh food. PersonallyI'll probably put some green like veggies in there or something like thatBut I picked it from UnsplashSo picking the right image is really important. The second thing is I would use the base color if you canfor your text. If you can't, then choose a neutral colorFor your button, you would probably use your accent color as I have hereAnd I've also put it so it's a darker red when you hover over itScrolling down, I've used the accent color for the iconsAnd also for the links, I've used the base colorI've also used the light gray for a divider sort of backgroundSo it separates the content really well. And then scrolling downFor this one, I put a sort of a outline button or a ghost button. The reason why I did that is becausethese buttons here are solid andthese are more important that people add these to cutSo that's why I use a ghost button because it's been statistically proven that they will be clicked lessAnd it looks just really subtle and niceScrolling down. So as you can see, the divider color hereI didn't use a light gray. The color that I used was , I think, it's really light green insteadSo basically you can choose like a shade of your base color and put it onto your websiteAnd it will actually still look good. Scrolling downI used a dark grey for this section here because my footer is light graySo if my footer here was dark gray then I probably wouldn't use the dark gray againbecause then there wouldn't be anySeparation of content. So that's how I applied the colors, it's really simple. So if you look at it, we just use thebase color for most of the website and accent color for buttons and things that you bring attention toNeutral colors for areas which you don't know which color to use and thenYou can use different shades of your base color as well as using it for your buttons and hover effectsSo that was pretty much it for the colorsI also want to briefly introduceYou to the responsive styling options that you have with the builder. So for example,the website actually is pretty responsive already. So as you can see all the content will align properlyBut sometimes for your hero image, the text might be a little bit too muchOr it might not be visible anymore because, as you can see, the image will shrink but you'll still have a lot of textSo you can actually, um, let's go backYou can actually remove or set the visibility for it. So for example, if you don't want too much text to appearfor the visibility, you can actually hide it. So you can hide it for mobile devices and if you set that insaved it. So if we close itThen if we reduce the screen then it will actually disappear like that. Then there's also another thingwhere you can just turn on the builderI'm going togo back here, show that instead, but let's click on this styling options here. Click on mobileYou're able to set a background colorLike for example a white background color or you can choose a dark one like thatdepending on your backgroundAnd then you can set the opacity here like that. So it increases theVisibility for your text. So for me, I'm going to change it to whiteand 0.75%Like that. And then click on save. And then for tablet as well, so I did that for the tablet as wellSo that text is visible. So landscapeYou might want to do it for landscape as well. I'm going to just leave it as that. For desktop,It will look good. So you can check all those options and alsoI forgot to show you that you're able to set in columns as well for each of your rowsSo for example, this row hereyou're able to set in columnsAnd then it will separate into columns. You can separate as many as you want like that, and then you canbuild your websiteAdding in the modules there. So that's pretty much it forthe tutorial. If you have any questions, drop it down below andalso, I will be uploading additional videos at my Udemy course. So if you go to Udemy.comIf you search for courses here, just type in my name “Hogan Chua” and then click on enterSo basically my course isn't up yet. So I'll upload it in the coming daysBasically you can sign up for the course for free. You don't need to pay or anything like thatSo I'll upload additional videos there and things like that. So that's it!So if you liked the video, make sure to give it a likeand share it with your friends. And hopefully, you found it really useful. Thanks!
Source
