Guess what, guys. Today is a really amazing day because finally I’ve been working on this ecommerce tutorial For so long and, finally, it’s out. Okay, so in this tutorial It’s going to be a simple Basic Ecommerce store for example if you want to sell clothing if you want to sell arts and crafts if you want to sell downloadable products or virtual products for example logo design services then this is your tutorial. This isn’t a tutorial like building a store like eBay or Amazon so don’t expect that I also wanted to announce that I’m going to do a giveaway for 3 Apple iPads so make sure to subscribe and also click the link in the description to actually verify that and It will be awesome if this video can hit 200 likes as well. Okay, so in this video, I’ll be going through everything from the start for example getting your domains And getting that up and running first And then I’ll be going through how to build a really professional home page using the Drag-And-Drop builder which is super important I’ll also go through design techniques with you as well So to make sure that your website is really polished and they don’t show you how to add in products I’ll show you how to add in variable products which is like maybe like a jumper you might have a small size or you might have different colors of it And then I’ll show you how to set up the tax settings. That is really hard I’ve been working on that for ages, and then finally I understand it so I can actually teach you guys about that And then I’ll go through the shipping options for example Setting in different prices for different areas and also different prices for different products And then what we’ll go through is The coupons to show you how to set that up and also the payment options so you can actually get paid before you Send that product out and of course the most important part is actually setting in the colors, okay So I’ll be showing you how to create the perfect color palette and then apply it to your site So what we’re going to do now is basically is go to into the screen And then I will walk you through a live transaction, and then we’ll start building. All good? Ok so we’re inside the store, so I guess I can get changed into my pajamas now (chuckles) just kidding. Anyways, so we’re inside the store as you can see it’s fairly basic, but You can add all the bells and whistles and things like that later which I’ll have additional videos for So for example if the customer clicks on shop now they’ll be directed into the shop page Where you’ll have a product filter and let’s say they’re looking for a jumper They can use it and just click on the jumper and they click into that jumper Okay, so they can read about the products and they can also select the different variations that they might like For example, a small one might be cheaper, and they can read the description as well as the shipping information people can also leave reviews. They can also add to wishlist so basically that will add it there and if you add that to cart Okay, that will go there, and then they can just click on checkout so once they check out they can also create a username and login and then set in their information so that every time when they come to your store they can just Log in and then check out really quickly, so for example as I said I’ll show you how to add in a coupon So it might be Black Friday, and then they can apply that coupon Which you should get a discount. Okay, so you can get free shipping Flat rate or local pickup as well, so what we’re going to do is I’ll just quickly fill in that information And we’ll do a quick test transaction. Okay, so I filled in all that information and then what you can do is select the shipping options here as you can see Black Friday gives me a 90% discount So I’d only have to pay $7 so if people don’t have a PayPal account they can also use credit cards via Paypal. So they will click on proceed to PayPal and then they basically log in to their PayPal account and If they don’t have PayPal they can pay with a credit or debit card Okay, so let’s click on Login just click on Pay Now Okay, so basically I’ve sent the amounts right now. We’re going to go and check the emails So this is the order receipt that your customer will receive and you can actually change the design of it later You’ll also get an email as well, so you can actually fulfill the order But you’ll also be able to log into your dashboard area where you can manage the orders you can complete it and you can view it and Also, you can click on the report section where you can get a report on your sales per year last month, this month so you can actually track it accurately and you can also track the customers as well as the stock and Taxes as well, so that is basically it I will be going through an overview of exactly what we need and also the steps that we’re going to be taking so the first thing that you guys will need is a Domain name and hosting. So domain name is basically like your web address so for example yourname.com Okay, Google’s domain name is google.com and hosting is basically where you actually save all the website files. You’ll also might need a SSSL and basically this is the little green lock which is next to your web address. If you go to www.apple.com You should see it in the browser section So this is recommended for most ecommerce websites because you’re actually collecting data from your customers and you want to make sure that’s secure so that’s what that does. Then I’ll show you how to install WordPress and WordPress is a content management system. In short, that basically means you’re able to build a website without needing to know how to code.And then I’ll show you how to configure the settings okay, and then the third step is installing the theme and Plugins so the theme is basically like a skin of the website and that would include the drag-and-drop builder and then I’ll show you how to design the website and actually build the home page by using the drag-and-drop builder and Also show you how to add your products in so your simple products is variable products, And then I”ll show you how to set up the Shop page and also add in the filter Then I’ll show you how to configure the WooCommerce settings which includes the taxes, shipping, payment and coupons. Then I’ll go through adding in your logo and Choosing colors and applying it properly to your website So what is the cost of everything? So basically for your domain name the cost of that is around $5.99 per year now the hosting is around $10 a month And the SSL normally is paid by the year, and I think that is around 19 dollars per year Okay, so those few things are definitely required because you definitely need to address You definitely need somewhere to save it and Definitely, I would recommend at least at SSL because you’re an eCommerce website So WordPress will be free and the theme is also free as well, but you do have the option to upgrade Which means you get one-year support and also updates So this is the same thing that I use for my website at www.hoganchua.com, and it’s awesome It’s the best thing that I’ve come across. That’s why I recommend it and That’s about it. So the total cost is around $15 to get started if you don’t get the SSL but if you do then it would be around $35 So it’s much better to build your own site because then you’ll have zero listing fees for example Some websites might charge you a listing fee to list your products And you also have total control of what to display so for example. You can display which reviews that you want There’s also fewer on-page distractions so you’re not listed against your competition and you also get more overall control and that you can actually build a brand that people remember, so people won’t say, you know, “I just bought it on eBay” or “I bought it from Amazon” they’ll actually say your website name and I also want to point out that you can also email me if you have any issues at [email protected] But the fastest way to reach me is through YouTube comments. I normally back to those in 24 hours You can also follow my Facebook page. that’s where I post updates But I do recommend you actually send in your url or at least a screenshot of your problem As it helps me determine, you know, what’s the problem and send you a Fix for that. You can also press the left and right arrow keys on YouTube to rewind and fast-forward It’s something that I learned just a few months ago, so I’m not sure how many you guys do it but for tutorials It’s really, really useful And also if I speak too fast or too slow you can actually speed and slow that down by checking the speed settings on the bottom right of the video, so let’s get into it Okay, so to get your hosting and also your domain name, You can go to www.hostgator.com and basically HostGator is what I use for my website, but you can actually use any host you want Just make sure that they have an uptime guarantee because you don’t want your website not up when people actually go there, and you also want to make sure that you’re able to easily install WordPress and also look for services which provide really good support as well But I personally wouldn’t recommend any free hosts because they have many limitations are just not reliable in general So what we’re going to do is click on web hosting but as you can see there are different services up here Firstly, for beginners I recommend starting off with web hosting and if you get more traffic Then you can upgrade the plans later on So basically there are three different plan: the Hatchling, Baby and also the Business plan. Personally, I’d go for the Baby because you can host unlimited domains so basically you can have Your domain, your friend’s domain, and you also have the option to get the SSL certificate So that’s recommended for e-Commerce So just click on the sign up for it. So once you’re here basically you’ll need to choose a domain name So basically let’s try and enter Shop Demo 23 and then you need to click on the outside here so basically sometimes it might be taken already So you might need to be a little bit creative with your domain name Personally I would recommend a .com because that’s what normally people type in up here and also, if you have a domain name already for example you might have it from NameCheap or GoDaddy or something like that, then you can enter in your domain here But it actually won’t connect to the hosting until you change the name servers And basically all you need to do is after you’ve purchased the hosting you’ll get the name server from HostGator Then you need to log in to your domain registrar for example Godaddy to change the name servers And then basically you’ll need to add the domain in your HostGator CPanel, and that’s basically it and then you can follow along So let’s scroll down Okay, so for the Package Type. Make sure to select Baby. Billing Cycle, we’re going to select I’m going to select 12 months because you get a bigger discount or you can go Month-to-month or if you want more discount, then you can go for 36 months. Okay, so select that then I’m going to just type in a username and also, a security pin, and then we’re going to scroll down here and I’m going to enter my billing information So maybe pause the video and enter in yours and also your credit card details Or select Paypal if you have Paypal Okay, so I’ve filled it in and I’ve selected PayPal, and I’m just going to select Paypal agreement here And then I’m going to scroll down Okay, so these are the additional services, so these are all optional so let me explain it. So the Domain Privacy basically means that People can actually search up your website domain name add a website called (I think) WhoIs. And they can check your name and also your email and also your address So if you want that protected then you have to select this option here. So basically what I recommend is if you’re like a brick-and-mortar business and you might want to put in the information anyway Then I probably wouldn’t select it, but if you’re like operating from home And you want to keep all your details private then you would select it So for the Hack Alert Monitoring. So what that does is It will scan your website for any malicious code personally I wouldn’t select it because you can actually use some free WordPress plugins to actually scan and Keep your website safe, but if you’re going to get it, then I would actually get this service After you’ve purchased your hosting and things because then you can get the one which actually scans your website and also automatically cleans it. So it’s a little bit more expensive, but I think that’s way better and Also for the professional email you can actually create your own [email protected] in the CPanel section. So you don’t need that then for the site backup I actually have a tutorial on how to backup your website using a free plugin on my channel So you can check that out. For the HTTPS, this is basically the thing that you see here and the little green lock symbol and you’ll see a lot of e-Commerce websites will have it For example: Apple, eBay, Amazon. They all have it Because people are entering their information for example the shipping information credit card details, passwords, and things like that That’s why they have the HTTPS that helps basically secure all that data and so I personally would recommend it because you’re an e-Commerce store But if you were like a blog or a website, then I wouldn’t select this option here. So you can also get it afterwards but I believe it’s $29.95 so I would get it. And for the coupon code, we’re going to enter shop now And then click on validate, so this will give you a bigger discount. So if you scroll back up You’ll see that you get a 40% discount as well And also the 36 month is 60. Let’s scroll back down here You might see that they might check this again. So you might want to unselect that again scroll back down So you’ve got your domain here. Which is also cheaper so 6 dollars and also your hosting for 12 months, and we’ll come to $124.00 which is around $10.00 a month Okay Once you’ve done that then you can just click on “I read and agree to the terms and service” I also wanted to point out that if you do use this coupon I will get a small commission and it basically helps me support these tutorials, okay. It’ll be greatly appreciated but you don’t have to use it That’s it. So we’re going to click on checkout now and Basically I’m just going to log in with my PayPal account and pay for that Okay, so for some odd reason not sure why because unable to process I think you might need to select the PayPal one-time agreement instead of the pre-approved payments So I’m going to pay the bill and hopefully this time will actually work so I’m going to scroll down and then select to use PayPal and select PayPal one-time and Recheck these things here, and then click on pay now; or you can pay with the credit card in case ok and then click on continue okay, so I’ve successfully paid for that as you can see and basically now you will either maybe receive a confirmation page if you pay by credit card But you’ll receive an email which I’ll go and check the emails now so this is the email that you’ll receive and basically all you need to do is you need to click on the control panel url, and that will basically take you here And then you’ll need to copy over your username and also your password to login to your CPanel And that’s where we install our WordPress. So I’m going to click on login So this is your WordPress CPanel and as I said before, You can actually add on the domains here, okay If you got your domain from somewhere else and if you do have any issues, you can contact the HostGator live chat support So you can just go to their home page, and it’s on the top right hand side So what we’re going to do is install WordPress. All you need to do is click here the one-click installation and then you need to select your domain and leave the directory part empty and then click on next Okay, so for your blog title, I’m just going to set in logo, you can change this later Okay, so don’t worry about that. Your username, Tthis is what you login with your name and last name as well as Your email address So make sure this is correct because that will also send you their login information there as well, and then we’re gonna click on accept and We’re going to click on install Okay, so that should take a minute or so or less than that, not sure Okay, once the installation is complete sometimes if you just bought your domain it might not have propagated yet And what that means is basically HostGator is setting your website up on the back end Hopefully it will be up. If not, you just have to wait maybe 15 to 20 minutes Hopefully, my one is up so what we’re going to do is I’m going to copy over the passwords first Okay, once you do that. Then I’m also going to actually just open this in a new tab Okay, so as you can see it’s not up yet So it might take 15 to 20 minutes for that to actually set up So what I’m going to do is take a little break and then come back. Okay, so I’m back and the website is up So we can actually login. I also wanted to point out that if you actually, for example, let’s say we type in the URL here, and then you can type in WP Admin and then that will take you to the login area so if you click on that That will take you to the login here So what I recommend is bookmarking that. So that also sends you a email with your details So you can use the password there and basically enter in the username paste in that password and then click on login okay, so we’re in the WordPress dashboard I’ll be showing you how to set everything up, so I’m just going to click on I don’t need help and as you can see there’s a lot of stuff popping up I’m going to close all of these to just clean things up a little bit and click on Dismiss; close that, close those Ok so the first thing that we’re going to do is go to users and click on all users So basically users. You’re able to add in new users. So that’s for example You might have someone to edit your website Then you can create a username for them so they can log in with their username and you can set in different roles as well. So we’re going to click on edit for your username and then we’re going to scroll down here to the account management. Click on generate password so I’m going to set in my password which I remembe. Try to set a stronger password than me. Okay, confirm the username password and update profile So once that is done then the password is updated. So what we’re going to do now is actually go to Plugins Now plugins are basically sort of software for your website to add functionality to it so for example you might have Applications on your phone for example: social media apps, productivity apps basically plugins are the same thing but for websites So it does come pre-installed with a lot of plugins What we’re going to do is actually deactivate them because sometimes they might conflict with our Builder and there’s just too much stuff. So I’m going to clean everything up, and I’m also going to delete them But you can actually add them on later as well Okay, so once that is done, then we can actually go and open a new tab to view our website Okay, so as you can see this is the default WordPress website, and it looks nothing like a eCommerce store So what we’re going to do now is actually install the theme and also the required plugins So we’re going to hover over appearance and then click on themes So what we’re going to do is click on add new Ok so we’re going to upload our own theme, so there’s a lot of free themes here But they’re not really flexible and they don’t have the drag-and-drop builder, so to upload the theme, first of all, we need to download the theme and the theme is actually in the description down below. So make sure to download that to your computer and also download the images to computer as well so you can actually follow along with the tutorial So you’ll probably get two files like this, okay So what I want you to do is unzip it and then they’ll become folders and then for example I’ll have all the images ready so you can actually follow along with the tutorial And also the theme and also the required plugins will be in here so what we’re going to do is go back to our website and click on upload theme, choose file so what we’re going to do is find the folder which is the shop theme and plugins and make sure to upload Themify Shop.zip. Make sure it’s the .zip file otherwise it’s not going to upload properly and click on open and Install Now. So as you can see, the progress briers down on the left Left hand side bottom. If you have any issues then you can go to hoganchua.com and then click on FAQ So I normally list out the most commonly asked questions on my website FAQ So you can actually go there and check out the solutions so for example if you have any problems installing the theme then you can check it out So you can scroll down to the theme installation and a common issue that people have is the upload file exceeds So what you can do is you can follow this video tutorial where I’ll show you how to upload the theme Via your CPanel section What we’re going to do is after you have actually installed it then we need to actually activate it to be Activated on our website. So skins and demos will actually pop out what we’re going to do is we’re gonna close it Okay, make sure you close that so as you can see the version is 1.11 and this is the version we’re actually using sometimes you might get an update so basically it means that a new update is available But you don’t have to update What I do recommend is that if you finish the tutorial then you can email me at [email protected] and I’ll be happy to update it for you, okay But you can also update it automatically with a username and password so you can actually get the membership which actually includes the support and updates at Themify.me and then this is the theme that we’re actually using , the Themify Shop theme, and You can actually purchase it for $49.00 You can use the coupon “hogan” and that will give you a 30% discount So it will actually be something like $34.00 or something like that And that will give you access to the updates for a year and also support So it’s actually really good if you actually want to customize your website even more and it’s just pretty useful in general So you can get it But I do recommend updating once you finish the tutorial because sometimes the buttons and things change So what we’re going to do now is let’s go and head into plugins. So we’re going to click on plugins here and then click on add new and then we’re going to upload plug-in, choose file And we’re going to upload the builder WooCommerce which is basically a plug-in which helps us easily add the products onto our homepage or anywhere on our website. Click on Activate add new so click on upload plug-in again , choose file, and select the product filters zip and click on open and install now. So basically that is the product filter that will add to our shop page and activate that plugin Okay, so as you can see it’s not activated yet Because we actually need to install the WooCommerce plugin and WooCommerce adds the e-Commerce functionality to our website. So we’re going to click on add new and we’re going to click on search plugins. Type in WooCommerce here and click on enter then we’re going to click on install now We’re also going to activate that So it’s got over a million installs. Make sure you get the right one Okay, so it’s going to walk you through a quick setup. We’re going to click on let’s go And this is the page setup. So add the required pages to your website So we’ll be able to add in additional pages later which I’ll show you. We’re going to click on continue And then we’re going to set out our store location so set in your location I’m going to set it up to Australia and select your currency I’m going to select yes. I’ll be charging sales tax. We’ll be going through the tax settings later on So you’ll probably just select yes, and then I will enterprises exclusive of tax Normally it will set up with the default tax rate. So just leave that as is and then click on continue So for the Shipping I’m just going to set it as kilos and centimeters because that’s the most common measurement in Australia Yours might be in pounds or inches So that’s optional. Click on continue after that for payments I’m going to select PayPal Standard But you can also select check payments and things like that So for your PayPal email address, you can put it in here. If you don’t have a PayPal account yet then go to www.PayPal.com and sign up for a PayPal business account. So you just need your basic information and Basically Paypal is really convenient because you can receive payment instantly and then you can deposit it into your bank account once you receive money. So set that up and afterwards, just put your PayPal email in here and then click on continue I’ll also be going through the payments settings later as well Okay, so we’re pretty much done You can actually click on watch the guided video tours, so I’m going to open that in a new tab So WooCommerce has its own video Tutorials and also documentation which you can go through, but I’ll be covering most of the stuff in the video anyway So you might find it helpful for additional videos so you can bookmark that We’re going to return to the WordPress dashboard. So with the framework versions You can actually update that for free automatically so you can update that now if you need to So what we’re going to do next is add in the pages set in the navigation menu and also set in the static homepage So once your plugins have been added and set up then we’re going to be adding in pages So just click on Pages here As you can see the pages were set up by WooCommerce are here already What we’re going to do is actually delete the sample page here this is the default page WordPress has added and I’m going to delete it from the trash as well, so delete it permanently Then we’re going to click on add new So the first page, we’re going to be adding is home So this will be where we’re going to build our home page layout and then click on Publish we’re going to click on add new we’re going to add in the wishlist page then click on Publish So you can add as many pages as you want. We’re going to click on add new again I’m going to add in the about page, but I won’t be showing you how to build a layout here It will be in another video because I didn’t want to make the video too long click on add new The same for the contact page, you can add that in, and I’ll show you how to build the contact page as well as add in the contact form in another tutorial Ok so as you can see the permalink here. So if you actually click that link You’ll see that it has the index.php in there Basically we want to remove that and to do that all we need to do is go to setting, click on Permalinks Then change it to post name. So basically you want the post name in the URL Also the page title in the url, you don’t want it to be the index.php Or even ?p=123 because this is better for search engines and also for people as well so they know exactly what you are talking about in that page alright? So once you’ve done that then you can actually save the changes Once you’re done with that then we’re going to do is actually set up the menus. So with the menus here we’re going to go to appearance and then click on menus Okay, so we’re going to click on the menu name and set in top nav for top navigation and click on menu Once we’ve done that then you can select the page that you want to display on your menu. Which is up here Alright, so the pages. I want to select is maybe my about page, contact page shop page And I think that is it. So I’m going to add those three pages to the menu and you can rearrange it just by dragging and dropping and then you can also make sure that it is a drop-down menu if you actually pull it in like that, so In case, I’m going to show you an example So select this if you want to add new pages directly to this menu when you add new pages That’s optional. For the display location you have to set it to the main navigation though, So click on Save and if we refresh that page, then it will actually show you a menu there and as you can see the contact page drops down from about because you put it under as a sub-item So I’m going to put that back where it is and then save menu so once that is done I’m actually going to add the my account’s little icon up here as well. which is the Icon Navigation. So to do that we need to actually create a new menu So for this one, I might put in icon nav. So this name is just optional. It’s just for your own reference create menu So this is the my account page Okay, so people can actually come here and login and also register for an account where they can actually put in their details so they can check out quicker Once you’ve done that, click on Add to Menu Simply just click select icon navigation, okay, but I also want to click here on the down arrow And I want to insert an icon. So as you can see there’s icons here. I want to insert like a little uh, person. Click on Themify here. So as you can see there’s tons of different icons but I’m going to click on the Themify one and let’s look for the user icon. Click that in there and then what we’re going to do is save the menu, so if that is set in there Then if we refresh the page then it should appear next to the heart thing. So once that is done we’ll actually need to set in a static home page so basically if you actually type in home here You’ll be directed to your home page that you just created. So we want to set that home page to just be our domain name. So you want people to go to your home page just by typing your domain name So to do that click on the customize option up here as you can see you’ll be automatically directed here to Themify options. Click on the back arrow, and Click on static home page or static front page. Click on a static page Set that to your home page there, okay, and save and publish And then close it So basically as you can see yourdomainname.com, you’ll be directed to your home page Which is where we will be building our home page layout and having the featured products I’m going to show you how to add the social links and also go through the Themify settings so basically changing the appearance of the layouts and also the pages So let’s just go to our dashboard section and then we’re going to go to Themify shop and click on Themify settings What we’re going to do is I’m going to scroll down Okay, make sure you’re on the general tab Scroll down to a lot of settings here, but I just want to go through the most important ones So for your Google fonts to click on show all Google fonts so you’ll be able to select more fonts and then click on save then click on the default layouts Ok scroll up here. So you’ll see the default archive post layout, so this is for your post layouts Which is for your blog post if you add in blog post So we’re not going to be going through that in this video I’ll go through that in another video, but this is actually where we change the default layout of that those posts. So we’re going to scroll down to the default page layout and what I’m going to do is actually open it in a new tab so we know what’s going on For example, this is our home page and we’re setting in the default page layout for it. So what I want to do is select no sidebar and also hide the title in all the pages, and I also want to disable the page comments as you can see this is title, this is the sidebar. And if we set those settings in, click on Save and if you refresh it, then it would disappear Ok so basically this gives you a blank canvas every time you create a new page. So you can actually create Whatever layout you want using the Themify Builder. So once you’ve done that, click on the theme settings scroll back up. So for most of these just keep them as defaults, but you can edit them later For the theme appearance, so we’re actually able to set in different header designs We’re able to select all these different options, but personally as a eCommerce store I recommend either option 1, 2, or header strike option here because it’s just really good user experience to have your navigation bar on the top So for the sticky header and if you disabled the sticky header This basically means, for example, if you’re scrolling down, then the header stays there as a sticky. If you disable it then basically the header won’t scroll down with you all right. Personally I’m just going to keep it as is. You can also exclude the site logo and the tagline here which is that; which I might do. So I might exclude that site tagline you can also exclude the search icon and Search icon here and also the menu navigation I’m going to leave those as is. So for your footer design you can also edit the footer design as well So personally I’m going to keep it as default but this is where you can actually change it alright so I’m going to exclude the site logo leave everything as is. You might want to exclude the back to top button But I think that’s pretty cool when you press it scrolls back up Then we’re going to scroll down Now for the footer text section. So as you can see it has “Powered By WordPress and Themify WordPress Themes” You might want to disable that Okay, so to do that, all you need to do is hide footer text 2 So footer text 1 is this thing here. So I’m going to keep it and then I’m going to click on save and then I’m going to go back here and refresh So we’ve removed the logo, and we’ll also remove the Powered by WordPress Okay, so that’s nice and cool. Then we’re going to be doing is click on shop settings So your shop settings is basically editing the layout for your shop page here but we haven’t set any products in yet So I’m going to be walking you through later on so you know exactly what each of the functions do. Alright, we’re going to click on image script And I want to disable this because I want to be uploading the images which are cropped already So I want to disable that and make sure this is set to original and then click on save so if we use social links you can click on that and Basically you can open up all your profiles For example, my Twitter. You just copy in your url Let’s just paste the link into there. Okay. That’s all you need to do you can also change the icon color here, but I’m going to leave it as defaults because we’re going to be putting the The links down below here, and we’ll be changing the color for the footer links together So just leave it as default as is For Facebook, I’m going to copy that and you can also follow my Facebook This is where I mostly post updates all right paste that into there. If you don’t have a Google+ account you don’t have to enter a link and it won’t show up For YouTube. I’m going to grab my channel URL. Just copy that, paste that in there. And also you can follow that for more videos Pinterest, I don’t have a Pinterest. But let’s just say you have an Instagram, you can click on the add link and type in “Instagram” Then for your link, I’m going to copy my Instagram profile So you can follow me if you like, but I won’t be posting any website stuff on there. It’s just general What I do besides making tutorials. Let’s paste that into there. For the icon we can click on insert icon Okay, so there’s bunch of brand icons here. So you can be adding in Other accounts, which you have as well. So I’m just going to type in Instagram here Alright and click on Instagram, and that will basically add it in. So we’re going to do is click on save So once we have saved that then we actually need to set it into the footer section. So what we need to do is we need to hover over appearance and click on Widgets Basically these are the available widgets which we can add to the widget areas. So for example we’re going to grab the Themify Social Links We’re going to grab that widget and put it below footer logo widget And because these links are external pages. I’m going to open the link in a new window for the icon size I’m just going to keep it defaults and then save Ok once I’ve done that if we actually refresh it then it should show up like that, okay, which is awesome and For the footer widget 1, footer widget, footer widget 3, you can add in all sorts of widgets and they will show up here So footer widget 1 will be here, 2 will be here, 3 will be there as well So I’ll also make another tutorial where I’ll show you how to make a advanced footer So you can add different pages links and stuff like that. So what we going to do now is I’m going to go through some really important design techniques Only after that I’ll show you how to build the layout for the home page Because I think it’s really important to understand it first. So you know why I do the things I do, alright So for those of you who actually got the SSL certificate from HostGator You should receive an email within 24 hours that they have activated the SSL for your website So if you haven’t got that then you can contact them but you should have that installed onto your website but as you can see if its been 24 hours and you don’t see that sign which says that the HTTPS Or that lock icon then you can actually download a special plugin to display that. So if we go to our dashboard section If we go to plugins, and then click on add new and then here we’re going to search for a plug-in I think it’s called Really Simple SSL and then click of enter So we’re going to install this one by Radia okay, so click on install now, and then what we’re going to do is activate it then once that is done, then I think you can just go to the settings here then as you can see in Detected Setup, you’ll see that an SSL certificate was detected on your website, and then what you can do is go ahead and actually activate the SSL Okay, so that has been activated and let’s go and refresh and see how that goes Okay, awesome So as you can see, it locked me out by basically you have the secure icon as well as the HTTPS thing appear for your website now. So I’m going to login Okay, all good. So I’ve compiled a web design guide on my website You can come here at www.hoganchua.com, hover over resources and click on it here So I wanted to go through this because People don’t really have that much issue with the technical part of building the web site But since I’ve seen a lot of websites ’cause people have, you know, asked me to solve problems The web sites don’t really look professional, and I think that’s a really important thing that you need to actually ensure because if it’s not professional, then people are going to click off your website, and you’re not gonna make any sales So I don’t really want to create a tutorial which just shows you how to like do everything like step by step But I also wanted to ensure that you actually will become successful and actually sell stuff, so this is really important, and that’s why I wanted to cover in this video so if you click on the contents You can actually click on each of these things and it’ll skip down to each of those sections which you can refer to after so the first thing I want to talk about is I recommend sticking to one font family and Because you are beginning It’s really important to make sure that everything is consistent and a lot of people choose too many fonts which I think is just too much because you don’t really need it. For example, apple only has One font family they use so you can download the plug-in or chrome extension called WhatFont and you can check out websites You can also go to Amazon and they’re using the most basic one: Arial Okay, so you don’t need anything fancy. I would focus on readability rather than being fancy So there are two different typefaces one is called Sans Serif and the other is called Serif So the difference here is, as you can see, the edges are plain and the strokes are also even with So it actually appears more clean and modern and most websites that you see these days are using the Sans Serif typeface. For example, Apple, that Sans Serif Amazon, that’s Sans Serif as well For the Serif typeface, they have curves on the edges and also thick and thin strokes For example, thin here thicker strokes there. So these websites a little bit more traditional and elegant. For example this website here they use the Serif typeface in the navigation and also within the content itself, so it looks a little bit more handcrafted, sort of. So if that’s what you want your brand to represent then Sans Serif- -I mean Serif is a good typeface to choose, but if you just want sort of like a simple web site then I recommend just sticking with Sans Serif The font that we’re using for this tutorial is Libre Franklin but also a really good one if you don’t know which one to choose is Open Sans and these are some other good ones here as well So Serif typeface is also really good for long reading If you have a lot of content, for example, a blog on your website then setting the blog post to this Serif typeface is also a good idea because the lines sort of guide the eye a little bit The second thing is making sure that your body font size is readable So you don’t want to change your body font size to something like this which I see a lot of people do. You want to make sure it’s between 15 to 25 But I think 16 to 18 is pretty good, really readable You don’t want to be too big because it just looks really silly But if it’s like a headline or sub headline that doesn’t really have any limit but you want to make sure your body text is readable now the third thing is the line length You’ll want to keep it in between 45 and 90 characters long per line so it’s an easy read You don’t want to go from one side to the other because it just makes you feel like there’s a lot of text. You don’t want that Otherwise people are just going to you know skip everything not read it, and yeah, that’s just that bad And also be consistent with capitals upper case words will actually slow people down by 10% so I wouldn’t use it for the content or any sort of long headings I would recommend it if maybe your heading was like one or two words or something like that Navigation menus, you can use it for that and also buttons So normally I would stick to using sentence case most of the time So basically a capital to start it off and then for the rest of its is just lower case So, for example, Amazon you’ve got just sentence case here right,. I think that’s just more friendly as well The title case, you can use that for your blog post titles and also your product titles so your product titles on your shop page So product titles, capital, capital, that’s the title case So you want to make sure that is consistent for all your products, so it make sure that your website is just really professional and really polished Then for your headlines and sub headlines. You want to make sure you define Hierarchy by reducing the size and also the font weights and also the color You don’t have to use all of these But you just want to make sure that the headline stands out because that’s the most important thing You don’t want it to be like this where it’s sort of like you don’t know which which team to focus on so if you look on websites like Apple’s website: headline, sub headline. It just looks really nice or here which is bold and then the sub headline is not bold So that is really important to make a website really polished Now I recommend using a lot of neutral colors especially for separation of content for example this divider line and Also, so Paypal actually uses this as well and a lot of professional websites will use it. For example here It’s a white background But you’ll see a neutral sort of background, a gray background for it because it separates the content and if you scroll down they also use their main color to separate content, and then they use the gray again, and you’re scrolling down they use a dark grey here scroll down and then they use a grey again So it’s really useful to separate content and also for your headers and footers. So for example, your header section up there and also your footers Using neutral colors is really good and also using the colors when you don’t know which color to use But at the end of the tutorial, I also be covering how to choose colors and apply it to your website So don’t worry too much about it for now So another really important thing is actually adding text over images The first thing I recommend is actually focus on relevance you’d want to pick the most relevant image to your business and brand So personally I would recommend getting images done by a professional photographer So you can get really nice grounded images for your business And you can also get them to do your product images as well If you actually need to choose images like from free websites such as UnSplash which I’ll show you in a second. Make sure to pick an image where we e can actually apply text over easily Sometimes it may not be easy to find the right image But you can actually edit it to make sure that the text is really visible So you need to add in like an overlay color which I’ll show you and you can also use different methods where you just move the image a little bit and then move the text as well so as you can see you can’t really see that white text So if you move it on the left hand side, then you can easily see it Okay, you can also blur the image now this is really good if you want to add a lot of text because it blurs the details and it makes the Text in front stand out more Okay, so you can check out these examples and I’ll also try to make videos to show you how I did it as well using the builder Paypal does it really well. So as you can see, they added gradient and then for this part where they want it to stand out They put a white background on top of that. Also a neutral color So the next thing is how to set in button colors So this is something that you probably didn’t really pay attention to but it’s also really important as well So let’s say you hover over a button. As you can see, it goes a little bit now a lot of websites they use the formula where It goes darker and sometimes they might use it For example, we might go lighter as well so there’s a formula that I will show you in a second Basically it will keep everything consistent so your website is Professional and also your images should be cropped before you actually upload it to your website So for example, sometimes if you upload it directly from your camera, it might be just like a huge image and your website’s going to load super slow so you don’t want your website to load super slow because people are just going to click off your website so this is a basic image guide that I created to explain it basically, if you want an image about this size on your website then this is the approximate size that you can proper to all right, so I made one for medium images, large images, and also Hero images, I’ll show you how to crop it here an image. The product images I will walk you through this when we’re adding in our Products. So right now we’re going to start building the home page So for your home page hero image, what I personally recommend is actually hiring a photographer or if you’re good at taking photos then just do it yourself for your business. That way it’s way more relevant, and it looks more authentic, but you can actually go to website called Unsplash.com And they have free images which are really high quality that you can use for commercial and also personal purposes, and you don’t need to create them. So what I recommend is choosing a really good image where you can put the text over really easily For example, this one is really good because you add it on top here this one’s not too bad but something that is sort of more detailed like that, it might actually not be as good So try to pick one which you can easily add text over for example this one so basically if you’ve been following along, I’ve already included the image in the Images folder, but if you want to choose your own then you can choose it here again another really popular site is called Thestocks.im. And basically it compiles all the free image websites as well so you can check out them here and also video backgrounds as well Okay, so download the image onto your computer. Just click on that button there, and that will download Let’s go to fotor.com. This is basically we can edit your images. Click on edit Okay, we’re going to click on open Computer, and let’s look for that image Okay, so at the uncropped version here of our hero image And you can click on that or you can just use your own image But I just want to show you how I crop it and you can use this software to help you crop all the other images on your website as well so click on got it, skip all tutorials. Actually, close that so as you can see down here this is the size of the image, and that is really big so we want to resize it. Click on resize Make sure the lock is selected here, so once you put in the number here it’ll actually resize the height of it proportionally to the width of it Okay, so click on apply. Once that is applied, you’ll see the change in the size here and then click on Crop The size that we’re going to crop it to is about 1800 and and also about a height of 1000 so basically drag it to where it’s most suitable for you to put the text. So somewhere like that and then click on apply. And then you can actually click on one tab enhance which basically will actually enhance the photo a little bit and you can also click on the basic settings to adjust it So you can adjust the sharpness and things like that. You can also click on effects So you can add in different filters to your image as well, so you can play around with that But I’m just going to save it now And just name your image properly, so name it like hero image 1800 x 1000. And you also want to save it as .jpg You might want to save it as high-quality But all you need to do is log in to your Facebook account or you can create a new account if you do want that and then that will download basically to your computer and then we can actually go to our home page So what we need to do is I recommend refreshing the website first So the builder will actually show you the live preview. So let’s click on turn on builder so this is a row you can click on the row options here What we want to do for the row width, we want to change it to full width row container So it goes all the way across If you change the full width content, then the content area will actually go to the sides as well But I personally just select full width row container. And then I click on styling Now for the background image This is where you can upload the image. Make sure to click on browse library instead of upload because WordPress will automatically crop your image. So click on browse library and then select files So we want to find the file from your computer So let’s say we want this image which I cropped before. Click on open and then that will upload to your website and then insert that file URL For the background mode we actually want it set it to full cover You can also set it to Parallax scrolling, which is kind of cool as well, but I generally set it to full cover and For the background position. I’m going to set as center it and then what we’re going to do is we’re going to scroll down here As you can see, you can’t really see the full image, so we need to add some spacing. You want to click on – – deselect that and Set the spacing to 17.5% The bottom, you want to set it to be the same as well 17.5. So that way you can see the image more. We’ll also be adding some text in the middle So it’s going to stretch it out even more. So once that is done, then you scroll back up here And you can also select a gradient background. So you can select the different colors ingredients you can play around with that, as well as adding a video background I personally recommend uploading your video to YouTube first and then paste in your Youtube URL here. That way it actually loads a lot quicker, and you can disable the audio as well and for the slider, all you need to do is insert the gallery and upload the files Select the files. For example, this one this one and this one and then once you’ve uploaded that for the image size, you want to set it to original image For the background slider mode, you want to set it to full cover So make sure those are the settings . As you can see you can’t really set in different text for each image To do that I recommend using a plug-in called Smart Slider 3. So it’s a free plug-in and hopefully, I’ll make another video on that as well, but I wanted to really show you how to use the Themify builder So I’m just going to select a default image. I personally prefer just one because it loads a lot quicker rather than loading three images So once that is done, then I’m going to click on here oops and then I’m going to click on this lock icon to set it there so does it move and Then we’re going to drop a text module Now for the text, you’ll want to type in your heading: eCommerce. I’m going to set it to heading 1 Okay, so the reason why we set it to heading 1 is because it’s good for SEO purposes so when Google actually scans your entire website, they’ll look for the source code and if it’s under the heading 1 tag, that means that It’s basically like the title of your website. It will give whatever key word in here more importance So they actually know you know what content your website is actually talking about and that way, they actually determine your ranking and of course you know you’ll need to have backlinks and all that other stuff, but this is the basics of On-page search engine optimization and it’s also good to keep things consistent So anytime you want this size and this font for your headings then all you need to do is select heading 1 rather than Setting the sizes and manually. I wanted to point out you can actually change the heading 1 font here But we don’t want to do that We want to actually edit the heading 1 font universally, so that’s when we actually go to the customize section and I think that is way more convenient in the long term because everytime you set the heading 1 font you don’t have to set it here again It will automatically apply to all the heading 1 fonts, so don’t worry about that too much. I’ll walk you through that Anyways, you can actually go to the general tab here and we can text align everything to the middle just like that. For the color you, can set it here on to white and then click on save and Because that is a text modul, what we can do is if you want to add the sub headline You can actually duplicate the module So that’s two modules there. And you can double click on that module we’re going to add in the sub headline. So for example “create a beautiful online store for your business” Something like that. And then what we can do is go to styling For the fonts, as you can see, the settings have been saved previously already, but I do want to change it to 24 pixels for the size I think that is it so save it Okay, so that’s pretty good then we’re going to scroll down here and then click on the button and drag that in So for the button text what we’re going to do is type in shop now Okay, or whatever text you want to put in there. For the link we’re going to link it to our shop page So what I normally do is just copy the domain name (oops) and paste it into there And then type in shop. So whether built the shop page yet, but that is the URL for your shop page So copy your domain and then type in shop Ok just leave those as defaults Now you can select the button style as well so generally I recommend either circle, rounded, or squared. You can also select the outline but as you can see it’s not very visible and I don’t really recommend it Let’s click on rounded Let’s click on styling as well You want to make sure to click on button link because you want to edit the button only you don’t want to edit the module So for example if Let’s say we add a background color Again that’s going to add it to the module All right, you don’t want to add it to the module. You want to add the button link Okay, so as I said before with the button hover colors, what you’ll need to do is go to a website called 0 to 255 So once you’re there click on enter a color Okay, so if we look at the background this depends on your own background. My background is kind of light So to make the button stand out I’m going to choose a darker button color. So the button color that I’m going to choose is three 6s (666) which is a dark gray as a neutral color. Click on enter Again if your background is a dark one Then you might select a lighter neutral color. So once we have that, you can copy that there Paste in the color there That will change the background color. Now for the background hover, we’re going to either select 2 shades darker here or 2 shades lighter So this really depends on your preference and also on. The background as well the main purpose of it is to ensure that people know that they’re actually hovering over a button so that they can click it so whatever is more visible Then just use that one . So you can also choose three shades lighter or three shades darker Just as long as you keep everything consistent throughout your entire website and then it’s fine. So I might choose this one paste that into there like that and For the color of the link, I’m going to choose to be white , like that, and also the color hover to be white as well Text Decoration, you want to select none I think that is it. So if we actually save it. So as you can see, the button is here we can actually move it to the middle using the button styling and texting align it to the middle here. But I also want to show you that I can do it for the row options as well so you can click on styling and basically set the text on lines in the middle Now what that does is it moves everything within this row Into the middle. So any of the settings that you setting here will control this entire row only. So for example if you drag the button thing down to the new row It will actually won’t apply So you actually need to set in the row options here again and set that to be in the middle all right so once we’ve put that in , then let’s just save it and Close the builder So what we need to do is actually move the whole entire row up ensuring there is no space there and to do that We need to click on an edit page Okay, and then scroll down to Themify custom panel, set the content with to full width and, then update Okay, so I also wanted to point out if you scroll down to the custom panel, if you click on the page appearance you’re able to set in the header design and all the other settings, for example, the footer design as well specific for this page only So what that is useful for is sometimes you might want to build a landing page and you might not need a header or you might not need a footer then you can select no footer and no header So let’s go back to our home page Okay, so as you can see that’s moved up. So what we’re going to do now is edit the heading 1 font universally. Click on customize And then I’ll show you how to move this text up a little bit as well So once you at the Themify options, make sure you’ve selected the advanced tab Which gives you more options and then you should see the headings tab. Click on heading 1 fonts Which is the one we’re editing and the size that I’m going to set in is 95 so that’s a good size and the font then I’m going to set in is Libre Franklin Then for the font weight I’m going to set it to be around Bold, I think. That looks good Then I would personally not edit anything. For example, these ones down here and also the colors Because if you set a heading 1 font somewhere else then you might automatically align it to some other place where you don’t want it to align So only edit the size line height and also the front weight here Then just Save and Publish. And close the options Okay, so if you actually want to move this text up a little bit, then I’ll show you how to do that And I’ll also show you how to add in a overlay color so to make a text stand out a little bit more so you can turn on the builder, and then we’re going to click on this text module Double-lick on that, go to Styling and scroll down to Margin Deselect apply it all. Now, we’re going to minus the bottom part some space. So – 2.00% (Whoops) – 2.00% like that, that will be good, or you can set it to 1.00% ; that really depends (on you) That looks alright, and then we’re going to click on save Then we’re going to click on the row options here. Click on the styling. Now for the row overlay We’re going to add in an overlay color Like that. And then you want to set it down to about 15.00% or 10.00% depending on your image For the overlay hover, this is when you actually hover over the image Then you can set it to that specific color. In this case, I might want it to be maybe 5.00% so it may be lighter Something like that, and you can also select a gradient overlay as well Just click on that option and select it in Save it Save it Close it Hopefully that will be cool. And you can also add in animation effects if you want to as well So I’ll just quickly show you guys just some really cool stuff click on edit here Animation. For example we can set that to, let’s say, fade in like that and then you want your other one to fade in as well So fade in. But this time you want it to delay it a little bit 0.25 seconds delay, and then for the button as well Animation. Set that to fade in as well 1 second Delay Alright, and you can also – let’s say you accidentally moved something You can also click on the undo button and you can also redo and undo. So let’s say we finished our hero image then you can actually save as revision. So basically hero image done and If you make any big mistakes, then you can actually click back here and reload that revision as well You can also save as layouts So for example, if you want to build a similar page and go want to rebuild everything then you can actually save it here Then just name it a title and then what you can do is go to your new page and load that layout So you don’t have to start all over again And if you want to create like a completely new domain and a new website you can also export layout as a .zip file and basically import that onto your new page as well So we’re pretty much all done. Now what I’m going to show you is how to add in your products So before we actually add in our products I actually want to show you how to edit some image settings otherwise the images uploaded will be really blurry on your shot page so let’s go back to our dashboard area Then you want to hover over WooCommerce. You want to click on settings So for example, if you guys have added in your products already Then what you’ll actually need to do is download a plug-in called Regenerate Thumbnails And it has over a million installs, and you’ll need to install and activate it and then you’ll need to go to tools and here those show you a regenerate thumbnails options and then you need to regenerate the thumbnails after you’ve done the settings that are going to show you now so click on the products tab then click on display Then scroll down. So for your product images, for your catalog images, we want to set it to be 400 and for the height you want to set it to 320 for the single product image, you want to set it to 720 and 456. And for the product thumbnails, you want to set it to 150 and you also want to disable the hard crop because it’s going to hard crop your images out and you don’t want that so we’re just going to save the changes Once you’ve done that, you’ll want to go to your settings here, and then click on Media Now for the medium size, you want to change that to 400. For the max height, 400. And then save changes So the product image sizes the one that you upload should be cropped to around 800×800 pixels Okay, so it’s sort of like a square. It can be 700×800 or something similar But just make sure that all the images you upload are the same And you also want to make sure that is proportional. So it’s actually zoomed in correctly for all images. So you don’t want to be different, you want them all to be like this And then I also recommend using white background because the image size will be smaller that means load times will be faster. But if you want you can also add in other images for your product gallery. So basically on the shop page will be a white background, but when they click into that image then you can actually display your image like in the house or something like that so people can imagine what that product will look like in their room, And then that’s it. So let’s go back to our dashboard area You want to hover over the products. And then just click on add new So it’s fairly simple: what you’ll need to do is set in a product name so the first one that we’re going to do is the black dress Now this section is for the long description. Now, I’ve basically typed out the long description on my web design guide on my website, so I’m just going to directly copy that into here and and paste that in. So as you can see, I also recommended some books. For example, “The Everything Store” which is about Jeff Bezos and Amazon and also “Delivering Happiness” I think these two books are really eye-opening because you get some really interesting information that will inspire you to to sort of build a better business So I highly recommend that and to check it out Then we’re going to scroll down to the product data so for this section here you want to select sample product Then for your regular price, you want to set it in. So for example, $109.00 Sale price, you might be $89.00. You can also schedule it as well Then click on inventory tab. You can set in a SKU which is a specific identifier for that product but if you don’t have that many that you probably don’t need it For managed stock, then you click that and then you can set in a stock quantity. For example: 5 You can also allow or not allow back orders. Then for your shipping This is basically the shipping weight of the actual product which people receive So you want to set that in because you want to let people know And the dimensions, set that in as well. 30cmx30x3 And then for the linked products, upsells and cross-sells so basically upsells is related products which will appear below your products on your product pages You might have a more profitable item or you might have something similar then that was where you can actually search for that product So as you can see, we haven’t added any products in yet but once you have then you can search for that product and Set that in to appear below this black dress product. So for the cross cells this is basically your products which will appear in the checkout section. So basically let’s say you have a camera a nice cost cell might be a memory card or camera batteries, so that is basically where we can actually set it in So for attributes, that is for the variable products which I’ll walk you through in a sec Advanced options, so you can add a purchase note. So the purchase note will appear in the order email which people will get. And you can also enable reviews as well, so the short description I’m going to copy it from our website here so you can include a summary of your products or you might even include shipping information how long that will actually take and If it’s a clothing, you might have a size guide, so you link it to a size guide. And to link it, you just select the text and then you click on insert link, click on the gear icon and then link it to whatever page that you have the size guide on And then you can select open link in a new tab which I recommend and then click on update Now for this one here, you might want to change the color so to change the color as you can see there’s no color option thing here. You want to make sure you toggle that toolbar and you can select the color here. So I’m going to select a custom color So I’m going to use this color code here Because it’s the same as the stock count color and you’ll see why in a moment Delete that space, Click on OK Then let’s scroll back up here. You want to add a category for your products For example, Dresses. And click on Add New For your product tags, it might be the brand of dress You might have maybe the color of dress or maybe the material of the dress and then you can separate it by commas and then click on add so that will add two tags there. And then for the product image, you’d want it set Select upload files, select files Now go to the images that you have downloaded from the description below and then click into the product images So there I will have all the images for you to upload and follow along So I’m just going to select all of them and upload them all together select the black dress and then click on set product image Now if you have additional images you might have it on different angles or you might have her in a different background Then you can add in additional images here. So it pretty much is done then what we can do is just click on Publish We’ll view that image and see what that looks like So I’m just going to right click and open that product in a new tab So that look’s pretty good. Image is nice and crisp and can click on that and then they can zoom in like that. As you can see here, the green text is the same here. So it all matches and is consistent I’ll show you how to configure this page later. Don’t worry about that Looking good. So now what I’m going to show you is adding in a variable product All right, so just click on add new here now we’re going to type in Jumper Then I’m going to go here and copy my long description again. Just copy that paste that into here Scroll down. For the product data, you want to select the variable product Then for the inventory you can also set in the unique identifier For a managed stock you probably want to manage it individually For shipping, since they are pretty much the same, then you can set in the weight of the product here 30, 30, and maybe 4cm Then you’re linked products So let’s say you want to link the black dress, then you can search it up like that And it should appear as I said before But we’re not going to link. So then we’re going to click on the attributes , we’re going to add in the attributes Then we’ll set up the variations. So we’re going to click on add Ok so this is, for example, the color Ok so we have a green jumper Now what we need to select is the pipe symbol and to do that you need to click on the shift key and also the forward slash (/) button on your keyboard, so it should be above your enter button and below your delete button. So it looks something like that, so green, purple and then another pipe symbol, gray Select useful variation, save as attributes. And another variation would be sizes so we’ll need to click on add again then type in size So we’re going to have small, pipe symbol, m pipe symbol and large one. Click on useful variations, save attributes Okay, so once you’ve added in the different attributes you can add as many as you want then we need to create the variations So click on variations here And then click the tab here and create variations from all attributes select go and It will create all the variations that you set. So click on ok click on ok As you can see, you’ve got the gray option with all the different sizes, purple with all different sizes green with all different sizes so you need to click on the down arrow, if you click here, you can upload specific images so click on that Look for the grey jumper And then set variation image. So for example the large size I might charge $89.00 and you can also manage stock here by clicking this item here You can set in specific sale prices and specific sizes and even specific descriptions for each and every product that you have here, but I’m going to leave them as default So I’m going to click on the next one then what you need to do is select the jumper again Now the price might be a little bit cheaper because it’s medium. $79.00 scroll down to gray enter that in and then this one might be $69.00 so I’m going to quickly do that for the rest of these so selecting the purple jumper and also the green jumper Setting in the specific prices, so I’m going to quickly do that now So I’m done and then just click on save changes Then we’re going to add in this short description, so I’m just going to go back here and copy that over Paste that into there , change the color Enter in the color code from my website, copy that Paste it into there and click on ok. So we need to set in the categories. Click on that Jumpers. Add Category So for the tags, we’re going to select brand of jumper. Or maybe Cotton jumper as well. And then click on add For the product image, you want to set that in. And this is the default image that will appear on your shop page So I might choose the green one. Set that in. And you can also set in additional gallery images as well so what we can do is I’m going to Publish it now and Then I’m going to open the product in a new tab so as you can see if you actually change the color option and also change the price the prices will change like that and same with the color of the jumpers So if you want people to actually arrive at your Product and have a default option set in , then you can go back to your product, the jumper products, scroll down to variations and you can set in the default form values to be whichever you want so this one might be green and to set it to medium click on update let’s say if we refresh the product page then it should show the default form values there That is pretty much it. We’ve set in the simple and also the variable product And I just want to quickly run through how to set up the downloadable. So it’s fairly simple Let’s just say we go to Add New again Okay, so scroll down here. You can do everything the same all you need to do for a downloadable is select the downloadable tab And because it’s downloadable, It’s not shippable So you need to select virtual and then you upload your files as well as setting in the download limits and things like that Now if it’s just a virtual item, for example, logo design services, then you’ll deselect downloadable and then Just do that So for the advanced option, what you might do is you might leave a note For example, if it’s a logo design service you might actually create a specific form for them So basically I created a form on Wufoo.com and it’s basically like a little brief that I want people to fill out so and what I’ll do is just copy the URL Then paste it into here and say “Thank you for the purchase. Please fill in this form here” So people will actually get the purchase note in their order confirmation. So that’s pretty much it. There’s not much to it and just basically set everything as before. So what I’m going to do now is pretty much add in the rest of the products Basically you can go to this demo website which I will have created. Then you can just check out what I’ve typed in if you want to copy everything as is or what I suggest is you just add in your own products and things like that. If you had any questions, make sure to just drop it down below in the comment section So once you’ve added all your products then you can click on all products here and Your products will be all listed here and you can click to edit them or anything like that if you need to. And if you actually visit our store hover over your little house thing here and right click open in a new tab and your store should look something like this. All the images should be crisp If they are not, then maybe you need to regenerate the thumbnails as I said before. So what we’re going to do now is add the products to the home page. So all we need to do is go and visit our home page Then we’re going to be turning on the builder Scroll down to the second row here. What we’re going to do is add in a text module So this will be a title for featured products So it could be your featured products or specific category products or most popular products Doesn’t really matter what you name it. I’m going to set it to heading 2 Then I’m going to bold it a little bit like that What I’m also going to do is because I’m going to set in the products below here I want to add a little bit of spacing between the text and also the products. So I’m going to go to styling Scroll down to padding. Deselect For the bottom padding I’m going to set around 3.00% or 2.00%. You can see what’s best for your website click on save And then I also want to add some spacing between the text here and the hero image and also align it to the center So click on the row options styling Scroll here, and since we’re here, text align it to the middle Scroll down to the padding. Deselect that. For the top padding, I’m going to add maybe 3.00% and also the same for the bottom. 3.00% as well Save it And then we’re done. Scroll down to the very bottom. You’ll see the WooCommerce Builder Module If you don’t see that, then make sure to install the WooCommerce plug-in and install and activate it So you need to go back to the plug-in section So let me walk you through one important thing for us. So just watch this part I’m going to set the product to 8 Then I’m going to order by price, set it to ascending And change that to grid 4 Okay, so I’m going to save it Save it and then close it refresh the page So as you can see the product here, the title of the product, takes up two lines because it’s super long So as you can see it moves everything down and the second row will be moved down as well So if you want everything to be aligned like in one line Then what I suggest you do is to Disable the masonry layout So most of the time you might have only four products, and you might not have a second row And then don’t need to do that or you can just make sure to keep the titles really short or change the title size to be a little bit smaller then you wouldn’t have the problem But if you can’t solve it using those solutions, then you can disable the masonry layout. Go back here For masonry Layout, select no Hopefully if we select yes, and then save it Close it Okay, so right now what happens is it adds the space for the rest of the products here. And the second row is also aligned all evenly So let’s go turn on the products, and I’ll show you some more of the features of the module Click on that so you can select specific categories to be displayed I’ll also show you how to add specific featured products onto your home page in about a minute or so You can select on sale and also top rated as well So for me I’m going to set in four products for the home page For the layout I’m going to select grid 4 It’s nice and simple. Or you can use the slider as well and you can play around with the settings For example for the slider options you might want to display 3 Four the slider paginatio, you can hide that which is these little dots. For the arrows you can hide that So I’m going to go set it back quickly to list Now for the content layout, for example, overlay. What happens is the add to cart everything disappears Basically what will happen is when you hover over the item the add to cart and also the name of the product will actually overlay on top of the product So the polaroid is also similar, but I’m just going to keep it as default The post gutter is the spacing in between the products so you can change it to no and everything will basically stick together If we do that So there’s less spacing in between. I’m just going to keep it as default so basically you can play around with these settings here See which one you like the best to actually display for your website so right now I’m going to set in the featured products, so I might click on featured products here and click on save Let’s save it and close the builder We need to go to our dashboard We need to go to products. All products Soyou can see the little star icon here. All you need to do is to select the star icon Wait for it to actually save and it will become solid. So that’s a featured product now So I’m going to select maybe a few more this one here Then I’m going to select one more. Maybe a dress Okay, so once that is done, we’re going to go back to our home page Then basically the featured products will show up there Okay, so basically that’s it and you can actually add the WooCommerce module to any page, so you might want to create other product pages, and then you can add it in as well . So what we’re going to do now is actually go to a shop page and basically configure the shop page layout and also add in the product filter The first thing we want to ensure is the product filter being on so we need to go to dashboard We need to ensure that the plug-in is actually activated All right, so we need to activate it here And then it should show up on the product filter, and then it should show up here So we need to click on product filters and We need to add a new one We’re going to set in a title so “Shop Page”, perhaps So for these settings here, I’m just going to leave it as defaults. You can come back and adjust them but I like them just the way they are. So what we’re going to do first is drop in a product title So this is basically a search So I’m going to type in a field title and I’m going to name it search The next one I’m going to put in is maybe a price widget. There And I’m going to display it as a slider or you can display it as a range where you enter in the price I’m also going to put in a category Okay, so for the category one, I want to display it as radio Now if you select radio, that means you’ll have the option to select all the products so that’s important Soo let’s go to here and then dropit in on sale That is pretty much it, the ones that I feel that is most used So once you’ve saved it, then we can scroll back up here and close the window . Once that is done Then it should add your new shop page widget thing here. And then the shortcode, copy that to your clipboard So what we need to do is actually go to appearance oops, and click on widgets So we need to add that on our shop page sidebar. So we need to scroll down here So we need to drag a text module into the shop sidebar widget area I’m going to paste in the shortcode right there. Click on save. Now if we go to the shop page Then it’s not going to display yet because we need to edit the layout for the shop page So go back here.Themify Shop, Themify Settings now scroll down to the shop settings tab So for the product archive, You want to set the shop sidebar to appear on the left hand side Also for the product archive sidebar to be on the left. So those two have to be the same click on save Let’s refresh the page And as you can see the filter will show up, and it looks good What we’re going to do is I’m going to walk you through just some basics of the layout settings so you can change the product layout. I’m going to display it as a grid of 3 so 3 images per row You can disable the masonry layout if ,for example, you might have a product like this one and you want to make sure everything is aligned then you would disable it, so I’m going to disable it For the content style, as I showed you before, you might want to change it then I’m going to keep it default Keep that as default So for each of these settings here, what I suggest you do is to maybe open up your shop page like this in another tab and then Just play around with the settings here These are basically all the display things on the shop page And then you can just set it in, save it, and then refresh your page to see what sort of layout you want to display Alright, so for example, I might want to hide the product share That one there. What else do I want to hide? I think that is pretty much it and let’s say if I save it Then the product share thing which is this thing here then it probably will disappear Then we’re going to scroll down to the single product page. So what I like to do is just click into a product And we can edit the product page layout. So by default this is the layout and I personally like it It’s pretty good You might want to remove the tags and also the SKU if you set that in So what you might do is you might hide the SKU, hide the product tags hide the product share button Because I don’t think that’s that useful these days. Most people would probably just share the link with their friends rather than using that to share it So that’s why I want to remove it, okay So you can also change it to the default light box. I want to keep it as in Now for the wish list settings, you want to change it to wishlist page For example if – let’s just save this first Now for example if I click on this hot icon, then it adds the wishlist So that will be added to the wishlist page instead of the contact. Now for this spark animation, and you want to disable that, then you can For example if we go back to our shop page Let’s say we click on that That’s the spark animation. So you can change the color and I’ll show you how to set in the colors later and then we can change it to our primary color or you can just disable it , keep this as default Basically that’s it. So if we save it Then we’re pretty much good to go So what I’m going to go through next is the WooCommerce settings. For example, the taxes shipping, coupons and Payments. So right now, I’m going to go through the tax settings now what you want to do is hover over WooCommerce click on settings Then you’ll be directed here. Then click in the tax tab So the tax settings is something that I’ve found to be the hardest especially for the people in the US ’cause You don’t actually have a nationwide, like a standard tax rate. You have different rates for different States and different areas and things like that. So adding it into WooCommerce can be a little bit troublesome But I spent a long time trying to figure out how to do it the best way so I’ll show you how to do it in the tutorial. So it’s going to be like semi-automated for the people who are in the US. So the first thing is I do want to explain it for the rest of the world where most places are actually just using a standard tax rate. So for example Australia it is just like 10% standard for the entire country that means it’s just really simple. So to include it in Australia then you just need to click on like standard rates and If you really set in your country then it should already add it for you, so Australia You just need to add in your country code, and then just add in the rate for the country and then the tax name Leave the priority as 1 Compound is only for places like Canada where they have like a federal tax and also a province tax where you need to actually add them both together. But generally for most countries., you don’t need to use it For shipping, you just need to check if your country charges taxes on the shipping as well For example, I might show you an example, so insert row Let’s say you’re in the UK. You need to click on this thing here in a new tab You need to look for the country code for UK. And I believe that is GB because I checked it a while ago so scroll down GB . So put that in here Then I believe the tax rate was, I think, 20% So we’re going to put in 20%. And it is called that And that’s all you need to do. So if your country has just a standard nationwide tax, then that is all you need to do and just click on save changes And then you can click on the tax options as well So right here is basically you can display the prices in the shop excluding tax or including. So for example, in Australia most stuff like on the shelf the prices will include the tax already So depending on the country and what people expect, then you can either excluded or included So for people in the US, you might exclude it because you might have different rates for different customers, and that way you won’t confuse them So probably for the US, you set in excluding. For other countries which have standard nationwide taxes like Australia or you’re just used to having prices included then select that. And then you can also display prices during checkout and the cart as well. So you can select including and excluding for that. And then just save the changes If we click on the standard rates So I’m going to basically explain it for my US viewers Because I was looking like for information about this like all over the internet And I couldn’t find it and even WooCommerce didn’t really explain it properly They just told us to refer to our accountant and things like that. But I actually want to explain it So what I do recommend is probably contacting an accountant, but again they’re not going to tell you how to add it in to WooCommerce. So that’s something that I will show you So what we need to do first is, if you’re living in the United States, is you want to Determine which type of state you are. So if your origin based or destination based So you can look at this map here and check out which type you are So, for example, if you’re living in Texas and your businesses operate in Texas that means you’ll be a origin state and what that basically means is the tax rate will be based on the location of your business So for example, your business is located in Houston, Texas. Your zip code is 77001 What you do is you go to a website called TaxJar, Sales Tax Calculator For example 77001. You just click on lookup rate You can check your rate. So the rate 8.25. So basically you only need to pay and charge sales tax for people who are in your state that you’re operating in. So for example, if someone from New York buys your products Then you don’t need to pay or charge sales tax Only if the person is living in Texas then you charge them. So basically to add that in, it’s also fairly simple as well So just click on insert row and if you’re in the US, I can just type in US like that So for the state code, you can look at the map here So that’s TX for Texas Put that into there, so leave this one as empty, check your rate which is 8.25 Then you just put in 8.25 in there, and that will be your sales tax. Keep the priority as 1, compound as antiques Shipping, you need to make sure whether or not they charge shipping so you can check that out on TaxJar.com or just Google it or ask your accountant. So once that is done, then you can just save the changes So if I go to the store page now And if I add a product in, add to cart, and then I will check out For the country I’m going to select, for example United States For the state, this is going to be Texas Zip Code, I’m not sure. Maybe 7705? Scroll there. So the tax is not going to show up yet. So I’m going to quickly put in the address, a random one So as you can see, the sales tax will be added. So that would be the 8.25. And if for example someone from New York buys your product, change the zip code to 001 Then it won’t actually add in the sales tax. So I’m going to explain the destination based one now so if you go back here Then if you’re for example you live in and operate in the New York state then that’s your destination based state. So what that means is you’ll need to charge the tax rate based on the location of your customer’s shipping address So basically since every single area in the state will probably have a different rate Then you basically need to know thousands of rates So basically what we need to do is actually import the rates into our Tax settings, so I’ll show you how to do it right now What we need to do is we need to go to Plugins And click on add new Now what we’re going to type in here is tax rate upload. Click on enter You want to scroll down here. Tax Rate Upload by Adam Bowen. Install now and also activate it Alright, so once that is done then you’ll need to go to www.taxrates.com and then click on download sales tax tables here on top and select New York continue and all you need to do is enter in your name email. Just your name here again, and probably a phone number I don’t think it has to be real because after you click on download then it should download to your computer So the file should look something like this In a .zip file. What you need to do after that is you need to actually double click it Then you’ll actually open up in a folder like that or unzip it. And inside the folder, they’ll have an excel file with all the tax rates So we need to go back to our website and we need to upload those rates. So hover over settings, click on tax rate upload You want to choose file and then we go to our desktop Click the Folder and upload the CSV file Click on open and then select add tax rates. So that’s going to import everything from the CSV And I’ll actually show you an example of basically how it works So scroll down You want to change all the priority to 1. Click on yes and submit So you also want to check if the shipping is taxable and I belive for New York it’s a yes. So I’m going to submit Now you can also change the tax name. By default it will be the area and also tax. You can actually change it to for example sales tax you can need to But let’s just leave it as default for now So as you can see it’s added in 2000 zip codes for the New York State Then what you can do is let’s go to the WooCommerce and click on settings. And then if you go to the tax options here click on standard rates You should see over 2000 rates added . So as you can see for this zip code here you’re rated 8.625 and for other ones It’s 8.875. So it’s all different per zip code So that’s why we need to add in every single one.Sso once we do that then let’s actually go to the store Let me explain a little bit further so if we go to checkout now So basically let’s sayyou’re operating address is at zip code of 10001 So if you actually check the rate here 1001. Look up rate So iit’s 8.875. Now your buyer is from Syracuse in New York. Hopefully, that’s how you pronounce it Basically if we set in that zip code it’s 13201 You will see that if you get the calculator out then it should be 8.00% . Different zip code which maybe 14201 which is in Buffalo Then the rate is different again. So that is if your destination based state So by the way you also need to only pay and charge sales tax if you have a nexus in the state So that basically means that if you have a significant presence which means like do you have a shop there or employees there, and I recommend reading on that on the TaxJar Blog and Then I’ve explained all that explained all that and then basically you’ll be good to go. So what I want to walk you through now is setting in different tax classes So for example, in the United Kingdom the standard rate is 20.00% but you might also have different products, for example, home energy and products for renovation, and that’s only charged at 5.00% Or you might have zero rates for life’s necessities such as groceries and things like that So to set that in to the WooCommerce then you can click on settings, taxes here, and then click on reduce rates So let’s take the UK as an example Just insert row, set in GB for the country code Set in the rate. So for example 5.00% for the reduced rate. This one might be a reduced rate and then save changes Once that is done and set in, You can also set in the zero rate % for this tab here but all you need to do is go to your products Let’s just say this thing is a life necessity, and it’s set to 5.00% then just goes to products scroll down to the product data. For the tax class, select reduced rate and then you just update the products and then pretty much you’re good to go So I’ll also be making a separate video about how to add in the tax rates for Canada as well which is a little bit complicated, but I’ve tried to make it as simple as possible because we’ll also be uploading the rates and it’s sort of semi automated. So what I’m going to be walking you through now is the shipping options So right now. I’m going to walk you through setting up the shipping zones So you’ll need to hover over WooCommerce, click on settings, and click on to the shipping tab Then we’re going to click on add shipping zone Ok so the first zone that most people will have is a domestic one. So that’s within your own country Now for the zone regions. For example, if you’re located in United States then just type that in. Now if the price to ship to Canada is very similar or the same Then you actually might include that one as well in the zone Okay, because it just saves time instead of creating so many zones So what I’m going to do is click on add shipping method. The first one that we’re going to add is flat rate So you can add that in. So basically offer a flat rate shipping method. You can click on edit and you can change the cost of it here. So $10.00 Save changes and add shipping method You might also offer local pickup and then add shipping method like that Okay, and you can also edit as well And let’s say you want to offer a express rate, then you can add shipping method Just add in the flat rate so add that in. Now you can actually change the name from flat rate to express rate and maybe change the pricing to $20.00. Save changes So we’re not going to add the free shipping here because it doesn’t give us too many options We’re going to install a special plugin that gives us a lot more options so you can set it up with advanced parameters So let’s close that for now, and you can also rearrange everything just by dragging and dropping like that So once you’re done, then you can click on the save changes I want you to click on the shipping zones So once you click on that, you’ll see the domestic zone setup. So you’ll need to setup all the specific shipping zones that you ship to. If you don’t, then it actually won’t show any shipping methods so if you ship to Australia and New Zealand, you’re going to have to set up a shipping zone otherwise when people actually checkout and then it’ll say there is no shipping to that area. So once that is done then I’m going to show you the shipping classes. So if you click on shipping classes Then we’re able to set in a shipping class. For example, a heavy item shipping class So I’m just going to copy that and paste into the slot and description so that’s for your own reference, and save shipping classes So once you’re done, so this is really good if you have, for example, if we go to our products For example if you and heavy items such as a sofa or maybe a television Then you might set that to heavy item. So look for black leather sofa and click on edit And then basically you can scroll down Scroll down here to shipping and for the shipping class. I’m going to select heavy item and then just update it Okay, so once when you’ve done that, then you need to go back to the WooCommerce settings Then click back to the shipping area Okay, you need to click on edit Now basically I’m going to show you how to set the price for it So for your flat rate. Obviously it’s not going to be $10.00 It’s going to be a little bit more expensive. So you can set in the price here So for example, if you want the total cost to be $100.00 then you’re going to put in $90.00 because the standard is already $10.00 And then you can set it to be each shipping class or for it to be the most expensive shipping class. And then click on the save changes And you probably also want to edit the express one as well. So for example we’re going to change it to $180.00. So it’s going to be a total of $200.00 save the changes Alright, so once that is set in, I’m going to show you an example let’s go to the store and let’s add, okay, we got the black dress in there. So we’re going to click on checkout Then we’re going to scroll down So as you can see if we set it to United States, then the flat rate will be 20- -I mean $10.00. Express will be $20.00. Now if we change it to maybe a different country then it’ll say that no shipping will be off it because you haven’t set in the shipping zone to the UK yet So if we add the sofa in there add that to cart Then we go to checkout We need to set the country to United States first So as you can see, it is $100.00 now And $200.00 for express. So once we’ve done that, then I’m going to show you how to set in the free shipping So what we need to do is go to Plugins . Click on add new The plug-in that we’re going to download is Advanced……. …..Free Shipping. So it will be by your own sole money with 20,000 installs. Click on install now and then activate So once I’ve done that, we need to go back to the WooCommerce settings Then click on the shipping tab and then click on advanced free shipping and then click on add free shipping rate Okay, so this one, I’m just going to name it free shipping For example you might want to offer free shipping for people who have spent more than $50 then you need to set in subtotal, equal to or greater than $50.00. So free shipping will only be enabled if it exceeds $50.00 And then you can add in another condition So for this condition, since we have the heavier item which is the sofa you want to select contain shipping class So you want to set to not equal to Heavy item. So what that basically means is free shipping will only be enabled if in the cart there is no heavy item Actually you want to name it as well, so I’m going to name it free shipping in capsules Update it again So I’m going to open up a new window I’m going to go to the shop page Let’s just add this black dress into the cart and click on Checkout Let’s scroll down, change the country to United States So as you can see it offers free shipping but let’s just say we add a sofa in there. So we’re going to go back to the shop Then we add the sofa to the cart which is the heavier item shipping class and we check out So as you can see once that is added and free shipping will be disabled So this plugin is really useful because you can also set in, for example, if you ship to Australia you can actually add a different group Let’s say for Australia, you only want to give free shipping if they spend $100.00 or more Then you set it to $100.00. Also add a condition Set the country and then set the country to Australia Like that. And then you can update it like that So you’re going to make sure you set in the Australia shipping zone in first And another Plugin which I think is really useful is the advanced free shipping validation so you can go to Plugins This will basically tell the -click on add new- will tell the customer why certain items can’t be shipped It might be useful I’m going to search it up So if you want that plug-in, then you can install and activate it and set that up So that’s pretty much it for shipping. Right now, I’m going to walk you through setting up the payment and also the coupon options. So for your payment and checkout options, you want to hover over WooCommerce and then click on settings So if you scroll down to the currency, make sure that is correct then you can save changes Once that is done, then you can click on the checkout tab up here If you have the SSL from HostGator, then you can actually force secure checkout Scroll down, leave those all as default Okay, and then click on save changes Now let’s say you want to enable bank transfer, then you can click on bank transfer And you can enable it just by selecting that and leaving your instructions and also your account information to finish the transfer So you can also do that for the cheque payments and also the cash on delivery. So for example, the cash on delivery you might actually do not accept it if it’s a virtual product. So save changes Now generally I recommend Paypal as the default payment method because it’s the easiest most efficient and probably the safest and PayPal also has its own HTTP which they have the SSL certificate So the payment is done on their platform and that means they handle the security as well So once you’ve enabled it, then enter in your payPal email. If you don’t have one I recommend signing up for a business account because you’re going to be accepting money So if you scroll down, if you select Paypal Sandbox, so that will enable you to test payments So you need to create a developer account and I do have a tutorial on that at my YouTube channel so scrolling down You might also want to enable the API credentials so you can process your refund via Paypal So you can click on that to learn how to get the API and then just paste it into these sections and then save changes So if we actually go to the accounts tab as well You’ll want to enable customer registration on my account page So once that is done, scroll down and then click on save If you click on emails here as well, then you can actually set a different header. So for example you can change a header image to your own header image. And what I’ll do is click on media here so open it a new tab Let’s say you have a different header design you would add that via here and then after that you’ll have a URL which you can copy and then you just paste in the URL here and You can change the footer text to your brand as well as changing the colors so I’ll be going through the colors in a second, but this is what you can actually edit. So save it And right now I’m going to walk you through how to create coupons as well. So click on the coupons And you can just click on add coupon All you need to do is set in a coupon name. So “Black Friday”. So I don’t believe it’s case-sensitive So people can type in all lowercase or uppercase But I think they will need to put the space there You can add a description, though you don’t need to. For the discount type you can do percentage discount. So for example, 20 that would equals 20.00% discount. Or you could do a fixe-type discount of like $20.00 And if you want to allow free shipping you can tick that but you do probably want to put in a expiry date So let’s say it expire at the 31st. And you can also set the usage restrictions here minimum spend specific products or exclude products, that’s all up to you, and also usage limits So depending on how generous you want to be, you might set a limit per user But I normally just leave it as is . They can use it as much as they want because, you know they’re just buying more stuff from your website. Click on Publish Basically that is done. So if you actually visit the store Let’s say you want to check out People will enter the coupon code here “Black Friday” and then apply So it says it’s successfully applied. If you scroll down it would minus $20.00 from the checkout So that is pretty much it. So right now I’m going to walk you through how to add in your logo and Favicon which is the little icon up here And then we’ll go through choosing your color scheme and also applying it to your website So now I’m going to show you how to add in the favicon and also the logo up here So you need to click on customize Now while that is loading you can also go to Fiverr.com You can also search for logo design here. Click on search. So you can get logos for $5.00 here And you can also get them to send you the favicon version which is basically just the icon without the text alright. So if you go back here Then, so click on Site Logo and Tagline click on site logo So if you don’t have a logo yet just set in a logo site title. And you can change the font weight to maybe Bold like that and you can also change the font there You can click on logo image. If you have an image, click on that to upload upload files, select files And search for the folder if you have been following along. So there’s two different logos here What I recommend is ensuring that is a PNG file which basically means that there is no background on that image Now if you’re doing it yourself that’s what you have to make sure because sometimes you might save it with a white background And you don’t want it because if you have like a darkheader then that means the white background will actually show up. Now the recommended size is 128 for the Height. For the Width, it doesn’t really matter as much. But for the height you want to keep it 128 or below So let’s just upload that one in there, click on insert image, and then it should show up So this is the height setting, this is the width setting. So since the height is 128, you want to half it So by halving it, it is 64 So once you’ve set to 64, then it should be good Let’s just zoom out a little bit so you can actually see the whole menu You can also arrange the position by clicking here Set it to relative, and then you can adjust it padding for the top and also for the bottom like that So maybe plus two and then you move it down and just play around with that until you get it exactly where you want it. So we can click on save And close it and then I’ll show you how to add in the favicon So now for the favicon, we need to go to our dashboard area And then we want to click on Media and then click on add new Then I’m going to select files So I’m going to select my favicon. It’s also transparent and, as you can see, the size is 64 pixels so it’s 64×64 And make sure that you crop it as the actual icon as possible and then click on open Then once that is uploaded then you can click on edit Grab the URL here. So double-click and select all copy the entire URL. Go back to the Themify settings And then paste it into here, the URL. Click on save And then we’re going to go to our website Then it should load up on the top left here. And then you’re pretty much good to go So in this section, I’ll be talking about choosing colors and creating your color palette and then actually applying it to your website So colors are really important because they evoke emotions and also if people lgo to a website and they don’t like the color scheme of it, then they might even click off So it’s really important to choose the right colors for your audience So the first thing now that I want you do is really understand your audience Think about how old they are. Are they mostly male or female? What do they like? Where do they live? and things like that. And then once you have an idea of what emotion you want to evoke as well, then go to a color meanings website, so you can go to HoganChua Web Design Guide and then you can click on this, the color meanings website Basically it will explain what each of the colors mean So for example, I’ll be applying the color to a hypothetical meal delivery service like fresh food and things like that delivered to your house So I’m going to be choosing the base color of Green So some of you might be selling clothes and Black might be a really popular choice because it is kind of stylish and elegant and a lot of fashion websites will actually use black or dark gray So choose a base color and then what I want you to do is go to Materialuicolors.co So I also have that link here if you click on it as well Basically you want to select the right shade of your base color. Because, let’s say if you move it here then it’s like really dark For example if you choose a dark blue, then it’s more sort of corporately, it probably suits like a older audience But if you choose likea lighter version of it, then it’s more young and energetic So choosing the right shade for the, you know, right age group is really important as well. So for example I’m going to be choosing this light green here Now if you want to choose like a black color, I would suggest moving it into 900 and using this really dark grey instead because most of the time on most websites, it is not 100% black Because the contrast between white and black is a little bit too much so I prefer using really really dark grey instead So once you have your color code, my one is the green one, let’s move that 600 I want you to go to a website called PalEtton P-A-L-E-T-T-O-N.com, and then put in your base color code into here. Click on ok So once you’ve done that then click on add complementary So that will use the Color Theory to select the best color that goes with your base color. So if you don’t like that color that they’ve chosen using the color theory, you can also use these different ones here as well. So click on each of these ones and pick a color or you can also use the free style option here And if you hold shift you can actually drag one of the color wheel things and it will select a color for you So it keeps it on like this track thing so that ensures that it’s like the same tone So personally I’m going to select this color here and then what I’m going to do is copy it I’m going to go to color.adobe.com And if you go there click on custom Then for the secondary color, I’m going to paste into there, and I’m also going to paste my primary color So my primary color is there. I’m going to paste it into here and then click on enter And for the Middle one I’m going to set it to white So this is going to be our accent color which is going to be used for our buttons like sale icons or things that You want to bring attention to The other ones,I’m going to set it as neutral colors because you don’t really need that many colors It’s sort of like choosing colors is sort of like choosing what color to wear. So you can look good in just like one color , black suit or like a white dress or something like that You don’t need too many colors, so especially if it’s a eCommerce store. This one I’m going to set it to be a dark gray So basically this will be your color palette This is going to be a base color, accent color and neutral colors that you can use So you don’t have to use exactly these color codes because sometimes it might not be visible or it’s just not practical When that is the case, then what I’ll do is copy the color code here Go to 0to255.com Enter in your base color and also open up another one Then I also want to copy over my accent color and put it into there. So you can use different shades of your base color if sometimes you can’t use that color. And it’s also good because if you have it open, then you can easily set the color in for your buttons and things like that For your button hover colors. So once we have that all set, then we’re going to go to the website So this is the other demo website which I’ve built Basically I’ll show you how to apply it on this website here I also wanted to point out that if your –
let’s say your base color is Black here, then you can pretty much pick any color that you want alright. So maybe what I’ll suggest is just pick an accent color from here. If your were like a fashion store which will be mainly selling to teenage girls, you might pink as the accent color,.But if you’re like a clothing store that sells like for women and men, then you might choose a blue color because blue is the most popular color in the world So it might be a good choice as your accent color and then just paste it into here It might also be a good idea to actually save it so you need to probably create a Adobe ID if you don’t have one and sign in. Or you can just make sure to write down the hex code on a piece of paper Then whenever you’re building a website and just enter it here So you can just copy and paste every time you need to change the colors What we’re going to do now is go to our website and then click on customize Okay, so make sure you are at Themify options and select advanced options Then you can click on the body. So for the body background you can change the background color. But I’m going to keep it as white because you are an eCommerce store So you want to bring the attention to the products rather than the actual brand of your website So for the body fonts, you can also change the font color But personally I’ll just keep it as default because it is already dark gray and it looks good For the body link, what I would set here is probably your base color so if you go to your Color Palette here, you can copy over your base color Then go back to your website and then you can paste it into there. And as you can see it’s changed to green now So if your base color is for example like the dark grey, then you might want to use your accent color. So as I said before you might have picked a blue or a pink then that might be your Link color. If it’s sort of like a color which is like too light, for example, like this yellow here it’s like way too light,then you wouldn’t use that as your link color at all. You’d probably use a underline instead So whatever you do on your website, you’re going to make sure that everything is visible. Then for the body link hover This is when you hover over the link what color it changes to. So as I said before earlier when we’re setting in the buttons, we use the formula which you either choose 2 shades darker or 2 shades lighter So in this case, I’m going to choose 2 shades darker and then I’m going to put it into the body link hover So when you hover over it, then it should be darker So it gives that little feedback there. So we’re going to minimize this and we’ve set in the body Then we’re going to go to the header section Okay, so as you can see, you can’t see the header menus and things like that. So I’m going to zoom out a little bit So I can see that So the header section affects everything up here So if you click on the header wrap, you can change the header wrap background color So, for example, if you were a fashion store, then I might change it to a darker color So the 3D3D or your base color which is that really dark gray But since I am selling fresh food here I’m going to keep it as white because it just looks really simple and sort of friendly. So I’m gonna keep that as is So I wouldn’t put the base color in there unless it’s like a dark grey or something like that Because let’s say if I put like a green in there, then it’s just too much. So let’s say let’s grab that green Let’s put that in there. So I just think that’s just too much So it looks a lot better just white. So once you’ve done that, then you can go to the header font section So the header font is actually anything without a link. So everything up here is actually a link so we don’t need to change anything So if you click on header link, then this changes the color for all the links in the header section So you might want to change this to a dark grey. So what I’m going to do is I’m going to use this color code Copy that. Let’s paste that into here like that. And as you can see that changes all the link colors to that dark gray So I would use a neutral color. If I put it to be the green one then it wouldn’t be as visible That’s why I like to use in you to a color for that. If your background was dark then I will change the header link to white The header link hover is when you actually hover over it. So you want to give it a nice effect So what you can change it to is maybe like a green, your base color, or you can actually choose a darker version or lighter version of the color that you put in here. So for this instance, I might go for a 5D5D. So it goes a little bit lighter Like that. So it gives that slight effect or you can choose your base color So as you can see when you’re hovering here, you see that yellow underline So to change that color, you can actually go to the accent styling Click on that. And I believe that’s the accent border color So I’m going to set it to 5D5D And that will change like that and then I’m going to save it Now for the site logo and tagline The tagline I might remove it to none so it’s nothing there Let’s close that. For the main navigation, this is actually this here. So this is your main nav. So you can actually override the header link colors if you change it here So I’m going to leave it as is because I don’t need to but you can if you change these settings here So for the menu active link, let’s say if we click on the shop page Then as you can see, if we change the menu active link and let’s change it to maybe like a green or something like that Let’s change it to a red. So that is the active link color. So for the active link I’m just going to leave it as default because I think it just looks simple like that alright. And then for the menu active link hover, this is basically when you hover over the link then what color it changes to For the drop-down container, if you have a drop-down container or link here you can change the background color and also the link holders here And then if we click on the shop section So we’re able to change the product title, the price, and for the add to cart button what I’ll change here is the background color I’m going to change it to my base color So go here and copy that code over Put that into there. Now for the base hover color, I’m going to change it to two shades darker and then paste it into there. So when you hover over it, it should go darker I’m going to save and publish and refresh it, then it will change. So for the sell tag This is the tag here. For this, I wouldn’t use the base color. I would use my accent color So I’m going to go here Grab the accent color, paste it into background color and for the text color, I’m going to change it to white So change that to white like that Then that’s pretty much good to go. So for your sidebar here You can also change the colors here So for example, as you can see, the price slider background color, you can change that if you go to the accent styling and I believe that should be the accent background color. So I might change that to a green So what I’m going to do is grab my green color And then put that into there like that and it should change that and it also changes that one. So once we’ve done that, then we can scroll down to the footer section So this is your footer. The footer wrap is basically the background color So generally you would choose a neutral color for this section You wouldn’t put your base color. Again, the green color is too heavy. So what I do is I put a light gray. If you’re a fashion store or something like that You might choose a dark dark grey So I put a light grey and because the footer section is not that important I like to normally tone it down so I normally like to make it sort of lighter grey for the links and things like that If we go to the foot of fonts. So the footer font is this here So it’s not a link, that is your font I’m going to keep it as that color as default but we can change it there. For the footer link this is the footer link here, and I’m going to change it to a lighter gray. So maybe let’s try 5D5D Like that. So it’s lighter and I think just looks nicer For the footer link hover, so this is the color when you hover over it What I’m going to do is put a different shade Maybe, let’s say, a darker version. 3D3D like that So when you hover over it, then it gives you a slight effect Just really subtle and nice. So once you’ve done that then you can close it and that’s pretty much it So let’s save Then let’s close it So I’m going to briefly walk you through how I actually applied the color onto the homepage So the first thing that you want for your homepage is picking the right image. So as you can see, I picked a image with fresh food. Personally I’ll probably put some green like veggies in there or something like that But I picked it from Unsplash So picking the right image is really important. The second thing is I would use the base color if you can for your text. If you can’t, then choose a neutral color For your button, you would probably use your accent color as I have here And I’ve also put it so it’s a darker red when you hover over it Scrolling down, I’ve used the accent color for the icons And also for the links, I’ve used the base color I’ve also used the light gray for a divider sort of background So it separates the content really well. And then scrolling down For this one, I put a sort of a outline button or a ghost button. The reason why I did that is because these buttons here are solid and these are more important that people add these to cut So that’s why I use a ghost button because it’s been statistically proven that they will be clicked less And it looks just really subtle and nice Scrolling down. So as you can see, the divider color here I didn’t use a light gray. The color that I used was , I think, it’s really light green instead So basically you can choose like a shade of your base color and put it onto your website And it will actually still look good. Scrolling down I used a dark grey for this section here because my footer is light gray So if my footer here was dark gray then I probably wouldn’t use the dark gray again because then there wouldn’t be any Separation of content. So that’s how I applied the colors, it’s really simple. So if you look at it, we just use the base color for most of the website and accent color for buttons and things that you bring attention to Neutral colors for areas which you don’t know which color to use and then You can use different shades of your base color as well as using it for your buttons and hover effects So that was pretty much it for the colors I also want to briefly introduce You to the responsive styling options that you have with the builder. So for example, the website actually is pretty responsive already. So as you can see all the content will align properly But sometimes for your hero image, the text might be a little bit too much Or it might not be visible anymore because, as you can see, the image will shrink but you’ll still have a lot of text So you can actually, um, let’s go back You can actually remove or set the visibility for it. So for example, if you don’t want too much text to appear for the visibility, you can actually hide it. So you can hide it for mobile devices and if you set that in saved it. So if we close it Then if we reduce the screen then it will actually disappear like that. Then there’s also another thing where you can just turn on the builder I’m going to go back here, show that instead, but let’s click on this styling options here. Click on mobile You’re able to set a background color Like for example a white background color or you can choose a dark one like that depending on your background And then you can set the opacity here like that. So it increases the Visibility for your text. So for me, I’m going to change it to white and 0.75% Like that. And then click on save. And then for tablet as well, so I did that for the tablet as well So that text is visible. So landscape You might want to do it for landscape as well. I’m going to just leave it as that. For desktop, It will look good. So you can check all those options and also I forgot to show you that you’re able to set in columns as well for each of your rows So for example, this row here you’re able to set in columns And then it will separate into columns. You can separate as many as you want like that, and then you can build your website Adding in the modules there. So that’s pretty much it for the tutorial. If you have any questions, drop it down below and also, I will be uploading additional videos at my Udemy course. So if you go to Udemy.com If you search for courses here, just type in my name “Hogan Chua” and then click on enter So basically my course isn’t up yet. So I’ll upload it in the coming days Basically you can sign up for the course for free. You don’t need to pay or anything like that So I’ll upload additional videos there and things like that. So that’s it! So if you liked the video, make sure to give it a like and share it with your friends. And hopefully, you found it really useful. Thanks!