Today I'll be showing you how to create this amazing ecommerce website step by step Hey guys My name is Hogan and welcome to this tutorial where I'll be showing you how to create this really amazing Ecommerce website step by step. So by the end of this video, you'll have your own e-commerce website up and running ready to accept payments But before we actually begin I do want to state that this tutorial isn't a tutorial about Coding so you're not going to learn how to do like PHP and HTML and CSS or Build a website like eBay, which is like an auction website. This is just a really simple and clean ecommerce website alright, so if you don't want to spend You know thousands and thousands of dollars hiring someone else to do it for you or months learning how to code Then this tutorial is perfect for you. So this ecommerce website is suitable for most Small to medium-sized businesses so you can actually sell anything that you like as long as it's not illegal Okay, so you could sell you know shoes you could be selling women's dresses. You can also sell digital products for example music and also ebooks Furniture electronics bags or even iPhone cases, right so you can sell anything that you like so if you actually don't have any products yet to sell then I'm actually going to show you three amazing places where Top brands actually source their products from really cheaply and sell it for a really good margin So you don't necessarily have to have products ready to sell yet? I'll also show you how you can actually get started selling stuff without actually investing Thousands and thousands of dollars in your product and inventory. Okay. So this is actually a live store right now and I'm gonna give you a really quick tour of exactly what gonna be building and I'll also show you a test transaction to basically show you how a customer will buy from your store how you will receive the order how you receive the payment and How you actually fulfill the order and things like that. So the e-commerce website that we're building today It has a lot of the top features that you might expect from websites such as Jim shark Nike and also Topshop as well So as you can see Topshop has a really nice and simple header design same with Nike and Jim shark They've also got a secondary header where they display, you know free returns and free shipping Here they've got a really cool drop-down menu with a mega menu display same with our website So I've got a really nice and simple header section a mega menu that displays your products You can also have a simple menu as well. Just like that here. You can actually add in your logo and your Customers also have the option to add the product to a wishlist. They can add it to the cart. They can also add a Account so they can check out quicker and also they can search for the product directly here So I'm gonna show you how to set up a really nice and simple slider image background So you can also display a video if you want to just like Topshop does so the layout you can actually change the layout to Any layout because we're going to be using a drag-and-drop builder okay, I'll be showing you how to add in your text your buttons and things like that and Here is where you can display your newest collection like your featured products. Okay, so you can arrange a layout as well You don't necessarily have to have this layout that. This is the website that we'll be showing you how to create I'll also show you how to add in your blog post. So blog posts are really good because you can actually write a article about maybe a new product line that you're developing or you can also write articles about you know, Maybe like top 10 tips of finding the best wedding dress and if you're selling wedding dresses Then people who are actually searching for the top 10 tips They're gonna come to your website and maybe they're gonna buy a wedding dress So it's really good to get you know targeted and free traffic to your website okay here I'm also gonna show you how to add in in really nice gradients how to add in videos and Everything like that. So here we've got a really nice and simple footer section with your social media and your payment icons I'll show you how to create all the important pages for example your about shipping and delivery and also a contact page so People can actually, you know type in their name Their email and submit a message here. So if you have any question, this message will be directly sent to your inbox All right. I'll also show you how to create a really nice FAQ page. Okay, so this can be any page for example returns policy or Shipping policy or anything like that. Okay, people can click on the question. The answer will drop down like that Okay, and I'll show you how to create a blog page so you can display your blog post here just like that Alright, so this website is also going to be mobile responsive So it's gonna fit on your tablets iPads your laptops and also your desktop then you can actually manage your shop from your mobile as well so you can change the prices and Manage the stock levels from your mobile phone so you don't need any special software or any skills to build this website I'll be showing you everything that you need to know step by step and if the customer actually clicks on let's say the shop page this is going to take us to our main shop page and Here is a product filter. So people can actually filter the products here. So let's say someone likes Maybe they want to look for an e-book. So it's like ebook then this is all your a books that you sell Alright, they can add it to the wishlist from here. They can also click into the product and Here is your title your price a customer review Here you can enter in a short description Ok here, you can display the image and people can zoom in on that image You can also add additional images as well and I'll be showing you how to add in, you know your downloadable products but also like a simple product or a Variable product. For example if you're selling maybe a Jumper or something like that and you have different sizes and different colors, then you can do that as well Ok, so I'm gonna scroll down here. This is where you can put in a long description. Ok, like adding a video Additional images that you might want to display and your customer can also click on reviews as well Here's the related products and Let's say the customer wants to buy that product then they will click on Add to Cart and they will automatically add that product to your cart and Then they can either check out automatically or they can click on View cart okay, so I'll also show you how to add in a coupon code so you can give your customers maybe a 30% discount so for example save 30 they can click on apply and Then that coupon will actually apply here Ok, so it starts at $29 then with the coupon. It ends up being only 20 dollars and 30 cents So your customers can proceed to checkout which is the default checkout or they can proceed Directly to PayPal and that's going to take their PayPal address and use that as the shipping address Okay, so I'm gonna click on the default checkout So, I've got a really nice and simple and streamlined checkout process here your customers will need to enter in their name last name and Because this is actually a virtual product. So it's not shipped. They don't need to put in address. All right, so Normally if it is a physical product, then they'll need to put in the address and they'll be required So here we're gonna skip down and just put in an email address All right scrolling down Taxes will automatically calculate for you as well. Alright, and Your customers can also pay by various different Payment methods so you can set up a direct bank transfer check payments cash on delivery Because you know some countries for example in the Philippines I think they don't really use credit cards that often. You can also set up, you know, cash on delivery as well okay, but I'm gonna show how to set it up using PayPal and Even if your customer doesn't have a PayPal account they can pay with their credit card You can also set up stripe payments as well And let's say they're happy with the total here selected the payment then you can click on PayPal So I'm gonna use my other PayPal account and then click on login ok, and then we're gonna click on Pay Now Okay. So after your customer has paid this is the confirmation and basically here is the download that they can actually click on and Actually download directly to their computer. Ok, because this is actually a Virtual product. It's not actually a physical product. So people can actually download that and then they'll be good to go Alright, and this is the order confirmation that they will get all right, and they can also download it from their email as well and this is the customer that you will get as the actual ecommerce store owner and Then you'll need to fulfill the order if it's a physical product. You'll need to ship it to them and The payment is actually received to your PayPal account. So as you can see payment from home insurer, so this is from My personal account and as you can see, it's 20 dollars and 30 cents. So we're gonna go back here this is where you can actually manage your orders, right so you can click into here and manage your orders and Set the status as well All right you can also click on reports so you can check how many sales that you are getting this week and You can hook up the numbers You can also click on the customers tab to actually view your customers check the stock and taxes and everything that you need In the backend or the dashboard section of your website So if you actually click back onto the website right now Ok, I think we are good to go and good to get started But before I do you can actually fast forward this video if I'm going too slow if I'm going too fast You can actually slow down the beer. Okay by clicking on the settings option there and If you have any questions, don't be afraid to ask and I normally will get back to you within 24 hours And I've also got all the timestamps listed down below so you can skip to any section and revisit any section that you know You're unsure about make sure to subscribe give the video a like and let's get started Okay, so let's go over everything that we need so the first thing that need to actually build an e-commerce website is you'll need a domain name a Domain name is basically your website address. So for example Google's the main name is google.com Your one will be your ecommerce store name.com okay, and the second thing that you need is a hosting account hosting is basically a server on the internet which stores your website's files such as the images and The content so people can access that 24/7. Okay so basically it's like a virtual piece of land on the Internet which saves your data and You need those two things to actually have a website online And the third thing is we'll need to actually install WordPress WordPress is something called a content management system and that basically allows you to actually build a website Without needing to learn how to code and it's used by over 500 million different web sites to actually power You know their their blogs ecommerce stores and small business websites Then we'll be using WooCommerce which is the plug-in or an application that adds ecommerce Functionality to the WordPress website because by default WordPress doesn't have ecommerce functionality We're cognizant gonna allow us to add in products you know add in the shipping prices set up the payment options and things like that and then we'll be installing a theme and The theme is basically the appearance of the website and it also includes the drag-and-drop build up. Okay, so With those three free tools, we're gonna be building our e-commerce website So how much does everything cost a domain name normally cost around? I think fifteen dollars or twelve dollars every year I think 15 dollars every year and Hosting normally cost between five to ten dollars every single month depending on which plan you actually gets. Okay, and WordPress is free. We commerce is free The theme is also included in the description below But you do have the option to get Support and updates, which is highly recommended especially for those of you who actually want to help, you know Your friends or family to actually build an e-commerce store you might need extra help and That is very useful. Okay, and obviously the tutorial is free. So basically the total cost for you guys to start today is around $20 or $25, okay So basically what we're gonna do first is we're gonna head over to hostgator.com To get our domain and hosting. Okay so you can get those two things at the same place Okay, so open up a browser and we're gonna head to Hostgator. So type in Host:3 80 or calm and then click on enter so this is where we're gonna be getting our domain name and also our hosting account and I've been using Hostgator for the last eight years or so and they've been amazing. So that's why I recommend them. They've also got the 24/7 live chat support, which is awesome and also a 45 day money back guarantee. Okay So here you'll see a few different plans, but for most beginners, I recommend the just a web hosting plan Okay, so that's the cheapest and what I recommend for beginners Then you can actually upgrade to cloud hosting if you start getting a lot of traffic to your website It's a little bit more expensive though. Okay, or you could you know start out getting that as well So we're gonna click on website hosting up here on the Left Okay. So here is three different plans the hatchling plan baby and also a business plan So the business plan is probably a little bit more than you actually need at the moment But obviously if you have the funds then you can you know, get the business plan But what I recommend is sticking to these two plans for most beginners Okay for the hatchling plan, you can only host one domain So for example, you can only have your brand calm. Okay with a baby plan You can have your brand calm your friends brand calm, you know You could also have your clients websites hosted on one account Okay, so if you know, they're gonna be creating sort of more, you know web sites and then get the baby plan It's only a little bit more expensive. But if you just want to create your first website then get the hatchling Okay, click on buy now. Okay. So here is where you gonna enter in the domain name that you want to register? Okay So for example my one creates your own online Store and then you can select the extension that you want here and then click on the outside ok, so sometimes that might not be available because Someone else has probably registered that already and you need to be a little bit more creative. Okay? So for example, I'm gonna change that to shop and let's see if that's available Ok, so as you can see that's available Thirteen dollars every year you've also got other extensions but I personally recommend the dot-com because that's what most people actually type in the browser up here here you need to scroll down and Normally the domain privacy protection will be checked Ok So I personally recommend it but it's not necessary what it basically does it it hides your details From the public so people can't search up your domain name.com and then find your details It's gonna keep your email, you know spam to a minimum and all that junk mail and stuff like that So that's why it is selected here. And that's why I recommend So scrolling down here You need to select the package type and also the billing cycle So if you're sort of unsure of you know, whether or not you want to still do e-commerce, you know Two months down the track then I recommend just going month to month or even three months But you're gonna save a little bit more money if you go for a longer term, okay, so that's really up to you But I personally recommend the twelve here you need to enter in a username and also security pin So I already got a few accounts with Hostgator. So I'm gonna walk you through step by step how to Do everything here? scrolling down here you go to enter in your billing information and Credit card details and you can also pay via PayPal if you have a PayPal account ok, so pause the video and fill that in and then once you've done that scroll down and Here this will be automatically selected and it's included for free. It will basically give you the HTTPS in front there and also the lock icon This is important because you'll be collecting the customers data on your website and that helps secure it Serve the site lock monitoring. We're gonna deselect that Okay, so as you can see it's recommended, but you can actually secure your website with some free plugins So once your website gets, you know a lot of visitors Then you can opt for that as well. Or you can just get that up front. Okay, it really depends on your situation For the site backup and also the email we're gonna deselect These two because you can do that for free as well with some free plugins. I've also got a tutorial on my channel to setup This on your website. Okay your own email at your own domain name.com Okay, we're gonna scroll down here. And for the coupon code we're gonna enter in SHOP NOW n o w and then click on validate and That's gonna bring your total down a little bit. Okay, so as you can see It's gonna take the billing cycle here Okay, it's gonna reduce it by 40% Okay So it's gonna save you a little bit more money and if you do use that I may get a small commission, but it actually helps you save some money and It helps me to keep creating these free tutorials for you guys, and I really appreciate it Okay, so scrolling down here. You're gonna see all the Prices, okay So six dollars sixty four dollars and also the domain make sure that is all correct and the total comes to ninety dollars Okay, so probably a little more than seven dollars per month Okay, but that's amazing because you can get started, you know with your own e-commerce website for less than a hundred dollars I think that's a really good deal. You don't have to pay a developer to set everything out for you can do it yourself Okay, so we're gonna scroll down here and select your read and agreed and then click on checkout now Okay. So after you've purchased your domain name and also hosting account, then you should get an email that looks similar to this Okay so what you need to look for is a control panel URL and then click it and you'll need to copy over your username and also your password and Paste it into here to login. Okay, so click on login and we're gonna be installing WordPress on to our website So to do that look for build a new WordPress website on the top here If you can't find it try to look for Quick install. Ok, so click on quick install and then click on installing WordPress ok, so we're gonna click on build a new WordPress website and Here you need to select the domain that you want to install it on. Ok. So I'm gonna select the one that I just bought So as you can see, I've got quite a few Make sure to select the correct one. Leave the directory part empty Otherwise if you you know add something like WordPress on to it It's gonna install the WordPress on to your website comm slash WordPress Ok, so you want it to install it on the main domain URL? Ok, and then click on next here You can enter in the blog title and you can change this later. I'm just gonna type in logo admin username So this is the username that we're gonna login to the dashboard of WordPress with ok Put in your first name last name and make sure to put in a valid email address Because they'll also be sending The login details and password to this email here and then click on if agreed and then click on install So WordPress is gonna take you know, a few seconds to install onto your website ok, so you should be greeted with the installation has completed and What you can do now is what I like to do is copy over the password first Ok, so they're also going to send you these details to your email address Sometimes you might end up in the spam and then we can do is if you actually open that link in a new tab sometimes your website might not be up yet because it takes time for Hostgator to actually set up your website on the back end so you might need to wait 15-20 minutes worst case scenario 2-3 hours if it's up It looks something like this and to login you can click on admin log in here or you can type in /w p - admin, and then click on enter and that will take you to the Wordpress login page where you actually log into your WordPress website. Ok So what I recommend is actually bookmarking it to your browser so entering the username and Pasting the password here Okay, and then click on login, we're gonna close that and this is your WordPress dashboard It might look a little bit overwhelming now, but it's not really that hard so I'm gonna show you what the website looks like right now and Your website looks very very plain. So this is the default Sort of theme that comes with it We're gonna be installing some plugins and some themes to Customize the website right now, okay So the first thing I would recommend you do is if you actually see an update available then you can click on update now If not, you know, just leave it as is here Make sure what that is updated. Okay, everything seems updated. I'm gonna scroll down here to the users and then you can click on all users so What we're gonna do here is actually set in a new password because we can't really remember that really Long password there this section here. You can also add in additional users, for example, if you want someone to manage your store you can add in a new user here and here click on edit scroll down click On generate password and click on hide and here Try to enter in a password with some upper case and some other letters and then click on update profile ok to save that password Okay, so the next thing that we want to do is change the permalinks So for example, if we actually go and open our website in a new tab again This is the default post and if you click into that You'll see that the URL structure is you know a bit weird So it's got dot PHP and then got the date and then it's got the post title So what you want to do is you want to go back here to settings and click on permalinks and you want to make sure the permalink structure is just The post name or the page name? Ok, so it's a much cleaner appearance and it's better for the search engines So click on post name And then Save Changes Okay, and then the next thing we're gonna do is click on plugins so by default WordPress actually has some you know default plugins and plugins are basically applications that add extra functionality to your WordPress website for example Sometimes you know on your on your phone by default It's got some default apps installed. And what I generally like to do is, you know, get everyone on the same page So we're gonna deactivate everything okay, so select all and then you can actually click on deactivate first and apply and Then select all again and then we're gonna delete everything so you can install them later and I'll show you how to install some plugins later as well Okay, so once that is done click on pages as well so by default it will have a Sample page. Okay, and this one here select all and move it to trash apply now Okay, click on trash and select all delete permanently and apply Click on post so by default it will have a hello world post. We're going to delete that as well. Okay move to trash or you can click on trash here and Then we're going to click on trash again and delete permanently Okay, so now if you go to the dashboard You'll see that it has a much cleaner appearance. Okay, so you've got all the default settings here You can actually close everything up here. I'll be showing you how to do everything step by step And now what we need to do is install the theme so if you actually hover over appearance click on themes Here is the default theme 2017. Okay, so we're gonna add a new theme so click on add new and Here are some free themes that you can use but a lot of them are actually freemium So to actually get the full features of the theme you'll need to, you know, pay for them But actually have the theme that I use down in the description below so make sure to click show more and then it will show the download links to download the theme and Once you've downloaded it it should look something like this themify - shop doc zip and also download the plug-in as well build a WooCommerce and You can also download the images so you can follow exactly like how I'm doing in the actual video tutorial Ok, so download those three things onto your computer Sometimes the themify SHOP theme might automatically unzip if you're using Safari and it might look like for example if I double click it It might look something like this. Ok, a folder. So what you need to do is right-click and make sure to compress that back Into the zip file for the images you can unzip it. So for stuff for Mac users, you just double click and it will actually Open up like that. Ok, and the images to follow along are in here so what we need to do is go back to the dashboard and click on upload themes choose files and you'll need to upload the themify - SHOP zip file and click on open and Install progress bar is down on the Left bottom left. And once that is done you will need to activate the theme by clicking on here And then what you need to do is sometimes the skins and demos might pop up, okay, you'll need to click on the cross Button, okay, so we're not gonna upload any skins and demos. We're going to be using the default of theme layout so if you actually visit our site now then you'll see that the appearance has changed a lot looks a lot cleaner and It looks very similar to what we're going to create very soon so basically what we need to do now is to add some extra functionality to our WordPress website so by default It is a blogging and sort of a small business website like as it is right now But if you actually add some plugins, then it can turn into an e-commerce store. So we need to click on plugins Ok, so the first plug-in that I recommend you download and activate is the really simple SSL Okay, because as you can see the website is probably showing not secure if it is showing secure then you know Don't worry about it. Then you don't need this plug-in. Ok, and sometimes if you don't have an SSL certificate You haven't purchased one you might have followed in another tutorial. You don't have SSL certificate. You don't have to worry about this step okay, so For everyone else click on add new and type in really simple SSL ok, so this will basically force the SSL on your website and it'll give you the secure icon if you've actually Purchased it. Ok. So click on Install Now and Then you'll need to activate it Sir here, you need to click on go ahead and activate SSL Ok, and that is probably going to log you out of your website If you click on visit website right now, it's gonna log you out So as you can see, you'll see the HTTPS and now to log back in you can type in /w p - admin, ok, and then click on enter and Then that will take you back to the wordpress dashboard. Ok, so entering your user and also your password and then click on login and Then I'm going to show you how to install the rest of the plugins, okay, so go back to plugins and Then click on add new So the first plug-in that we want to install is the Builder WooCommerce or upload plug-in choose file and Download and also install this plug-in here. Ok, so it's in the description below open and install now and Then click on activate The next plug-in that we're going to download is The product filter plugin. Ok, so we're going to search here for themify Products filter ok, and then this is the plug-in that we want to install and then click on Install Now and You can click on activate but I don't think I'll actually activate because we don't have the WooCommerce actually installed yet Ok, so you might need to come back and activate this. Ok, which I will show you in a second Ok, so the next plug-in we're gonna download is contact form 7. Ok. So that's gonna allow people to actually Contact you through a contact form without you know sending you an email people can you know get to you straight away with the contact form 7 so search for that here and Then this one is by Tucker Yuki, ok, and then click on install now and then Activate Ok and then click on add new again the last plug-in is the WooCommerce plug-in ok so the reason why we're gonna install this last because We're going to go through the setup wizard together ok, so search for WooCommerce and this one should have over a million installations and then click on Install Now and you can download and use a lot of plugins so you can Search them search them up here or we can try and search it up on Google So there's a lot of free and also pay plugins that you can use to add extra functionality But these are the ones that we're going to be using right now and then activate it Okay, so that normally will take you to the WooCommerce setup wizard and we're gonna go through this right now So whereas your store based I'm gonna set in Australia Ok, and then put in a dummy address. I Guess so if you don't want to put in your personal address What I recommend you guys do is maybe just you know put in a dummy one right now Or you can get APO box, which isn't that expensive okay, I'm gonna put in Melbourne and Then we're gonna put in you know, Victoria 3000 and This is the currency here, okay, so you can select the currency that you're gonna accept the payments in I'll just leave it as Australian, but you might be US UK or Something else. So here if you'll be selling, you know, products and services in person as well Make sure you tick this and then click on let's go Okay, so here you can actually select the payment options So if you want to accept payment through stripe then keep this selected But I'll be showing you how to set it up using PayPal PayPal is really easy So if you don't have a PayPal account, make sure to sign up right now I'm also going to go through the settings a little bit later as well Okay so I'm gonna deselect stripe for now and just leave PayPal as is and You can also click on this and make sure you have your email in here so your paypal email and once people actually purchase the payment will be sent to the PayPal account associated with The email that you put in here Scroll down and click on here. You can also enable these Options as well if you want to so I'll show you how to configure them or where to configure them later as well Ok, so click on that and then click on continue Okay, so for your shipping, okay, so I'll be going through this a little bit later as well so for example The shipping zone is called Australia and here you can set in flat rate shipping and also free shipping as well So let's say flat rate is ten dollars. They can put in ten So locations not covered then you can also set in a straight here as well So for example, if it's let's say in the United States It's not you know sitting here so you can put in a right here. Okay, so for all Locations which is not set here. It's 20 dollars. Okay, so I'll be showing you more detail later Okay here you can select the weight unit and dimensions and then click on continue Okay, so what I recommend is keeping these two checked, okay So this one is really good because it's gonna automatically help you calculate your taxes in the checkout section Okay, and MailChimp is basically sort of a email marketing software And you can sign up for free. Okay, so I'll be showing you how to Connect this in another bonus video, okay? So for now just click on continue and that's going to install the automated taxes and MailChimp for you So it's gonna take a few seconds Okay, so here it's gonna say connect your store to jetpack. Okay, so here so here click on continue with jetpack Okay, and then here click on continue with Google or you can sign up your new email here okay, so I'm gonna click on continue with Google and Create a jetpack account. Okay, so I'm gonna be using a new email this one here and then that's gonna connect that email to my jetpack account and That normally takes a few moments as well Okay, so you should be ready to start selling right here You can actually create a product by clicking here, but I'll be showing you how to do a few things first Okay, you've also got additional videos by clicking on this. Okay, so you can click on that though All gonna do now is visit our dashboard and we're gonna add in some pages Okay, so we're gonna add some pages for our e-commerce website. Alright, so what we're gonna do now is click on pages Okay, so we're commerce actually has created some you know ecommerce pages for us. For example the car page checkout pages And the shop and account pages, but we need to create our own page. Okay, so we're gonna create and click on add new and The first page we're going to create is our home page. Okay, so just type in home in the title section up here click on publish and Then we're gonna click on add new again We're going to add in our about page And then we're going to add new again Okay, so you can create as many pages as you want so I'm just going to create the pages which I'll be showing you how to create later on so contact and we're also going to be creating a wish list and a blog and also a FAQ page So click on add new Yeah, we're gonna type in blog publish Add new again Okay, it's a little bit boring. We'll be repetitive but we've got to get this stuff done and Type it in here wishlist, we're gonna delete that and then click on publish Then we're going to create our FAQ page sorry and You know you could actually, you know create a shipping and returns page if you want to but I'm just gonna name an FAQ Okay, and then click on publish? Okay, so I'm gonna close these tabs up top first Okay, so we're gonna click on all pages here to make sure that's we've actually Created all those pages Okay, so about home contact FAQ Okay, that looks about right if you haven't then click on add new again, okay, so we're gonna click on visit website and Check our website Okay, so as you can see we've got the menu up here So what we need to do is actually set in our menu navigation area first so what we need to do is we need to click on customize and It's automatically going to take you to themify options here. You want to click on the back and you want to click on homepage settings? so what we're gonna do is we're actually going to Set a static page, okay? So for the home page, you want to set the static page to your actual home page that you just created? Okay. So for example if we take this URL, okay, let's open a new tab paste that in and Go to our home page that we just created before So we want this home page here to be just you know, our domain URL Okay, so that's what we're doing here. Okay, so set in home and then click on publish and That will basically set that in okay and then you can go back here Okay, and then click on menus? Okay, and now we're gonna create our menu. So as you can see, you've got the hamburger menu, right? So this is the mobile menu. This is what it looks like on mobile devices. And the reason for this is because the Screen size right now is quite small. So it's showing the mobile menu. So what you can do is in your browser There's three icons up here normally, okay, if you're using Chrome Click it and you can zoom out a little bit to 90% and you'll see your menu up here. Okay? so once you've done that click on create a new menu and For the menu name up here. We're gonna name it top nav. Okay. So for top navigation It doesn't matter what you name it. This is just for your own reference For your menu location you want to set it to the main location main navigation. Sorry up here click on next and You want to add in the pages that you want to display on the top? All right, click on add items and the page that I want to display is Just my shop page So I just want my shop page to display on the top here you can add your abouts in blog and contacts and FAQ on the top, but generally let's say if you go to The iconic. Okay, so this is a popular e-commerce web site in Australia, you know, they'd only just have the categories and stuff up here and Down here. They've got all the other FAQ pages and about pages and things like that okay, because for e-commerce website the main priority is to actually Convert people and you sort of want to make the navigation really nice and simple to navigate I'll be showing you how to create the mega menu and different things like that. Later but maybe just set in but just set in the shop page for now and click on publish Okay, the next thing I want you to do is we're gonna create another menu so click on the back and Create a new menu this time. We're going to create our menu for our footer section. So we're gonna name this footer Now and select the footer navigation click on next and Here you can click on add items. Ok. Sorry for your footer. I want to display my Say the FAQ page the blog page the contact page The about page. Okay, so I'm gonna not gonna select these ones Okay, so to rearrange it, you can just click it and drag it like that to rearrange the order So as you can see on the bottom right here, you'll see the order So I'm going to rearrange it. I think that's fine If you want to create like a drop-down menu, you can actually just click it and drag it in words so when people actually hover over about Then it's actually going to drop down Okay, so normally this is useful for the top navigation, but that's how you actually do it and then once you've done that then click on publish and Then you can actually just close it now What we're gonna do is as you can see for the page layout you've got this home here and also got a sidebar section We want a blank canvas so we can create you know our hero section Okay for our website, we don't want you know, the title and the sidebar here so to remove it you can actually go back to your dashboard section and Then you want to go to themify shop themify settings Okay, and You want to click on default layouts? So this settings area you can edit the theme okay, so I'll be showing you how to customize everything later, but for now click on default page layout and If we actually open the site in a new tab Then this is the title, this is the sidebar we want to remove sidebar and hide the title Okay, and also I don't want to display the page comment, so I'm gonna disable it. Okay for the pages only click on save on the top and Then you actually go back here and refresh the page Then you have a blank canvas we can actually build the layout of your ecommerce store So the layout we're going to be creating is a hero image Which goes all the way across just like the one you see on Apple and I'm gonna show you how to add text and a button or a link Okay For example Nike you've got a really nice hero image and the reason why Website do this is because it basically works right? It tells the visitor exactly what you're selling what your site is about and People can determine whether or not they want to stay on your website or click off your website So this part of the tutorial is really important because we're basically creating Sort of the landing page the first impression the signage of your business ok, so I'm going to show you how to use the Builder and how to Actually apply text and add in a button. All right So what we're gonna do is a really good place to actually find some images if you don't have one already Here's a website called unsplash.com Ok, so obviously if you're an e-commerce store I highly recommend Probably getting a photographer If you're not good with you know photos and stuff like that to take some really high quality and relevant product images Because I think really good images is what really separates you from, you know, the rest of the other e-commerce stores Okay, but if you don't have an image right now then you know What I suggest is maybe you can go to unsplash for example if you type in your shoes Then you know you have pictures of really high quality Images of shoes, right? And then what you could do is you could download these and you can use them for your website for commercial and also for personal projects without crediting people Ok, so download that onto your computer and what you need to do Next is you need to actually go to photo comm ok, so you can actually use Photoshop or any other Photo editing software, but we need to actually edit the images before we sort of You know, we need we upload it onto our website. Ok. The reason for that is because you want to Resize it otherwise, it's too big and it takes too long to load. Alright. So for example, let's find an image For example, let's say this one here you download that t computer Ok and save it onto your desktop or create a new folder and Go back to photo Than open click on computer and upload that image onto photo calm Ok, click on skip all tutorials here is your image, right? And here is the size of the image on The bottom here. Ok, and that's really really large and we sort of want to crop it down Ok, so to do that, you can click on resize and make sure this thing is selected Ok, and then I'm gonna type in 1600 ok for the width of the image and Here the height is automatically gonna resize okay, and then click on apply So type that properly click on a play and that will resize here okay, so you can zoom in and then you can actually crop it further so you can click on crop and Here I'm gonna type in 1600 times about 900 in in height ok, and Then I'm going to select where I sort of want to crop it. I think there is pretty nice. Ok, and then click on apply ok, so the image that I want to actually upload is 1600 width times about 900 in height Ok, so I personally think that is ideal for a hero image And once you've done that you can click on save I think you might need to actually sign in with your Facebook account Okay, I think you used to be able to actually download for free, but I think now you have to you know Create a free account so you can create an account and download that image onto your computer Ok, and once you've done that go back to your website here. And what I generally like to do is refresh the page first Ok before I turn on the Builder so what we're gonna do now is turn on the Builder and Basically, this will pop up we're gonna click on the clothes because I'll show you how to edit everything Ok, so when you actually hover over this section here You've got a purple sort of outline and also a orange outline The purple outline is basically the outline for the row So the width the orange outline is the column settings so you can actually change the columns so you can select two columns Okay like that or you can select you know three columns Something like that. Okay, so I'm just gonna select this one default. Okay So what I want to do is hover over here and click on the options tab okay, so you can click on that or you can actually You know select the width for width here Okay, but I actually click on that and then for the road width you want it to go all the way across Okay, so for with row content and then you can click on the styling tab. Okay, click on background and you can upload an image gradient video and Also a slider. Okay. So for a video what I recommend is Actually uploading the video to YouTube first And then what you can do is you can actually paste in the video. Url. Okay, once you've actually Uploaded the video to YouTube. You can paste it in here and the video will actually start playing in the background Okay, but for this tutorial we're going to be adding in a slider. So I'm going to delete that video okay, and then click on insert gallery and what I want to do is I want to upload files select files and Images ready so these are the images that were going to be using for the website. So instead of you know uploading one by one When we're actually doing stuff. I'm just gonna you know, select all ok, just drag and then select all and then Open okay. I'm gonna upload all the images to our WordPress website so we can just easily select the images when we need it Okay, so that's gonna take a few minutes because that's quite a lot of images. I'm gonna close all these tabs up top first Okay, let's close all of them So what I'm gonna do is I'm gonna upload this one here. So I'm gonna select it Okay, so like the this blue shoe select this one here and here Here and here and here. Okay, so I'm gonna select these Six images so over here. I'm gonna actually deselect the other ones okay, so just click on it and deselect it and I'm gonna select these six images, okay so keep in mind how many images you actually upload the more images for Slyder the sort of More slowly your website's gonna load So I personally think you know three or four images pretty much enough. Okay for your slider But I've got six so I'm gonna add to gallery for now I said this one here is not the hero slider as you can see I've cropped it to about 1600 x 900 you can crop it to anywhere, you know around this size It doesn't have to be exact but this is the size that I've cropped it up Okay, click on update and that will add the images to your slider right for the image size. We're gonna select a original image and Background slider merge should be full cover here. You can set in the slider speed But as you can see, you can't really see that image, right? So what you need to do is add some spacing within that image. Okay, so to do that you can click on padding and Click on this all button. Okay, and we're gonna type in 15% okay to the top. So it's going to add 15% Spacing to the top and you can do 15% for the bottom. So That's gonna add 15% to the bottom. Okay. So padding is something they're going to be using all the time because You need to add space to your website for everything basically Okay so if it's not enough you can just click it and you can drag it up to let's say 17% click it and drag it up To 17 and then once you've done that you can click on done Okay, the reason why it's not stretched out fully is because we're going to be adding some text in here So it's gonna stretch out a little bit more so over here the green icon hover over it You can click on the lock to sort of lock it in there. So we're gonna add some text Okay, so drop in a text module For the text content, I'm gonna be just pasting in multi-purpose ecommerce Okay, so this is a demo website Which I just created you can actually visit this website because by the time you watch this tutorial you'll be completed Okay, so you can come here and just copy the text that we're gonna be using whenever you're pasting text from some other place, what I like to do is right-click and paste and match style or Paste as plain text. Okay, because you don't want to keep that styling. So as you can see, it's multi-purpose ecommerce So here I'm gonna select it and then I'm gonna set this to heading 1 So now what we're gonna do is click on done Okay, and then we're gonna add in another text module. Okay, so a sub-headline right? We're gonna add a sub-headline so to do that you can either hover over here and drop in another text module or you can hover over the original one and On the right here. You can actually duplicate Okay, so that duplicates the text click on the bottom row here and then change this to your sub headline so your sub headline could be like a 50% off sale or Something about you know what you're selling. So if you go to Jim shock, let's have a look Okay, it's swim away time. I don't know. It's really up to you Okay for for this one, we're gonna be just creating an online store. So we're gonna put in that title there and paste in that style So as you can see that's set to heading one. Okay, because it's duplicated Select paragraph and then gone done. And then we're gonna do is add a button Okay, so a button is here and drag it below that and drop it in Okay, you can select different size buttons small large extra-large different shape different background and Here you can put in the bottom text. So what we're gonna do is link it to a shop page, right? so we're gonna do shop now or You can link it to a individual product page. So for your link, so where do you want this button to link to? All right, so I'm gonna link it to our shop page. So what gonna do is you can hover over shop here? Right click and then you can copy that link address Okay So paste your URL here and that's gonna link to the shop Okay, you can paste in a direct sort of page like for example If you want to link it to a bad page you can right click the about and copy link address or you can link it to a product as well and Right now you can set in the color to be black you can change the color here and If you want to add in another button You can if you want to change the styling like a different color Other than the default ones here go to styling tab and then click on button Background and then you can set in the background color and the background hover over color and also the link colors here Okay, so here we're going to just click on done Okay, so I'm gonna show you how to style it. So, how do I how do we actually change the color? And how do we align the text? So it's not like too much on the side. So what you can do is you can actually Click on the styling tab styling options here for the row. Okay, and then what you can do is you can click on font and Then you're gonna change the color to white. Okay? So what that does is it changes the font color everything inside that row to white? Okay So if for example if you move this text down to a new row Okay, drop it there okay, that's gonna be black. Okay because The styling it has only applied to what you've set in for the row not for the individual module Okay, so if you wanna you know set in the individual module can double click Styling font and then here you can change the color Alright, okay, so I'm gonna delete it Done. You can also click on undo and That's gonna sort of undo the changes So we're gonna do is we're going to move it inwards a little bit. Okay. So what you can do is you can Instead of going to the styling here. You can just double click and that will also take you to the row options as well Okay, go to styling Go to padding and we want to add some spacing to the left hand side So hover over here left and then set in five percent Okay, and then that's gonna you know, add some spacing to the left. Alright, so you can also click on fonts you can also align it to you know your Your text to the center like that And you can also align it to the right Okay, depending on what you want. So I'm gonna keep it on the left. So it really depends on you know your image, right? You can also hover over here you can also change the number of columns to this one here to the one like that and Then for example, you can actually move the text to the middle. Okay, it'll column like that Okay, so here you can also sort of drag it okay so you can change the width of the D columns so it's really fun when you actually learned the basics of how to actually change the layout and stuff like that, but we're gonna do is just undo everything and Move it back like that Okay, then click on save and then we can close it Okay, so everything's looking very good except there's some space here to edit the space click on edit page and Scroll down to Themify custom panel for the content width you want to select full width' Okay. So for any page you want to add a hero image and this in spacing then you need to get rid of that spacing by selecting full width and updating that page and Then once you've done that you can go back to your home page Okay, so you can click on View page and That space should be on Okay. So what you've done is you've created a really nice hairy image just like the one that you see on Jim shark Apple Gucci and That's looking really really awesome. Okay, so if you actually want to change the font here to maybe it's a bit too small, right? so turn on the Builder again and Double click the text module okay, go to styling and Then go to font and here you can change the font size. You can also drag this module to the right-hand side and you'll lock Just like that and then you can click on font Font size maybe 24. I think that looks Okay, I guess so. What I recommend right now is to keep your your font family like the fonts and everything as Just as default. Okay, because I'll be showing you how to actually you know Change the fonts and the colors later on What we're doing now is sort of just building out the structure of your website And then we're gonna sort of paint it later. All right, and then click on done Gunn save Now I'm gonna close it and the next part I'm gonna show you how to add in your products and before that I'm gonna show you three places where you can actually get, you know And source your products from if you don't actually have products, but if you do then you can skip this part It's Hogan here Hopefully I didn't scare you because I was behind the camera and now I'm in front of the camera But I do want to explain sort of the three ways that he can actually source your products so the first way is it's actually source your products from aliexpress.com and The method that you're gonna use is a method called drop shipping. So I'm not sure how familiar you are with the topic But what drop shipping means is basically you are listing someone else's product okay on your website and then you're promoting your website and then the customer will actually go to your website and purchase that okay and Then what you'll do is you'll actually order that Product from the supplier or the vendor and the vendor will actually ship it directly to the customer So essentially you don't have to you know Buy thousands and thousands of dollars of stock and store it in your own house or a warehouse or anything like that You basically will actually place the order after the customer has paid you right? so this is a method called drop shipping and a lot of people use Aliexpress for drop shipping because the products here are From Chinese vendors. Okay, so normally product on Amazon and eBay they are People like us, you know who actually buy the product from China Let's say and they import it into the country and then they start distributing it So normally the prices are cheap, but there is a drawback in terms of the shipping times okay, so normally products take two to three weeks to get shipped and even longer if the Vendor doesn't offer a packet to that specific country But what I recommend is actually when you actually drop shipping is to start off with Countries that actually have a package shipping because that's only gonna take about two weeks for your customer to get the product Okay So what you want to do is you want to go to Aliexpress comm and then you can browse the products You can research the products and you'll see that the products normally have reviews Okay So you want to find high quality products check the reviews? Check the images that customers actually post on the actual product because you want to make sure it's a quality product That's gonna decrease the returns and you know keep your customers happy, right? So what do recommend is actually Ordering that product for yourself so you can actually test that product yourself, you know, see if it actually works Before you start, you know listing the products on your website Okay, so to actually list the product on your website you can do it you know in two methods the first method is in do it manually which is you'll actually need to screenshot the images and Save the images onto your computer and then you'll need to basically upload the images onto your website Which I'm about to show you and you'll have to set in the prices yourself You know add in the product description and basically set in everything that you need by itself or the second method Which is the one I recommend is to use a plug-in called Ally dropship and hourly dropship will basically help you sort of Do a one click import of the product onto your website. Okay, so it saves a lot of time Because you don't have to go about screenshotting the images. It'll actually copy the images directly to your website and It also takes the inventory number like it tracks the inventory as well So you don't have to worry about you know, maybe that vendor actually runs out of the products and then customers are still ordering It'll actually sort of Sync that together so that won't happen so After the the customer actually purchases the product from your website then what it does is that it will take the customers shipping information and it will Automatically log in to the website to place the order with that supplier specifically and then it will actually set in the customer's shipping address and then all you need to do is to Pay by your credit card or your PayPal account. And then the supplier will ship directly to the customer Okay So this is the method called drop shipping and this is something that you can start today with a really low investment But personally I don't believe this is the best Long-term business model. It's sort of like riding a bicycle, right? So drop shipping is sort of like riding a bicycle with training wheels. You sort of want to learn about e-commerce By doing drop shipping because there's low investment you can learn about Facebook ads Instagram ads You can learn about sourcing the products and you know customer service and all that stuff but what you want to do is you want to build a Long-term brand you don't have your own product with your own logo and own packaging Okay, so to do that you go to a website called alibaba.com okay, and here you can actually Get in touch with the manufacturers. So it's a little bit different, you know on Aliexpress, it's like the vendors okay, but if you actually go to Alibaba, it's actually the manufacturers who who actually You know assemble and build that product so you can actually put your own logo put your own packaging and stuff like that. Okay, so What I recommend is you'll do need quite a lot of money if you actually want to Invest in it, but you know, I don't know your financial situation, but it's gonna be you know, roughly I'd say more than five thousand dollars because you actually need to order the products But then you actually have to pay for the shipping to to your home country. Okay? so normally the best companies will actually have a higher minimum order quantity, but you can order samples and You'll have to probably pay for the samples and actually pay for the shipping as well okay, so Make sure you order samples and what you can actually do is you can actually ask the the manufacturers is do they actually? You know produce a product for maybe a country a sorry a company in your country, right? last time when I asked them they actually told me you know, who they supplied and They actually gave me sort of an estimate of how many Pieces that that company is actually ordering so when you actually talk to him you can ask them all this information, you know sometimes they might not tell you but sometimes they do and When you actually know that then it gives you the confidence to actually begin Because if you can sort of reverse engineer what other companies are doing, you know, you can actually use a website called similar Web.com and then you can put the actual ecommerce website that you that you are inspired by Put it in there and then you can check their traffic and where is it coming from? Okay, so then you can analyze and reverse-engineer basically the marketing strategy for that company for your own success for your own E-commerce website. Okay, the third method is actually going to the Catalan fair So I went to the Catalan Fair last year for the October one. So there's normally two different sort of Time hour sessions. Okay per year and separated into three phases okay, so they separate into three phases because there's so many different product categories and I think it's a really great experience because you can actually touch you can feel and you can talk to the Manufacturers as well. So I think a lot of people might have a bad perception about products made in China as well But when you actually go there when I went there I talked to a manufacturer that did the stuff for Starbucks. So they are really high quality suppliers there, you know even Apple Have their iPhones made in China right they have you know design in California but assembled in China and You know a lot of the companies that you see now on Instagram, they have their products from Alibaba and you know They source it from supplies in like the Canton Fair as well So I recommend going there if you want more information, then you can check out the accounts on their website You probably need a Chinese visa and you need to get like a like a registration sort of thing as well But that's pretty easy to get And then you just book the hotel booked a flight and then you're there. Okay So right now I'm gonna jump back into my screen and actually show you how to add in the products. So Let's get into it So let's say in some products the first product I'm gonna show you how to set in is just a simple product Alright, so if you're not in the dashboard section already Make sure to click on the home icon and it will take you back here. Click on products Ok here you can click on create your first product or you can click on add new if you see that button there ok For the product title, we're gonna set in a Black dress so I'm gonna show you how to set everything up so you can click on dismiss. Okay, sir black dress Here is where you paste in your long description. So let's say for example, this is the black dress we're gonna be adding in Okay, the long description we pasted here. Okay. So this is where you write a little bit more about the product itself Alright, and this is the short description So I'm gonna grab some Lorem ipsum text as just some placeholder text for now, okay so here I'm gonna copy a paragraph and Paste it in Okay So you can click on the toggle toolbar and here you can change the color of the text and you can edit the text Okay, just go down here okay to the product data, so we're gonna be creating just a simple product for now and This product is a physical products. So make sure this is unselected and For the regular price will do $79. You can also set in a sale price. So let's say for example $59 and you can also schedule it. Okay, so you can schedule it from a date to end and To end on a certain date as well. Okay, click on infantry here if you have a lot of products you can have a SKU and you can also manage the stock level by taking this and for example, you might have Only 10 left and then you can put that in whoops 10 and allow back orders, you know that depends on you So for example, if your stock quantity actually goes below zero then orders will be still allowed Okay, for now, we're gonna select do not allow click on shipping and here you can enter in the product dimension like how much? Does a way when it comes in someone's mailbox or something like that, so it might weigh you know one kilo might be thirty centimeters times thirty times a height of maybe three centimeters and okay You can click on link to products so upsells are Basically, if you actually search for a product here if you've added more products You can search for a product and the upsell will actually appear sort of below the product So for me, I normally leave it empty because it'll actually show related products, which is the products in the same category Okay. So for cross sales, I think this is really useful. So let's say for example you are Selling a dress right? So maybe in a cross sell would be some necklaces or some you know, some gym jewelry, right? so if people actually add that to cart, all right, and if people view that cart Then basically, they'll recommend the cross sell product that you set in here Okay, so you can increase the value of the cart by adding some cross cells, okay So for example, if you have a camera a cross cell would be you know, camera batteries and stuff like that attributes is something that you do for variable products and Advanced so you can leave a purchase note. You can also order the products on the shop page Okay, and you can also enable a disable reviews. I'm going to paste in the short description Okay Delete some text for now Scroll back up here here. You can set in a product category. So click on add new and this is a woman's dress so I'm gonna actually set in a Parent category. So this is the sort of the main category. For example, if you go to gym shop, right they have Women's and men's so they have women's and then they have women's leggings and stuff like that So this one is you have women again women's ad and then you also is a dress So you type in dress? okay, and then for the parent category select women's so If you add a new category dress will be under the women's category as well Okay, so this helps for when you're actually setting in your mega menu Okay when you're actually setting in your mega menu here Then it helps with this and it also helps with people searching for the products in the search engines as well Okay. So once you've actually done that for the product tags, you might do you know the brand of dress or maybe the material and stuff like that okay, so you can disable the sharing if you want to for the product image click on set product image and If you haven't uploaded the images yet, it's gonna upload file and select files, but here I'm gonna upload this one here okay, and what I actually recommend is Cropping the image as well. Okay. So this one is 800 by 800 Okay, so it's sort of like a square. So 800 width times 8 uncrewed in height So if for example your product is more of a longer type of product like this one here, then you might consider 600 in width? Okay and 800 in height But for all your product images make sure they are exactly the same size so they aren't cropped Okay So they're all you know matching perfectly and what I do recommend is having a white background or a neutral background like this Okay, so then the background is sort of like gray same with Nike as well. Okay, the background is white Right, so it's a lot cleaner, you know sometimes I see a lot of people actually have white background gray background and then you know, they might have The B products inner like a colored background that's gonna make your website look slower. And also it looks more unprofessional Okay, so if a featured image make sure it keep it white again and then set in the product image. So the product gallery is Where you can actually add the product in use So this girl here you might have her in like, you know You know in a photo shoot somewhere in the alley where a sign in the dress with a dress. Okay, so You might add the extra product gallery images here Okay, but for your product image the featured image leave it as neutral as you can Okay, and once you've done that then you can just press on publish Okay, so once that is done you can click on view products or the URL here so click onto that and That is looking pretty good pretty good. Okay, so What I'm gonna show you now is how to add in a variable product. Okay So sometimes you might have a black dress and then you might have different sizes in different colors So I'm going to show you how to set that in. So what you can do. You can also click on add new Pop over it sorry and click on products. That's just a shortcut. Okay to add in pages or post That's a quick way of getting to where you want quickly. Okay, so the next product is going to be a jumper Okay, so I'm going to put in jumper Here, I'm gonna paste in the lorem ipsum again And I'm gonna scroll right down to the short description as well. Just paste it in and Delete some text Okay, and then scroll down to the product data here. You want to select variable products? Okay, it is still a physical product. So we're not going to enable the Download theme up here. Okay, so it's not appearing right here because you have to set it in individually So the infantry you can actually set in the stock level at product level, but we're gonna leave that empty shipping weight we can put in one kilo and You know 30 centimeters by thirty by three For link products, we're gonna leave it for now attributes is where you have to create the attribute. Okay, so We're going to be adding a jumper. So one of the attributes is maybe a size. So I'm gonna click on add and Then what you want to do is type in size, okay? So here we're gonna select s for small and then we're gonna click on shift and I think this one is the backward Backward slash it's sort of above the enter button and then that will give you a pipe Cymbal, okay, and then type in M and then the pipe symbol again L Okay, and then you can do Excel for extra-large and whatever you want to do okay, make sure to click on use for variations and then click on save and We're going to create another attribute. Okay, so the other attribute will be a different color. Okay, so click on add and Name will be color so we're gonna have green and then we're gonna do the pipe and then we're gonna have gray pipe and Also a purple jump ball okay, and then click on use for variations save attributes and Then click on variations Here you need to create variations from all the attributes that we created click on go and okay, okay Alright so here you can click on the drop down arrow and here you can select a specific Product image for the green variation. Okay, so we can click on upload image and We're gonna select the green jumper. Okay set variation and we're gonna set in a price here So for a small one, it might be let's say forty nine dollars Okay, and you can set in the individual stock status and stuff like that here for the individual products But I'm just gonna leave it as is okay So here you can also set in a downloadable and virtual but this is a physical so we're gonna scroll down Okay here we're gonna select the gray jumper same price $49 scroll down Here we're gonna select purple and This one will be 49. Okay, so I'm gonna do this really quickly Mmm, so this one is green the price for this will be 59 Gray 59 this one is purple 59 scroll down. Okay Lodge. So this one might be 69 and then sit in a green jumper Scroll down The gray one 69 and the last one which is the purple one Okay, so click on Save Changes Okay, scroll back up, okay, we're gonna click on add new category. So this one is men's jumper So we're gonna do men's as the parent category add new and then we're gonna do a something called the child category, which is called jumpers and Then set it to be under men's. Okay, so you don't necessarily need to have a parent and child This is if you sort of have a lot of products and you want to organize it really well And click on add new okay, so Jumpers will be dropping down from men's, okay Scroll down product tags, so I might be a cotton jumper or the brand of the jumper had Set product image. So this is the featured product image and this is the product that is going to appear on the shop page okay here so we're gonna go here set that in and I'm gonna select maybe a a gray one. Okay set product image and here you can add additional product images if you need and Let's go and click on publish for now, and we'll make sure to check that product Okay, so we're going to right click and view it in a new tab. So Everything looks good, as you can see the default option. It doesn't select anything. So what you can actually do is set a default option all right, so go back to your product and Go to the product data part. Let's go to Variations and here you can set in the default form values So I'm gonna set in the default as medium and maybe default as the gray Okay, the gray jumper and then click on update and Then if you refresh that page Then you'll see that the default will be selected right and If you actually change the size For example small the price will change change the color the product image should change Okay, so make sure that is all correct too. Sometimes you might accidentally, you know mix it up. Okay, and Everything looks good. Okay. I'll be showing you how to customize the pages and stuff like that later, but now I'm gonna show you how to add in a downloadable product so we can Go and close this and go back here. Click on add new Okay, so this is useful for e-books or you might have like coaching services or just anything virtual so for example, we're gonna do Here for the title 50 things to do in Vietnam Copy some lorem ipsum paste it in here and also down in the short description Okay, so I'm gonna go over this a little bit quicker Scroll down to the product data. So this one is going to be just one product a simple products But it's gonna be virtual. So it's not shipped and people can download it. Okay. So regular price $29 Here you need to add the downloadable file So for example, the the file that people will be able to download after they've purchased so you can click on add file choose file from your computer and I'm gonna upload this PDF file for them to download. Okay insert file URL Okay, you can put in a file name as well. So it could be you know 50 things to do in Vietnam Or you can also you know You know save it your file in like Google Drive or Dropbox and put the file URL over there So people actually download it from from that URL Okay but I'm just gonna use this one and then you can set in download limit as well as expiry and Then you can click on inventory you can manage stock which I don't think is necessary link products you can add in a cross cell for example, you might have additional sort of Ebooks and stuff like that. So you've got this one here, and then you've got other ones So you can add that as a cost cell and then you can click on attributes. So this is if you have a variable products Advanced you can leave a purchase note and then go here. We're gonna click on add new category We're just going to name it ebook. Ok just as he Just as a normal category up there like that Scroll down product tags. This one might be Vietnam travel guide ad Set in the product image and We're gonna select this one here Ok, and then set in the product image you can add additional gallery images But we're gonna click on publish All right, so let's view that product Ok, so that's looking great Ok, so let's click on the shop page and What I'm gonna show you now is how to add in a product filter, ok, so this allows your customers to Easily sort of filter your products by category by the size by the pricing and stuff like that so let's go back here and To do that. I'm going to close this one here. Let's go to your dashboard section and We need to enable the product filter plugin. Ok, so go to plugins Make sure you have the theme of 5 WooCommerce Product filter installed. Ok. So if you don't click on add new and then type it in the search bar install it and then you'll need to click on activate and That will activate the plug-in and then on this side of the sidebar section The product filter tab will actually show up. Okay. So for our filters here here you need to click on product filters Okay, and then you can click on add new and Then the forum title might be Shot the page. It can be any name and here you can set in the display options. So for now I'm just going to Leave everything as is except for toggle field groups I'm gonna deselect that and then here is the things that you want to display. So for example, I'm gonna put in product title So this is gonna help people search. Okay, so I'm gonna type in search below that we're gonna type in or put in the price Okay, and that's going to be as a slider then we're gonna put in maybe categories okay, and for the display as I like the radio option, I think it looks a lot better and Then you can scroll back up here. I'm gonna put in the on sale on the bottom So you can play around with the display settings and stuff like that, but I think it is pretty good by default so we're gonna click on save and then Once that is saved then you can click on close and Then the shortcode will show up so you can copy the shortcode to your clipboard Go to appearance and then click on widgets so we need to add it onto a sidebar, okay, so here okay, click on shop sidebar and This is where we're gonna drop it in So here is all the available widgets so you can actually drop in all these widgets into all these different sections Okay, but what we're gonna do is drop in a text widget so scroll down to tea Click it and sort of drag and wiggle it up to the top. Okay, and Then scroll up here put it in here and then paste in the shortcode. Okay, and then click on save done and then you can go back to your store page and What you actually notice is it's not showing yet So it's not showing as a sidebar yet. So we need to go back to our dashboard and We need to actually that in so themify shop MFI settings and Then here you want to click on shop settings and You want to click on the products archive and Then for the shop page sidebar here as you can see, there's no sidebar You want to select it on the left or on the right that depends on you for the product archive sidebar also on the left Ok, so let's click on save and see how that looks So we're going to visit the store in a new tab And There you go. That's really awesome. Ok So for example, let's drag the price filter down then you'll see that it should update and maybe you can click on on sale Let's drag that back up and There you go. So what we're going to do now is you can actually change the display settings in the shop settings here, so For example, you can display it in In a row of three products. Ok, so here it's actually got four products, but you can display it in three and You can you know set in how many products you want per page you can hide the title You can hide the Add to Cart You can play around with the settings here. So for example, let's let's just hide maybe the product share button click on save And you can refresh that And as you can see that has disappeared and that's changed to three products in a row ok So what I recommend is just opening this page up playing around with the settings and figuring out you know What you actually like and then just save it and then refresh this page ok, so I'm going to leave it as this for now and If you actually click into the single product, you can actually go here ok, go back here to The single product page and you can change the layout as well. Ok, but by default, I think that looks pretty good already So let's say for example, you might not want you know, the tags kind of looks a little bit ugly. So let's go here You can remove the product tags. So hide product tags for the single product and then you can actually save it and Then if you refresh Then it's going to disappear. Okay, so that makes it look really really clean. Okay, and that looks really good So I'm gonna show you how to add in some blog post or some articles for your ecommerce store. So I'm gonna actually tell you you know, why is it actually important for you to add in blog post? So for example, this is your e-commerce website there's basically two different ways to get traffic to your website so you can Go the freeway and you can also do the paid method which is like Facebook, Ads Google AdWords banner advertising You know advertising on TV and things like that or you could do free which is posting images on Social media accounts like Facebook and Instagram snapchat and things like that but I think what is underutilized and not many people talk about is actually Blogging to get free and targeted traffic to your ecommerce store and have people buy what you are selling, right? So for example, let's just say you are selling wedding dresses and this is a wedding dress okay, you can actually create content for Your target sort of visitors, right? So people who are buying wedding dresses They're probably searching on Google maybe things like how to find the perfect wedding dress or you know top ten tips on You know stuff about the wedding or whatever it is. You can create content around it. Okay, and Once you actually create content like for example If you go here eleven must-read gown shopping tips right people can scroll through your content and you know You can have really good content and you know provide a solution to what they're searching for but you can actually link to let's say your products okay, or for example, you can actually have your shop page up here and It brings sort of, you know awareness to your brand and they're like, oh, okay. This blog also has a shop Okay. So this is one of the things that you can do like for example, nomadic Matt actually, does that really well? So he is primarily a blogger but he also has a shop So he creates really really high quality content about you know how to travel cheaply Tips on you know how to save money while traveling and things like that and then he has a shop page Okay where he sells ebooks? Okay So, you know Jim shark also has the same as well. So for example people might be selling what to wear to the gym and Here you'll see the content and then you'll also see that There are linking to their product pages as well Okay, so they are recommending their own products to people who are searching for this keyword on google so it's really important to add in blog posts and That's exactly what I'm gonna show you how to do right now so to add in a blog post you can either hover over new and click on post or you can click back to your dashboard section and You can add the blog post and also view all the blog posts that you have Okay, so you can hover over here and then you can click on all post or add new so all post is gonna display all your blog posts here and Here we can click on add new as well Okay here you'll need to enter in your blog post title so I'm not gonna show you how to write a viral blog post right now because that's gonna be a Pulling another video and we probably need to cover search engine optimization as well But I'm gonna show you how to add it in technically. Okay, so copy the Panda texture you can paste that in and Let's say I'll just take this text and put it into the title this is where you add in your blog post and Let's say you wanna you want to link it to a products or you want to link it to another page? you can select the text click on the insert and edit link and You can click on the link options and then you can search for your products. Okay? So for example, you want to link it to an e-book Okay, then you can select it here or you could paste in a custom URL Okay, and if it's an external link, then what I recommend is opening it in a new tab and then click on add link Once people click into that then that's going to take people to that product okay, so if you want to add an image of that product you can click on Media and upload files or I've already uploaded the image here. So we're going to be using let's say this one here Okay, and then you can insert that into post? Okay, so let's say for example, I've also cropped the image to a thousand times six hundred and eighty eight So anywhere between that size is fine for a blog image Okay, so here you need to set the size to maybe full size Otherwise, it's gonna crop to a smaller size and it's gonna be a bit blurry. Okay, so insert that into post and That's gonna add a picture in there Okay So to add a video click on enter and you can grab a YouTube video and all you need is to grab the URL and Then you can actually just post it in and it will automatically pop up in about a second or so Okay, so that's how you do it. You can also, you know change the colors and things like that So I'm pretty sure you guys know how to use this section here Here then you'll probably need to add in a category. Okay? so let's just say this one is you know travel then you put in travel and Then you could put you know the location of where you travel to or anything like that. Okay, so this one might be great China click on add Ok, so going down you can set in a featured image Okay. So what I recommend is for the featured image crop it to the same size. Okay, so 1000 times 688 this one is 1000 times 688 and also this one as well Okay, so you could crop it to 1000 times 600 but make sure that you know They are pretty much the same size because that way it's gonna display properly when you set it in so let's just select that one there and set in featured image and Then scroll down here You can also Customize the layout of the post individually in the themify custom panel section but if all is good click on publish and Then you can view that post by clicking the URL here or you can on View Post So here is your blog post and That is looking good. So I'm going to add in two more blog posts really quickly. Okay, so I'm gonna click on post here and I'm gonna paste in the alarm' hips them again Just paste that text in here. I'm gonna quickly do it. So I'm just gonna put in a title Putting a new category Lifestyle I'm gonna skip the tags, and I'm just gonna sit in a featured image Okay So I'm just adding in extra blog posts so that we can actually have some content to display on our home page okay, so set that in and Then I'm gonna click on publish and then I'm going to click on add new Copy that text again Paste that into here sit in a new title Okay, a new category design add new and then set in the featured image This one here Set that in and Then click on publish and Then you can click on all post Okay, and here you can actually view and edit your blog post okay, so I'm gonna show you how to display your products and also your blog post and how to build out your home page right now so what we're gonna do first is we're gonna turn on the Builder and I'm gonna show you this simple way of adding in and Displaying your products and also another method. Okay, so for example If we want to let's say add in Our products we can actually look for the WooCommerce module the game should be the last module Click it and drag it into the section that you want to display it at. Okay. So for example there and here you can display its you know as the categories I can display the featured put Which I'll be showing you how to actually set in specific featured products because sometimes you might have you know, 100 products But you want to display, you know three top-selling products. I'll show you where to actually set that in here you can change, you know all the display options of How you want to actually display your products? Okay, so you can display it in maybe You know two two products per column or you can display it in like four Okay, you can also change the display options For example, you can change the it to the overlay option. Okay? So for example if you click on done and if you click on save and if we close it Then you'll see that it is overlaid. Okay? so for example it is just the image and when people hover over that then it overlays with the Pricing and Add to Cart buttons. Okay, so you can display it in a few different ways. So we're gonna turn the build up and Double-click that module again, okay. So here you can just definitely just play around with it So for example, if you want to hide the Add to Cart or the the prices or the sales badge You can do all that. Okay, so I'm gonna show you the other way of doing it so we're gonna click on done and I think this way is important to know because you Might want to have a a different layout. Okay. So for example This is the layer. I'll show you how to create So for example, if you go to Jim shark, right, you'll see that they have you know Just maybe just like an image and maybe a a button to link to their collection Okay, or something like this or if you go to Nike then they have the product image and it links to the category right on Nomadic mat they just have the image of the e-book and then they have an Add to Cart button So it's a completely different layout and that's what I'm going to show you how to do So for example this one here, it's three different columns So the first thing you want to do is separate it into three columns Right, so you can hover over the purple thing here and then you can select the three columns. Okay like that and Here we're going to add in a background image. So we're going - click on the column styling ok, the paintbrush thing click on the background and Here click on browse library to upload the file and let's say for example, this is the product you want to add in ok, so we can insert file URL and For the background mode. You want to select full cover The background position you can just keep it as Center Center But what we want to do is we want to add some padding because you can't see the image so let's add some spacing click on this all and Let's add. Maybe let's try 10% Okay, so I think that looks ok ish. Okay, I'm gonna drag it up maybe to 15% something like that Ok, so you can also add it to the bottom, but I'm gonna add a button to the bottom So if I actually add a button to the bottom then and if I add padding then it's sort of going to add basing below that's button, so we're gonna leave this as 0 gone done and Let's add a button in there. So we're gonna drop in a button ok in that column and This button can link to this product or you can link to a specific category Right so you can change the appearance of the button and things like that but we're gonna change the text to maybe learn more or you can change it to shop now and Let's say you want to link it to a specific category, right? So I'm gonna copy this link in a new And open up in a new window ok the shop page and Let's say you want to you know, link it to a category specific category, then you could click on this products Ok, let's say you want to link it to our women's category as you can see here. This is called the breadcrumbs Ok, and if you click on the women's that's gonna take you to the women's category Alright, so you can link it to the women's category by copying that link Ok going back here and you can paste that into here right And when people click on that, it's gonna link to here change the button color and then click on done Okay. So what you can do is really create a Custom sort of layout for your home page. You don't have to just have you know a default product You could have a product here and you can have some text explaining about What's so special about the products right? Or you could do something like let's say for example, we want to duplicate it Okay want to create three different? Things you can easily just duplicate it. So if you hover over the column You can copy the content and styling Okay and hover over the next column and then you can actually paste that in here paste the content in styling click on OK and It's gonna pet copy that data and paste it into here Okay, so gonna do the same we're going to copy content styling and then we're gonna paste it into here Alright, and all you really need to do is double click background Delete it and you know upload the image And you can also double click straight away without clicking done it will automatically save so you can double click here and then you can go to the background and We're going to set in maybe a green image. Okay, something like that and then click on done Okay. So what you can actually also do is you can actually link it directly To the Cart button. Ok, so what I mean by that is ok, so so for example if We want to link it to the cart automatically if you actually hover over the Add to Cart on the bottom left you'll actually see the URL that will actually add that product to the cart ok, so you can right click copy that link address and You can don't click the button Pasting the product URL here Ok, so what's that gonna do is it's actually going to once people click it. It's gonna add that to car So let's say for example someone clicks on that Ok, it's gonna add the dress to the cart like that so let's go back here and You can change and edit that. Okay, but what I'm gonna show you now is how to actually you know Make sure that everything looks good. All right, so let's go back here. Turn on the Builder and What I'm gonna do is I'm going to add some spacing on the top and add some text So let's add maybe a text on the top. So this one might be you know newest collection okay, let's set this to heading two and then what we want to do is click on styling font and align the text the center click on done and Then we want to add some padding to the top. Okay, so you can add padding either to the text module Okay, we can also add padding to the Rome or jewel. They're pretty much the same thing So this is really matter where you actually add the padding as long as you know, visually it looks good Okay, and just click on starting here padding Let's add maybe Try 5% to the top, okay Yeah, we're gonna add some padding okay between the text and also the image so double-click the text styling Padding sorry and then we're gonna add some to the bottom. So maybe three percent this time. Okay, something like that Right, and the next thing we're gonna create is a button. Okay, so this button is gonna link to The shop page so it so people can view all the products again. They're gonna put a little divider line to separate the content Okay, so whenever you have a different section you want to either separate it by a line here or you can either separate it with like a whole background image or for example People actually use like a a gradient sort of like gray Gradient to separate the content. Okay, so you don't want like just a huge block of content? Otherwise, it's gonna be too squished together and it looks really sort of cluttered. So we're going to drop in another button Okay below that and then you could Change the color Okay and Link it to your shop page So let's link it to the shop page and then paste it into here This one is going to be view all okay, and then maybe we can align the center and We can also add some padding to separate it. Okay, so you can click on padding. Let's do maybe 3% Or maybe a little bit more I'm gonna try 3% for the bottom. Okay, click on done and then we're gonna add a little divider line. Okay yeah and drop it below and Then here you can set in the divider color. I'm gonna click on custom for the width Okay, and then for the alignment, I'm gonna align it to the center like that click on done You can view the Preview by clicking on preview up here and you can see whether or not that looks good or not okay, so I think that looks okay and we're gonna create the next section which is the categories Okay, so make sure to turn on the Builder and let's drop in maybe a text module you can drop it in or you can Just actually duplicate this one here. Okay, so you can duplicate it and Then you can pull it down here. Right so you can actually zoom out of the screen a little bit so zoom out to 50% so it's easier to Rearrange the layout sort of thing. Okay, and Then what you can actually do is change the text to maybe Categories, all right and Then click on done and then we can drop in a product categories Okay down there and then here you can display your categories, right? So you might have men's category and women's category You can select two columns something like that. And then you can select specific categories and exclude specific categories It really depends on how you want to Sort of display it okay so here to actually exclude categories You need a product category ID, which I'll show you how to get pretty soon So we're gonna scroll down here and then you can hide you know Specific categories and all the display options and things that I'm gonna select this one here three columns Okay, and then I'm going to click on done So here I might add some Padding to the top of the row so some padding Here, I'm gonna add maybe you let's try three percent or maybe a little bit more five percent like that Click on done and save it and then close it So what we need to do is set in the images here okay to do that. You can go to the dashboard and Here you can go to products okay hover over products and click on categories and Here we're gonna actually add in the image for the categories, right so you can click on edit for ebook for example and in here upload image and Then this one here is a ebook so you can select that as the primary category image update Scroll down make sure make sure that is updated okay, so then you can go back and click on categories or you can click here and then here for men's edit and Then upload a image So this one might be this one here. I can't use image click on update and Then click on back to categories and Then here for women's click on edit Upload select the image use image and update Okay, click on back to categories Okay. So how do you actually get the category ID to exclude it you can Click on let's say if you click on edit, right? Here you'll have the product category tag ID equals 24, okay So that is the category ID number right? And If you actually want to set in the featured product, which I was going to show you before click on all products Okay, that's going to display all your products So what you need to do is select the star icon to make that product a featured product Okay, so we're gonna go back and visit our site then you should see the images uploaded Okay, we're going to turn on the Builder and edit the link color Okay so we're gonna double click so I'm gonna go to styling and then you want to go to link and Change the link color to white. Okay, because we want to make that sort of visible Okay, and then go back to product categories. I'm also going to remove the product counts to know okay? Like that, it looks a lot more professional and then we can Click on done, okay Okay, so that's looking pretty good the next section we're gonna create is Displaying the blog section so we might need to add in the divider line. So let's just get the divided line from here Duplicate it Okay, grab the divider line Okay, bring it down and drop it below Okay, so you got the line there now now let's scroll back up and we're going to duplicate the category text module so hover over on the right and duplicate and then we're gonna zoom out a little bit to let's say 75 percent and Let's drag one of the text modules down here into the new row. Okay, and then we can rename this pot News or you can name it blog. It's gonna put in blog as a title and then than done So what gonna do is I'm gonna double-click the row. Okay, we're gonna add a little bit padding to that row for some spacing so click on styling padding and Click on all and then we might do three percent to the three percent to the top like that Okay Click on done and to display the blog post we can hover over on the right on the green and then look for post Okay, and then drag it and drop it into the row Alright, so here you can actually display. It's in different sort of grid formats. Okay, so I'm gonna select grid three and You can also change The content layout as well. Okay, we're gonna keep it as default. It looks pretty good And you can also select a by categories and things like that as well. Okay? So the one thing that we want to do is we want to remove the text here okay, so this is here and the display options and By default, it selected excerpt which is like a little summary. Okay, you can select content which shows the whole blog post You don't really want to do that unless it's probably on your blog page or something like that But generally we're gonna select none and then that's gonna remove that Alright, so you can also hide the titles and hide the dates and hide the post meta and things Like that so you can play around with the different settings and then click on done but what we're gonna do is click on the styling tab and Then click on font and we want to align Everything in the middle just like that and then click on done. Okay, so gun save it and Then you can close it. Alright, so we're going to scroll down have a little look, okay? I think that looks pretty good. The next section is we're gonna create the Video background, okay and the gradient background which is really cool. So this could be your featured product and Generally, what I like to do for an e-commerce store is to have a sort of call to action on the bottom of the page Okay, because the purpose of your store is to make sales, right? So you want them to have a strong call to action when they scroll down to the bottom? So that's what we're gonna do and we're gonna go back to our website and then we're gonna turn on the Builder And Here we're gonna hover over the row and then we can click on the styling Okay, and then we can click on background and then for this one we're gonna select gradient all right, so we're gonna click on the first circle and Then here we're gonna set in a color code So the color code that we're gonna set here is a 2 3 d FF. Okay, so it's like a Purple color and then we're gonna click on the second one. Okay on the back and then this color code is going to be FF 4 7 4 D. Okay, and then you can click on the outside and that will save Alright, so to find really cool gradients you can go to a website called UI gradients calm and You can click on show old gradients and then you can select a color that you like or a color that you're gonna use for The theme of your website and they'll provide a lot of different examples Okay, so you can for example you like maybe this one here Then you can get the color code by clicking on it and we copy to your clipboard So gonna go back here and then we're going to maybe add a little bit of padding. All right. So let's add maybe II let's try 5% to the top and 5% to the bottom. Okay, we're gonna be putting stuff in the middle. Okay, so it's gonna stretch out a little bit further So what we're going to do now is we're going to hover over the purple row again And we're going to separate it into two columns. Okay? So the first column here, we're gonna put in a sort of a video background in the column, right? So alternatively you can actually add in maybe just a Image or maybe you could add in a slider or you can add in just a video. Okay? so a video let's say for example you put in a video and then we actually Get the video. Url. Okay copy that and Then you can actually paste in the video URL And then you can easily just display a video which people can click on and then you know it plays All right Or you can actually let's just say you want to put it on the background then you can hover over the row the column Sorry, hover over the column and then click on styling background and then you can click on video and paste in your YouTube URL and here you can disable the audio and disable looping which is sort of like a replay and you can also enable video background to play on mobile and I think it sometimes it might not work on all mobile devices because you know, they might be using older technology okay, but you can also what I recommend is setting in a Background image as well as a fallback Okay, because sometimes if it doesn't display then you'll display the background image that you put into here Okay, so you can browse library and you can upload a image. For example, let's just say this one here okay, and then insert file URL change it to full cover and I think that is OK. Okay. So what gonna do is also stretch that video out? so as you can see, it's quite a thin so click on padding and then click on all Let's try 10 percent to the top and maybe 10 percent to the bottom Maybe a little bit too skinny, so stretch it up to 15 percent Okay, I think that looks okay and then click on done Right. So here we're gonna add some text and what I'm gonna do is just gonna copy this text here so I'm gonna copy the text and Then just drop in a text module Okay, because it is text from somewhere else. You'll need to paste and match style or paste as plain text Okay for training now, we're gonna set this to heading 2 Okay, so what you're gonna notice is that I'm gonna click on enter is that the whole sort of paragraph is set to heading 2 What you do want to make sure is you have some space here, okay So this is heading 2 here. We need to set in a paragraph text, I guess to set it to paragraph something like that Okay, and then we want to go to styling font Change it to white so it's more visible. Okay, so it depends on your background Click on done and Then we're gonna drop a button. Okay, so we're gonna drop in a button which is gonna link to our Featured products or our shop page. Okay. So for this instance, I'm just gonna link it to our shop page Okay, so this one we're gonna name it shop now Put in the URL you want to link it to and also the button just like that. I've gone done All right So to finish off the layout what I also want to do is I sort of want to align the text In the middle of this video, okay So for example, if you actually hover over the purple row again, okay for the column alignment? We want to set it to this one here. Okay, which is gonna align into the center like that okay, so if we zoom out of this screen We're going to look at The overall layout and then you can just fix the padding for each of the sections which you know is a bit wonky And yeah, I think that's pretty looking pretty good. Congratulations what we can actually do is we can actually click on the drop down arrow here and Maybe we can click on save as revision. Okay, so that's gonna save the layout that we just built for our home page So you might want to name it, you know home page and then you might want to put a date on that Okay So click on OK and then if you have any problems like you might accidentally delete something You can hover over here and load that revision up. Okay, so it's sort of like Microsoft Word you have the option to save that revision You can also save that as a layout as well so you can save it as layout so, for example, this one will be home page and Then you have date right and then click on save We're gonna save now Click on close Okay, so we've built our home page layout and it looks great. But there's one more thing that we need to do So what we need to do is you need to actually resize the screen And we need to actually set in the mobile layout or make sure that your website is a hundred percent mobile-friendly or even more streamlined for mobile devices So as you can see if you're scrolling down here You'll notice that the text here is covering the image here and it may not be as visible You'll also notice that this Image here. You can't really see the shoe. The padding is quite it's not enough. Okay. I'm scrolling down here to the bottom Okay, you'll see the padding is not enough here and also the video here The padding is not enough either and you know this text here might be a little bit big for mobile devices So I'm gonna show you how to edit that. Okay, so it's gonna be really awesome. So for example, let's go to Tesla comm Okay, so on their desktop devices they have just one hero image and then they've got the Navigation menu to navigate to each of the different pages for each of the different models Right, if you actually resize the screen it actually changes right because now what happens is the navigation menu is in mobile format Okay, so probably less people will actually click into the mobile menu So there's streamlined the sort of mobile experience by actually just providing, you know Each of the different sections here and then people can click directly into it Okay So they have a streamlined mobile experience for you know their website and that's what I'm gonna show you how to do For your own website, okay So this is really important because sometimes you know, you don't want to display certain things or you want to resize certain things So let's turn on the Builder and I'll show you how to edit that really easily and really quickly okay, so here on the top you have different settings for example tablet tablet in portrait and Also the mobile. All right. So let's click on mobile and you can set the settings for each specific device I'm just gonna show you how to set it for mobile and You can repeat it for each of the devices if you need to All right. So let's say for example the first hero image here. We're gonna double click OK in the RO So we're gonna edit the background so you can click on styling Okay Make sure that this thing is selected here the mobile device you can click on background and you can actually change it to just an image or a Gradient. Okay. So what we're gonna do is scroll down there to row overlay Okay, and for the row overlay, what I'm gonna do is click into it select black and then I'm gonna select maybe 15% In opacity and that's gonna add sort of a darker background to the background image for the background slider to make that white text pop a little bit more because on mobile devices it might actually cover the image You know because on desktop as you can see, it's it's quite visible If you actually put it on the left hand side But on mobile devices are going to be squished together and it's not gonna be as visible. So we add a little bit of You know black to it. Okay, and then that will make a white pop and then cuz I'm done Scrolling down to the next section here you can actually double click the V column and then click on padding and What you can do is just extend the padding to maybe 30. Okay, I think that looks okay Do the same for the next row? Okay, the next columns. Alright? 2:30 and Then the next one that will click padding To 30 as well so for example if you don't want to actually Display the categories what you can actually do is here you can actually for this row You can actually set the visibility settings So if you actually go to I think if you go to here the three dots you can set the visibility okay, so you can click on visibility or you can go to the The options here and then set it here. Okay, so you can actually hide it on mobile devices Alright, so on mobile devices you carry your section won't actually show and then you can click on done Scrolling down you can do the same for the blog because you know, you might not want to display something like that But I'm just gonna leave it as is okay And for the next section here, we want to double click the column again and maybe add a little bit of padding to it okay, so maybe 25% and 25% for the bottom something like that looks quite nice and here you can double click this text module and Can click on styling and you can add some padding as well right to the top? Another option that you can actually do is you Can actually let's just say we, you know, click on 0 and just set it to 0 padding click on done You can actually hover over the row and you can set the column direction here so for example on Jim shark, ok if you sort of Minimize the screen you'll see that you know this thing here it moves down here All right, so you can actually do something like that for your website as well. So Go back here, you can change the column Direction like that and Instead of you know adding padding to the text. You might need to add padding to the button here All right, so you could let's say for example add some padding to the bottom So maybe 5% Okay, something like that and then click on done Okay, so once you're happy with it Then you can also play around with the different settings for tablet landscape and tablet on portrait You can also change the text size as well. So any time that you actually on? the mobile setting here you can actually, you know set in anything and then you know It will actually change specific for that device, right? So for example, you can click on font and you can actually, you know, reduce the size of the font Right to maybe a 14% ok 14 and then if you click on the desktop, you'll see that the size is back to the default 16 Okay, so we can click on save and close it now The next section I'm gonna show you how to add in is the social media section Down here. Okay, and then I'll show you how to customize the footer section as well as adding in the free shipping Ok, the notification thing which is I think this part is one of the most important parts. So make sure to keep on watching Let's head back to our dashboard Make sure to open up all your social media accounts okay, for example YouTube Twitter Facebook Instagram and then what we want to do is we want to go to the themify shop themify settings and We're gonna paste in the URLs Okay, so we're gonna click on themify settings. Okay, and then go to footer social buttons alright and Here you can select the banners that you want to display alright, so for example twitter and Then we're gonna copy over the twitter profile URL and then we can just paste it into here okay, so When people click on that, it's a little link here, right and then same for the Facebook Okay, so I'm gonna copy over my Facebook page Paste it into there and then we've got YouTube Okay, so copy that make sure to subscribe for more videos and then paste that in Instagram You can paste in your Instagram profile URL. Okay, and then once you've done that you can click on the Save Okay, now we can open our website in a new tab to view and see how that goes alright Okay, so that looks really really cool. Really really awesome Okay, let's say if you want to put you know, your social media links just down here as a widget You don't want this section, right? So you can't do the same thing Alright, just go to social links here. And all you need to do is to paste in your Your link URLs. Okay, and For each section. Okay, and you can also add link. Let's say Instagram is not here You can add that in and save and then all you need to do is you need to go to appearance widgets And then here on the left-hand side you need to look for Themify, themify social links. Okay, click it and drag it and drop it into the Below for the logo widget. Okay, and that will display your social media links just as sort of very Small icons here. Okay, but I like to look at this because it looks really nice and modern I guess I'm gonna leave it as that Now what I'm gonna show you to do is how to sort of customize the footer layout section Okay. So what we're gonna do is we're going to first add in a a payment Okay a payment thing so what got to do is go back to our settings and let's just Remove this part first power back WordPress and also the logo and then we will add some icons there okay, so go back to theme settings and Then you can click on footer text and you can hide footer text - okay So you can change it your text and stuff like that. If you want to we're gonna leave it as is okay, save it and then we're going to go to The theme appearance. Okay. So here you can actually change the header design to different designs for your header Alright, and you can also play around with the display settings of what you won't want to display in your header section But we're gonna scroll down to footer design and I want to exclude the site logo and you can exclude you know the back to top button and Things like that. For example, this one here. You can exclude that. Okay, we're gonna exclude this Save it And refresh Scroll down and you should have a really nice and simple footer design alright, so we're gonna go back here to our dashboard section and What we want to do is go to Themify shop click on Builder layout parts. Ok, so we're gonna build a new layout part that we're going to paste in essentially, ok, so click on add new and We're gonna label this payment icons So, let's just close all our social media Ok, so here we're going to label it Payment icons alright, and then we can click on publish and Then what you want to do is click on View Post We're going to edit the layout part from the front so we can actually see what we're doing ok, so we can turn on the Builder and Here you have the same thing like a row and you also got the columns so what you can do is you can Click on the plus here, and then we can drop in an icon module You can set in the different size of the icon so we're going to set it as normal for the icon background style set it to none and Here you can select the icon. So click on insert icon and We're gonna look for the payment icon so I'm gonna click on brand and We're gonna try and look for some payment icons. For example, ok, so American Express or MasterCard, I'm gonna go and click on visa first to get the first icon and then I'm gonna remove the label so delete that okay, and you can click on add new icon and then here we're gonna set it insert and click on brand and Then this one we're gonna select MasterCard and For the logo color for the visa one. I'm just gonna set it as default Okay, just a normal gray neutral color which works really well with any website click on add new and Then here we're gonna do PayPal so you can also search for PayPal Okay, you can search this one here or this one. It's really up to you I'm gonna do that one and then we're gonna click on add new icon Insert icon This time we're gonna try stripe. Okay, we're gonna insert that one there. Okay, so you can try and insert All the icons or all the payment options that you offer, but I think this is good enough and then we're gonna click on done So once you've done that then I think what you can do now is just to click on save it You don't really need to edit the styling of it. We're going to put it into the footer widget section But you can also change, you know the styling if you want to it like you can align everything to the center Okay, you can even add a background color, which is something I'll be showing you in another You know another few minutes. Okay. So click on save and then Just close it Right, so you have the payment options here. All right, so we need to go back to our Back-end or the dashboard. Sometimes the dashboard thing is not gonna show up. Okay, you can't click on it Okay, so you can either just go back to your home page by deleting the URL okay, and then and then the dashboard toolbar will come up or you can just turn on the Builder again and then you can Click on back end and that's gonna take you to the back of the website It's gonna take you back to the themify layout parts copy the shortcode Okay, so this is a shortcode which you can paste in anywhere and that will display this specific layout part Make sure to update and save it and we're gonna go to appearance and then we're going to go to widgets All right, so what we're gonna do is just drop in a normal text widget yeah, and drag it and wiggle it up to the top and drop up below for the logo and Then here pasting that shortcode. Okay save and then click on done So if we go back and refresh our page Then we should see some payment icons show up, which looks good That looks pretty good. Now. What we're gonna do is add in something like this. Okay So here you'll see that they have a notification that says You know free shipping or free returns same with the website iconic Okay, you've got free shipping fastest delivery and free returns and you've also got this section up here So it's a little bit muted the design. Okay, so it's very very minimal and it's like a You know secondary header All right So that's what I'm gonna show you how to do it for your own website So you can have you know, the best designs in the world So we're gonna do now is to create another layout part, right? So themify shop themify builder layout parts and Create add new So this one is going to be let's say I Think free shipping. So just label it free shipping It's just for your own reference. All right, and then you can click on publish and Then we're going to build the layout on the front end Okay view post Turn on the Builder Alright, so what we can do is add in a simple text. So just drop in a text module into there and Then here what I want to type is I'm just gonna copy it from here. Okay free shipping when you spend more than $75. All right, you could do anything that you want really? So paste that in okay so once you have that text there you can click on done and I want to set the background to be black or dark, grey, sorry and then we're gonna double click on the row ok styling and then we're going to set a background color and this time we're gonna try and set two to two which is a a Dark, grey. All right. Okay, and we got to make sure that the text is visible so you can click on font and It can change the font color to white. So anything within that row The font color will be white That is looking good. We're also going to align it into the center like that and Then we're going to click on done So as you can see, if you click on preview, you'll see that there is some spacing there, right? So we're gonna click on that again and we're gonna click on the text module double click styling and instead of padding we're going to be adding in or decreasing the margin so emergen is basically like spacing but it sort of Impacts for example the text module when we hover over it You'll see the blue box around it margin impacts the spacing outside of that box that invisible box Okay, so let's just say for example, we do like a hundred a hundred pixels That's going to add 100 pixels Outside that blue box that I'm hovering over right now Right if I actually do like for example on padding, I do like a hundred pixels Right, it adds the spacing inside that invisible box So as you can see the blue box that I'm hovering over it adds spacing inside that box Alright, so this time we want to decrease that spacing inside that blue box, okay What we could do is we can - some margin right we can do - maybe Five maybe that's not enough. Maybe Ted something like that Okay, so you can do - 10 pixels to the bottom and that's gonna decrease the spacing Okay, you can let's also try and add maybe two pixels to the top or maybe three pixels to the top like that Okay, I think four is pretty good or let's say five Okay, five is good and then you can click on done and Then you've got a nice layout here which looks something like that okay, so you can also, you know change the size as well if you want to make it a little bit smaller, so Let's change it to 14 Something like that. I think it's perfect click on done and Then we are Let's just decrease everything. Okay the padding. I mean the margin a little bit let's do 3 This one 11 okay, so it's really up to you and what you know font you're using but I think that looks good So save that and then we're going to go to the backend And what we're gonna do is paste in that short code into a hook area, right so copy the layout part to your clipboard and we're gonna make sure you update that and they what we want to do is We want to go to the themify settings to the whole content area So let's just wait for that to load Okay, so go to themify settings and Then what we want to do is click on hook content and then here you can see the hook locations so you can add content to anywhere on your website, which is Basically not a place where you can sort of Turn on the Builder and edit. Okay, so these are in different areas okay of the website so you can have the free shipping thing in different areas, for example We could have it before And you can have it after you can also have one before and one after for example like this one before one laughter So it really depends on what you want to do and you know how you want to implement. It doesn't really matter So here I want to implement this one header after okay. I want to go all the way across from left to right so click on add item and Then here I can select header after okay and paste In the shortcode and then you can also set in specific conditions Which you can set it to apply on certain pages or not apply. Okay, so you can play around with that We're gonna leave that as is Okay, and then we're gonna click on save Once you've done that then we can go back here and refresh the page Okay, so that looks pretty good Except I think there might be a little bit of a white border around there And if you want to remove that then to do that you can go back to the layout part so go to the MFI shop build all our parts and go back to the free shipping one and Select front-end and what we need to do is put in a negative margin on the row as well. Okay? So here click on the row okay styling Margin and here for the bottom Set it to negative 2 or negative 1 I think maybe negative 1 will be enough or two click on done Save it and Then we can go back to the backend and that should have saved so we're gonna refresh our page and view that again Ok, so that's looking awesome, right? so the next section what I'm gonna show you is the WooCommerce settings which includes the payment options the coupon codes the shipping and All the important stuff like that so you can actually start accepting payments Okay. So let's hover over WooCommerce and we can click on settings to edit all the payment settings and all the general settings for your store so here in the general tab you can set in your store address and Set up your selling locations so for me I'm just gonna leave everything is You might want to limit it to maybe just your local country if you want to and that's where he can do it You can enable the coupons and also the tax rate and calculations here We're gonna leave everything as is for the currency options. You can set your currency in here and then click on Save Changes Okay, so you can go through each of these different tabs So for example tax should be automatically calculated because we set it up To connect to jetpack which will actually automatically calculate the tax rate based on The shipping addresses. Okay. So here are all the settings which I normally leave default We're going to click on the shipping tab. Okay, so this is where you can actually set in Specific zones and specific prices for each zone. So let's say for example in Australia You might be in United States India UK We can set in a for example, we can add a free shipping rate as well. So you can click on edit and Here You can add in another shipping method. Ok, so add in another shipping method for example free shipping and Add that in so here you can click on edit and if you have a minimum order amount you can set that in so a minimum order amount of let's say $75 because that's what we put in okay on our home page, so Save Changes You can also rearrange the order like that and Let's say you have a free shipping. You might have a flat rate, which is $10 Okay, you might have another one which is maybe Express. So it may be Express next day delivery so you can click on add and select flat rate again add that in and Then for example we can set in a specific price for this one. So this one might be Express Shipping all right and the cost might be $20 instead and Save Changes So you might be let's say if we go back to shipping zones here All right, because as you can see the zone name is set to Australia It might be set to you know Oceania, which is Australia, New Zealand So you can actually add in another region as well If it's sort of the same price as that you would ship to anywhere in Australia you can add in that region so you can click on edit and We can here we can set in another region and I so click here type in New Zealand Okay, so for this shipping zone we can change it let's say Oceania And then this one is for Australia and New Zealand and all the shipping prices are the exactly the same So if example free shipping is also minimum order of 75, okay, and they can Save Changes So you can be a lot more specific as well to be specific zip codes or specific States if you want to Because sometimes the shipping cost might be different right if we click on zones here You can also set in locations not covered by your other zones, so click on manage shipping methods and Here so here is all the locations not covered by the zones that you set in before alright, so For example, this might be let's say, you know $20, ok, so $20 and then Save Changes Right. So if people are from a different country other than Australia and New Zealand for example United States the flat rate for United States and other countries is $20 or whatever you put in here. Ok, so you can add in additional methods for example free shipping as well but maybe this one it might be a minimum order of $100 ok, Save Changes And then you can put it up there right and click on Save Changes So I think that is pretty much it for the shipping zones, you can also click on shipping options as well So let's click on options and see what we can change Okay, so here you can actually Set in the settings on you know, whether or not you want the shipping calculator display on the cart page. All right so what that means is if we Visit this store And then we click on the view Cart So here if you actually set in to hide the shipping cost until the address is entered Then this won't show up here So you can change the display settings here and also the shipping destination Is it set to default billing address or is it set to shipping address that the customer will actually put in? When they proceed to checkout, okay, so normally I'll leave everything as default shipping classes. I'll cover in another video Okay, so that is if you have like a heavy item then you can set in a specific price for specific Products. All right, if we click on payments here is the most important part and Automatically it should be set up if you have a PayPal account if you entered in your paypal email already Okay So you can actually enable all these different options here for example direct banking transfer cash and delivery and all that stuff here But the most important one is PayPal checkout. Okay, click on manage So here make sure it's checked right and for your payment email make sure that is your Paypal email here so you can scroll down here and Here you can change the display settings of the button All right, you can just change the display settings of the button. For example if we go here Okay, let's say if we go back okay here you can change the display options Alright, so you can change the color and things like that. For example, if you want it blue, then you can have it blue I like it gold right and You can also disable the PayPal button on a single product. So for example if I click into the product then here you'll have a Buy Now button, right so Personally, I'm gonna remove that I was really up to you if you want to make it more convenient or not. I'm gonna disable that Save Changes And then Refresh Okay, so that's gonna disappear Okay, so you can enable or disable that and then once you have set the settings here then you can click on Save Changes Okay, if we go back to the payments you can click on this back So you can also enable PayPal standard, okay, so this is the most standard payment Method so this won't allow people to actually check out automatically what? This one actually does is that it allows people to check out automatically and then it will take the address Associated with their PayPal account and then just use that as the billing and shipping information right if people click on proceed to checkout then For example people will need to fill in the billing information right But with the Express Checkout here It allows people to automatically check out directly with PayPal so you can enable the PayPal standard if this isn't working for you so enable this and disable this and All you need to do is you want to make sure that you actually have your paypal email in here okay, and That is pretty much it Okay So if you want to also enable Your refunds via PayPal you need to click here and then you'll learn how to actually get to your API Which you'll need to paste into here and then Save Changes so here if we click on the accounts and privacy Here you can, you know enable guest checkout as well So you can allow customers to log into an existing account during checkout. You can also allow a account to be created once they actually checkout So this really depends on you and what you want to do so here you can create a privacy page and select your privacy page and Then click on Save Changes Okay, so let's click on emails here is where you can actually set in the specific branding colors for your email notifications for example the new order that you receive and maybe a Order confirmation that the customer will actually get. Alright, so you scroll down Okay here you can actually change the colors and Branding things like that here and then click on Save Changes alright, so that is pretty much it for your settings so we can actually go to maybe the coupons area and I'll show you how to create a coupon really quickly. It's really really simple. So I'm gonna close that tab on top Okay, create your first coupon or add coupon up here So for this one we might do like, you know save 30 I guess. So people if people enter in save 30, they'll save 30 percent, okay So here you can select the discount type. Okay, so I'm gonna set in a percentage discount So it's gonna be 30 percent okay toy can be a specific amount and here if you tick it then it will grant free shipping and You can also set an expiry date so it's gonna end on the 31st Usage restriction you can set in a minimum spend maximum spend and also set in usage limits So you might limit it per per person so you can do one, you know, actually this one is per coupon So let's say for the save 30 it will actually only allow 30 people to use it before it is up Okay, here is actually where you set the limit per user Okay, so you can set that to maybe you know 3 so it really depends on you and how generous you want to be and then you can click on publish and Then people can use that coupon code. So I'm gonna do a sort of a Transaction with you guys. Okay, so normally you can actually do some go the settings and you can enable PayPal sandbox, but I think that's Probably a little bit takes longer than you know, just actually processing a real payment So maybe get a friend's PayPal account or credit card? Or maybe you have a family member and then what you could do is just let's just log out the page I've also actually set in the e-book to just a dollar. Okay, so you can do that as well Just change something to a dollar or make a really big coupon. So let's say people go to the shop page They add this ebook to cart, which is a dollar which I've set in just then okay and people can view the cart Okay, so people can apply coupons so let's say save 30 apply coupon and That's gonna apply 30 percent. Okay, which is a 30 cents here You can check out directly via PayPal or we can proceed to checkout. Okay, so let's just proceed to PayPal automatically and I'm gonna use my other PayPal account Okay, so I'm gonna select my other one and then click on login to pay Okay, so as you can see on the bottom here people can actually select a debit or credit card so people don't necessarily have to have a PayPal account click on continue So once that is done Okay, here is an overview of what it looks like. Okay, and how much you're paying and then you can click on place order? So this is a a book so it doesn't really take a address because you don't need one because people will be Directed to the download page directly and people can download the e-book to their computer instantly So here for example the order number the date Payment method here is the e-book and here is the download link. So people can click that Alright and they can download that to their computer. Okay, and then click on save and That's good to go, right Okay. So here is the email that your customer will receive your order is complete and people can download that to their computer as well with the link here and then This is the order that you'll receive. So it says new customer order So it shows what has been ordered. So that is pretty much it for Your payment options and you can pretty much you know launch your website right now but I'm gonna show you a couple more things to make sure that your website is completely finished and Good to go move on to the next section This is actually where you actually manage your orders. So you click on route commerce and click on you can manage the orders by clicking into the order and It shows all the details. Okay that you need to do and also you can choose the actions here you can also Set the status. Okay, so this one's completed because they've actually received the Product and also they're paid already you can set the status. You can add some notes an update. Okay, you can also click on reports This is where you can view your sales reports and things like that You can view the last seven days or this month. You can also, you know view your customers stock Taxes and everything that you need here, right? So the next part is we're going to be adding in the rest of the pages So I'm going to show you how to create a simple about page a FAQ Adding the post to a blog page and also adding a contact form to your contact page. So we can click on the about page and We can turn on the Builder and we can create a really really simple about page in just a minute So let's say for example you want, you know, two columns just like that one image here Maybe a image of your office and some text here. Okay, so Let's drop in a image module Here we can delete the image URL and then click on browse library upload A image but we've already uploaded an image which is this one here. Okay our team insert and That is pretty much done. Okay, so we can click on done to add in some text We can drop in the text module or this time. I'm going to use a fancy heading like that and then this one here, I might do you know about for the subheading we might do Our story and then we can click on done Then we drop in a normal text module Here and then I'm gonna go to my demo site and just copy over some dummy text Okay, so we're gonna put that in and There you right click and click on done So what we can also do is align the column alignment if you hover over the row Set it to something like that. Okay, which looks good. You can also change the layout. Okay, we can click on save and you Can view whether or not you like that or not? You can also use a really cool feature, which haven't showed you yet Which is if you click on the plus icon here, you can also add the modules But you can also add in rows which have been pre-created so you can actually use these rows to help you speed up the process of Building the layout of a page, okay The reason why I didn't show you earlier is because I wanted to show you guys the basics of how to use things Otherwise because like sometimes when I follow like Photoshop or after effect tutorials, you know, they import templates But then after a while like I don't understand how to use it, and I don't enjoy Actually using it. Okay, so, you know since you know how to build everything now you can you know just insert that like that and That will add the call to action section really easily. Right? So you can easily change the text you can easily double click styling and change the background really easily and create an awesome awesome layout okay, so I'm going to leave it just just like that and then click on save and then Close all right, so I think that looks ok So what we can do now is we can click on the FAQ page. So the FAQ page is actually Set in right now as a wish list page Alright, so the first thing we need to do is actually change that right. So if we go to our dashboard section we need to go to themify shop themify settings and We want to go to the shop settings Wishlist settings and we can disable the wishlist if we want to or we can make sure that we set it to wish list page All right click on save and Then we can visit the site And Then go back to our FAQ page Here, we have a blank canvas to work with so the FAQ page is a page for maybe your shipping and returns or refund policy or any frequently asked questions that your customers might find useful, right so you can turn on the Builder and I want to show you a different module So let's maybe change the layout to let's say this one here Okay, so it's got one column on the left one big one in the middle and smaller one on the right So here we can drop in let's say a text module on top This one might be called Frequently asked questions right change that to heading one and Then click on done. Okay, so we might want to Make it a little bit bigger wider. Sorry Okay, so as you can see that text is a bit long so let's double click it for a second Go to styling Heading heading one font and let's just change the font size down a little bit. Okay, so let's just try out 48 Okay, maybe let's try 60, okay click on Done. I'm actually going to go to general font Align to the center as well So now we want to do is I want to drop in a accordion. Okay. So this is really good for a FAQ So drop that in so here you might have you know, how long does it take to ship? Right. So this one might be a question and here is where you put in the content. So here you can type in Normally between two to three weeks For local Delivery's and then you can do international Three to four weeks Something like that. Okay, and Then you can add in a new accordion by adding in a new row Okay, so that's gonna add a new one and then you can put in a new question and a new answer so let's just delete that for now and Then here you can change the appearance so normally, you know a transparent one is good, right and Here you can also add in a closed icon and an opened accordion icon so let's say for example, we click on done we save it and Let's close this section here Okay, if if someone clicks on that Right get opens up like that, right? You can keep it really simple like that or we can add an accordion Icon, so let's turn on the Builder Double-click right scroll down to the closed accordion icon. Okay, so when it's closed we can insert an icon So, for example, I want to look for maybe a Arrow or something like that. So it might click on directional. So I'm gonna select maybe this one here angled down So it gives the indication of that if someone clicks on it Then it's gonna open downwards right and if it's opened then we're going to insert an icon okay, click on directional and We might do angle up. So if someone clicks on it again, then it's going to indicate that it actually closes up All right, click on done Save it and Close it So we're gonna click on down Ok, and then it's got the icon that goes up like that so here obviously you can add in some more accordions and You can also align it to the center and add some padding to make it look really nice and really good and polished. Ok So you can do those things and now we're gonna click on the blog Okay, so the blog page is where you can display all your blogpost, right So here we can turn on the Builder so here you can default, you know, you can just drop in maybe a Post module so let's look for the post module drop that in and you might just display it as a grid all right, and you might display the post content as I mean, sorry, the Display as none like that and you can display all your blog post like very similar to the one that you see on Jim Shaw or You could do it like, you know a normal blog like a blogger right can do the post layout like that and Then you can do the display as excerpt that Is pretty good ok click on done if you want to have a sidebar section here you can hover over the row and We can select the layout to it like that. Okay, so that has a sidebar section here to add your sidebar Ok, hover over the green drop in a widget eyes module Widget eyes area set that to a sidebar. Ok, the default sidebar click on done Right, and that is looking very very good you can click on save and I'll show you quickly how to actually edit the contents of your sidebar section Ok cuz you probably don't want to display your meta and Some stuff you don't want to display and I'll show you how you can actually add in more stuff that you want to Let's close it Alright so here you can go to the widget section directly Alright, so what I like to do is open it in a new tab again, ok, I probably shouldn't have closed that one Let's go to the blog again All right So this is sidebar widget area and here are all the different widgets You can drop in any widget that you want into the sidebar section just like you did for the shop sidebar. Alright So here I want to remove the metal. I Also want to remove archives recent comments, right? So we're going to remove the metal Remove the archives remove the recent comments just like that and Then if we refresh that blog page again You'll see that the widgets have been removed all right So you can pretty much do anything that you want so you can also add in Let's say you can also add an image if you want to You can also add in You know the recent post you can also add in maybe the most commented and you know your social links videos Anything that you really want you can put in here you might add in an image as well of the author a little about Me section by dropping in maybe a Text okay, so you can do all of that stuff, which should be pretty easy to do But right now we're gonna leave it as as that All right. So let's click on the contact page and I'll show you how to edit and add in a contact form So before you add in a contact form, you must have the contact form 7 plug-in installed, which I showed you earlier in the tutorial Normally if you have it installed you have a contact thing up here you can click onto that and Here you'll have a default contact form 7 okay click on edit And Here you can edit, you know, what is displaying in your contact form I like how it's displayed already. We can add in additional things as well okay, click on mail and what you want to make sure is that your mail is set to your email address here and Then you can edit the messages and stuff like that right and then just click on save So what you want to do is copy the shortcode here and for your contact page turn on the Builder and You can change the layout to that one. Let's just drop in a text module Let's do something like Contact us Change that to heading1 styling Fonts maybe move that into the center like that and Then you can drop in another text module and then just paste in the shortcode Something like that. Okay, you can also align everything into the center by double clicking styling font Align to the center just like that. Okay, so you can add maybe a little sentence about you know, whatever you need to do, or you can link them to a The FAQ page because sometimes you know, it might be already answered already So you can do that and you can close that Okay, so we're pretty much created all the pages and We are good to go. But one last thing before we finish off I want to show you how to Configure a mega menu. Okay. So a mega menu is something like this. Okay, so it's really nice So people can hover over each of the categories and it can show the products like that Okay, and also you can implement just this simple menu Really nice and simple and I'm gonna show you how to do that right now. Okay, so let's hover over appearance and click on menus and Then the first thing that you want to do is you want to click on screen options up here, okay, click on the drop-down and Here you want to select product categories? okay, so that's gonna enable the product categories here so you can actually add that to your menu or answer select product categories and As you can see that adds it there now if we want to customize the top navigation you want to select it here So click on select and that's gonna change Okay, so currently we have the shop page on the main navigation But we want to add in women's or and men's okay So yours might be a different category, but I'm gonna show you how to actually do it. So Here we're gonna look for product categories. All right You can click on women's and then you can click on men's Ok, and then you can add that to the menu All right, if we save the menu and We're gonna open up a new tab to view that menu Ok, so that's just going to create a link to the men's and women's category All right. So if you click on that, it's gonna take you to the women's product category Click on men's it's gonna take you to Men's. Ok. So it's that simple, right? so if you want to implement a drop-down or a mega menu Then let's say for the women's category click on the drop down arrow here You can select mega menu make a posts Okay, and we want to have maybe The dress to drop down from women's. Okay, so add that to menu Okay, so for the dress category you want it to you want to put it under the women's category like that Alright, so it's like that normally you want to drag it and put it under the women's category same thing for the jumpers add to menu and Put it below the men's category, right So here you've selected the mega post here. We have just left it normal. Okay, so we're gonna save the menu and We can sort of refresh the page and see how that looks Okay, so if you hover over women's the dress will pop out like that So you might have different categories as well under here. Okay? So for now we've only got one obviously and we don't have many products, but you can see the image is cut off Okay, I'm gonna show you How to make sure that is nice and crisp if we hover over let's say men's let's just refresh the page again Okay, then jumpers is gonna pop out like that Right. So this is a just a nice and simple menu so you can implement that or you can do a mega menu like that all right, so Let's go and save that menu and Let's go and edit the settings for The image. All right. So let's go to themify settings Okay, and now let's go to the theme settings I think all right and look for the mega menu tab click on that and Here it will say displaying five post. Okay, so leave that as default but here is what we need to change, right? So if you remember the image size that we put in before for our product image is 800 by 800 Okay, so we want to divide 800 by 6. Okay. So 800 divided by 6 is 150 Divided by 6 for the height as well. That is 150 Okay, and then you can click on save? Right, but let's just say if your product image is 600 right 600 by Maybe by 800 then you would divide that by let's say 6 again. So you have to divide both sides by 6 Okay, so that ensures that the size that you put in here is 100% proportional so you can't divide by 6. It'll be a hundred Eight hundred divided by six will be 150. Okay, but Alice is a square image. So we're gonna do 150 by 150 okay, and then if we save it and If we go back here and let's refresh the page Okay, if you hover over women's hover over dress yeah, you'll see the image looks really great now and people can click onto that to direct them directly to the product page All right. So what I'm gonna show you now is how to actually Set in the logo the favicon and how to change the colors and fonts for Anywhere on your website. Alright, so we're gonna set in the colors and also the fonts for the website Alright, so to do that, what we could do is we can go to customize and Automatically that's going to take you to themify options click on Advanced Options Ok, so you can get more options to style specific areas of your website Alright, so the first thing that we want to do is choose a main font for our website, right? so if we actually go to websites, for example, like Nike or Apple, okay, you can download a Chrome extension called what font and Then you can click on it to actually activate it and you can hover over you know, what fonts they're actually using right The same with Apple you can turn that on and you can see what font they're actually use for the website So what you can do is you can open up Google and you know, you can search up, you know similar Google Font to okay. So let's just say for example, you were looking at the Apple website and it was SF. I Think that was SF Pro, okay, so here So here like a lot of people will be asking like similar questions because a lot of people want to know Okay, what fun is Apple using and you know? What font can I use for my website but normally the font they use our premium fonts, right? so the fonts that are included within this theme are Google, fonts and google fonts are really good as well They have I think over 600 different fonts. You can choose from so you can search that up and click into the result Okay, so Here are some of the fonts that you might Work. Well, okay, very similar typefaces that you can use right? So in general there are two Different typefaces. So for example the first one is San serif now this one has plain edges on the side and also The strokes are even with so it gives a more modern simple and clean feel Websites like Nike Apple Tesla and most modern websites that you see will be using this typeface All right. So these are some of the recommended ones that you can go for Okay so you can choose one of them or perhaps you might go with a serif typeface which has curves on the edges and Thick and thin strokes, right? So it gives a more class call traditional look So for example, if you are selling maybe something like this like bed linen Then you might go for a classic typeface for your fonts. Okay. So this one has you know curves on the edges Different widths as well in their text. Okay, so it gives a different feel right, but for most websites if you stick to a Sans-serif typeface and then it'll look really clean and modern So, for example, I'm gonna pick a font called Josephine sans, okay? So for your font, you can click on body font here you can set in let's take Josephine. I Think that's how you pronounce it. Hopefully, okay, you can set that in and Generally, you don't need to have too many fonts on your websites and make it professional if you have one I think that is Good enough, and it actually looks a lot more sort of consistent If you do have just one because I see a lot of websites they have, you know, three or four different Fonts and a lot of different colors and it doesn't look really professional So sticking to one will ensure that your website is really nice and professional. So here I'm gonna set the font weight to 300 Okay, so you can change the font weight which is so the boldness of the text Okay, I think that looks really good. Right and also want to set a body link color So a body link is something like this. Okay, so it links to something. Alright So for the body link, we're gonna stick to a very very neutral color. For example, like Apple and Nike okay, so they're using just a dark grey Sort of color scheme for the website It is really good for e-commerce because it just you know brings the attention to the images and the products itself You know rather than focusing on the theme of the website and it just looks a lot cleaner and simpler It's also a lot easier to design especially if you're a beginner sort of Designer because you know if you have a neutral, you know, look for your website then you know It's gonna be a lot easier to match your images, right? So let's just say for example, you know if you have you know, a red header like a red background for your header It's gonna be a lot harder to match with this blue. Okay, so I'll be showing you that in a sec So for the body link here, I'm gonna be entering a dark gray so you can enter in the same one Okay, two two two just like that. And for the body link hover, okay, we're gonna set it to be three three three Okay, so it's a slightly lighter version. Alright, so when people actually hover over a link Then it's gonna give them some feedback, right? You might make it a little bit lighter if you want to but I think that's fine So for example, if you go to Apple when you hover over it It goes a little bit darker and it gives a feedback that you know, it is a link. Okay, so you want that feedback? Okay, so what you could do is if you want to you know Make sure that everything is consistent then just ensure that your your link color Okay, so whatever link color that you have in here, you can copy it if I go to a website called 0 to 255 entering the color code here and Then here you can choose either, you know three shades lighter Okay, copy that code or three shades darker than the base color. Okay, so that's going to ensure that You know, you are keeping it all consistent here click on accent styling So as you'll notice that you know, the accents selling right now is like yellow theme, okay We're going to set in a neutral color theme So for the background color for the accent color, we're gonna set it to the same one as before through two to two and For the font color. I'm going to set it to white okay, if it's actually like, you know six F's you can just type in three and it sort of Auto populates the rest of it and then for the background hover color, we're gonna set that to 333 as well and Then for the border color here, we're going to set it to three three three Okay, and Now when you actually hover over it Okay, you'll see that it still has a yellow Hover over color. All right, so - that and What we're going to do is we're going to click on the header For the background wrap? Okay. We're going to keep it just as white nice and neutral for the header link We're gonna click on that maybe and you can actually change the color there or just leave it as is but for the headed link hover, I'm gonna change it to 3 to 3 and then that's gonna give the The gray hover over effect color. Okay, so I think that looks pretty good for now So if we look at the page down here the footer section I'll show you how to configure that section there if we scroll down to the footer section Okay, so this is a link. Okay, so it's a footer menu link. I want to change the footer menu link hover Okay to the same hover color. Okay, keep everything the same So when we hover over that that will be okay pretty nice Okay, let's scroll back up. Let's check everything Okay, so if we hover over this this is a blog post title. So we're gonna go to post and then we're going to go to the post title hover and I'm gonna change the color to 333 again okay, so try to keep all your Hover over colors the same. Alright, and that ensures everything looks good. Let's just - all of these close them all up Okay, so here if you click on the heading this is a heading 1 tag Alright, so you can change the heading 1 font here universally. So for example, you can change it to Joseph in sands like that and it will change for all the heading 1 fonts Wherever you've set it to okay. So for example you you've probably set that to the contact page as well That you've changed that as well, right So I'm just gonna delete it and leave it as the default because I think that looks pretty cool. That's up to you so I'm gonna change that to normal as well and Then here you can also change the forms as well So what is the forms right if you actually let's say we go to a blog post or? If we actually go to the contact page, okay, this is probably a better example. So here is a form, right? So let's just click on the contact page here Okay. So this is a form here. You can click on forms here is the field so you can click on the form field and what I'm going to do is I'm going to deselect apply to all borders and For the bottom border. I'm going to click on solid and I'm gonna choose a color so the color that I'm going to choose is a a E and then click on the outside and I'm gonna set it to 2 pixels in width alright For the border on the top left and right. I'm gonna select none Like that Okay, so it just has a slight border on the bottom and Then people can type in whatever they need. Ok. So then once that is done, I'm gonna click on publish Alright if we actually hover over the send button You'll see that the hover over color is yellow that gold color again? what I want to do is click on form button, hover and change the color to a EE as well Okay, and then click on the outside and then when she actually hover over that Then it gives just a slight effect as well, right you can also change the Sticky header. So if you actually scroll down on the page, you'll see that the header sticks there You can also adjust the sticky header as well if you need to right to change the logo We're gonna minimize everything Okay, you can click on site logo and tagline site logo and here you can change the text okay, so let's just put it as your then sans again and Then let's just say we put it as bold so you can do that as well which looks really cool and nice and You can also add in your own logo image so you can click here and upload it. You can resize the image here What I do recommend to get a logo is to go to fiverr.com so I'm going to leave a link down in description below to go to fiver and You can search for like logo design and you can get you know designs for from five dollars a piece, right? so here are some excellent people who do logos and you can filter them on the left and You can also ask for a fab icon as well. So the favicon is the icon that you see here and you Can change the logo position and things like that? You can also change the site tagline Okay, so I've changed it to create an online store in under three hours. You can also select none so if you don't want that there so for example, let's Click on site title when you hover over that you'll see that the tagline there. Okay, which is cool so I'm gonna keep that there and You can also edit the mobile menu. Okay. So this is the mobile menu section and this will drop out okay, so the link color is The menu link hover color. I'm gonna set that to 333 as well. So that's looking awesome and you can obviously edit, you know any section that you want so if we go back to the Desktop display. Let's just click on main navigation When you hover over that you'll see that the drop down is still yellow color so that is a drop down link Hover color. Okay, so you can change that to three to three and You'll see that the color will change as well Oops I added in as the background color you meant to add it in as the just a link color. So change that back and There you go. Right so I think that is pretty much it for now Okay, so obviously you can change it for all the different sections on your website and you can play around with these settings so ultimately keep it as just one font family and Try to keep things neutral when you first start out So if you do want to add some color to your website, for example, you want something like this Then what I recommend you do is go to a website called Flat UI colors, okay, and then click on a flat UI palette then you can choose a color here, right and Read up on some color meanings. So go to google and you know search up color meanings Okay, maybe I think this one here read up on colors because I think colors will really sort of set the mood for Your website, let's just say for example this one here. It looks really nice Alright, so choose a color that represents your brand and choose one main color just like they have okay so they haven't used like you know a million different colors because it's going to be really hard to match if you're not the designer and Then maybe you could have a you know A accent color which is like clear it like a red or something where you can actually use for something You want to point attention to and then you can slowly just implement it onto your website. Alright? So that is pretty much it what I'm going to show you is how to add in your favicon a week and actually add that in so you can close that and We can head over to the dashboard Okay, themify settings themify shop and Then here I'll click on that icon. We're gonna upload and then here you can upload your favicon. I recommend 64 by 64 and It should be a PNG file. Okay, and then upload that and save it Okay, and then you'll get the favicon appearing here so if you actually don't see many fonts again on your website, you can click on google fonts as well and Then you can also click on show all google fonts because sometimes the font that you want May not actually show up so you can click on that as well. Another thing that I want to show you is the search settings So here for example on your website right by default It will also search for your blog post and things like that. You can actually exclude let's say blog post and Pages and just include you know your products. All right, and then you can click on save So if you actually finish the tutorial Sometimes you might notice that you know, there is some updates available. Okay, so you can also email me at Support at Hoag intercom and I can send you the updated version if you want. You can also get the updated version as well so i'm going to leave a link down description, which will give you a Membership that gives you 1 year support and also updates as well for your e-commerce theme Okay But the website will still function if you don't update it because the theme developers are always adding in more features and more things to the website and a lot of people like to have Additional support then that's what the membership is for. Okay So if we actually go back to revisit our website We can scroll down have a look at our website. Everything looks really really awesome Really clean and simple, okay If you have any questions, make sure to drop it down below because I know that you know This tutorial is like three hours long there's still stuff that I Haven't covered because otherwise this tutorial will be like ten hours long if you have any questions leave it down below and I'll try to create maybe like a FAQ video and I'll post it all the links and everything in the description below. So one final thing I might actually You know edit the thing the link there It's a bit too thin for my liking so I'm gonna go back and quickly show you that's a main navigation link Okay here main navigation. So click on menu link and Then here let's just sit in the Josephine sands and Then also we're gonna set the font weight to normal Okay, so I think that looks a lot better for the top navigation. You can publish Close and the final thing that you need to do is log out of your website and view it and then you can Go to the home page start viewing it Okay, so you've completed the website looks awesome. Now you can start promoting it making sales Or you can help other people build their e-commerce stores hopefully I've saved you guys a lot of money and If you liked the video, make sure to give it a thumbs up and subscribe for more videos
