Today I'll be showing you how to create this amazing ecommerce website step by stepHey guysMy name is Hogan and welcome to this tutorial where I'll be showing you how to create this really amazingEcommerce website step by step. So by the end of this video, you'll have your own e-commercewebsite up and running ready to accept paymentsBut before we actually begin I do want to state that this tutorial isn't a tutorial aboutCoding so you're not going to learn how to do like PHP and HTML and CSSorBuild a website like eBay, which is like an auction website. This is just a really simple and clean ecommerce websitealright, so if you don't want to spendYou know thousands and thousands of dollars hiring someone else to do it for you or months learning how to codeThen this tutorial is perfect for you. So this ecommerce website is suitable for mostSmall to medium-sized businesses so you can actually sell anything that you like as long as it's not illegalOkay, so you could sell you know shoes you could be selling women's dresses. You can also sell digital productsfor example music and also ebooksFurniture electronics bags or even iPhone cases, right so you can sell anything that you likeso if you actually don't have any products yet to sell then I'm actually going to show you three amazing places whereTop brands actually source their products from really cheaply and sell it for a really good marginSo you don't necessarily have to have products ready to sell yet?I'll also show you how you can actually get started selling stuff without actually investingThousands and thousands of dollars in your product and inventory. Okay. So this is actually a live store right now andI'm gonna give you a really quick tour of exactly what gonna be building and I'll also show you a testtransaction to basically show you how a customer will buy from your store how you will receive the order how you receive the payment andHow you actually fulfill the order and things like that. So the e-commerce website that we're building todayIt has a lot of the top features that you might expect from websites such as Jim sharkNike and also Topshop as wellSo as you can see Topshop has a really nice and simple header design same with Nike and Jim sharkThey've also got a secondary header where they display, you know free returns and free shippingHere they've got a really cool drop-down menu with a mega menu display same with our websiteSo I've got a really nice and simple header section a mega menu that displays your productsYou can also have a simple menu as well. Just like that here. You can actually add in your logo and yourCustomers also have the option to add the product to a wishlist. They can add it to the cart. They can also add aAccount so they can check out quicker and also they can search for the product directly hereSo I'm gonna show you how to set up a really nice and simpleslider image backgroundSo you can also display a video if you want to just like Topshop does so the layout you can actually change the layout toAny layout because we're going to be using a drag-and-drop builderokay, I'll be showing you how to add in your text your buttons and things like that andHere is where you can display your newest collection like your featured products. Okay, so you can arrange a layout as wellYou don't necessarily have to have this layout that. This is the website that we'll be showing you how to createI'll also show you how to add in your blog post. So blog posts are really good because you can actually write aarticle about maybe a new product line that you're developing or you can also write articles about you know,Maybe like top 10 tips of finding the best wedding dress and if you're selling wedding dressesThen people who are actually searching for the top 10 tipsThey're gonna come to your website and maybe they're gonna buy a wedding dressSo it's really good to get you know targeted and free traffic to your websiteokay here I'm also gonna show you how to add in in really nice gradients how to add in videos andEverything like that. So here we've got a really nice and simple footer section with your social media and your payment iconsI'll show you how to create all the important pages for example your about shipping and delivery andalso a contact page soPeople can actually, you know type in their nameTheir email and submit a message here. So if you have any question, this message will be directly sent to your inboxAll right. I'll also show you how to create a really nice FAQ page. Okay, so this can be any page for examplereturns policy orShipping policy or anything like that. Okay, people can click on the question. The answer will drop down like thatOkay, and I'll show you how to create a blog page so you can display your blog post here just like thatAlright, so this website is also going to be mobile responsiveSo it's gonna fit on your tablets iPads your laptops and also your desktopthen you can actually manage your shop from your mobile as well so you can change the prices andManage the stock levels from your mobile phone so you don't need any special software or any skills to build this websiteI'll be showing you everything that you need to know step by step andif the customer actually clicks on let's say the shop page this is going to take us to our main shop page andHere is a product filter. So people can actually filter the products here. So let's say someone likesMaybe they want to look for an e-book. So it's like ebook then this is all your a books that you sellAlright, they can add it to the wishlist from here. They can also click into the product andHere is your title your price acustomer reviewHere you can enter in a short descriptionOk here, you can display the image and people can zoom in on that imageYou can also add additional images as well and I'll be showing you how to add in, you know your downloadable productsbut also like a simple product or aVariable product. For example if you're selling maybe aJumper or something like that and you have different sizes and different colors, then you can do that as wellOk, so I'm gonna scroll down here. This is where you can put in a long description. Ok, like adding a videoAdditional images that you might want to display and your customer can also click on reviews as wellHere's the related products andLet's say the customer wants to buy that product then they will click on Add to Cart andthey will automatically add that product to your cart andThen they can either check out automatically or they can click on View cartokay, so I'll also show you how to add in a coupon code so you can give your customers maybe a 30% discount so forexample save 30 they can click on apply andThen that coupon will actually apply hereOk, so it starts at $29 then with the coupon. It ends up being only 20 dollars and 30 centsSo your customers can proceed to checkout which is the default checkout or they can proceedDirectly to PayPal and that's going to take their PayPal address and use that as the shipping addressOkay, so I'm gonna click on the default checkoutSo, I've got a really nice and simple and streamlined checkout process here your customers will need to enter in their namelast name andBecause this is actually a virtual product. So it's not shipped. They don't need to put in address. All right, soNormally if it is a physical product, then they'll need to put in the address and they'll be requiredSo here we're gonna skip down and just put in an email addressAll right scrolling downTaxes will automatically calculate for you as well. Alright, andYour customers can also pay by various differentPayment methods so you can set up a direct bank transfer check payments cash on deliveryBecause you know some countries for example in the PhilippinesI think they don't really use credit cards that often. You can also set up, you know, cash on delivery as wellokay, but I'm gonna show how to set it up using PayPal andEven if your customer doesn't have a PayPal account they can pay with their credit cardYou can also set up stripe payments as wellAnd let's say they're happy with the total here selected the payment then you can click on PayPalSo I'm gonna use my other PayPal account and then click on login ok, and then we're gonna click on Pay NowOkay. So after your customer has paid this is the confirmation and basically here is the download that they can actually click on andActually download directly to their computer. Ok, because this is actually aVirtual product. It's not actually a physical product. So people can actually download that and then they'll be good to goAlright, and this is the order confirmation that they will getall right, and they can also download it from their email as well andthis is the customer that you will get as the actual ecommerce store owner andThen you'll need to fulfill the order if it's a physical product. You'll need to ship it to them andThe payment is actually received to your PayPal account. So as you can see payment from home insurer, so this is fromMy personal account and as you can see, it's 20 dollars and 30 cents. So we're gonna go back herethis is where you can actually manage your orders, right so you can click into here and manage your orders andSet the status as wellAll rightyou can also click on reports so you can check how many sales that you are getting this week andYou can hook up the numbersYou can also click on the customers tab to actually view your customers check the stock and taxes and everything that you needIn the backend or the dashboard section of your websiteSo if you actually click back onto the website right nowOk, I think we are good to go and good to get startedBut before I do you can actually fast forward this video if I'm going too slow if I'm going too fastYou can actually slow down the beer. Okay by clicking on the settings option there andIf you have any questions, don't be afraid to ask and I normally will get back to you within 24 hoursAnd I've also got all the timestamps listed down below so you can skip to any section and revisit any section that you knowYou're unsure about make sure to subscribe give the video a like and let's get startedOkay, so let's go over everything that we needso the first thing that need to actually build an e-commerce website is you'll need a domain name aDomain name is basically your website address. So for example Google's the main name is google.comYour one will be your ecommerce store name.comokay, and the second thing that you need is a hosting account hosting is basically aserver on the internet which stores your website's files such as the images andThe content so people can access that 24/7. Okayso basically it's like a virtual piece of land on the Internet which saves your data andYou need those two things to actually have a website onlineAnd the third thing is we'll need to actually install WordPressWordPress is something called a content management system and that basically allows you to actually build a websiteWithout needing to learn how to code and it's used by over 500 million different web sites to actually powerYou know their their blogs ecommerce stores and small business websitesThen we'll be using WooCommerce which is the plug-in or an application that adds ecommerceFunctionality to the WordPress website because by default WordPress doesn't have ecommerce functionalityWe're cognizant gonna allow us to add in productsyou know add in the shipping prices set up the payment options and things like that and then we'll be installing a theme andThe theme is basically the appearance of the website and it also includes the drag-and-drop build up. Okay, soWith those three free tools, we're gonna be building our e-commerce websiteSo how much does everything cost a domain name normally cost around?I think fifteen dollars or twelve dollars every year I think 15 dollars every year andHosting normally cost between five to ten dollars every single month depending on which plan you actually gets. Okay, andWordPress is free. We commerce is freeThe theme is also included in the description belowBut you do have the option to getSupport and updates, which is highly recommended especially for those of you who actually want to help, you knowYour friends or family to actually build an e-commerce storeyou might need extra help andThat is very useful. Okay, and obviously the tutorial is free. So basically the total cost for you guys to start today isaround$20 or$25, okaySo basically what we're gonna do first is we're gonna head over to hostgator.comTo get our domain and hosting. Okay so you can get those two things at the same placeOkay, so open up a browser and we're gonna head to Hostgator. So type inHost:3 80 or calm and then click on enterso this is where we're gonna be getting our domain name and also our hosting account andI've been using Hostgator for the last eight years or so and they've been amazing. So that's why I recommend them. They've also got the24/7 live chat support, which is awesome and also a 45 day money back guarantee. OkaySo here you'll see a few different plans, but for most beginners, I recommend the just a web hosting planOkay, so that's the cheapest and what I recommend for beginnersThen you can actually upgrade to cloud hosting if you start getting a lot of traffic to your websiteIt's a little bit more expensive though. Okay, or you could you know start out getting that as wellSo we're gonna click on website hosting up here on the LeftOkay. So here is three different plans the hatchling plan baby and also a business planSo the business plan is probably a little bit more than you actually need at the momentBut obviously if you have the funds then you can you know, get the business planBut what I recommend is sticking to these two plans for most beginnersOkay for the hatchling plan, you can only host one domainSo for example, you can only have your brand calm. Okay with a baby planYou can have your brand calm your friends brand calm, you knowYou could also have your clients websites hosted on one accountOkay, so if you know, they're gonna be creating sort of more, you know web sites and then get the baby planIt's only a little bit more expensive. But if you just want to create your first website then get the hatchlingOkay, click on buy now. Okay. So here is where you gonna enter in the domain name that you want to register? OkaySo for example my onecreates yourown onlineStore and then you can select the extension that you want here and then click on the outsideok, so sometimes that might not be available becauseSomeone else has probably registered that already and you need to be a little bit more creative. Okay?So for example, I'm gonna change that to shop and let's see if that's availableOk, so as you can see that's availableThirteen dollars every year you've also got other extensionsbut I personally recommend the dot-com because that's what most people actually type in the browser up here here you need to scroll down andNormally the domain privacy protection will be checkedOkSo I personally recommend it but it's not necessary what it basically does it it hides your detailsFrom the public so people can't search up your domain name.com and then find your detailsIt's gonna keep your email, you know spam to a minimum and all that junk mail and stuff like thatSo that's why it is selected here. And that's why I recommendSo scrolling down hereYou need to select the package type and also the billing cycleSo if you're sort of unsure of you know, whether or not you want to still do e-commerce, you knowTwo months down the track then I recommend just going month to month or even three monthsBut you're gonna save a little bit more money if you go for a longer term, okay, so that's really up to youBut I personally recommend the twelve here you need to enter in a username and also security pinSo I already got a few accounts with Hostgator. So I'm gonna walk you through step by step how toDo everything here?scrolling down here you go to enter in your billing information andCredit card details and you can also pay via PayPal if you have a PayPal accountok, so pause the video and fill that in and then once you've done that scroll down andHere this will be automatically selected and it's included for free. It will basically give you theHTTPS in front there and also the lock iconThis is important because you'll be collecting the customers data on your website and that helps secure itServe the site lock monitoring. We're gonna deselect thatOkay, so as you can see it's recommended, but you can actually secure your website with some free pluginsSo once your website gets, you know a lot of visitorsThen you can opt for that as well. Or you can just get that up front. Okay, it really depends on your situationFor the site backup and also the email we're gonna deselectThese two because you can do that for free as well with some free plugins. I've also got a tutorial on my channel to setupThis on your website. Okay your own email at your own domain name.comOkay, we're gonna scroll down here. And for the coupon code we're gonna enter in SHOP NOWn o w and then click on validate andThat's gonna bring your total down a little bit. Okay, so as you can seeIt's gonna take the billing cycle hereOkay, it's gonna reduce it by 40% OkaySo it's gonna save you a little bit more moneyand if you do use that I may get a small commission, but it actually helps you save some money andIt helps me to keep creating these free tutorials for you guys, and I really appreciate itOkay, so scrolling down here. You're gonna see all thePrices, okaySo six dollars sixty four dollars and also the domain make sure that is all correct and the total comes to ninety dollarsOkay, so probably a little more than seven dollars per monthOkay, but that's amazing because you can get started, you know with your own e-commerce website for less than a hundred dollarsI think that's a really good deal. You don't have to pay a developer to set everything out for you can do it yourselfOkay, so we're gonna scroll down here and select your read and agreed and then click on checkout nowOkay. So after you've purchased your domain name and also hosting account, then you should get an email that looks similar to thisOkayso what you need to look for is a control panel URL and then click it andyou'll need to copy over your username and also your password andPaste it into here to login. Okay, so click on login and we're gonna be installingWordPress on to our websiteSo to do that look for build a new WordPress website on the top hereIf you can't find it try to look forQuick install. Ok, so click on quick install and then click on installing WordPressok, so we're gonna click on build a new WordPress website andHere you need to select the domain that you want to install it on. Ok. So I'm gonna select the one that I just boughtSo as you can see, I've got quite a fewMake sure to select the correct one. Leave the directory part emptyOtherwise if you you know add something like WordPress on to itIt's gonna install the WordPress on to your website comm slash WordPressOk, so you want it to install it on the main domain URL? Ok, and then click on next hereYou can enter in the blog title and you can change this later. I'm just gonna type in logoadmin usernameSo this is the username that we're gonna login to the dashboard of WordPress with okPut in your first name last name and make sure to put in a valid email addressBecause they'll also be sendingThe login details and password to this email here and then click on if agreed and then click on installSo WordPress is gonna take you know, a few seconds to install onto your websiteok, so you should be greeted with the installation has completed andWhat you can do now is what I like to do is copy over the password firstOk, so they're also going to send you these details to your email addressSometimes you might end up in the spam and then we can do is if you actually open that link in a new tabsometimes your website might not be up yet because it takes time forHostgator to actually set up your website on the back end so you might need to wait 15-20 minutesworst case scenario 2-3 hours if it's upIt looks something like this and to login you can click on admin log in here or you can type in/w p -admin, and then click on enter andthat will take you to theWordpress login page where you actually log into your WordPress website. OkSo what I recommend is actually bookmarking it to your browserso entering the usernameandPasting the password hereOkay, and then click on login, we're gonna close that and this is your WordPress dashboardIt might look a little bit overwhelming now, but it's not really that hardso I'm gonna show you what the website looks like right now andYour website looks very very plain. So this is the defaultSort of theme that comes with itWe're gonna be installing some plugins and some themes toCustomize the website right now, okaySo the first thing I would recommend you do is if you actually see an update available then you can click on update nowIf not, you know, just leave it as is hereMake sure what that is updated. Okay, everything seems updated. I'm gonna scroll down here to theusers and then you can click on all users soWhat we're gonna do here is actually set in a new password because we can't really remember that reallyLong password there this section here. You can also add inadditional users, for example, if you want someone to manage your store you can add in a new user here andhere click on edit scroll down clickOn generate password and click on hide and hereTry to enter in a password with some upper case and some other letters and then click on update profile ok to save that passwordOkay, so the next thing that we want to do is change the permalinksSo for example, if we actually go and open our website in a new tab againThis is the default post and if you click into thatYou'll see that the URL structure is you know a bit weirdSo it's got dot PHP and then got the date and then it's got the post titleSo what you want to do is you want to go back here to settings and clickon permalinks andyou want to make sure the permalink structure is justThe post name or the page name? Ok, so it's a much cleaner appearance and it's better for the search enginesSo click on post nameAnd then Save ChangesOkay, and then the next thing we're gonna do is click on pluginsso by default WordPress actually has some you know default plugins and plugins are basicallyapplications that add extra functionality to your WordPress website for exampleSometimes you know on your on your phone by defaultIt's got some default apps installed. And what I generally like to do is, you know, get everyone on the same pageSo we're gonna deactivate everythingokay, so select all and then you can actually click on deactivate first and apply andThen select all again and then we're gonna delete everything so you can install them later andI'll show you how to install some plugins later as wellOkay, so once that is done click on pages as well so by default it will have aSample page. Okay, and this one here select all and move it to trash apply nowOkay, click on trash and select all delete permanently and applyClick on post so by default it will have a hello world post. We're going to delete that as well. Okaymove to trashor you can click on trash here andThen we're going to click on trash again and delete permanentlyOkay, so now if you go to the dashboardYou'll see that it has a much cleaner appearance. Okay, so you've got all the default settings hereYou can actually close everything up here. I'll be showing you how to do everything step by stepAnd now what we need to do is install the theme so if you actually hover over appearance click on themesHere is the default theme 2017. Okay, so we're gonna add a new theme so click on add new andHere are some free themes that you can use but a lot of them are actually freemiumSo to actually get the full features of the theme you'll need to, you know, pay for themBut actually have the theme that I use down in the description belowso make sure to click show more and then it will show the download links to download the theme andOnce you've downloaded itit should look something like this themify – shop doc zip and also download the plug-in as well build a WooCommerce andYou can also download the images so you can follow exactly like how I'm doing in the actual video tutorialOk, so download those three things onto your computerSometimes the themifySHOP theme might automatically unzip if you're using Safari and it might look like for example if I double click itIt might look something like this. Ok, a folder. So what you need to do is right-click and make sure to compress that backInto the zip file for the images you can unzip it. So for stuff for Mac users, you just double click and it will actuallyOpen up like that. Ok, and the images to follow along are in hereso what we need to do is go back to the dashboard and click on upload themes choose files andyou'll need to upload the themify – SHOP zip file and click on open andInstall progress bar is down on the Left bottom left. And once that is done you will need to activate the themeby clicking on hereAnd then what you need to do is sometimes the skins and demos might pop up, okay, you'll need to click on the crossButton, okay, so we're not gonna upload any skins and demos. We're going to be using the default of theme layoutso if you actually visit our site now then you'll see that the appearance has changed a lot looks a lot cleaner andIt looks very similar to what we're going to create very soonso basically what we need to do now is to add some extra functionality to ourWordPress website so by defaultIt is a blogging and sort of a small business website like as it is right nowBut if you actually add some plugins, then it can turn into an e-commerce store. So we need to click on pluginsOk, so the first plug-in that I recommend you download and activate is the really simple SSLOkay, because as you can see the website is probably showing not secure if it is showing secure then you knowDon't worry about it. Then you don't need this plug-in. Ok, and sometimes if you don't have an SSL certificateYou haven't purchased one you might have followed in another tutorial. You don't have SSL certificate. You don't have to worry about this stepokay, soFor everyone else click on add new and type in really simple SSLok, so this will basically force the SSL on your website and it'll give you the secure icon if you've actuallyPurchased it. Ok. So click on Install Now andThen you'll need to activate itSir here, you need to click on go ahead and activate SSLOk, and that is probably going to log you out of your websiteIf you click on visit website right now, it's gonna log you outSo as you can see, you'll see the HTTPS and now to log back in you can type in/w p – admin, ok, and then click on enter andThen that will take you back to the wordpress dashboard. Ok, soentering your user and also your password andthen click on login andThen I'm going to show you how to install the rest of the plugins, okay, so go back to plugins andThen click on add newSo the first plug-in that we want to install is the Builder WooCommerce or upload plug-in choose file andDownload and also install this plug-in here. Ok, so it's in the description belowopen and install now andThen click on activateThe next plug-in that we're going to download isThe product filter plugin. Ok, so we're going to search here forthemifyProducts filter ok, andthen this is the plug-in that we want to install and then click on Install Now andYou can click on activate but I don't think I'll actually activate because we don't have the WooCommerce actually installed yetOk, so you might need to come back and activate this. Ok, which I will show you in a secondOk, so the next plug-in we're gonna download is contact form 7. Ok. So that's gonna allow people to actuallyContact you through a contact form without you knowsending you an email people can you know get to you straight away with the contact form 7 so search for that here andThen this one is by Tucker Yuki, ok, and then click on install now and thenActivateOk and then click on add new again the last plug-in is the WooCommerce plug-in okso the reason why we're gonna install this last becauseWe're going to go through the setup wizard togetherok, so search for WooCommerce and this one should have over a million installations and then click on Install Now andyou can download and use a lot of plugins so you canSearch them search them up here or we can try and search it up on GoogleSo there's a lot of free and also pay plugins that you can use to add extra functionalityBut these are the ones that we're going to be using right now and then activate itOkay, so that normally will take you to the WooCommerce setup wizard and we're gonna go through this right nowSo whereas your store based I'm gonna set in AustraliaOk, and then put in a dummy address. IGuess so if you don't want to put in your personal addressWhat I recommend you guys do is maybe just you know put in a dummy one right nowOr you can get APO box, which isn't that expensiveokay, I'm gonna put in Melbourne andThen we're gonna put in you know, Victoria3000 andThis is the currency here, okay, so you can select the currency that you're gonna accept the payments inI'll just leave it as Australian, but you might be US UK orSomething else. So here if you'll be selling, you know, products and services in person as wellMake sure you tick this and then click on let's goOkay, so here you can actually select the payment optionsSo if you want to accept payment through stripe then keep this selectedBut I'll be showing you how to set it up using PayPal PayPal is really easySo if you don't have a PayPal account, make sure to sign up right nowI'm also going to go through the settings a little bit later as wellOkayso I'm gonna deselect stripe for now and just leave PayPal as is andYou can also click on this and make sure you have your email in hereso your paypal email and once people actually purchase the payment will be sent to the PayPal account associated withThe email that you put in hereScroll down and click on here. You can also enable theseOptions as well if you want to so I'll show you how to configure them or where to configure them later as wellOk, so click on that and then click on continueOkay, so for your shipping, okay, so I'll be going through this a little bit later as wellso for exampleThe shipping zone is called Australia and here you can set in flat rate shipping and also free shipping as wellSo let's say flat rate is ten dollars. They can put in tenSo locations not covered then you can also set in a straight here as wellSo for example, if it's let's say in the United StatesIt's not you know sitting here so you can put in a right here. Okay, so for allLocations which is not set here. It's 20 dollars. Okay, so I'll be showing you more detail laterOkay here you can select the weight unit and dimensions and then click on continueOkay, so what I recommend is keeping these two checked, okaySo this one is really good because it's gonna automatically help you calculate your taxes in the checkout sectionOkay, and MailChimp is basically sort of a email marketing softwareAnd you can sign up for free. Okay, so I'll be showing you how toConnect this in another bonus video, okay?So for now just click on continue and that's going to install the automated taxes and MailChimp for youSo it's gonna take a few secondsOkay, so here it's gonna say connect your store to jetpack. Okay, so here so here click on continue with jetpackOkay, and then here click on continue with Google or you can sign up your new email hereokay, so I'm gonna click on continue with Google andCreate a jetpack account. Okay, so I'm gonna be using a new email this one here andthen that's gonna connect that email to my jetpack account andThat normally takes a few moments as wellOkay, so you should be ready to start selling right hereYou can actually create a product by clicking here, but I'll be showing you how to do a few things firstOkay, you've also got additional videos by clicking on this. Okay, so you can click on that thoughAll gonna do now is visit our dashboard and we're gonna add in some pagesOkay, so we're gonna add some pages for our e-commerce website. Alright, so what we're gonna do now isclick on pagesOkay, so we're commerce actually has created some you know ecommerce pages for us. For example the car page checkout pagesAnd the shop and account pages, but we need to create our own page. Okay, so we're gonna create and click on add new andThe first page we're going to create is our home page. Okay, so just type in home in the title section up hereclick on publish andThen we're gonna click on add new againWe're going to add in our about pageAnd then we're going to add new againOkay, so you can create as many pages as you wantso I'm just going to create the pages which I'll be showing you how to create later on so contact andwe're also going to be creating a wish list and a blog and also aFAQ pageSo click on add newYeah, we're gonna type in blog publishAdd new againOkay, it's a little bit boring. We'll be repetitive but we've got to get this stuff done andType it in herewishlist, we're gonna delete that and thenclick on publishThen we're going to create our FAQ page sorry andYou know you could actually, you know create a shipping and returns page if you want to but I'm just gonna name an FAQOkay, and then click on publish?Okay, so I'm gonna close these tabs up top firstOkay, so we're gonna click on all pages here to make sure that's we've actuallyCreated all those pagesOkay, so about home contact FAQOkay, that looks about right if you haven't then click on add new again, okay, so we're gonna click on visit website andCheck our websiteOkay, so as you can see we've got the menu up hereSo what we need to do is actually set in our menu navigation area firstso what we need to do is we need to click on customize andIt's automatically going to take you to themify options here. You want to click on the back and you want to click on homepage settings?so what we're gonna do is we're actually going toSet a static page, okay?So for the home page, you want to set the static page to your actual home page that you just created?Okay. So for example if we take this URL, okay, let's open a new tab paste that in andGo to our home page that we just created beforeSo we want this home page here to be just you know, our domain URLOkay, so that's what we're doing here. Okay, so set in home andthen click on publish andThat will basically set that in okay and then you can go back hereOkay, and then click on menus?Okay, and now we're gonna create our menu. So as you can see, you've got the hamburger menu, right?So this is the mobile menu. This is what it looks like on mobile devices. And the reason for this is because theScreen size right now is quite small. So it's showing the mobile menu. So what you can do is in your browserThere's three icons up here normally, okay, if you're using ChromeClick it and you can zoom out a little bit to 90% and you'll see your menu up here. Okay?so once you've done that click on create a new menu andFor the menu name up here. We're gonna name it top nav. Okay. So for top navigationIt doesn't matter what you name it. This is just for your own referenceFor your menu location you want to set it to the main location main navigation. Sorry up here click on next andYou want to add in the pages that you want to display on the top? All right, click on add items andthe page that I want to display isJust my shop pageSo I just want my shop page to display on the top hereyou can add your abouts in blog and contacts and FAQ on the top, but generally let's say if you go toThe iconic. Okay, so this is apopular e-commerce web site in Australia, you know, they'd only just have the categories and stuff up here andDown here. They've got all the other FAQ pages and about pages and things like thatokay, because for e-commerce website the main priority is to actuallyConvert people and you sort of want to make the navigation really nice and simple to navigateI'll be showing you how to create the mega menu and different things like that. Laterbut maybe just set in but just set in the shop page for now andclick on publishOkay, the next thing I want you to do is we're gonna create another menu so click on the back andCreate a new menu this time. We're going to create our menu for our footer section. So we're gonna name this footerNow and select the footer navigationclick on next andHere you can click on add items. Ok. Sorry for your footer. I want to display mySay the FAQ pagethe blog page the contact pageThe about page. Okay, so I'm gonna not gonna select these onesOkay, so to rearrange it, you can just click it and drag it like that to rearrange the orderSo as you can see on the bottom right here, you'll see the orderSo I'm going to rearrange it. I think that's fineIf you want to create like a drop-down menu, you can actually just click it and drag it in wordsso when people actually hover over aboutThen it's actually going to drop downOkay, so normally this is useful for the top navigation, but that's how you actually do itand then once you've done that then click on publish andThen you can actually just close it nowWhat we're gonna do is as you can see for the page layout you've got this home here and also got a sidebar sectionWe want a blank canvas so we can create you know our hero sectionOkay for our website, we don't want you know, the title and the sidebar hereso to remove it you can actually go back to your dashboard section andThen you want to go to themify shop themify settingsOkay, andYou want to click on default layouts? So this settings area you can edit the themeokay, so I'll be showing you how to customize everything later, but for now click on default page layout andIf we actually open the site in a new tabThen this is the title, this is the sidebar we want to remove sidebar and hide the titleOkay, and also I don't want to display the page comment, so I'm gonna disable it. Okay for the pages onlyclick on save on the top andThen you actually go back here and refresh the pageThen you have a blank canvas we can actually build the layout of your ecommerce storeSo the layout we're going to be creating is a hero imageWhich goes all the way across just like the one you see on Apple and I'm gonna show you how to add textand a button or a linkOkayFor example Nike you've got a really nice hero image and the reason whyWebsite do this is because it basically works right? It tells the visitor exactly what you're selling what your site is about andPeople can determine whether or not they want to stay on your website or click off your websiteSo this part of the tutorial is really important because we're basically creatingSort of the landing page the first impression the signage of your businessok, so I'm going to show you how to use the Builder and how toActually apply text and add in a button. All rightSo what we're gonna do is a really good place to actually find some images if you don't have one alreadyHere's a website called unsplash.comOk, so obviously if you're an e-commerce storeI highly recommendProbably getting a photographerIf you're not good with you know photos and stuff like that to take some really high quality and relevant product imagesBecause I think really good images is what really separates you from, you know, the rest of the other e-commerce storesOkay, but if you don't have an image right now then you knowWhat I suggest is maybe you can go to unsplash for example if you type in your shoesThen you know you have pictures of really high qualityImages of shoes, right? And then what you could do is you could download these and you can use them for your website forcommercial and also for personal projects without crediting peopleOk, so download that onto your computer and what you need to doNext is you need to actually go to photo comm ok, so you can actually use Photoshop or any otherPhoto editing software, but we need to actually edit the images before we sort ofYou know, we need we upload it onto our website. Ok. The reason for that is because you want toResize it otherwise, it's too big and it takes too long to load. Alright. So for example, let's find an imageFor example, let's say this one here you download that t computerOk and save it onto your desktop or create a new folder andGo back to photoThan open click on computer and upload that image onto photo calmOk, click on skip all tutorials here is your image, right? And here is the size of the image onThe bottom here. Ok, and that's really really large and we sort of want to crop it downOk, so to do that, you can click on resize and make sure this thing is selectedOk, and then I'm gonna type in1600 ok for the width of the image andHere the height is automatically gonna resize okay, and then click on applySo type that properly click on a play and that will resize hereokay, so you can zoom in and then you can actually crop it further so you can click on crop andHere I'm gonna type in1600 times about 900 in in heightok, andThen I'm going to select where I sort of want to crop it. I think there is pretty nice. Ok, and then click on applyok, so the image that I want to actually upload is1600 width times about 900 in heightOk, so I personally think that is ideal for a hero imageAnd once you've done that you can click on save I think you might need to actually sign in with your Facebook accountOkay, I think you used to be able to actually download for free, but I think now you have to you knowCreate a free account so you can create an account and download that image onto your computerOk, and once you've done that go back to your website here. And what I generally like to do is refresh the page firstOk before I turn on the Builderso what we're gonna do now is turn on the Builder andBasically, this will pop up we're gonna click on the clothes because I'll show you how to edit everythingOk, so when you actually hover over this section hereYou've got a purple sort of outline and also a orange outlineThe purple outline is basically the outline for the rowSo the width the orange outline is the column settings so you can actually change the columns so you can select two columnsOkay like that or you can select you know three columnsSomething like that. Okay, so I'm just gonna select this one default. OkaySo what I want to do is hover over here and click on the options tabokay, so you can click on that or you can actuallyYou know select the width for width hereOkay, but I actually click on that and then for the road width you want it to go all the way acrossOkay, so for with row content and then you can click on the styling tab. Okay, click on background andyou can upload an image gradient video andAlso a slider. Okay. So for a video what I recommend isActually uploading the video to YouTube firstAnd then what you can do is you can actually paste in the video. Url. Okay, once you've actuallyUploaded the video to YouTube. You can paste it in here and the video will actually start playing in the backgroundOkay, but for this tutorial we're going to be adding in a slider. So I'm going to delete that videookay, and then click on insert gallery andwhat I want to do is I want to upload files select files andImages ready so these are the images that were going to be using for the website. So instead of you know uploading one by oneWhen we're actually doing stuff. I'm just gonna you know, select all ok, just drag and then select all and thenOpen okay. I'm gonna upload all the images to ourWordPress website so we can just easily select the images when we need itOkay, so that's gonna take a few minutes because that's quite a lot of images. I'm gonna close all these tabs up top firstOkay, let's close all of themSo what I'm gonna do is I'm gonna upload this one here. So I'm gonna select itOkay, so like the this blue shoe select this one here and hereHere and here and here. Okay, so I'm gonna select theseSix images so over here. I'm gonna actually deselectthe other ones okay, so just click on it and deselect it andI'm gonna select these six images, okayso keep in mind how many images you actually upload the more images for Slyder the sort ofMore slowly your website's gonna loadSo I personally think you know three or four images pretty much enough. Okay for your sliderBut I've got six so I'm gonna add to gallery for nowI said this one here is not the hero slider as you can seeI've cropped it to about 1600 x 900 you can crop it to anywhere, you know around this sizeIt doesn't have to be exact but this is the size that I've cropped it upOkay, click on update and that will add the images to your slider right for the image size. We're gonna select aoriginal image andBackground slider merge should be full cover here. You can set in the slider speedBut as you can see, you can't really see that image, right?So what you need to do is add some spacing within that image. Okay, so to do that you can click on padding andClick on this all button. Okay, and we're gonna type in 15% okay to the top. So it's going to add 15%Spacing to the top and you can do 15% for the bottom. SoThat's gonna add 15% to the bottom. Okay. So padding is something they're going to be using all the time becauseYou need to add space to your website for everything basicallyOkayso if it's not enough you can just click it and you can drag it up to let's say17% click it and drag it upTo 17 and then once you've done that you can click on doneOkay, the reason why it's not stretched out fully is because we're going to be adding some text in hereSo it's gonna stretch out a little bit more so over here the green icon hover over itYou can click on the lock to sort of lock it in there. So we're gonna add some textOkay, so drop in a text moduleFor the text content, I'm gonna be just pasting inmulti-purpose ecommerceOkay, so this is a demo websiteWhich I just created you can actually visit this website because by the time you watch this tutorial you'll be completedOkay, so you can come here and just copy the text that we're gonna be usingwhenever you're pasting text from some other place, what I like to do is right-click andpaste and match style orPaste as plain text. Okay, because you don't want to keep that styling. So as you can see, it's multi-purpose ecommerceSo here I'm gonna select it and then I'm gonna set this to heading 1So now what we're gonna do is click on doneOkay, and then we're gonna add in another text module. Okay, so a sub-headline right? We're gonna add a sub-headlineso to do that you can either hover over here and drop in another text module or you can hover over the original one andOn the right here. You can actually duplicateOkay, so that duplicates the text click on the bottom row here and then change this to your sub headlineso your sub headline could be like a 50% off sale orSomething about you know what you're selling. So if you go to Jim shock, let's have a lookOkay, it's swim away time. I don't know. It's really up to youOkay for for this one, we're gonna be just creating an online store. So we're gonna put in that title there andpaste in that styleSo as you can see that's set to heading one. Okay, because it's duplicatedSelect paragraph and then gone done. And then we're gonna do is add a buttonOkay, so a button is here and drag it below that and drop it inOkay, you can select different size buttons small large extra-largedifferent shape different background andHere you can put in the bottom text. So what we're gonna do is link it to a shop page, right?so we're gonna do shop now orYou can link it to a individual product page. So for your link, so where do you want this button to link to?All right, so I'm gonna link it to our shop page. So what gonna do is you can hover over shop here?Right click and then you can copy that link addressOkaySo paste your URL here and that's gonna link to the shopOkay, you can paste in a direct sort of page like for exampleIf you want to link it to a bad pageyou can right click the about and copy link address or you can link it to a product as well andRight now you can set in the color to be blackyou can change the color here andIf you want to add in another buttonYou can if you want to change the styling like a different colorOther than the default ones here go to styling tab and then click on buttonBackground and then you can set in the background color and the background hover over color and also the link colors hereOkay, so here we're going to just click on doneOkay, so I'm gonna show you how to style it. So, how do I how do we actually change the color?And how do we align the text? So it's not like too much on the side. So what you can do is you can actuallyClick on the styling tab styling options here for the row. Okay, andthen what you can do is you can click on font andThen you're gonna change the color to white. Okay?So what that does is it changes the font color everything inside that row to white?OkaySo if for example if you move this text down to a new rowOkay, drop it there okay, that's gonna be black. Okay becauseThe styling it has only applied to what you've set in for the row not for the individual moduleOkay, so if you wanna you know set in the individual module can double clickStyling font and then here you can change the colorAlright, okay, so I'm gonna delete itDone. You can also click on undoandThat's gonna sort of undo the changesSo we're gonna do is we're going to move it inwards a little bit. Okay. So what you can do is you canInstead of going to the styling here. You can just double click and that will also take you to the row options as wellOkay, go to stylingGo to padding and we want to add some spacing to the left hand sideSo hover over here left and then set in five percentOkay, and then that's gonna you know, add some spacing to the left. Alright, so you can also click on fontsyou can also align it to you know yourYour text to the center like thatAnd you can also align it to the rightOkay, depending on what you want. So I'm gonna keep it on the left. So it really depends on you know your image, right?You can also hover over hereyou can also change the number of columns to this one here to the one like that andThen for example, you can actually move the text to the middle. Okay, it'll columnlike thatOkay, so here you can also sort of drag it okay so you can change the width of the D columnsso it's really fun when you actually learned the basics of how to actuallychange the layout and stuff like that, but we're gonna do is justundo everything andMove it back like thatOkay, then click on save and then we can close itOkay, so everything's looking very good except there's some space here to edit the space click on edit page andScroll down toThemify custom panel for the content width you want to select full width'Okay. So for any page you want to add a hero image and this in spacing then you need to get rid of that spacingby selecting full width andupdating that page andThen once you've done that you can go back to your home pageOkay, so you can click on View page andThat space should be onOkay. So what you've done is you've created a really nice hairy image just like the one that you see on Jim sharkAppleGucci andThat's looking really really awesome. Okay, so if you actually want to change the font here to maybe it's a bit too small, right?so turn on the Builder again andDouble click the text moduleokay, go to styling andThen go to font and here you can change the font size. You can also drag this module to the right-hand side and you'll lockJust like that and then you can click on fontFont size maybe 24. I think that looksOkay, I guess so. What I recommend right now is to keep your your font family like the fonts and everything asJust as default. Okay, because I'll be showing you how to actually you knowChange the fonts and the colors later onWhat we're doing now is sort of just building out the structure of your websiteAnd then we're gonna sort of paint it later. All right, and then click on doneGunn saveNow I'm gonna close it and the next part I'm gonna show you how to add in your products and before thatI'm gonna show you three places where you can actually get, you knowAnd source your products from if you don't actually have products, but if you do then you can skip this partIt's Hogan hereHopefully I didn't scare you because I was behind the camera and now I'm in front of the cameraBut I do want to explain sort of the three ways that he can actually source your productsso the first way is it's actually source your products from aliexpress.com andThe method that you're gonna use is a method called drop shipping. So I'm not sure how familiar you are with the topicBut what drop shipping means is basically you are listing someone else's productokay on your website and then you're promoting your website and then the customer will actually go to your website and purchase that okay andThen what you'll do is you'll actually order thatProduct from the supplier or the vendor and the vendor will actually ship it directly to the customerSo essentially you don't have to you knowBuy thousands and thousands of dollars of stock and store it in your own house or a warehouse or anything like thatYou basically will actually place the order after the customer has paid you right?so this is a method called drop shipping and a lot of people use Aliexpress for drop shipping because the products here areFrom Chinese vendors. Okay, so normally product on Amazon and eBay they arePeople like us, you know who actually buy the product from ChinaLet's say and they import it into the country and then they start distributing itSo normally the prices are cheap, but there is a drawback in terms of the shipping timesokay, so normally products take two to three weeks to get shipped and even longer if theVendor doesn't offer a packet to that specific countryBut what I recommend is actually when you actually drop shipping is to start off withCountries that actually have a package shipping because that's only gonna take about two weeks for your customer to get the productOkaySo what you want to do is you want to go to Aliexpress comm and then you can browse the productsYou can research the products and you'll see that the products normally have reviewsOkaySo you want to find high quality products check the reviews?Check the images that customers actually post on the actual product because you want to make sure it's a quality productThat's gonna decrease the returns and you know keep your customers happy, right? So what do recommend is actuallyOrdering that product for yourself so you can actually test that product yourself, you know, see if it actually worksBefore you start, you know listing the products on your websiteOkay, so to actually list the product on your website you can do ityou know in two methods the first method is in do it manually which is you'll actually need to screenshot the images andSave the images onto your computer and then you'll need to basically upload the images onto your websiteWhich I'm about to show you and you'll have to set in the prices yourselfYou know add in the product description and basically set in everything that you need by itself or the second methodWhich is the one I recommend is to use a plug-in called Ally dropship and hourly dropship will basically help you sort ofDo a one click import of the product onto your website. Okay, so it saves a lot of timeBecause you don't have to go about screenshotting the images. It'll actually copy the imagesdirectly to your website andIt also takes the inventory number like it tracks the inventory as wellSo you don't have to worry about you know, maybe that vendor actually runs out of the products and then customers are still orderingIt'll actually sort ofSync that together so that won't happensoAfter the the customer actually purchases the product from your websitethen what it does is that it will take the customers shipping information and it willAutomatically log in to the website to place the order with that supplierspecifically and then it will actually set in the customer's shipping address and then all you need to do is toPay by your credit card or your PayPal account. And then the supplier will ship directly to the customerOkaySo this is the method called drop shipping and this is something that you can start today with a really low investmentBut personally I don't believe this is the bestLong-term business model. It's sort of like riding a bicycle, right?So drop shipping is sort of like riding a bicycle with training wheels. You sort of want to learn about e-commerceBy doing drop shipping because there's low investment you can learn about Facebook ads Instagram adsYou can learn about sourcing the products and you know customer service and all that stuffbut what you want to do is you want to build aLong-term brand you don't have your own product with your own logo and own packagingOkay, so to do that you go to a website calledalibaba.comokay, and here you can actuallyGet in touch with the manufacturers. So it's a little bit different, you know onAliexpress, it's like the vendorsokay, but if you actually go to Alibaba, it's actually the manufacturers who who actuallyYou know assemble and build that product so you can actually put your own logo put your own packaging and stuff like that. Okay, soWhat I recommend is you'll do need quite a lot of money if you actually want toInvest in it, but you know, I don't know your financial situation, but it's gonna be you know, roughlyI'd say more than five thousand dollars because you actually need to order the productsBut then you actually have to pay for the shipping to to your home country. Okay?so normally the best companies will actually have a higher minimum order quantity, but you can order samples andYou'll have to probably pay for the samples and actually pay for the shipping as wellokay, soMake sure you order samples and what you can actually do is you can actually ask the the manufacturers is do they actually?You know produce a product for maybe a country a sorry a company in your country, right?last time when I asked them they actually told me you know, who they supplied andThey actually gave me sort of an estimate of how manyPieces that that company is actually ordering so when you actually talk to him you can ask them all this information, you knowsometimes they might not tell you but sometimes they do andWhen you actually know that then it gives you the confidence to actually beginBecause if you can sort of reverse engineer what other companies are doing, you know, you can actually use a website called similarWeb.com and then you can put the actual ecommerce website that you that you are inspired byPut it in there and then you can check their traffic and where is it coming from?Okay, so then you can analyze and reverse-engineer basically the marketing strategy for that company for your own success for your ownE-commerce website. Okay, the third method is actually going to the Catalan fairSo I went to the Catalan Fair last year for the October one. So there's normally two different sort ofTime hour sessions. Okay per year and separated into three phasesokay, so they separate into three phases because there's so many different product categories andI think it's a really great experience because you can actually touch you can feel and you can talk to theManufacturers as well. So I think a lot of people might have a bad perception about products made in China as wellBut when you actually go there when I went thereI talked to a manufacturer that did the stuff for Starbucks. So they are really high quality suppliers there, you know even AppleHave their iPhones made in Chinaright they haveyou know design in California but assembled in China andYou know a lot of the companies that you see now on Instagram, they have their products from Alibaba and you knowThey source it from supplies in like the Canton Fair as wellSo I recommend going there if you want more information, then you can check out the accounts on their websiteYou probably need a Chinese visa and you need to get like a like a registration sort of thing as wellBut that's pretty easy to getAnd then you just book the hotel booked a flight and then you're there. OkaySo right now I'm gonna jump back into my screen and actually show you how to add in the products. SoLet's get into itSo let's say in some products the first product I'm gonna show you how to set in is just a simple productAlright, so if you're not in the dashboard section alreadyMake sure to click on the home icon and it will take you back here. Click on productsOk here you can click on create your first product or you can click on add new if you see that button there okFor the product title, we're gonna set in aBlack dress so I'm gonna show you how to set everything up so you can click on dismiss. Okay, sir blackdressHere is where you paste in your long description. So let's say for example, this is the black dress we're gonna be adding inOkay, the long description we pasted here. Okay. So this is where you write a little bit more about the product itselfAlright, and this is the short descriptionSo I'm gonna grab someLorem ipsum text as just some placeholder text for now, okayso here I'm gonna copy aparagraph andPaste it inOkaySo you can click on the toggle toolbar and here you can change the color of the text and you can edit the textOkay, just go down hereokay to the product data, so we're gonna be creating just a simple product for now andThis product is a physical products. So make sure this is unselected andFor the regular price will do $79. You can also set in a sale price. So let's say for example$59 and you can also schedule it. Okay, so you can schedule it from a date to end andTo end on a certain date as well. Okay, click on infantry hereif you have a lot of products you can have a SKU andyou can also manage the stock level by taking this and for example, you might haveOnly 10 left and then you can put that inwhoops10 and allow back orders, you know that depends on youSo for example, if your stock quantity actually goes below zero then orders will be still allowedOkay, for now, we're gonna select do not allow click on shipping and here you can enter in the product dimension like how much?Does a way when it comes in someone's mailbox or something like that, so it might weigh you know one kilomight be thirty centimeters times thirty times a height of maybethree centimeters and okayYou can click on link to products so upsells areBasically, if you actually search for a product here if you've added more productsYou can search for a product and the upsell will actually appear sort of below the productSo for me, I normally leave it empty because it'll actually show related products, which is the products in the same categoryOkay. So for cross sales, I think this is really useful. So let's say for example you areSelling a dress right? So maybe in a cross sell would be some necklaces or some you know, some gym jewelry, right?so if people actually add that to cart, all right, and ifpeople view that cartThen basically, they'll recommend the cross sell product that you set in hereOkay, so you can increase the value of the cart by adding some cross cells, okaySo for example, if you have a camera a cross cell would be you know, camera batteries and stuff like thatattributes is something that you do for variable products andAdvanced so you can leave a purchase note. You can also order the products on the shop pageOkay, and you can also enable a disable reviews. I'm going to paste in the short descriptionOkayDelete some text for nowScroll back up here here. You can set in a product category. So click on add new andthis is a woman's dress so I'm gonna actually set in aParent category. So this is the sort of the main category. For example, if you go to gym shop, right they haveWomen's and men's so they have women's and then they have women's leggings and stuff like thatSo this one is you have women again women's ad and then you also is a dressSo you type in dress?okay, and then for the parent category select women'ssoIf you add a new category dress will be under the women's category as wellOkay, so this helps for when you're actually setting in your mega menuOkay when you're actually setting in your mega menu hereThen it helps with this and it also helps with people searching for the products in the search engines as wellOkay. So once you've actually done that for the product tags, you might do you know the brand of dress or maybe thematerial and stuff like thatokay, so you can disable the sharing if you want to for the product image click on set product image andIf you haven't uploaded the images yet, it's gonna upload file and select files, but here I'm gonna upload this one hereokay, and what I actually recommend isCropping the image as well. Okay. So this one is 800 by 800Okay, so it's sort of like a square. So 800 width times 8 uncrewed in heightSo if for example your product is more of a longer type of product like this one here, then you might consider600 in width? Okay and 800 in heightBut for all your product images make sure they are exactly the same size so they aren't croppedOkaySo they're all you know matching perfectly and what I do recommend is having a white background or a neutral background like thisOkay, so then the background is sort of like gray same with Nike as well. Okay, the background is whiteRight, so it's a lot cleaner, you knowsometimes I see a lot of people actually have white background gray background and then you know, they might haveThe B products inner like a colored background that's gonna make your website look slower. And also it looks more unprofessionalOkay, so if a featured image make sure it keep it white again and then set in the product image. So the product gallery isWhere you can actually add the product in useSo this girl here you might have her in like, you knowYou know in a photo shoot somewhere in the alley where a sign in the dress with a dress. Okay, soYou might add the extra product gallery images hereOkay, but for your product image the featured image leave it as neutral as you canOkay, and once you've done that then you can just press on publishOkay, so once that is done you can click on view products or the URL here so click onto that andThat is looking pretty good pretty good. Okay, soWhat I'm gonna show you now is how to add in a variable product. OkaySo sometimes you might have a black dress and then you might have different sizes in different colorsSo I'm going to show you how to set that in. So what you can do. You can also click on add newPop over it sorry and click on products. That's just a shortcut. Okay to add in pages or postThat's a quick way of getting to where you want quickly. Okay, so the next product is going to be a jumperOkay, so I'm going to put in jumperHere, I'm gonna paste in the lorem ipsum againAnd I'm gonna scroll right down to the short description as well. Just paste it in andDelete some textOkay, and then scroll down to the product data here. You want to select variable products?Okay, it is still a physical product. So we're not going to enable theDownload theme up here. Okay, so it's not appearing right here because you have to set it in individuallySo the infantry you can actually set in the stock level at product level, but we're gonna leave that emptyshipping weight we can put in one kilo andYou know 30 centimeters by thirty by threeFor link products, we're gonna leave it for now attributes is where you have to create the attribute. Okay, soWe're going to be adding a jumper. So one of the attributes is maybe a size. So I'm gonna click on add andThen what you want to do is type in size, okay?So here we're gonna select s for small and then we're gonna click on shift and I think this one is the backwardBackward slash it's sort of above the enter button and then that will give you a pipeCymbal, okay, and then type in M and then the pipe symbol again LOkay, and then you can do Excel for extra-large and whatever you want to dookay, make sure to click on use for variations and then click on save andWe're going to create another attribute. Okay, so the other attribute will be a different color. Okay, so click on add andName will be colorso we're gonna have green and then we're gonna do the pipe and then we're gonna have gray pipe andAlso a purple jump ballokay, and then click on use for variations save attributes andThen click on variationsHere you need to create variations from all the attributes that we created click on go and okay, okayAlright so here you can click on the drop down arrow and here you can select a specificProduct image for the green variation. Okay, so we can click on upload image andWe're gonna select the green jumper. Okay set variation and we're gonna set in a price hereSo for a small one, it might be let's say forty nine dollarsOkay, and you can set in the individual stock status and stuff like that here for the individual productsBut I'm just gonna leave it as is okaySo here you can also set in a downloadable and virtual but this is a physical so we're gonna scroll downOkay here we're gonna select the gray jumpersame price $49 scroll downHere we're gonna select purpleandThis one will be 49. Okay, so I'm gonna do this really quicklyMmm, so this one is green the price for this will be 59Gray59 this one is purple59 scroll down. Okay Lodge. So this one might be 69 and then sit in a green jumperScroll downThe gray one69 and the last one which is the purple oneOkay, so click on Save ChangesOkay, scroll back up, okay, we're gonna click on add new category. So this one is men's jumperSo we're gonna do men's as the parent categoryadd new and then we're gonna do asomething called the child category, which is called jumpers andThen set it to be under men's. Okay, so you don't necessarily need to have a parent and childThis is if you sort of have a lot of products and you want to organize it really wellAnd click on add newokay, soJumpers will be dropping down from men's, okayScroll down product tags, so I might be a cotton jumper or the brand of the jumperhadSet product image. So this is the featured product image and this is the product that is going to appear onthe shop page okay here so we're gonna go here set that in andI'm gonna select maybe a a gray one. Okay set product image and here you can add additionalproduct images if you need andLet's go and click on publish for now, and we'll make sure to check that productOkay, so we're going to right click and view it in a new tab. SoEverything looks good, as you can see the default option. It doesn't select anything. So what you can actually do is set a defaultoptionall right, so go back to your product andGo to the product data part. Let's go toVariations and here you can set in the default form valuesSo I'm gonna set in the default as medium and maybe default as the grayOkay, the gray jumper and then click on updateandThen if you refresh that pageThen you'll see that the default will be selected right andIf you actually change the sizeFor example small the price will change change the color the product image should changeOkay, so make sure that is all correct too. Sometimes you might accidentally, you know mix it up. Okay, andEverything looks good. Okay. I'll be showing you how to customize thepages and stuff like that later, but now I'm gonna show you how to add in a downloadable product so we canGo and close this and go back here. Click on add newOkay, so this is useful for e-books or you might have like coaching services or just anything virtual so for example, we're gonna doHere for the title 50 things to do in VietnamCopy some lorem ipsum paste it in here and also down in the short descriptionOkay, so I'm gonna go over this a little bit quickerScroll down to the product data. So this one is going to be just one product a simple productsBut it's gonna be virtual. So it's not shipped and people can download it. Okay. So regular price $29Here you need to add the downloadable fileSo for example, the the file that people will be able to download after they've purchased so you can click on add filechoose file from your computer andI'm gonna upload this PDF file for them to download. Okay insert file URLOkay, you can put in a file name as well. So it could be you know 50 things to do in VietnamOr you can also you knowYou know save it your file in like Google Drive or Dropbox and put the file URL over thereSo people actually download it from from that URLOkaybut I'm just gonna use this one and then you can set in download limit as well as expiry andThen you can click on inventory you can manage stock which I don't think is necessary link productsyou can add in a cross cell for example, you might haveadditional sort ofEbooks and stuff like that. So you've got this one here, and then you've got other onesSo you can add that as a cost cell and then you can click on attributes. So this is if you have a variable productsAdvanced you can leave a purchase note and then go here. We're gonna click on add new categoryWe're just going to name it ebook. Ok just as heJust as a normal category up there like thatScroll down product tags. This one might be Vietnamtravel guideadSet in the product image andWe're gonna select this one hereOk, and then set in the product image you can add additional gallery imagesBut we're gonna click on publishAll right, so let's view that productOk, so that's looking greatOk, so let's click on the shop page andWhat I'm gonna show you now is how to add in a product filter, ok, so this allows your customers toEasily sort of filter your products by category by the size by the pricing and stuff like thatso let's go back here andTo do that. I'm going to close this one here. Let's go to your dashboard section andWe need to enable the product filter plugin. Ok, so go to pluginsMake sure you have the theme of 5 WooCommerce Product filter installed. Ok. So if you don't click on add new andthen type it in the search bar install it and then you'll need to click on activate andThat will activate the plug-in and then on this side of the sidebar sectionThe product filter tab will actually show up. Okay. So for our filters here here you need to click on product filtersOkay, and then you can click on add new andThen the forum title might beShot the page. It can be any name and here you can set in the display options. So for now I'm just going toLeave everything as is except for toggle field groupsI'm gonna deselect that and then here is the things that you want to display. So for example, I'm gonna put in product titleSo this is gonna help people search. Okay, so I'm gonna type in search below that we're gonna type in or put in the priceOkay, and that's going to be as a slider then we're gonna put in maybecategoriesokay, and for the display as I like the radio option, I think it looks a lot better andThen you can scroll back up here. I'm gonna put in the on sale on the bottomSo you can play around with the display settings and stuff like that, but I think it is pretty good by defaultso we're gonna click on save and thenOnce that is saved then you can click on close andThen the shortcode will show up so you can copy the shortcode to your clipboardGo to appearance and then click on widgetsso we need to add it onto asidebar, okay, so hereokay, click on shop sidebar andThis is where we're gonna drop it inSo here is all the available widgets so you can actually drop in all these widgets into all these different sectionsOkay, but what we're gonna do is drop in a text widget so scroll down to teaClick it and sort of drag and wiggle it up to the top. Okay, andThen scroll up here put it in here and then paste in the shortcode. Okay, and then click on savedone andthen you can go back to your store page andWhat you actually notice is it's not showing yetSo it's not showing as a sidebar yet. So we need to go back to our dashboard andWe need to actuallythat in so themify shop MFI settings andThen here you want to click on shop settings andYou want to click on the products archive andThen for the shop page sidebar here as you can see, there's no sidebarYou want to select it on the left or on the right that depends on you for the product archive sidebar also on the leftOk, so let's click on save and see how that looksSo we're going to visit the store in a new tabAndThere you go. That's really awesome. OkSo for example, let's drag the price filter down then you'll see that it should update and maybe you can click on on saleLet's drag that back up andThere you go. So what we're going to do now is you can actually change the display settings inthe shop settings here, soFor example, you can display it inIn a row of three products. Ok, so here it's actually got four products, but you can display it in three andYou can you know set in how many products you want per page you can hide the titleYou can hide the Add to CartYou can play around with the settings here. So for example, let's let's just hide maybe the product share buttonclick on saveAnd you can refresh thatAnd as you can see that has disappeared and that's changed to three products in a row okSo what I recommend is just opening this page up playing around with the settings and figuring out you knowWhat you actually like and then just save it and then refresh this pageok, so I'm going to leave it as this for now andIf you actually click into the single product, you can actually go hereok, go back here toThe single product page and you can change the layout as well. Ok, but by default, I think that looks pretty good alreadySo let's say for example, you might not want you know, the tags kind of looks a little bit ugly. So let's go hereYou can remove the product tags. So hide product tags for the single product andthen you can actuallysave it andThen if you refreshThen it's going to disappear. Okay, so that makes it look really really clean. Okay, and that looks really goodSo I'm gonna show you how to add in some blog post or some articles for your ecommerce store. SoI'm gonna actually tell you you know, why is it actually important for you to add in blog post?So for example, this is your e-commerce websitethere's basically two different ways to get traffic to your website so you canGo the freeway and you can also do the paid method which is like Facebook, Ads Google AdWords banner advertisingYou know advertising on TV and things like that or you could do free which is postingimages onSocial media accounts like Facebook and Instagram snapchat and things like thatbut I think what is underutilized and not many people talk about is actuallyBlogging to get free and targeted traffic to your ecommerce store and have people buy what you are selling, right?So for example, let's just say you are selling wedding dresses and this is a wedding dressokay, you can actually create content forYour target sort of visitors, right? So people who are buying wedding dressesThey're probably searching on Google maybe things like how to find the perfect wedding dress or you know top ten tips onYou know stuff about the wedding or whatever it is. You can create content around it. Okay, andOnce you actually create content like for exampleIf you go here eleven must-read gown shopping tipsright people can scroll through your content and you knowYou can have really good content and you know provide a solution to what they're searching forbut you can actually link to let's say your products okay, or for example, you can actually have your shop page up here andIt brings sort of, you know awareness to your brand and they're like, oh, okay. This blog also has a shopOkay. So this is one of the things that you can do like for example, nomadic Matt actually, does that really well?So he is primarily a blogger but he also has a shopSo he creates really really high quality content about you know how to travel cheaplyTips on you know how to save money while traveling and things like that and then he has a shop pageOkay where he sells ebooks?OkaySo, you know Jim shark also has the same as well. So for example people might be selling what to wear to the gym andHere you'll see the content and then you'll also see thatThere are linking to their product pages as wellOkay, so they are recommending their own products to people who are searching for this keyword on googleso it's really important to add in blog posts andThat's exactly what I'm gonna show you how to do right nowso to add in a blog post you can either hover over new and click on post oryou can click back to your dashboard section andYou can add the blog post and also view all the blog posts that you haveOkay, so you can hover over here and then you can click on all post or add newso all post is gonna display all your blog posts here andHere we can click on add new as wellOkay here you'll need to enter in your blog post titleso I'm not gonna show you how to write a viral blog post right now because that's gonna be aPulling another video and we probably need to cover search engine optimization as wellBut I'm gonna show you how to add it in technically. Okay, so copy thePanda texture you can paste that in andLet's say I'll just take this text and put it into the titlethis is where you add in your blog post andLet's say you wanna you want to link it to a products or you want to link it to another page?you can select the text click on the insert and edit link andYou can click on the link options and then you can search for your products. Okay?So for example, you want to link it to an e-bookOkay, then you can select it here or you could paste in a custom URLOkay, and if it's an external link, then what I recommend is opening it in a new tab and then click on add linkOnce people click into that then that's going to take people to that productokay, so if you want to add an image of that product you can click on Media andupload files orI've already uploaded the image here. So we're going to be using let's say this one hereOkay, and then you can insert that into post?Okay, so let's say for example, I've also cropped the image to a thousand times six hundred and eighty eightSo anywhere between that size is fine for a blog imageOkay, so here you need to set the size to maybe full sizeOtherwise, it's gonna crop to a smaller size and it's gonna be a bit blurry. Okay, so insert that into post andThat's gonna add a picture in thereOkaySo to add a video click on enter and you can grab a YouTube video and all you need is to grabthe URL andThen you can actually just post it in and it will automatically pop up in about a second or soOkay, so that's how you do it. You can also, you know change the colors and things like thatSo I'm pretty sure you guys know how to use this section hereHere then you'll probably need to add in a category. Okay?so let's just say this one is you know travel then you put in travel andThen you could put you know the location of where you travel to or anything like that. Okay, so this one might be greatChinaclick on addOk, so going down you can set in a featured imageOkay. So what I recommend is for the featured image crop it to the same size. Okay, so1000 times688 this one is 1000 times 688 and also this one as wellOkay, so you could crop it to 1000 times 600 but make sure that you knowThey are pretty much the same size because that way it's gonna display properly when you set it inso let's just select that one there and set in featured image andThen scroll down hereYou can alsoCustomize the layout of the post individually in the themify custom panel sectionbut if all is good click on publish andThen you can view that post by clicking the URL here or you can on View PostSo here is your blog post andThat is looking good. So I'm going to add in two more blog posts really quickly. Okay, so I'm gonna click on post here andI'm gonna paste in the alarm' hips them againJust paste that text in here. I'm gonna quickly do it. So I'm just gonna put in a titlePutting a new categoryLifestyleI'm gonna skip the tags, and I'm just gonna sit in a featured imageOkaySo I'm just adding in extra blog posts so that we can actually have some content to display on our home pageokay, so set that in andThen I'm gonna click on publish and then I'm going to click on add newCopy that text againPaste that into here sit in a new titleOkay, a new category design add new and then set in the featured imageThis one hereSet that in andThen click on publish andThen you can click on all postOkay, and here you can actually view and edit your blog postokay, so I'm gonna show you how to display your products and also your blog post and how to build out yourhome page right nowso what we're gonna do first is we're gonna turn on the Builder and I'm gonna show you this simple way of adding in andDisplaying your products and also another method. Okay, sofor exampleIf we want to let's say add inOur products we can actually look for the WooCommerce module the game should be the last moduleClick it and drag it into the section that you want to display it at. Okay. So for example there andhere you can display its you know as the categories I can display the featured putWhich I'll be showing you how to actually set in specific featured products because sometimes you might have you know, 100 productsBut you want to display, you know three top-selling products. I'll show you where to actually set that inhere you can change, you know all the display options ofHow you want to actually display your products? Okay, so you can display it in maybeYou know two two products per column or you can display it in like fourOkay, you can also change the display optionsFor example, you can change the it to the overlay option. Okay?So for example if you click on done and if you click on save and if we close itThen you'll see that it is overlaid. Okay?so for exampleit is just the image and when people hover over that then it overlays with thePricing and Add to Cart buttons. Okay, so you can display it in a few different ways. So we're gonna turn the build up andDouble-click that module again, okay. So here you can just definitely just play around with itSo for example, if you want to hide the Add to Cart or the the prices or the sales badgeYou can do all that. Okay, so I'm gonna show you the other way of doing itso we're gonna click on done and I think this way is important to know because youMight want to have a a different layout. Okay. So for exampleThis is the layer. I'll show you how to createSo for example, if you go to Jim shark, right, you'll see that they have you knowJust maybe just like an image and maybe a a button to link to their collectionOkay, or something like this or if you go to Nike then they have the product image and it links to the category right onNomadic mat they just have the image of the e-book and then they have an Add to Cart buttonSo it's a completely different layout and that's what I'm going to show you how to doSo for example this one here, it's three different columnsSo the first thing you want to do is separate it into three columnsRight, so you can hover over the purple thing here and then you can select the three columns. Okay like that andHere we're going to add in a background image. So we're going – click on the column stylingok, the paintbrush thing click on the background andHere click on browse library to upload the file and let's say for example, this is the product you want to add inok, so we can insert file URL andFor the background mode. You want to select full coverThe background position you can just keep it as Center CenterBut what we want to do is we want to add some padding because you can't see the imageso let's add some spacing click on this all andLet's add. Maybe let's try 10%Okay, so I think that looks ok ish. Okay, I'm gonna drag it up maybe to 15% something like thatOk, so you can also add it to the bottom, but I'm gonna add a button to the bottomSo if I actually add a button to the bottom then and if I add padding then it's sort of going to addbasing below that'sbutton, so we're gonna leave this as 0 gone done andLet's add a button in there. So we're gonna drop in a buttonok in that column andThis button can link to this product or you can link to a specific categoryRight so you can change the appearance of the button and things like thatbut we're gonna change the text to maybe learn more or you can change it to shop now andLet's say you want to link it to a specific category, right? So I'm gonna copy this link in a newAnd open up in a new windowok the shop page andLet's say you want to you know, link it to a category specific category, then you could click on this productsOk, let's say you want to link it to our women's category as you can see here. This is called the breadcrumbsOk, and if you click on the women's that's gonna take you to the women's categoryAlright, so you can link it to the women's category by copying that linkOk going back here and you can paste that into hererightAnd when people click on that, it's gonna link to here change the button color and then click on doneOkay. So what you can do is really create aCustom sort of layout for your home page. You don't have to just have you know a default productYou could have a product here and you can have some text explaining aboutWhat's so special about the products right? Or you could do something like let's say for example, we want to duplicate itOkay want to create three different?Things you can easily just duplicate it. So if you hover over the columnYou cancopythe content and stylingOkayand hover over the next column and then you can actually paste that in here paste the content in styling click on OK andIt's gonna pet copy that data and paste it into hereOkay, so gonna do the same we're going to copy content styling and then we're gonna paste it into hereAlright, and all you really need to do is double clickbackgroundDelete it and you know upload the imageAnd you can also double click straight away without clicking doneit will automatically save so you can double click here and then you can go to the background andWe're going to set in maybe a green image. Okay, something like that and then click on doneOkay. So what you can actually also do is you can actually link it directlyTo the Cart button. Ok, so what I mean by that isok, so so for example ifWe want to link it to the cart automatically if you actually hover over the Add to Cart on the bottom left you'll actually seetheURL that will actually add that product to the cart ok, so you can right click copy that link address andYou can don't click the buttonPasting the product URL hereOk, so what's that gonna do is it's actually going to once people click it. It's gonna add that to carSo let's say for example someone clicks on thatOk, it's gonna add the dress to the cart like thatso let's go back here andYou can change and edit that. Okay, but what I'm gonna show you now is how to actually you knowMake sure that everything looks good. All right, so let's go back here. Turn on the BuilderandWhat I'm gonna do is I'm going to add some spacing on the top and add some textSo let's add maybe a text on the top. So this one might be you know newestcollectionokay, let's set this to heading two andthen what we want to do is click on styling font andalign the text the centerclick on done andThen we want to add some padding to the top. Okay, so you can add padding either to the text moduleOkay, we can also add padding to the Rome or jewel. They're pretty much the same thingSo this is really matter where you actually add the padding as long as you know, visually it looks goodOkay, and just click on starting herepaddingLet's add maybeTry 5% to the top, okayYeah, we're gonna add some padding okay between the text and also the image so double-click the text stylingPadding sorry and then we're gonna add some to the bottom. So maybe three percent this time. Okay, something like thatRight, and the next thing we're gonna create is a button. Okay, so this button is gonna link toThe shop page so it so people can view all the products again. They're gonna put a little divider line to separate the contentOkay, so whenever you have a different sectionyou want to either separate it by a line here or you can either separate it with like a whole background image orfor examplePeople actually use like a a gradient sort of like grayGradient to separate the content. Okay, so you don't want like just a huge block of content?Otherwise, it's gonna be too squished together and it looks really sort of cluttered. So we're going todrop in another buttonOkay below thatandthen you couldChange the colorOkay and Link it to your shop pageSo let's link it to the shop page and then paste it into hereThis one is going to be view allokay, and then maybe we can align the center andWe can also add some padding to separate it. Okay, so you can click on padding. Let's do maybe3%Or maybe a little bit moreI'm gonna try 3% for the bottom. Okay, click on done and then we're gonna add a little divider line. Okayyeah and drop it below andThen here you can set in the divider color. I'm gonna click on custom for the widthOkay, and then for the alignment, I'm gonna align it to the center like that click on doneYou can view thePreview by clicking on preview up here and you can see whether or not that looks good or notokay, so I think that looks okay and we're gonna create the next section which is thecategoriesOkay, so make sure to turn on the Builder and let's drop in maybe a text module you can drop it in or you canJust actually duplicate this one here. Okay, so you can duplicate it andThen you can pull it down here. Right so you can actually zoom out of the screen a little bitso zoom out to 50% so it's easier toRearrange the layout sort of thing. Okay, andThen what you can actually do is change the text to maybeCategories, all right andThen click on done and then we can drop in a product categoriesOkay down there and then here you can display your categories, right? So you might havemen's category and women's categoryYou can select two columns something like that. And then you can select specific categories and exclude specific categoriesIt really depends on how you want toSort of display it okay so here to actually exclude categoriesYou need a product category ID, which I'll show you how to get pretty soonSo we're gonna scroll down here and then you can hide you knowSpecific categories and all the display options and things that I'm gonna select this one here three columnsOkay, and then I'm going to click on doneSo here I might add somePadding to the top of the row so some paddingHere, I'm gonna add maybe you let's try three percent or maybe a little bit more five percent like thatClick on done and save it and then close itSo what we need to do is set in the images here okay to do that. You can go to the dashboard andHere you can go to products okay hover over products and click on categories andHere we're gonna actually add in the image for the categories, right so you can click on edit forebook for example and in here upload image andThen this one here is a ebook so you can select that as the primary category image updateScroll down make sure make sure that is updatedokay, so then you can go back and click on categories or you can click here andthen here for men's edit andThen upload a imageSo this one might be this one here. I can't use imageclick on update andThen click on back to categories andThen here for women's click on editUpload select the image use image and updateOkay, click on back to categoriesOkay. So how do you actually get the category ID to exclude it you canClick on let's say if you click on edit, right?Here you'll have the product category tag ID equals 24, okaySo that is the category ID number right? AndIf you actually want to set in the featured product, which I was going to show you before click on all productsOkay, that's going to display all your productsSo what you need to do is select the star icon to make that product a featured productOkay, so we're gonna go back and visit our site then you should see the imagesuploadedOkay, we're going to turn on the Builder and edit the link colorOkayso we're gonna double click so I'm gonna go to styling and then you want to go to link andChange the link color to white. Okay, because we want to make that sort of visibleOkay, and then go back to product categories. I'm also going to remove the product counts to know okay?Like that, it looks a lot more professional and then we canClick on done, okayOkay, so that's looking pretty good the next section we're gonna create isDisplaying the blog section so we might need to add in the divider line. So let's just get the divided line from hereDuplicate itOkay, grab the divider lineOkay, bring it down and drop it belowOkay, so you got the line there now now let's scroll back up and we're going to duplicate the category text moduleso hover over on the right and duplicate andthen we're gonna zoom out a little bit to let's say 75 percent andLet's drag one of the text modules down here into the new row. Okay, and then we can rename this potNews or you can name it blog. It's gonna put in blog as a title and then than doneSo what gonna do is I'm gonna double-click the row. Okay, we're gonna add a little bit padding to that rowfor some spacing so click on styling padding andClick on all and then we might do three percent to the three percent to the top like thatOkayClick on done and to display the blog post we can hover over on the right on the green and then look for postOkay, and then drag it and drop it into the rowAlright, so here you can actually display. It's in different sort of grid formats. Okay, so I'm gonna select grid three andYou can also changeThe content layout as well. Okay, we're gonna keep it as default. It looks pretty goodAnd you can also select a by categories and things like that as well. Okay?So the one thing that we want to do is we want to remove the text hereokay, so this is here and the display options andBy default, it selected excerpt which is like a little summary. Okay, you can select content which shows the whole blog postYou don't really want to do that unless it's probably on your blog page or something like thatBut generally we're gonna select none and then that's gonna remove thatAlright, so you can also hide the titles and hide the dates and hide the post meta and thingsLike that so you can play around with the different settings and then click on donebut what we're gonna do is click on the styling tab andThen click on font and we want to alignEverything in the middle just like that and then click on done. Okay, so gun save it andThen you can close it. Alright, so we're going to scroll down have a little look, okay?I think that looks pretty good. The next section is we're gonna create theVideo background, okay and the gradient background which is really cool. So this could be your featured product andGenerally, what I like to do for an e-commerce store is to have a sort of call to action on the bottom of the pageOkay, because the purpose of your store is to make sales, right?So you want them to have a strong call to action when they scroll down to the bottom?So that's what we're gonna do and we're gonna go back to our website and then we're gonna turn on the BuilderAndHere we're gonna hover over the row and then we can click on the stylingOkay, and then we can click on background and then for this one we're gonna select gradientall right, so we're gonna click on the first circle andThen here we're gonna set in a color codeSo the color code that we're gonna set here is a2 3 d FF. Okay, so it's like aPurple color and then we're gonna click on the second one. Okay on the back and then this color code is going to be FF4 7 4D. Okay, and then you can click on the outside and that will saveAlright, so to find really cool gradientsyou can go to a website called UI gradients calm andYou can click on show old gradients and then you can select a color that you like or a color that you're gonna use forThe theme of your website and they'll provide a lot of different examplesOkay, so you can for example you like maybe this one hereThen you can get the color code by clicking on it and we copy to your clipboardSo gonna go back here and then we're going to maybe add a little bit of padding. All right. So let's add maybe IIlet's try 5% to the top and5% to the bottom. Okay, we're gonna be putting stuff in the middle. Okay, so it's gonna stretch out a little bit furtherSo what we're going to do now is we're going to hover over the purple row againAnd we're going to separate it into two columns. Okay?So the first column here, we're gonna put in a sort of a video background in the column, right? Soalternatively you can actually add in maybe just aImage or maybe you could add in a slider or you can add in just a video. Okay?so a video let's say for example you put in a video andthen we actuallyGet the video. Url. Okay copy that andThen you can actually paste in the video URLAnd then you can easily just display a video which people can click on and then you know it playsAll rightOr you can actually let's just say you want to put it on the background then you can hover over the row the columnSorry, hover over the column and then click on stylingbackground and then you can click on video and paste in your YouTube URL andhere you can disable the audio and disable looping which is sort of like a replay andyou can also enable video background to play on mobile andI think it sometimes it might not work on all mobile devices because you know, they might be using older technologyokay, but you can also what I recommend is setting in aBackground image as well as a fallbackOkay, because sometimes if it doesn't display then you'll display the background image that you put into hereOkay, so you can browse library and you can upload a image. For example, let's just say this one hereokay, and then insert file URLchange it to full cover andI think that is OK. Okay. So what gonna do is also stretch that video out?so as you can see, it's quite a thin so click on padding andthen click on allLet's try 10 percent to the top and maybe 10 percent to the bottomMaybe a little bit too skinny, so stretch it up to 15 percentOkay, I think that looks okay and then click on doneRight. So here we're gonna add some text and what I'm gonna do is just gonna copy this text hereso I'm gonna copy the text andThen just drop in a text moduleOkay, because it is text from somewhere else. You'll need to paste and match style or paste as plain textOkay for training now, we're gonna set this to heading 2Okay, so what you're gonna notice is that I'm gonna click on enter is that the whole sort of paragraph is set to heading 2What you do want to make sure is you have some space here, okaySo this is heading 2 here. We need to set in a paragraph text, I guess to set it to paragraph something like thatOkay, and then we want to go to stylingfontChange it to white so it's more visible. Okay, so it depends on your backgroundClick on done andThen we're gonna drop a button. Okay, so we're gonna drop in a button which is gonna link to ourFeatured products or our shop page. Okay. So for this instance, I'm just gonna link it to our shop pageOkay, so this one we're gonna name itshop nowPut in the URL you want to link it to and also the button just like that. I've gone doneAll rightSo to finish off the layout what I also want to do is I sort of want to align the textIn the middle of this video, okaySo for example, if you actually hover over the purple row again, okay for the column alignment?We want to set it to this one here. Okay, which is gonna align into the center like thatokay, so if we zoom out of this screenWe're going to look atThe overall layout and then you can just fix the padding for each of the sections which you know is a bit wonkyAnd yeah, I think that's pretty looking pretty good. Congratulationswhat we can actually do is we can actually click on the drop down arrow here andMaybe we can click on save as revision. Okay, so that's gonna save the layout that we just built for our home pageSo you might want to name it, you know home page and then you might want to put a date on thatOkaySo click on OK and then if you have any problems like you might accidentally delete somethingYou can hover over here and load that revision up. Okay, so it's sort of likeMicrosoft Word you have the option to save that revisionYou can also save that as a layout as well so you can save it as layoutso, for example, this one will be home page andThen you have date right and then click on saveWe're gonna save nowClick on closeOkay, so we've built our home page layout and it looks great. But there's one more thing that we need to doSo what we need to do is you need to actually resize the screenAnd we need to actually set in the mobile layout or make sure that your website is a hundred percentmobile-friendly oreven more streamlined for mobile devicesSo as you can see if you're scrolling down hereYou'll notice that the text here is covering the image here and it may not be as visibleYou'll also notice that thisImage here. You can't really see the shoe. The padding is quite it's not enough. Okay. I'm scrolling down hereto the bottomOkay, you'll see the padding is not enough here and also the video hereThe padding is not enough either and you know this text here might be a little bit big for mobile devicesSo I'm gonna show you how to edit that. Okay, so it's gonna be really awesome. So for example, let's go toTesla commOkay, so on their desktop devicesthey have just one hero image and then they've got theNavigation menu to navigate to each of the different pages for each of the different modelsRight, if you actually resize the screen it actually changes right because now what happens is the navigation menu is in mobile formatOkay, so probably less people will actually click into the mobile menuSo there's streamlined the sort of mobile experience by actually just providing, you knowEach of the different sections here and then people can click directly into itOkaySo they have a streamlined mobile experience for you know their website and that's what I'm gonna show you how to doFor your own website, okaySo this is really important because sometimes you know, you don't want to display certain things or you want to resize certain thingsSo let's turn on the Builder and I'll show you how to edit that really easily and really quicklyokay, so here on the top you have different settings for example tablet tablet in portrait andAlso the mobile. All right. So let's click on mobile and you can setthe settings for each specific deviceI'm just gonna show you how to set it for mobile andYou can repeat it for each of the devices if you need toAll right. So let's say for example the first hero image here. We're gonna double click OK in the ROSo we're gonna edit the background so you can click on stylingOkayMake sure that this thing is selected here the mobile deviceyou can click on background and you can actually change it to just an image or aGradient. Okay. So what we're gonna do is scroll down there to row overlayOkay, and for the row overlay, what I'm gonna do is click into it select black and then I'm gonna select maybe15%In opacity and that's gonna add sort of a darker backgroundto the background image for the background slider to make that white text pop a little bit more because on mobile devices it might actuallycover the imageYou know because on desktop as you can see, it's it's quite visibleIf you actually put it on the left hand sideBut on mobile devices are going to be squished together and it's not gonna be as visible. So we add a little bit ofYou know black to it. Okay, and then that will make a white pop and then cuz I'm doneScrolling down to the next section hereyou can actually double click the V column and then click on padding andWhat you can do is just extend the padding to maybe 30. Okay, I think that looks okayDo the same for the next row?Okay, the next columns. Alright?2:30 andThen the next one that will click paddingTo 30 as wellso for example if you don't want to actuallyDisplay the categories what you can actually do is here you can actually for this rowYou can actually set the visibility settingsSo if you actually go to I think if you go to here the three dots you can set the visibilityokay, so you can click on visibility or you can go to theThe options here and then set it here. Okay, so you can actually hide it on mobile devicesAlright, so on mobile devices you carry your section won't actually show and then you can click on doneScrolling down you can do the same for the blog because you know, you might not want to display something like thatBut I'm just gonna leave it as is okayAnd for the next section here, we want to double click the column again and maybe add a little bit of padding to itokay, so maybe 25% and25% for the bottom something like that looks quite nice andhere you can double click this text module andCan click on styling and you can add some padding as well right to the top?Another option that you can actually do is youCan actually let's just say we, you know, click on 0 and just set it to 0 padding click on doneYou can actually hover over the row and you can set the column direction hereso for example on Jim shark, ok if you sort ofMinimize the screen you'll see that you know this thing here it moves down hereAll right, so you can actually do something like that for your website as well. SoGo back here, you can change the column Direction like that andInstead of you know adding padding to the text. You might need to add padding to the button hereAll right, so you could let's say for example add some padding to the bottomSo maybe 5%Okay, something like that and then click on doneOkay, so once you're happy with itThen you can also play around with the different settings for tablet landscape and tablet on portraitYou can also change the text size as well. So any time that you actually on?the mobile setting here you can actually, you know set in anything and then you knowIt will actually change specific for that device, right?So for example, you can click on font and you can actually, you know, reduce the size of the fontRight to maybe a 14% ok14 and then if you click on the desktop, you'll see that the size is back to the default 16Okay, so we can click on save and close it nowThe next section I'm gonna show you how to add in isthe social media sectionDown here. Okay, and then I'll show you how to customize the footer section as well as adding in the free shippingOk, the notification thing which is I think this part is one of the most important parts. So make sure to keep on watchingLet's head back to our dashboardMake sure to open up all your social media accountsokay, for example YouTube Twitter Facebook Instagramand then what we want to do is we want to go to the themify shop themify settings andWe're gonna paste in the URLsOkay, so we're gonna click on themify settings. Okay, and then go to footer social buttonsalright andHere you can select the banners that you want to displayalright, so for example twitter andThen we're gonna copy over the twitter profile URL and then we can just paste it into hereokay, soWhen people click on that, it's a little link here, right and then same for the FacebookOkay, so I'm gonna copy over my Facebook pagePaste it into there and then we've got YouTubeOkay, so copy that make sure to subscribe for more videos and then paste that inInstagramYou can paste in your Instagram profile URL. Okay, and then once you've done that you can click on the SaveOkay, now we can open our website in a new tab to view and see how that goes alrightOkay, so that looks really really cool. Really really awesomeOkay, let's say if you want to put you know, your social media links just down here as a widgetYou don't want this section, right? So you can't do the same thingAlright, just go to social links here. And all you need to do is to paste in yourYour link URLs. Okay, andFor each section. Okay, and you can also add link. Let's say Instagram is not hereYou can add that in and save and then all you need to do is you need to go to appearancewidgetsAnd then here on the left-hand side you need to look forThemify, themify social links. Okay, click it and drag it and drop it into theBelow for the logo widget. Okay, and that will display your social media links just as sort of verySmall icons here. Okay, but I like to look at this because it looks really nice and modernI guess I'm gonna leave it as thatNow what I'm gonna show you to do is how to sort of customize the footer layout sectionOkay. So what we're gonna do is we're going to first add in a a paymentOkay a payment thingso what got to do is go back to our settings and let's justRemove this part first power back WordPress and also the logo and then we will add some icons thereokay, so go back to theme settings andThen you can click on footer text and you can hide footer text – okaySo you can change it your text and stuff like that. If you want to we're gonna leave it as isokay, save it and then we're going to go toThe theme appearance. Okay. So here you can actually change the header design to different designs for your headerAlright, and you can also play around with the display settings of what you won't want to display in your header sectionBut we're gonna scroll down to footer design and I want to exclude the site logo and you can excludeyou know the back to top button andThings like that. For example, this one here. You can exclude that. Okay, we're gonna exclude thisSave itAnd refreshScroll down and you should have a really nice and simple footer designalright, so we're gonna go back here to our dashboard section andWhat we want to do is go toThemify shop click on Builder layout parts. Ok, so we're gonna build a new layout part that we're going topaste in essentially, ok, so click on add new andWe're gonna label this payment iconsSo, let's just close all our social mediaOk, so here we're going to label itPayment icons alright, and then we can click on publish andThen what you want to do is click on View PostWe're going to edit the layout part from the front so we can actually see what we're doingok, so we can turn on the Builder andHere you have the same thing like a row and you also got the columns so what you can do is you canClick on the plus here, and then we can drop in an icon moduleYou can set in the different size of the iconso we're going to set it as normal for the icon background style set it to none andHere you can select the icon. So click on insert icon andWe're gonna look forthe payment icon so I'm gonna click on brand andWe're gonna try and look for some payment icons. For example, ok, so American Express orMasterCard, I'm gonna go and click on visa first to get the first icon and then I'm gonna remove the label so delete thatokay, and you can click on add new icon andthen here we're gonna set it insert andclick on brandandThen this one we're gonna select MasterCard andFor the logo color for the visa one. I'm just gonna set it as defaultOkay, just a normal gray neutral color which works really well with any websiteclick on add new andThen here we're gonna do PayPal so you can also search for PayPalOkay, you can search this one here or this one. It's really up to youI'm gonna do that one and then we're gonna click on add new iconInsert iconThis time we're gonna try stripe. Okay, we're gonna insert that one there. Okay, so you can try and insertAll the icons or all the payment options that you offer, but I think this is good enough and then we're gonna click on doneSo once you've done that then I think what you can do now is just to click on save itYou don't really need to edit the styling of it. We're going to put it into the footer widget sectionBut you can also change, you know the styling if you want to it like you can align everything to the centerOkay, you can even add a background color, which is something I'll be showing you in anotherYou know another few minutes. Okay. So click on save and thenJust close itRight, so you have the payment options here. All right, so we need to go back to ourBack-end or the dashboard. Sometimes the dashboard thing is not gonna show up. Okay, you can't click on itOkay, so you can either just go back to your home page by deleting the URLokay, and then and then the dashboard toolbar will come up or you can just turn on the Builder again and then you canClick on back end and that's gonna take you to the back of the websiteIt's gonna take you back to the themify layout parts copy the shortcodeOkay, so this is a shortcode which you can paste in anywhere and that will display this specific layout partMake sure to update and save it and we're gonna go to appearance and then we're going to go to widgetsAll right, so what we're gonna do is just drop in a normal text widgetyeah, anddrag it and wiggle it up to the top and drop up below for the logo andThen here pasting that shortcode. Okay save and then click on doneSo if we go back and refresh our pageThen we should see some payment icons show up, which looks goodThat looks pretty good. Now. What we're gonna do is add in something like this. OkaySo here you'll see that they have a notification that saysYou know free shipping or free returns same with the website iconicOkay, you've got free shipping fastest delivery and free returns and you've also got this section up hereSo it's a little bit muted the design. Okay, so it's very very minimal andit's like aYou know secondary headerAll rightSo that's what I'm gonna show you how to do it for your own websiteSo you can have you know, the best designs in the worldSo we're gonna do now is to create another layout part, right? So themify shop themify builder layout parts andCreate add newSo this one is going to be let's say IThink free shipping. So just label it free shippingIt's just for your own reference. All right, and then you can click on publish andThen we're going to build the layout on the front endOkay view postTurn on the BuilderAlright, so what we can do is add in a simple text. So just drop in a text module into there andThen here what I want to type is I'm just gonna copy it from here. Okay free shipping when you spend more than$75. All right, you could do anything that you want really?So paste that in okayso once you have that text there you can click on done and I want to set the background to be black ordark, grey, sorry and then we're gonna double click on the row ok styling andthen we're going to set a background color and this time we're gonna try and set two to two which is a aDark, grey. All right. Okay, and we got to make sure that the text is visible so you can click on font andIt can change the font color to white. So anything within that rowThe font color will be whiteThat is looking good. We're also going to align it into the center like that andThen we're going to click on doneSo as you can see, if you click on preview, you'll see that there is some spacing there, right?So we're gonna click on that again and we're gonna click on the text module double clickstyling andinstead of padding we're going to be adding in ordecreasing the margin so emergen is basically like spacing but it sort ofImpacts for example the text module when we hover over itYou'll see the blue box around it margin impacts the spacing outside of that box that invisible boxOkay, so let's just say for example, we do like a hundred a hundred pixelsThat's going to add100 pixelsOutside that blue box that I'm hovering over right nowRight if I actually do like for example on padding, I do like a hundred pixelsRight, it adds the spacing inside that invisible boxSo as you can see the blue box that I'm hovering over it adds spacing inside that boxAlright, so this time we want to decrease that spacing inside that blue box, okayWhat we could do is we can – some margin right we can do – maybeFive maybe that's not enough. Maybe Ted something like thatOkay, so you can do – 10 pixels to the bottom and that's gonna decrease the spacingOkay, you can let's also try and add maybe two pixels to the top or maybe three pixels to the top like thatOkay, I think four is pretty good or let's say fiveOkay, five is good and then you can click on done andThen you've got a nice layout here which looks something like thatokay, so you can also, you know change the size as well if you want to make it a little bit smaller, soLet's change it to 14Something like that. I think it's perfect click on done andThen we areLet's just decrease everything. Okay the padding. I mean the margin a little bit let's do 3This one11 okay, so it's really up to you and what you know font you're using but I think that looks goodSo save that and then we're going to go to the backendAnd what we're gonna do is paste in that short code into a hook area, right so copy thelayout part to your clipboard andwe're gonna make sure you update that andthey what we want to do isWe want to go to the themify settings to the whole content areaSo let's just wait for that to loadOkay, so go to themify settingsandThen what we want to do is click on hook content and then here you can see the hook locationsso you can add content to anywhere on your website, which isBasically not a place where you can sort ofTurn on the Builder and edit. Okay, so these are in different areas okay of the website so you can havethefree shipping thing in different areas, for exampleWe could have it beforeAnd you can have it after you can also have one before and one after for example like this one before one laughterSo it really depends on what you want to do and you know how you want to implement. It doesn't really matterSo here I want to implement this one header after okay. I want to go all the way across from left to rightso click on add item andThen here I can selectheader after okay and pasteIn the shortcode and then you can also set in specific conditionsWhich you can set it to apply on certain pages or not apply. Okay, so you can play around with thatWe're gonna leave that as isOkay, and then we're gonna click on saveOnce you've done that then we can go back here and refresh the pageOkay, so that looks pretty goodExcept I think there might be a little bit of a white border around thereAnd if you want to remove that then to do that you can go back to the layout partso go to the MFI shop build all our parts and go back to the free shipping one andSelect front-end and what we need to do is put in a negative margin on the row as well. Okay?So here click on the row okay stylingMargin and here for the bottomSet it to negative 2 or negative 1 I think maybe negative 1 will be enough or two click on doneSave itandThen we can go back to the backend and that should have saved so we're gonna refresh our page and view that againOk, so that's looking awesome, right?so the next section what I'm gonna show you is the WooCommerce settings which includes the payment options the coupon codes the shipping andAll the important stuff like that so you can actually start accepting paymentsOkay. So let's hover over WooCommerce and we can click on settings to edit all the payment settings and all thegeneral settings for your store sohere in the general tab you can set in your store address andSet up your selling locationsso for meI'm just gonna leave everything isYou might want to limit it to maybe just your local country if you want to and that's where he can do itYou can enable the coupons and also the tax rate and calculations hereWe're gonna leave everything as is for the currency options. You can set your currency in here and then click on Save ChangesOkay, so you can go through each of these different tabsSo for example tax should be automatically calculated because we set it upTo connect to jetpack which will actually automatically calculate the tax rate based onThe shipping addresses. Okay. So here are all the settings which I normally leave defaultWe're going to click on the shipping tab. Okay, so this is where you can actually set inSpecific zones and specific prices for each zone. So let's say for example in AustraliaYou might be in United States India UKWe can set in a for example, we can add a free shipping rate as well. So you can click on edit andHereYou can add in another shipping method. Ok, so add in another shipping method for example free shipping andAdd that inso here you can click on edit andif you have a minimum order amount you can set that in so a minimum order amount of let's say$75 because that's what we put in okay on our home page, so Save ChangesYou can also rearrange the order like that andLet's say you have a free shipping. You might have a flat rate, which is $10Okay, you might have another one which is maybe Express. So it may be Express next day delivery so you can click on add andselect flat rate again add that in andThen for example we can set in a specific price for this one. So this one might be ExpressShipping all right and the cost might be $20 instead and Save ChangesSo you might be let's say if we go back to shipping zones hereAll right, because as you can see the zone name is set to AustraliaIt might be set to you know Oceania, which is Australia, New ZealandSo you can actually add in another region as wellIf it's sort of the same price as that you would ship toanywhere in Australia you can add in that region so you can click on edit andWe can here we can set in another region and I so click heretype in New ZealandOkay, so for this shipping zone we can change it let's say OceaniaAnd then this one is for Australia and New Zealand and all the shipping prices are the exactly the sameSo if example free shipping is also minimum order of 75, okay, and they can Save ChangesSo you can be a lot more specific as well to be specific zip codes or specific States if you want toBecause sometimes the shipping cost might be different right if we click on zones hereYou can also set in locations not covered by your other zones, so click on manage shipping methods andHere so here is all the locations not covered by the zones that you set in before alright, soFor example, this might be let's say, you know $20, ok, so $20 and then Save ChangesRight. So if people are from a different country other than Australia and New Zealand for example United Statesthe flat rate for United States and other countries is$20 or whatever you put in here. Ok, so you can add in additional methods for example free shipping as wellbut maybe this one it might be a minimum order of$100 ok, Save ChangesAnd then you can put it up there right and click on Save ChangesSo I think that is pretty much it for the shipping zones, you can also click on shipping options as wellSo let's click on options and see what we can changeOkay, so here you can actuallySet in the settings on you know, whether or not you want the shipping calculator display on the cart page. All rightso what that means is if weVisit this storeAnd then we click on the view CartSo here if you actually set in to hide the shipping cost until the address is enteredThen this won't show up hereSo you can change the display settings here and also the shipping destinationIs it set to default billing address or is it set to shipping address that the customer will actually put in?When they proceed to checkout, okay, so normally I'll leave everything as default shipping classes. I'll cover in another videoOkay, so that is if you have like a heavy item then you can set in a specific price for specificProducts. All right, if we click on paymentshere is the most important part andAutomatically it should be set up if you have a PayPal account if you entered in your paypal email alreadyOkaySo you can actually enable all these different options here for example direct banking transfer cash and delivery and all that stuff hereBut the most important one is PayPal checkout. Okay, click on manageSo here make sure it's checked right and for your payment email make sure that is yourPaypal email here so you can scroll down hereandHere you can change the display settings of the buttonAll right, you can just change the display settings of the button. For example if we go hereOkay, let's say if we go back okay here you can change the display optionsAlright, so you can change the color and things like that. For example, if you want it blue, then you can have it blueI like it gold right andYou can also disable the PayPal button on a single product. So for example if I click into the productthen here you'll have a Buy Now button, right soPersonally, I'm gonna remove that I was really up to you if you want to make it more convenient or not. I'm gonna disable thatSave ChangesAnd thenRefreshOkay, so that's gonna disappearOkay, so you can enable or disable that and then once you have set the settings here then you can click on Save ChangesOkay, if we go back to the payments you can click on this backSo you can also enable PayPal standard, okay, so this is the most standard paymentMethod so this won't allow people to actually check out automatically what?This one actually does is that it allows people to check out automatically and then it will take the addressAssociated with their PayPal account and then just use that as the billing and shipping informationright if people click on proceed to checkoutthenFor example people will need to fill in the billing informationrightBut with the Express Checkout hereIt allows people to automatically check out directly with PayPalso you can enable the PayPal standard if this isn't working for you so enable this and disable this andAll you need to do is you want to make sure that you actually have your paypal emailin hereokay, andThat is pretty much itOkaySo if you want to also enableYour refunds via PayPal you need to click here and then you'll learn how to actually get to your APIWhich you'll need to paste into here and then Save Changesso here if we click on the accounts andprivacyHere you can, you know enable guest checkout as wellSo you can allow customers to log into an existing account during checkout. You can also allow aaccount to be created once they actually checkoutSo this really depends on you and what you want to doso here you can create a privacy page andselect your privacy page andThen click on Save ChangesOkay, so let's click on emails here is where you can actually set in the specific branding colors for your emailnotifications forexample the new order that you receive and maybe aOrder confirmation that the customer will actually get. Alright, so you scroll downOkay here you can actually change the colors andBranding things like that here and then click on Save Changesalright, so that is pretty much it for your settings so we can actually go to maybe the coupons area andI'll show you how to create a coupon really quickly. It's really really simple. So I'm gonna close that tab on topOkay, create your first coupon or add coupon up hereSo for this one we might do like, you know save30 I guess. So people if people enter in save 30, they'll save 30 percent, okaySo here you can select the discount type. Okay, so I'm gonna set in a percentage discountSo it's gonna be 30 percent okay toy can be a specific amount andhere if you tick it then it will grant free shipping andYou can also set an expiry date so it's gonna end on the 31stUsage restriction you can set in a minimum spend maximum spend and also set in usage limitsSo you might limit it per per person so you can do one, you know, actually this one is per couponSo let's say for the save 30 it will actually only allow 30 people to use it before it is upOkay, here is actually where you set the limit per userOkay, so you can set that to maybe you know 3so it really depends on you and how generous you want to be and then you can click on publish andThen people can use that coupon code. So I'm gonna do a sort of aTransaction with you guys. Okay, so normally you can actually dosomego the settings and you can enable PayPal sandbox, but I think that'sProbably a little bit takes longer than you know, just actually processing a real paymentSo maybe get a friend's PayPal account or credit card?Or maybe you have a family member and then what you could do is just let's just log out the pageI've also actually set in the e-book to just a dollar. Okay, so you can do that as wellJust change something to a dollar or make a really big coupon. So let's say people go to the shop pageThey add this ebook to cart, which is a dollar which I've set in just then okay and people can view the cartOkay, so people can apply coupons so let's say save 30 apply coupon andThat's gonna apply 30 percent. Okay, which is a 30 cents hereYou can check out directly via PayPal or we can proceed to checkout. Okay, so let's just proceed to PayPal automatically andI'm gonna use my other PayPal accountOkay, so I'm gonna select my other one and then click on login to payOkay, so as you can see on the bottom here people can actually select a debit or credit cardso people don't necessarily have to have aPayPal accountclick on continueSo once that is doneOkay, here is an overview of what it looks like. Okay, and how much you're paying and then you can click on place order?So this is a a book so it doesn't really take a address because you don't need one because people will beDirected to the download page directly and people can download the e-book to their computer instantlySo here for examplethe order number the datePayment method here is the e-book and here is the download link. So people can click thatAlright and they can download that to their computer. Okay, and then click on save andThat's good to go, rightOkay. So here is the email that your customer will receive your order is complete and people can download that to their computeras well with the link here and thenThis is the order that you'll receive. So it says new customer orderSo it shows what has been ordered. So that is pretty much it forYour payment options and you can pretty much you know launch your website right nowbut I'm gonna show you a couple more things to make sure that your website is completely finished andGood to go move on to the next sectionThis is actually where you actually manage your orders. So you click on route commerce and click onyou can manage the orders by clicking into theorder andIt shows all the details. Okay that you need to do and also you can choose the actions here you can alsoSet the status. Okay, so this one's completed because they've actually received theProduct and also they're paid already you can set the status. You can add some notes an update. Okay, you can also click on reportsThis is where you can view your sales reports and things like thatYou can view the last seven days or this month. You can also, you know view your customers stockTaxes and everything that you need here, right?So the next part is we're going to be adding in the rest of the pagesSo I'm going to show you how to create a simple about page a FAQAdding the post to a blog page and also adding a contact form to your contact page. Sowe can click on the about page andWe can turn on the Builder and we can create a really really simple about page in just a minuteSo let's say for example you want, you know, two columns just like that one image hereMaybe a image of your office and some text here. Okay, soLet's drop in a image moduleHere we can delete the image URL and then click on browse library uploadA image but we've already uploaded an image which is this one here. Okay our teaminsert andThat is pretty much done. Okay, so we can click on done to add in some textWe can drop in the text module or this time. I'm going to use a fancy headinglike that andthen this one here, I might do you know aboutfor the subheading we might doOur story and then we can click on doneThen we drop in a normal text moduleHere and then I'm gonna go to my demo site and just copy over some dummy textOkay, so we're gonna put that in andThere you right click and click on doneSo what we can also do is align the column alignment if you hover over the rowSet it to something like that. Okay, which looks good. You can also change the layout. Okay, we can click on save and youCan view whether or not you like that or not?You can also use a really cool feature, which haven't showed you yetWhich is if you click on the plus icon here, you can also add the modulesBut you can also add in rows which have been pre-createdso you can actually use these rows to help you speed up the process ofBuilding the layout of a page, okayThe reason why I didn't show you earlier is because I wanted to show you guys the basics of how to use thingsOtherwise because like sometimes when I follow like Photoshop or after effect tutorials, you know, they import templatesBut then after a while like I don't understand how to use it, and I don't enjoyActually using it. Okay, so, you know since you know how to build everything now you canyou know just insert that like that andThat will add the call to action section really easily. Right? So you can easily change the text you can easily double clickstyling and change the background really easily and create an awesome awesome layoutokay, so I'm going to leave it just just like that and then click on save and thenClose all right, so I think that looks okSo what we can do now is we can click on the FAQ page. So the FAQ page is actuallySet in right now as a wish list pageAlright, so the first thing we need to do is actually change that right. So if we go to our dashboard sectionwe need to go to themify shop themify settings andWe want to go to the shop settingsWishlist settings and we can disable the wishlist if we want to or we can make sure that we set it to wish list pageAll rightclick on save andThen we can visit the siteAndThen go back to our FAQ pageHere, we have a blank canvas to work with so the FAQ page is a page for maybe your shipping and returns or refund policyor any frequently asked questions that your customers might find useful, right so you can turn on the Builder andI want to show you a different moduleSo let's maybe change the layout to let's say this one hereOkay, so it's got one column on the left one big one in the middle and smaller one on the rightSo here we can drop in let's say a text module on topThis one might be calledFrequently askedquestions right change that to heading one andThen click on done. Okay, so we might want toMake it a little bit bigger wider. SorryOkay, so as you can see that text is a bit long so let's double click it for a secondGo to stylingHeading heading one font and let's just change the font size down a little bit. Okay, so let's just try out 48Okay, maybe let's try60, okayclick onDone. I'm actually going to go to general fontAlign to the center as wellSo now we want to do is I want to drop in a accordion. Okay. So this is really good for a FAQSo drop that in so here you might have you know, how long does it take to ship?Right. So this one might be a question and here is where you put in the content. So here you can type inNormally between two to three weeksFor localDelivery's and then you can do internationalThree to four weeksSomething like that. Okay, andThen you can add in a new accordion by adding in a new rowOkay, so that's gonna add a new one and then you can put in a new question and a new answerso let's just delete that for now andThen here you can change the appearanceso normally, you know a transparent one is good, right andHere you can also add in a closed icon and an opened accordion iconso let's say for example, we click on done we save it andLet's close this section hereOkay, if if someone clicks on thatRight get opens up like that, right? You can keep it really simple like that or we can add an accordionIcon, so let's turn on the BuilderDouble-click right scroll down to the closed accordion icon. Okay, so when it's closed we can insert an iconSo, for example, I want to look for maybe aArrow or something like that. So it might click on directional. So I'm gonna select maybe this one here angled downSo it gives the indication of that if someone clicks on itThen it's gonna open downwards right and if it's opened then we're going to insert an iconokay, click on directional andWe might do angle up. So if someone clicks on it again, then it's going to indicate that it actually closes upAll right, click on doneSave it andClose itSo we're gonna click on downOk, and then it's got the icon that goes up like thatso here obviously you can add in some more accordions andYou can also align it to the center and add some padding to make it look really nice and really good and polished. OkSo you can do those things and now we're gonna click on the blogOkay, so the blog page is where you can display all your blogpost, rightSo here we can turn on the Builderso here you can default, you know, you can just drop in maybe aPost module so let's look for the post module drop that in and you might just display it as a gridall right, and you might display the post content as I mean, sorry, theDisplay asnone like that and you can display all your blog post like very similar to the one that you see on Jim Shaw orYou could do it like, you know a normal bloglike a blogger right can do the post layout like that andThen you can do the display as excerpt thatIs pretty good ok click on done if you want to have a sidebar section here you can hover over the row andWe can select the layout to it like that. Okay, so that has a sidebar section hereto add your sidebarOk, hover over the green drop in a widget eyes moduleWidget eyes area set that to a sidebar. Ok, the default sidebar click on doneRight, and that is looking very very goodyou can click on save and I'll show you quickly how to actually edit the contents of yoursidebar sectionOkcuz you probably don't want to display your meta andSome stuff you don't want to display and I'll show you how you can actually add in more stuff that you want toLet's close itAlright so here you can go to the widget section directlyAlright, so what I like to do is open it in a new tab again, ok, I probably shouldn't have closed that oneLet's go to the blog againAll rightSo this is sidebar widget area and here are all the different widgetsYou can drop in any widget that you want into the sidebar section just like you did for the shop sidebar. AlrightSo here I want to remove the metal. IAlso want to remove archives recent comments, right? So we're going to remove the metalRemove the archives remove the recent comments just like that andThen if we refresh that blog page againYou'll see that the widgets have been removed all rightSo you can pretty much do anything that you want so you can also add inLet's say you can also add an image if you want toYou can also add inYou know the recent post you can also add in maybe the most commented and you knowyour social linksvideosAnything that you really want you can put in here you might add in an image as well of the author a little about Mesectionby dropping in maybe aText okay, so you can do all of that stuff, which should be pretty easy to doBut right now we're gonna leave it as as thatAll right. So let's click on the contact page andI'll show you how to edit and add in a contact formSo before you add in a contact form, you must have the contact form 7 plug-in installed, which I showed you earlier in the tutorialNormally if you have it installed you have a contact thing up here you can click onto that andHere you'll have a default contact form 7 okay click on editAndHere you can edit, you know, what is displaying in your contact formI like how it's displayed already. We can add in additional things as wellokay, click on mail and what you want to make sure is that your mail is set toyour email address here andThen you can edit the messages and stuff like that right and then just click on saveSo what you want to do is copy the shortcode here and for your contact page turn on the Builder andYou can change the layout to that one. Let's just drop in a text moduleLet's do something likeContact usChange that to heading1stylingFonts maybe move that into the center like that andThen you can drop in another text module and then just paste inthe shortcodeSomething like that. Okay, you can also align everything into the center by double clickingstylingfontAlign to the center just like that. Okay, so you can add maybe a little sentence aboutyou know, whatever you need to do, or you can link them to aThe FAQ page because sometimes you know, it might be already answered alreadySo you can do that and you can close thatOkay, so we're pretty much created all the pages andWe are good to go. But one last thing before we finish off I want to show you how toConfigure a mega menu. Okay. So a mega menu is something like this. Okay, so it's really niceSo people can hover over each of the categories and it can show the products like thatOkay, and also you can implement just this simple menuReally nice and simple and I'm gonna show you how to do that right now. Okay, so let's hover over appearance and click on menusandThen the first thing that you want to do is you want to click on screen options up here, okay, click on the drop-down andHere you want to select product categories?okay, so that's gonna enable the product categories here so you can actually add that to your menu or answer select product categories andAs you can see that adds it there now if we want to customize the top navigation you want to select it hereSo click on select and that's gonna changeOkay, so currently we have the shop page on the main navigationBut we want to add in women's or and men's okaySo yours might be a different category, but I'm gonna show you how to actually do it. SoHere we're gonna look for product categories. All rightYou can click on women's and then you can click on men'sOk, and then you can add that to the menuAll right, if we save the menu andWe're gonna open up a new tab to view that menuOk, so that's just going to create a link to the men's and women's categoryAll right. So if you click on that, it's gonna take you to the women's product categoryClick on men's it's gonna take you to Men's. Ok. So it's that simple, right?so if you want to implement a drop-down or a mega menuThen let's say for the women's category click on the drop down arrow hereYou can select mega menu make a postsOkay, and we want to have maybeThe dress to drop down from women's. Okay, so add that to menuOkay, so for the dress category you want it to you want to put it under the women's category like thatAlright, so it's like that normally you want to drag it and put it under the women's categorysame thing for the jumpers add to menu andPut it below the men's category, rightSo here you've selected the mega post here. We have just left it normal. Okay, so we're gonna save the menu andWe can sort of refresh the page and see how that looksOkay, so if you hover over women's the dress will pop out like thatSo you might have different categories as well under here. Okay?So for now we've only got one obviously and we don't have many products, but you can see the image is cut offOkay, I'm gonna show youHow to make sure that is nice and crisp if we hover over let's say men's let's just refresh the page againOkay, then jumpers is gonna pop out like thatRight. So this is a just a nice and simple menu so you can implement that or you can do a mega menu like thatall right, soLet's go and save that menu andLet's go and edit the settings forThe image. All right. So let's go to themify settingsOkay, and now let's go to the theme settings I think all right and look for the mega menu tab click on that andHere it will say displaying five post. Okay, so leave that as default but here is what we need to change, right?So if you remember the image size that we put in before for our product image is 800 by 800Okay, so we want to divide800 by 6. Okay. So 800 divided by 6 is 150Divided by 6 for the height as well. That is 150Okay, and then you can click on save?Right, but let's just say if your product image is 600 right 600 byMaybe by 800 then you would divide that by let's say 6 again. So you have to divide both sides by 6Okay, so that ensures that the size that you put in here is 100% proportional so you can't divide by 6. It'll be a hundredEight hundred divided by six will be 150. Okay, but Alice is a square image. So we're gonna do 150 by 150okay, and then if we save it andIf we go back here and let's refresh the pageOkay, if you hover over women's hover over dressyeah, you'll see the image looks really great now and people can click onto that to direct them directly to theproduct pageAll right. So what I'm gonna show you now is how to actuallySet in the logo the favicon and how to change the colors and fonts forAnywhere on your website. Alright, so we're gonna set in the colors and also the fonts for the websiteAlright, so to do that, what we could do is we can go to customizeandAutomatically that's going to take you to themify optionsclick on Advanced OptionsOk, so you can get more options to stylespecific areas of your websiteAlright, so the first thing that we want to do is choose a main font for our website, right?so if we actually go to websites, for example, like Nike or Apple, okay, you can download a Chrome extension called what font andThen you can click on it to actually activate it and you can hover over you know, what fonts they're actually usingrightThe same with Apple you can turn that on and you can see what font they're actually use for the websiteSo what you can do is you can open up Google and you know, you can search up, you know similarGoogleFont to okay. So let's just say for example, you were looking at the Apple website and it was SF. IThink that was SF Pro, okay, so hereSo here like a lot of people will be asking like similar questions because a lot of people want to knowOkay, what fun is Apple using and you know?What font can I use for my website but normally the font they use our premium fonts, right?so the fonts that are included within this theme areGoogle, fonts and google fonts are really good as wellThey have I think over 600 different fonts. You can choose from so you can search that up and click into the resultOkay, soHere are some of the fonts that you mightWork. Well, okay, very similar typefaces that you can use right?So in general there are twoDifferent typefaces. So for examplethe first one is San serif now this one has plain edges on the side andalsoThe strokes are even with so it gives a more modern simple and clean feelWebsites like Nike Apple Tesla and most modern websites that you see will be using this typefaceAll right. So these are some of the recommended ones that you can go forOkayso you can choose one of them or perhaps you might go with a serif typeface which has curves on the edges andThick and thin strokes, right? So it gives a more class call traditional lookSo for example, if you are selling maybe something like this like bed linenThen you might go for a classic typeface for your fonts. Okay. So this one has you know curves on the edgesDifferent widths as well in their text. Okay, so it gives a different feel right, but for most websites if you stick to aSans-serif typeface and then it'll look really clean and modernSo, for example, I'm gonna pick a font called Josephine sans, okay?So for your font, you can click on body font here you can set in let's take Josephine. IThink that's how you pronounce it. Hopefully, okay, you can set that in andGenerally, you don't need to have too many fonts on your websites and make itprofessional if you have one I think that isGood enough, and it actually looks a lot more sort of consistentIf you do have just one because I see a lot of websites they have, you know, three or four differentFonts and a lot of different colors and it doesn't look really professionalSo sticking to one will ensure that your website is really nice and professional. So here I'm gonna set the font weight to 300Okay, so you can change the font weight which is so the boldness of the textOkay, I think that looks really good. Right and also want to set a body link colorSo a body link is something like this. Okay, so it links to something. AlrightSo for the body link, we're gonna stick to a very very neutral color. For example, like Apple andNike okay, so they're using just a dark greySort of color scheme for the websiteIt is really good for e-commerce because it just you know brings the attention to the images and the products itselfYou know rather than focusing on the theme of the website and it just looks a lot cleaner and simplerIt's also a lot easier to design especially if you're a beginner sort ofDesigner because you know if you have a neutral, you know, look for your website then you knowIt's gonna be a lot easier to match your images, right?So let's just say for example, you know if you have you know, a red header like a red background for your headerIt's gonna be a lot harder to match with this blue. Okay, so I'll be showing you that in a secSo for the body link here, I'm gonna be entering a dark gray so you can enter in the same oneOkay, two two two just like that. And for the body link hover, okay, we're gonna set it to be three three threeOkay, so it's a slightly lighter version. Alright, so when people actually hover over a linkThen it's gonna give them some feedback, right?You might make it a little bit lighter if you want to but I think that's fineSo for example, if you go to Apple when you hover over itIt goes a little bit darker and it gives a feedback that you know, it is a link. Okay, so you want that feedback?Okay, so what you could do is if you want to you knowMake sure that everything is consistent then just ensure that your your link colorOkay, so whatever link color that you have in here, you can copy itif I go to a website called 0 to 255 entering the color code here andThen here you can choose either, you know three shades lighterOkay, copy that code or three shades darker than the base color. Okay, so that's going to ensure thatYou know, you are keeping it all consistenthere click on accent stylingSo as you'll notice that you know, the accents selling right now is like yellow theme, okayWe're going to set in a neutral color themeSo for the background color for the accent color, we're gonna set it to the same one as beforethrough two to two andFor the font color. I'm going to set it to whiteokay, if it's actually like, you know six F's you can just type in three andit sort of Auto populates the rest of it andthen for the background hover color, we're gonna set that to333 as well andThen for the border color here, we're going to set it tothree three threeOkay, andNow when you actually hover over itOkay, you'll see that it still has a yellowHover over color. All right, so – that andWhat we're going to do is we're going to click on the headerFor the background wrap? Okay. We're going to keep it just as white nice and neutral for the header linkWe're gonna click on that maybe and you can actually change the color there or just leave it as isbut for the headed link hover, I'm gonna change it to 3 to 3 andthen that's gonna give theThe gray hover over effect color. Okay, so I think that looks pretty good for nowSo if we look at the page down here the footer sectionI'll show you how to configure that section there if we scroll down to the footer sectionOkay, so this is a link. Okay, so it's a footer menu link. I want to change the footer menu link hoverOkay to the same hover color. Okay, keep everything the sameSo when we hover over that that will be okay pretty niceOkay, let's scroll back up. Let's check everythingOkay, so if we hover over this this is a blog post title. So we're gonna go to post andthen we're going to go to the post title hover andI'm gonna change the color to 333 againokay, so try to keep all yourHover over colors the same. Alright, and that ensures everything looks good. Let's just- all of these close them all upOkay, so here if you click on the heading this is a heading 1 tagAlright, so you can change the heading 1 font here universally. So for example, you can change it toJoseph in sands like that and it will changefor all the heading 1 fontsWherever you've set it to okay. So for example you you've probably set that tothe contact page as wellThat you've changed that as well, rightSo I'm just gonna delete it and leave it as the default because I think that looks pretty cool. That's up to youso I'm gonna change that to normal as well andThen here you can also change the forms as wellSo what is the forms right if you actually let's say we go to a blog post or?If we actually go to the contact page, okay, this is probably a better example. So here is a form, right?So let's just click on the contact page hereOkay. So this is a form here. You can click on forms here is the field so you can click on the form field andwhat I'm going to do is I'm going to deselect apply to all borders andFor the bottom border. I'm going to click on solid and I'm gonna choose a colorso the color that I'm going to choose is a a E and then click on the outside andI'm gonna set it to 2 pixels in widthalrightFor the border on the top left and right. I'm gonna select noneLike thatOkay, so it just has a slight border on the bottom andThen people can type in whatever they need. Ok. So then once that is done, I'm gonna click on publishAlright if we actually hover over the send buttonYou'll see that the hover over color is yellow that gold color again?what I want to do is click on form button, hover and change the color to aEE as wellOkay, and then click on the outside and then when she actually hover over thatThen it gives just a slight effect as well, rightyou can also change theSticky header. So if you actually scroll down on the page, you'll see that the header sticks thereYou can also adjust the sticky header as well if you need to right to change the logoWe're gonna minimize everythingOkay, you can click on site logo and tagline site logo and here you can change the textokay, so let's just put it as your then sans again andThen let's just say we put it as boldso you can do that as well which looks really cool and nice andYou can also add in your own logo image so you can click here and upload it. You can resize the image hereWhat I do recommend to get a logo is to go to fiverr.comso I'm going to leave a link down in description below to go to fiver andYou can search for like logo design and you can get you know designs for from five dollars a piece, right?so here are some excellent people who do logos and you can filter them on the left andYou can also ask for a fab icon as well. So the favicon is the icon that you see here and youCan change the logo position and things like that? You can also change the site taglineOkay, so I've changed it to create an online store in under three hours. You can also select noneso if you don't want that there so for example, let'sClick on site title when you hover over that you'll see that the tagline there. Okay, which is coolso I'm gonna keep that there andYou can also edit the mobile menu. Okay. So this is the mobile menu section and this will drop outokay, so the link color isThe menu link hover color. I'm gonna set that to333 as well. So that's looking awesome and you can obviously edit, you know any section that you wantso if we go back to theDesktop display. Let's just click on main navigationWhen you hover over that you'll see that the drop down is still yellow color so that is a drop down linkHover color. Okay, so you can change that to three to three andYou'll see that the color will change as wellOops I added in as the background color you meant to add it in as the just a link color. So change that back andThere you go. Right so I think that is pretty much it for nowOkay, so obviously you can change it for all the different sections on your website and you can play around with these settingsso ultimately keep it as just one font family andTry to keep things neutral when you first start outSo if you do want to add some color to your website, for example, you want something like thisThen what I recommend you do is go to a website calledFlat UI colors, okay, and then click on a flat UI palettethen you can choose a color here, right andRead up on some color meanings. So go to google and you know search up color meaningsOkay, maybe I think this one here read up on colors because I think colors will really sort of set the mood forYour website, let's just say for example this one here. It looks really niceAlright, so choose a color that represents your brand and choose one main color just like they have okayso they haven't used likeyou know a million different colors because it's going to be really hard to match if you're not the designer andThen maybe you could have a you knowA accent color which is like clear it like a red or something where you can actually use for somethingYou want to point attention to and then you can slowly just implement it onto your website. Alright?So that is pretty much it what I'm going to show you is how to add in your favicon a week and actually add thatin so you can close that andWe can head over to the dashboardOkay, themify settings themify shop andThen here I'll click on that icon. We're gonna upload and then here you can upload your favicon. I recommend 64 by 64 andIt should be a PNG file. Okay, and then upload that and save itOkay, and then you'll get the favicon appearing hereso if you actually don't see many fonts again on your website, you can click on google fonts as well andThen you can also click on show all google fonts because sometimes the font that you wantMay not actually show up so you can click on that as well. Another thing that I want to show you is the search settingsSo here for example on your website right by defaultIt will also search for your blog post and things like that. You can actually exclude let's say blog post andPages and just include you know your products. All right, and then you can click on saveSo if you actually finish the tutorialSometimes you might notice that you know, there is some updates available. Okay, so you can also email me atSupport at Hoag intercom and I can send you the updated version if you want. You can also get the updated version as wellso i'm going to leave a link down description, which will give you aMembership that gives you 1 year support and also updates as well for your e-commerce themeOkayBut the website will still function if you don't update it because the theme developers are always adding inmore features and more things to the website and a lot of people like to haveAdditional support then that's what the membership is for. OkaySo if we actually go back to revisit our websiteWe can scroll down have a look at our website. Everything looks really really awesomeReally clean and simple, okayIf you have any questions, make sure to drop it down below because I know that you knowThis tutorial is like three hours longthere's still stuff that IHaven't covered because otherwise this tutorial will be like ten hours longif you have any questions leave it down below and I'll try to create maybe like a FAQ video andI'll post it all the links and everything in the description below. So one final thing I might actuallyYou know edit the thing the link thereIt's a bit too thin for my liking so I'm gonna go back and quickly show you that's a main navigation linkOkay here main navigation. So click on menu link andThen here let's just sit inthe Josephine sands andThen also we're gonna set the font weight to normalOkay, so I think that looks a lot better for the top navigation. You can publishCloseandthe final thing that you need to do is log out of your website and view it and then you canGo to the home page start viewing itOkay, so you've completed the website looks awesome. Now you can start promoting it making salesOr you can help other people build their e-commerce storeshopefully I've saved you guys a lot of money andIf you liked the video, make sure to give it a thumbs up and subscribe for more videos
Source
