How To Create An eCommerce Website With Wordpress 2020 [ONLINE STORE!]

what's up everyone my name is Darrell and in this video I'm gonna show you all how to create this professional a beautiful ecommerce website step-by-step and you need to know a thing about coding or have any program experience whatsoever everything that's at Oriel is gonna be quick simple and easy now because i've always wanted to learn how to create your own e-commerce website for the very first time and you're kind of tired of the runaround then this tutorial is for you because by the end of this video you're gonna be able to create your own e-commerce website from scratch and you're gonna become a wordpress expert now as you guys can see this website is super clean it's professional and your visitors are gonna be really happy about coming to such a great looking website with really modern designs that's also really easy to navigate now if you look at this website it will look very similar to big online retail stores like Victoria Secrets Tilly's and also PacSun now we took direct inspiration from these companies and applied it to our own shop so you guys can be certain that your shop is gonna look really professional and really amazing now it really inspires me to make these videos because I've actually had people who created their own online store and it started to make thousands of dollars watching my tutorials so again it really inspires me to make these videos because of people like that and if you guys are really serious and you really want to build a clean and professional website that'll make you a ton of money then keep watching guys cuz right now I'm about to give you a quick tour of this website and show you what we're gonna be building in this ecommerce tutorial so this is the website that we will be making today and right here you guys can add in your own image you guys can also change this color to whatever color you guys want here we can add in our favorite social media icons such as Facebook Instagram or Twitter here we can go ahead and add in our logo now if you guys don't have a logo don't worry about it I'll give you a website where you guys can get a really clean logo now here you guys can go ahead and add in as many buttons as you want and you can link them to any part of your website in fact in this tutorial you guys will be actually given a list of templates to help you guys with design and inspiration because let's be honest you know creating a website from scratch can be a little hard but with this template library right here you guys can simply grab a template and add it to your website to get some really good ideas in inspiration for your website now with most other themes they don't really have this so this will make making your website very simple and very fast so going back here let's go ahead and scroll down so here we have a banner section and you guys can categorize your items so for example right here we have women's products we have men's products and we have shoes so if you guys are selling multiple items such as like a big store you guys can categorize your items right here that'll make it really easy for your visitors to navigate and right here we have a list of our products now guys this is a really clean setup in fact you guys can actually list your products on sale people can wishlist it people can also do a quick preview of it to see if this items for them or not here we have a list of products people can kind of scroll through the images right here you can give a quick description of the product and I'll also show people the category of the products here people can go ahead and add this to the cart and again you guys can always change the color of add two cards or this right here so you don't have to use these same exact colors you guys can use any color that you guys want so for example right here we click on add two carts and now the products here are added to the cart on our website and this is great because visitors can actually click on this click on checkout and have a very quick checkout process that will make you guys a ton of money so let's go ahead and go back to the front page right here I'm gonna go ahead and scroll down so the next section is product categories so again this is just some more engagement and encouragement for your visitors to purchase products so here we have women's products we have men's products and we have accessories now also in this tutorial I will give you guys access to a large library of images to help you guys get started because I know creating a website from scratch with Bill images is gonna be a little tough so I'll go ahead and give you guys some demo content next we have sign up for newsletter so this section right here will enable your visitors to sign up to your newsletter so you can start kind of gathering emails and even start your own email campaign so it's really simple someone here going to simply type in their email click on sign up and then there you go they are now stored in your database and you can go ahead and send them coupons and advertisements for your websites and again it's a really clean contact form it's really simple and you can be sure that people will sign up for your newsletter on your websites next we have Instagram everyone out there loves Instagram so I'm going to show you how you can import and live Instagram feed on your web sites so here we have these pictures of these girls you know it's cute it's sexy it's an you know it's encouraging and it basically you know kind of represents what your site is about so I'm going to show you how you can have a live feed of Instagram on your web sites to help people kind of be encouraged to buy your products right here we have a blog section so if you guys want to incorporate a blog on your website this theme makes a super clean blog so here we can kind of create articles that will encourage our visitors to buy products so for example right here we have what's hot in summer now someone clicks on it they can go ahead and read the article you guys can see right here it's a super clean article really easy to navigate and right here people can go ahead and share it they can also comment on it and all sorts of really fun stuff so right here let's go ahead go ahead and go back and right here we have our footer so this is a really clean footer it looks just like Victoria Secrets in fact so here we have the about Us section we have recent reviews where people can leave reviews for your products we have a newsletter sign up and we also have our Instagram feed right here at the bottom and below that so we have a list of paid methods people can actually use to pay us on our websites so right here this little blue button right here I'm going to click this and scroll all the way back up and next I'm gonna go ahead and show you guys our shop page now this is the shop that we'll be making today and right here you can add in any kind of image you want you can also change this text to whatever text you would like and you can even add in an overlay color of any color you'd like now this right here is a slider so people can actually slide through this to see any kind of promotions or any kind of sales you want to add for your e-commerce website now scrolling down right here we have list of our products now right here I have a list of 12 products and you can have as many products as you want for your shop page so if you have 100 products you can add a hundred products if you have 50 you could head in 50 however many products that you have now if I hover over the products right here you're gonna see a second image come up so I'm gonna show you how you can incorporate this for your e-commerce websites now also right here we have this quick little banner letting people know our products are on sale and also any new products that you have it's going to displayed right here on your shop page your visitors can also click on this little add to wishlist so they can you know kind of come back next time to see up that product you know if they want to buy it later or not now also we can click on this quick view preview so here they can kind of you know navigate our site very simple very easy and again they can go ahead and set a quantity amount and add it to the carts now right here we have the option of sorting by popularity by average rating or by newness or from prices from low to high on the left side right here we have a widget box right here so this is where all the widgets are where we can add different various features for our e-commerce websites so for example right here people can search for certain products they can filter by price so if you have visitors that are on a budget they can filter by price right here and also right here we have recent reviews and we have recently reviewed products recently viewed products and then also we have product categories so let's say for example your visitors only want to see women's products they can click on women's and all the products for womens are going to be displayed on your page making it very easy to navigate and very simple now I also want to talk about what kind of products that we making today in this ecommerce tutorial so the first product we'll be making today is a simple product so let me give you an example now this is a simple product so you'll be able to add description for your product right here you can add in as many images as you want for your simple products such as angles or various other things you want to talk about or show scrolling down here we have a wishlist section where people can actually browse their wishlist here it also shows people what kind of category it's in your visitors can actually share this product to any of their favorite social media websites to tell their friends hey I found this really cool shirt go ahead and check it out it's on this website I found also right here this can actually zoom in on the product to give people a better perspective of the image and again right here people can search through it and check it out now it's going down here we have some more product description where you can add in you know a little bit more about your product in detail you can also see the reviews people have left your product you'll be able to enable this or disable this depending on which you want for your e-commerce website and right here we have related products so let's say for example we want to show people products that are related to this product I'm going to show you how you can incorporate this on your website as well now scrolling back up right here so this is a simple product there are no variables for it it just offers the Add to Cart option now also I'm going to show you what a variable product is so let's say you have products that you want to sell that have different variables such as size color or something else so right here you guys can see we can select a medium shirt that's blue and people can check directly on your website also if you have like a different variable color you can basically display it right there also you can actually add videos to your product so right here if I hover over this video section and click on video a box will pop up right here and you can actually display a YouTube video or you can link them to any other you know link that you want to show them what your product is more about in detail so that was pretty cool so scrolling down here again we have the same thing we have our wish lists we have social media icons we have a quick description of it and it's very simple to navigate guys so let's go ahead and scroll back up now another really cool thing I want to show you all is the quick buy feature so let's say for example what your visitors are on your website and they want to purchase a product they can actually skip check out and buy the product immediately and pay you right away so right here if I click on this buy now right here you can see this little pop-up right here that will basically tell people click on pay and it'll pay instantly making checkout very fast and very convenient for your visitors now I'm actually going to purchase something right now to show you all that this is a live ecommerce website and anyone can come to this website and purchase our product so here I'm click on Add to Cart right here we have this really cool user-friendly interface I'm gonna click on well click on view the cart first we couldn't see our checkout and also right here I'm gonna show you how you can decorate your checkout page there's various ways you can make it look so if you want to achieve a certain look I'm going to show you how you can add that on your website here we have shipping and tax I'll talk all about shipping and tax in this tutorial as well and here we can actually add in a coupon code for our websites we can give any kind of discount we want we can give any dollar amount discount we want as well so here I'm going to proceed to checkout and right here your visitors can put all their information such as like their town their zip code their phone and their email address they can pay with PayPal or credit card and they can checkout directly on your website also right here people can actually sign up for their newsletter and you can also have the option to ship to a different address but I don't want that right now and then also right here people can actually leave notes about it saying hey you know I need this by a certain day or whatever they want to talk about so right here I'm entering my secret credit card number and I'm going to go ahead and place the order now your visitors are going to see the same exact checkout process so it's very simple and easy to navigate and right now the order was complete and you have just made money so congratulations so this right here is an automated process which makes checkout really fast for both you and also your visitors now you will also receive an email that looks just like this right here where it will let you know of a new customer order has been purchased on your website now your customer will also receive the same email notifying them and giving them a purchase receipt as well so here we have a new customer order and we can change this color to any color you would like and we can also add in the logo to let you know that it's from your store and also them to let them know where they purchase it from as well so here we have the product that was purchased we have a fashion sweater to is purchased and we made $200 and right here we have the building address and also the shipping address so for example if the customer wants it shipped to a certain address it will display right here in your email so again guys it's a really professional website that's really easy to navigate and I also want to show you that your customers will also have their own personal portal so right here I'm go to my account and go to my dashboard so this is the portal that your customers will have and here they can look at their orders or download their address their wish list and they can also update their payment methods so here they can go ahead and go explore through these tabs so for example right here we have the orders we have the downloads we have the addresses account details etc payment methods and you can also add in really cool things in their portal like advertisements or just recent promotions so here it says take the time to join our Facebook group you can go ahead and add an icon I'll show you how to link your personal Facebook group or your your fan page or whatever you want to link them and below that so we have an advertisement for newest products and it's a really cool you know hip way to display your products so here we have this little cool slider so again your customers will have their own personal accounts on your e-commerce websites next I want to talk about our shop page so let's say for example you want to talk about your company you know just to like let them know how you got started or you know where you're from etc I'll show you how you can design your own about Us page to let your customers know about you and your website as well so here I just added in some text I had in this cool image with these social media icons as well and below that we have our footer again and over here we have our blog section so again I talked about the blog earlier you can actually design a specific blog page where people can actually share this to their favorite various social media networks such as Facebook Twitter or Google+ or LinkedIn and here you can go ahead and see the articles and you can read about it you can also leave a comments about it as well lastly we have our Contact Us page so for example if your customer has an inquiry about your product and kind of just wants to know a little bit more about your product in detail I'm going to show you how you can create this beautiful contact form where they could put their name their email their subject send you a message and it will go directly to your inbox in your email so if you're finally ready to learn how to create ecommerce websites and you really want to start selling products online then keep watching guys in this tutorial I guarantee you by the end of today you will have a fully functional ecommerce website that you can manage and control that also looks professional and amazing so let's go ahead now and get started with this ecommerce tutorial so I'm gonna make this very simple the first thing we're going to do is get our domain and hosting and my link will actually provide you all with a 60% discount off your hosting so for example your e-commerce website com after that we are going to install WordPress next we are going to purchase and install the number one rated ecommerce theme which is called the flat sum theme and then we are going to design our e-commerce website and it is gonna be fun and easy now there is a link in the description of this video it will take you to a page that looks just like this right here now this is psy chrome comm and the reason why I choose icon comm is because I actually tested them against nine other competitors and these guys came out as number one for the most reliable and also the fastest hosting and I personally use this servers on my website Darrell Wilson com so I know they're reputable and they're really really good so we have three plans right here we have the start up we have the grow big and the go geek now in all my tutorials I always recommend to grow big because with the grow big you actually get unlimited domains hosted rather than just a single domain so that is a pretty it's a pretty big difference so generally you'd probably want to go with the grow big campaign so right here click on order now go ahead and type in your domain so you know your e-commerce website or whatever you want to put I'm gonna put you know just ecommerce torille calm and then right here I might have this checked because of course I want to register this domain and right here we click on proceed now if it's not available it'll give you like a little sign saying hey it's not available if it is available it'll just speak into this page right here which says congratulations so right here this is where you going to put in your account information so of course you're gonna put your email you're gonna put your password confirm your password and your social security number I'm wrong I'm just kidding don't give him your social I'm just joking so right here your your state and then right here whatever you're from you'd pull that information in you can pay with credit card and you can put in all your you know delicious information right here now we do have other services that I do want to talk about so as you're purchasing this plan you might want to consider some of these so first I would recommend the 12 months because of the 12 months you actually get the $24 you know fee waived and remember guys you always have a 30 day money back guarantee you know all these companies are very genuine and they really know that they can win your business because it's a very good service and I can vouch to them it's a very good service so I recommend 12 months that'll give you enough time to decide if it's for you or not and right here we have extra services so we have domain registration which we sign up for domain privacy so this will protect your personal information for when someone tries to Whois you on certain domains now I recommend the service guys because if you don't get this you're gonna get people who are gonna be calling you like and then you just you're gonna get spam email from people claiming to be from you know hosting services are gonna try to sell you stuff and it's just a nightmare so just get the domain privacy and also the psych round sight scanner I would definitely get this because for 20 bucks a year you can get someone that will check your website every single day and notify you if there's any malicious or any trojans or any you know malicious virus that have been injected in your website so I personally recommend it but you don't have to get it it's strictly up to you and once you're done with that you know you can check those and then you know read through your Terms of Service I'm sure everyone that's watching this tutorial always reads through all of these but you know it's it's there so it's you know it's it's there so and then after you're done with that you can click on Pay Now now I'm gonna go ahead and meet you guys on the next page and we're gonna go into the customer portal because I personally use this service so I'm gonna guide you on where to go from there alright so this is the site ground dashboard so this is basicly where all the magic happens and congratulations on your new congratulations that is the first step in this tutorial so if you guys want to go ahead and browse around here you guys can go like add services you guys can do like referral deals if you want I tell a friend you can check out your billing information here you can also leave support tickets and you can also call them and also email them as well so they have a really good support team and this is the account section so you guys can see right here I have cloud hosting with sycron on my website Darrell Wilson comm and you know guys I would never recommend a product I didn't use every single product that I recommend I have used it or I'm currently using it you know I I'm out those people are like oh yeah I go by that and then of course like they don't have it but they just tell you to buy it and every product that I have I've tested it I know it's very good so this is your dashboard again you guys can always you know add domains in here or whatever you want but let's go ahead now and install WordPress so right here we go to my accounts and these right here your hosting plans so right here I'm gonna select manage account and it's gonna be different for you obviously it's gonna be like a different name and right here I'm gonna go to go to cPanel now also if you guys have trouble and something just doesn't work out you guys can always call them and they can do everything for you which is really cool of Sai crown but I'm gonna show you how to do it it's really quick so it'll be really fast so right here click on WordPress and then scrolling down scrolling down right here and I click on install now alright so right here choose protocol HTTP of course because we have free SSL's here on site ground you know unlike other hosting where you have to pay for it you get a free SSL with SiteGround so I have tons of domains and I'm gonna go ahead and select the domain that I'm using for this tutorial so it's gonna be there it is dope you flotsam calm okay and right here make sure there is nothing there guys okay you know for reseller hosting you put something there but for most of us make sure there is nothing there for the site name just put like e-commerce website or something you can always change this later in the theme customizer which we'll learn more about commerce tutorial and site description I'm gonna put my dog caddy wack okay so admin username right here make sure you put a legitimate user name and to write this down so for example I'm gonna put patty-whack and then right here just go ahead and do like a quick password something you know where you can you know whatever whatever password you use you know you can do it I'm just gonna put something like I don't know put paddywhack one and then right here go ahead and put in your email address not this one put in put in another email address so like your email address so I'm gonna put like PC hoarder PC hoarder @ gmail.com and right here you can choose a language and I think we've had the debate before but apparently it's not Mandarin its Chinese so I you know thanks for clearing that up a few viewers emailed me because I've always debated Chinese with Mandarin but it's apparently Chinese I guess is the correct pronunciation not Mandarin these right here you don't really need to select these these are just plugins we'll learn more about plugins a little bit later choose the theme no and we're right here we can go to install you ready all right install so right now we're basically installing WordPress on to our domain which basically allows us to create our websites with like a drag-and-drop builder like you know copying and pasting text no coding no PHP nothing in WordPress is by far the number one most popular platform on the internet you know it controls actually one third of the Internet which is a very very large amount so right here I'm gonna click on this right here so your your domain - WP admin click right there alright and this is the dashboard so basically this is we are inside the website now now if you want to see how your website really looks right here you can click on visit site up here and this is the website it is using a really old bad theme that we are not going to use so this is one of the themes they they have but we're gonna actually going to use a theme that's designed for e-commerce so really quickly let me just kind of show you guys around really quick so you guys understand everything I'm gonna go ahead and close these so right here this one I'm gonna close I don't really need all this to love this is just like spam or whatever we don't really need it so right here under our settings i'ma go to general and this is where you can always change your email address here you know you can put your general settings like you talked about e-commerce tutorial right here we have paddywhack scrolling down here you can change the time and all this good stuff so if you want to like change your basic settings you are more than welcome to do that now one more thing I want to go to we're gonna go down to permalinks next so under the settings I want you guys to go to permalinks now right here I want you guys to click on post name now I'm explain why we do this so an SEO you know the world of SEO you want your website like W you know your website com - shop right not to 0 8 0 to whatever blah blah so you want to make sure that this is on our post name because this is the correct permalink and this is basically good for SEO and it'll help your search your website get inducted by search engines like Google Yahoo and Bing alright so right here we go to Save Changes and lastly one last thing right here under users click on all users and you're gonna find your name right there so click on edit now if you want to like kind of you know customize this stuff you are more than welcome to do that I think we're gonna go for a midnight I think Midnight's good and if you ever want to change your password in the future you're gonna do that actually right here so right here generate password I'm gonna go ahead and copy this and then I'm gonna go ahead and say ok I want to go ahead and use this password I want to click on update the profile so if you ever want to change your password in the future that is exactly where you do it okay so that was pretty self-explanatory pretty easy so again this is just like the basic dashboard of WordPress it's pretty simple like here's your post your pages and all this stuff we're gonna go through everything guys so you guys are gonna be able to see this screen and know exactly what to do you guys are gonna be professionals okay so the next we're gonna do guys is we are going to purchase the flat some theme now there is also a link in the description of this video it will take you to a page to purchase the flat some theme so this is the page you'll be brought to now this is the flat some theme and it is the number one best-selling WooCommerce name for WordPress now the reason why it's number one is not just because it has like five-star reviews everywhere it's because it allows you to really customize your shop and it focuses more on e-commerce a lot of the WordPress themes that I've used in the past and that I've kind of tinkered around with a lot of them you know they're capable of using WooCommerce but they're not designed for it so this is specifically designed for WooCommerce and e-commerce so it'll really help you out with your online store and there are tons of just great things about this page builder that I'm gonna show you all like it has a lot of templates its drag-and-drop you just simply just drag stuff in and it's really simple to use so I personally have this on my website that I'm using and I use it for a lot of client websites so right here you'll have to click on Buy Now or Add to Cart now I have already purchased this same theme so I'm gonna go ahead and login to my account and then I'm gonna get basically show you guys where you guys can download it so I've signed into my account right here and I'm go to my downloads so right here I'm gonna go ahead and scroll down right here and this is the theme that you're going to purchase the flotsam multi-purpose responsive WooCommerce theme so right here just click on download and right here you guys can actually look at your purchase code but for right now just click on install or press file only now if you guys need your code right here you can go ahead and download it and then you can go ahead and open it and take a look at your code that you can actually use to register it so you'll get updates and support for your WordPress theme and I think by default you get like I think six months or a year of a support for your theme and if you want to extend it you can just click on extend now it's only like I think it's like 20 bucks for another like six months it's really really well prized so it's it's a very good deal so right here I'm gonna go back to my domain up here and right here under appearance I'm click on themes now we were going to upload that specific theme so right here I'm gonna click on add new upload theme choose the file and I'm simply gonna go ahead and select d-flat some theme right here so flat some and click on open click on install now so now what we're doing is we are installing the theme on to our websites alright so the flat some theme has finished uploading right here we'll click on activate and this is really cool so right now you'll be brought to a like a wizard and this basically like helps you with your WordPress theme and also with settings so right here is hook on let's go right here this is where you're gonna enter your purchase code so just like we talked about earlier where you had that little file you downloaded with your purchase code on it you can go ahead and copy and paste it and put it right here for now I'm gonna go ahead and skip this step because this is a test domain so right here skip this step and then right here we have the option to do a flat sum child theme now if you're not a developer you don't need to worry about this so most of you don't really need to mess around with this not unless you are developer and you're making websites for certain people so for now I'm gonna click on skip this step plug-in so we have some plugins that it it's actually asking us to install now we're not actually going to install all these plugins so we're not going to install half of these the only ones that we really want to install is contact form 7 and maybe the wish list one right here so right here I'm gonna go ahead and click on skip this step because these plugins actually are a little outdated and don't work properly and I know that because I've used and tested them and I'm gonna give you actually a a better plugin to install than some of these ones so these basically give you the ability to have a social login so you'll be able to do that on your website I'm sure you've seen social login on a bunch of different websites right here it says install demo content do not do this this is a total waste of time so right here click on skip this tab they're basically gonna give you a bunch of demos with empty blocks everywhere and they're gonna import all this like just stuff on your site and it's just it just takes up all this space and you're not gonna even need it because I mean it's just it's not needed we're gonna do this all by scratch so you guys know how to do instead of relying on any of this demo content they don't give you the images so it's really not even worth it so right here is we gonna upload your logo and we will talk more about logos a little bit later and also right here is asking us for a preset do not do nothing because we are actually going to do this by ourself all right here click on skip this step and right here it's asking us for help and support so if you guys want to you know look over this you guys are more than welcome to but for those of you who just want to get this done just click on agree and continue and pull-off we are all done and right here it's saying you can join their Facebook group if you want you know I don't use Facebook too much think I don't know I think I'm getting tired of social media right here you click on visit your new websites alright so this is what you'll be brought to and it doesn't look good at all it doesn't but not to worry it's gonna look really really good and it's gonna look amazing now before we continue let's go ahead and take a look at our progress so we've already got our domain and hosting done congratulations after that we install the WordPress after that we have purchased and installed the flat sum theme and now we're gonna go ahead and create our amazing ecommerce websites so let's go ahead and go back to the tutorial and you'll move out to this page so let's go ahead now and get started let's go ahead now and actually install some plugins and some pages and let's start learning how to use WordPress so in this section we're gonna learn how to create some pages I'm also gonna show you how you can create a menu and then I want to show you how we can design the website so first let's go ahead and make some pages so to do that we can go over here to plus new and click on page alternatively you can do it through your dashboard so right here in our pages you can go to add new and we're gonna go ahead make some pages right here so this is gonna be our homepage and click on publish now I do want to note something if you guys like that full width style kind of like I have it right here you would change your page which should be template right here to full width if you guys kind of want that box look like you've seen in some of their demo so you guys can leave it as default templates so right here I'm gonna click on full width and make sure I click on update all right and then right here again I'm gonna go to add new and I'm gonna go to about so we're making our about Us page and then here same thing pull the template and lastly we're going to create our Contact Us page now the other pages such as the shop page and everything else they're gonna be automatically created for us when we activate the WooCommerce plugin which is basically the plugin that gives us the ability to sell online so here I'll do contact us and then right here full width oh yeah I just saw bike man Thursday it was pretty good I give it like a 70 I gave an 80 percent Black Panther 80 percent good movie anyways so right here we have the pages now we need to make this basically we need to assign it to a menu so if you go to our website right here and go to visit sites we don't have a menu right here so we don't have like the the home they bow etc so let's go ahead and create a menu for it it's right here under dashboard we're gonna go down to appearance and go to menus and just go ahead and give you my new name so I always do menu one man you one because good see I do it quite often I menu one and then right here we have our pages now if you want to see all the pages click on View all so here we have home about us contact us and we have another home page just going add them both I'm gonna explain why there's two so right here add to menu now by default WordPress creates a home page with a custom link so we don't want a custom link a custom link is something where you can basically put in a title like here like you know our SoundCloud or something and then you'd put in like your SoundCloud address right here you know you can put in anything so you're basically just creating a menu item and a link to anywhere you want but I don't want to do that but that's basically what a custom link is so right here you can like you know create them but we'll talk more about that a little bit later so right here I'm gonna go ahead and say alright the first one I want to do home about us and contact a contact us and I wanna make us a main menu and click on save menu so right here is basically where all your menu settings are so if you ever want to change something on your menu this is generally we're gonna do it so for example let's say you want to have a drop-down menu so first before I show you that so I'm gonna go to visit sites and show you now that our menu now is activated so we have home about us and contact us now if you want like a drop-down menu I'm gonna go ahead and show you how to do that right here under the dashboard section you can just click on menus to make it looks like a shortcut section and right here I want to take this and drag it and have about us as a submenu if I click on save menu and go ahead and visit the site again you're gonna see that if I hover over it it's now going to have the about us if I click on it it's gonna take us the about Us page of course there's nothing there so that's basically why there's nothing available there so I'm gonna go back and change that really quick just giving you guys an example they also have like posts and categories and custom links that you can add like for example you click on add to menu and add a it's pretty simple for your post when we talk about blog so we'll I'll talk more about that how you can have it to your menu and also product categories when we talk about product categories I'll show you how to do that as well so right here I'm gonna say no I want this there and I'm gonna click on the Save menu ok and then right here again we can give it click on visit sites and then voila so home about us contact us now we need to assign our homepage as our primary page so when someone visits your web sites what page do you want them to go to so right here under our customize section you click on customize and this is basically the theme customizer so in WordPress guys every theme has a specific theme customizer with their different specific options and every one specific settings so depending on the theme that you use every customizer is different so for ours right here we have homepage settings and we want to display our homepage as a static page and we're gonna select this home page as a home page pretty simple too hope you guys are with me so far pretty you know self-explanatory that was part the most complicated thing static page so now our site is gone because we have nothing for our home page so we're gonna go ahead and create you know stuff on our home page so right here click on edit with UX builder alright so now we're at our home page so now we're designing our home page and they have tons of templates you guys can use but I personally wouldn't use any of these because a lot of the times these modules are designed specifically for certain images and I want you guys to kind of understand how this page builder works and kind of like you know learn it so let's go ahead and get started so right here under add to content now we have a bunch of different layouts right here so they have different layouts they have different contents and they have you know a bunch of different widgets and modules you guys can use so for example if you want to add a Google map so you click on Google Maps you can add it right here if you want to click on like a search box you can add it right here you guys want to do like you know an icon box et cetera so they have a bunch of different little modules that we can use but I want to actually give you guys a quick preview of the flotsam studio which is probably the most impressive thing about this WordPress theme so right here click on flotsam studio and guys they have tons of pre-designed templates so remember earlier how I kind of talked about I don't have to design everything from scratch and you know do everything like other WordPress themes this flat sim studio is gonna save you a ton of time because they have literally covered everything so they basically have all these demos and templates out here and you don't have to specifically use theirs but you can kind of get ideas and inspiration from a lot of their layouts so right here they have a full width layouts they have another one right here another one here and you guys can just click on import and simply just go ahead and upload it to your website now you guys can also click on preview right here and I'll give you an example of what your website will look like so if I click on preview you guys can see now this is all you know looks really really amazing so if you guys want to add something like that so you guys can mess around with that but I'll go ahead and add in one and then I'll basically show you guys how to get rid of it's just in case you guys want to delete it which probably some of you are gonna have a lot of fun to trial and error you know so let me give you an example I'm gonna click on ecommerce right here and it's gonna simply select one you guys don't have to follow me here I'm just doing this just for toll purposes so I'm gonna go ahead and select something like I will select something very simple like this right here or we'll do this one we'll import this one all right and I want to import the images as well and I'm click on to starts so now it's basically importing that layout all right and right here I click on update so update guys is like saving so whenever you do something make sure that you click on update and save your changes so I want to see how this actually looks on our website right now so clicking on this X feature right here this is exactly how our website looks right now so you guys can see it already looks amazing you know so it's it's pretty amazing so the layouts are really simple really fast and amazing and that's why flat sum is probably the number one selling WooCommerce theme out there but let's just say for example it's like you know what this isn't working for me you know I just don't like this right here on our edit page I want to click on edit with UX builder and guys the UX builder is what we use to basically design the web like with so right here I'm click on this gear icon and say you know what I liked it it was cool but I'm just gonna go and click on clear right here and say you know what's let's try something else and that will basically get rid of the entire page and right here click on apply and update so remember don't forget to click on update guys because have you guys do not do that it won't save okay but let's just go ahead and kind of learn how to use the page wheeler itself so I've shown you basically a little bit about their flotsam studio but let's just say you want to go ahead and you know add into mic a slider or something else let's go ahead and get started so right here I'm gonna click on slider and right here we have different options for the slider so we have like you know draggable or background color etc but what I want to do right here is add some slides so right here I'm gonna click on plus and I want to add in a banner so now you can add in a banner an image a logo etc but right here and click on banner alright so this is basically our banner within the slider okay so remember the slider setting just controls the actual slider settings the banner is like the actual appearance of everything so the banner is basically your slider so right here you guys can kind of select different sort of presets and guys these guys have done an amazing job at doing this because you know I've been doing web design for a while and the fact is they have this whole inline template of library stuff is just so incredibly amazing so let's go ahead and take a look I'm gonna say you know what's I think this one right here is pretty cool I like this one right here I'm gonna click on apply now guys there is a link in the description for demo images so if you guys choose to use the demo images you guys can use those to follow along if not don't worry I'm gonna give you a few websites where you guys can actually get some free images for your website so right here we have like different options right here right here we control the heights so if you want like a full width you can do a full width and alternatively you guys can kind of change how this looks by just dragging it like that you guys can also click on there presets of their Heights okay so right here I'm gonna do something like I'm just leave it as like regular or I'm just gonna do 16 16.9 16 what is good and then right here we have the admin label so basically the admin label guys is just titling it so I'm gonna put right here because I'm not a girl picture so if I'm editing later I kind of want to know what I'm adding so I'm gonna put in girl we have the high right here the slide effect so the slide effect is basically the animation while the image is there now you can't see it right now but I'm gonna go ahead and just type in something like zoom out and it's gonna look like this right now but once I add the background image and I exit out you guys are gonna see what it's actually doing so right here I'm click on image and I'm going to click on upload files and I'm going to go ahead and upload my files now and you guys are more than welcome to upload those see right here images for tutorial and I'm just gonna go and upload these now there's some websites I want you guys to go through so unsplash is great he hasn't go to unsplash calm and type something like night sky or something they have tons of amazing and high resolution images as you guys can use also pixels is really good I'll put all these websites guys in the description of this video because I know it's kind of hard to you know find free images and this site is also amazing for images and I think the actual image I used is here somewhere I put girl where is she where is she she's hiding see it was like oh there it is see this one right here that's the one I used also you guys can use free pick free pick is also a very good website and this site is alternatively more for like mock-ups and stuff but they have some really cool stuff you guys can use and we'll talk more about like editing images when we talk about logos and stuff but so this is another website you guys can use as well pixabay is another one and yeah I think those are really good so I'll leave some websites for you guys in the description of this video to help you guys out but I want to go ahead and say you know what I want to go ahead and grab this one right here and I'm click on use this image alright so I have this girl now we can't really see her we can't see the text too well and the great part about this theme is that we can add in and overlay so right here we have size color and overlay now I don't want to put a color because I'm adding a background image so the color really won't apply the size I always want to leave it as original whenever I make it bigger or like smaller it kind of comes out a little pixelated and it doesn't work out for me so I want to do original now right here under overlay I'm gonna click on this blue section right here and right here I'm gonna take this and slightly bring it to the left and it's gonna kind of create that overlay right there so now you guys can see the image looks great and also the you know that we can see the text right here so it's not fully white we can kind of see it so that's why the overlay is is amazing and you guys can change the color of it you know to anything that you want you know whatever whatever kind of color you want to use but I just kind of want to use that same blue color sorry here again click on that and simply drag it down right there okay and another really cool thing guys let's just say you don't like these positions now you can always do something like you know we'll talk about margin and padding you can just click on this little gear icon and kind of just move it around to however you want so you know the the inline editing is just amazing you know this is just so cool you guys can do this because of other themes you have to manually type in the padding and type in where you want it with the padding and the margin but here you can just drag it wherever you want it you know as long as it's within the square so that's pretty pretty amazing so let's go ahead and go down right here we talked about position so the position is basically where you want to put it such as the this section right here we can kind of say what I want to emphasize the image you know what I want to emphasize it more so we can kind of like put it right there but I just want to leave it as something like standard so for the position I'm just going to go ahead and leave that blank because I like where it is but that's where the position is and also hover so if you hover over its what do you want to do so right here you can see the hover option its blurring out there we'll do something else like grow or glow well that's cool huh so she's glowing now she's glowing and then we have like an overlay you can add an overlay color to it so you see now with the Blues coming in and you know you can add an overlay and other stuff so these are pretty self-explanatory guys like blur fade in glow it's just really what you want so I'm just gonna say you know what I'm just gonna do none I don't want anything else I just want to keep it same you can also add a parallax effect to this so the parallax effects guys what it does is that see how it kind of creates that illusion that the the the image is sitting still and you know we're kind of like following you guys can add a parallax effect to your website now you guys can't see it really well right now because we don't have any more content at the bottom right here but we'll go ahead and add in in just a second and also a really cool feature I want to talk about is the effects so here I'm gonna go and say you know I don't want any parallax no parallax so the effects we can have it's know we can have it confetti and this is a great idea if you're like doing like a sales page or something I mean this right here is beautiful this is a perfect professional landing page that will probably generate you a ton of money cuz people come here and say oh my gosh this girl's happy there's this stuff I don't know what it is I want to go head and buy it you know that's kind of how it works in the world of web design and then you can have sliding glass you guys can have sparkle you guys can also do some like rain but this is terrible I wouldn't do this this already it's making my eyes bleed I don't like that but the confetti is great everything else is good so right here would you know effect really quickly I'm gonna talk to you a little bit about border now the borders I usually don't like but just particular purposes I'm explaining what they are so for example let's say we have let's just add in some border right here so we're gonna add 20 what let's see maybe widen 10 11 10 10 10 10 and then 10 so you guys can see right here we have this kind of border around our image now the only thing I kind of like that we can do is right here in their style we can kind of like change how the border looks so now we have these little Brits and then we can have dotted so essentially you can kind of you know decorate it with the border and I kind of like that look because it looks pretty cool now the margin is something where where does it start from so right here so you don't put 50 so now basically it's starting from 50 pixels so 50 pixels it's gonna start right here and we know we can do the same thing right here and right here and right here so basically it's basically saying I want it to start from a certain position so I wanted to start from 50 pixels from the top from the left from the bottom or from the right margin and padding guys can be a little complicated but a better example of it would be when we actually use modules but this is just a reference of how you guys can use it and also guys remember this theme you can left-click on it and just drag it you know you can simply drag it instead okay but for right now I want to say I don't want any margin so right here will click on X and also for the border I'm gonna click on X as well because I don't want any borders although that looks pretty cool and again you guys can always change the radius of it and you guys can also change the color of it as well so right here you want to add a specific color you get some go ahead and do that right there so that is basically a quick rundown of borders and how to use borders and the great part is guys is that these settings are basically universal so if you learn how to use it for one module you basically learn how to use for all the modules in the WordPress theme so when you learn one section you kind of master the rest of the wordpress theme which is pretty cool so here i'm click on X and say art I'm done now video backgrounds I do not recommend video backgrounds whatsoever one of the main reasons why is because video backgrounds do not play well on iOS devices so what that means is if someone comes to your website via mobile which 50% of most users do now your video slider will not play they might be brought to a gray screen that looks really ugly and they can't you know see what you're talking about and they could potentially leave your website so I don't recommend video backgrounds whatsoever another reason why is because sometimes the video backgrounds don't play well like for example you'll put it on your site and then people will come to your site on a computer and sometimes it might not work because of their browser or compatibility issues and there's just tons of problems with video backgrounds so I don't recommend if your backgrounds guys and I know many of the beginners love video backgrounds but just don't use them they're really not good however alternatively if you really want to use them you can go ahead and grab like a YouTube video or upload an mp4 and everything else I might have a full tutorial on video backgrounds in another video and that link may be in the description of this video but for right now I'm going to skip the video section because I really don't recommend them I don't think you should be using them because again I've been in WordPress for a while and they can cause a ton of problems so I'll have a second tutorial just for video backgrounds a little bit later and we'll talk about that in another section so basically guys we have covered the banner section so right here click on apply now let's just say you want to add in a second slider so right here that's a slider and right here and click on a banner so now what we're going to do guys is we're actually gonna create a second banner so again we can click on any one of these right here and you know messing around with these and take a look so these are pretty cool so let's see here I'll go ahead and grab in something it looks like this right here I'll use a black one like that's okay and then right here I'll click on apply' and again right here we have the same exact options guys so alternatively it's the same exact thing so you can go ahead and mess around with these now you do want to make sure that the height is similar to your first one because you click up here right here we can go to the second one and if they are different sizes it's going to come out a little differently so I think right here we set it to 16.9 so on the second one right here I'm gonna click on this gear icon go to options and that will basically give us the ability to edit this section so right here 16.9 alright and visibility don't leave it on we will talk about visibility let me talk about mobile optimization so for right now we're going to skip this but later this isn't all we're gonna talk about mobile optimization and I'll be a little bit more transparent about visibility and reasons why you might want to use it so right here slide effect we can do like zoom in and again you guys can't see that because of the there's no image but I'm gonna go ahead and put zoom in fast and must select an image right here I'm going to select something looks like this right here so I'll add this girl here alright and then right here we can add in like a a background so for size we're gonna be like a original large etc but I always leave it on the original guy so it looks so much better and then right here we can set like an overlay color so we want to keep it consistent remember guys in web design but it's it's everything you know content position colors it's everything people really buy products based off your content positioning and images it's pretty funny it's really how the human brain works and also let's say you want to move this around we can take this and just kind of move it wherever you want because you know it's just it's amazing this is this team is amazing right here so I'm gonna put it right here alright it's going right there all right scroll it down here guys same options now it's going to click on apply and update and let's go ahead and take a look at our slider so you can click on X you guys can see how it's kind of zooming in because we added a zoomin effect and right here I'll click on this and now it's zooming em so the first one was zooming zoom this one is sorry zooming out and this one is zooming in so hope you guys can understand what that's what those options are so let's say you want to edit this again again right here edit with UX builder if you guys don't like those zoomin options which I think they can get a little annoying you can go ahead and go to options right here and just take them off all right so now it's it's coming out good and also the size again put it as original because if you put it as large it comes out very pixelated that's why I kind of looked a little strange okay now let's just say you want to go ahead and time the slider really quick so over here in the slider click on options so the options section for the slider guys is basically controlling how the slider works so like this is basically the overall setting for the slider and of course we have like focused we have shadow so another really cool thing guys is like when you have focus right here you can kind of like if someone is someone scrolls through right here it'll look like that which is really cool really beautiful so that's really amazing going back over here again options so we're here there's different things settings you guys can use like free scroll drag elbow like you want to draggable if you want to dragon ball people cuz I like kind of click on it and drag it wherever they want clicking back here again slider options if you guys click on the actual slider it's going to actually bring you back to the banner section but this section right here is controlling whatever is inside the slider okay and again guys these are pretty self-explanatory so right here we have navigation of course we can have it like offer on position you can have it inside you can have it outside the size the arrows the arrows are basically these little things right here you want it to be like a simple or you want it to be like a reveal or either you go over it like that or you can have it as is this circle which is that section like that I think that's pretty good right and you can change it to like dark or light or you can have bullets so right here in the bottom section if we close this out there'll be bullets right here and people can navigate your slider with bullets but you know it's just you know if you want to have that you can also have an auto slide so for example let's say you want to have this slide automatically you can set the timer right here so 6,000 ms equals six seconds so if you want it to slide automatically you can put something like three seconds and then it would slide every three seconds so that's basically what the auto slide is and again auto slide will it'll just go through all of your your slides automatically without people having to touch it or navigate it and you know pause on hover so that means if they hover over it it won't it will not do an auto slide if they go away from it then it will auto slide okay so that's a quick rundown of this section so I hope you guys understand this section it's pretty self-explanatory like I said you know there's you know the draggable option the free scroll infinitive as well again you guys can change the margin of this as well but I think zero is pretty good so we don't want to basically push the slider anywhere else we want it to stay right there so here I'm just gonna go and say okay so yours fine anyway so site align we can do like left you can do rights because remember we want to choose which way we want the slider to look like basically come from four that's exactly if you have this style set though so this corresponds to the slide align and then right here you guys can do shadow which is pretty cool so for example right here we can set it like that okay and I hopefully by now you guys understand how this kind of works so right here we have the slider and remember any any banner within this slider that's what we reading okay so I want to go ahead and make this fullscreen I don't want to have to do it like that but that's a beautiful little style so if you guys want to do that do you guys can so right here I'm gonna go to my style and just go to default and click on apply and click on update so we basically created the slider now let's go ahead and say maybe you want to add in a link like for your slider right so right here you see the button you just hover over the button you click on it and these are other settings that you guys can change right here so right here you guys can go ahead and you know do like the letter-case you guys can give it a class so for example like button for men you can change the color so you like these are like quick sections you guys can you know you guys can change the color but to where what you want but these are like quick sections you know like alert success Y etc the outline you guys can change the outline here as well the size large larger or just normal and then you guys can animate it you know like it'll basically Adam eight once the slider appears it can animates here you can change the radius so you can make it a little bit more circular the DEF you guys can change the DEF of its and it's going down here def hover as well so a lot of these options guys you guys can kind of understand what they are just by messing around with it so this is like a box shadow basically it's the same exact thing icon if you want an icon you guys can add an icon see now there's an icon you guys seen that icon you can add a vision to the right or to the left sorry here I will say no icon but they have tons of cool icons and you know you guys can mister on with that and then again here you guys can like you know just if you guys want you guys can put it over here you guys can kind of drag and drop it I don't recommend it though I do like their default settings and we'll talk more about the drag and drop feature a little bit later in the next section so basically also if you guys wants to link this somewhere you guys can put it to like you know something like whatever link you want now I'm actually going to talk more about this a little bit later because we're gonna link our product categories on this section I know I keep saying that a lot that we're gonna do it later but there's a lot to cover and I just really want to make sure you guys understand how this thing works before we you know go on to the next section so right here we click on apply and I'm click on update so basically right here we added a you know we did some features we added a link so now if someone clicks on this button it will take them to that specific link ok but let's go ahead now and move on to the next section where we're gonna go ahead and create the next section which is this section right here so we're going to add in this section right here so let's go ahead and do that so let's just say you want to keep designing your website right here there's this + icon click on plus now we can add in a row we can add in you know whatever you you know widgets that we want right here but I kind of want to add in something like I want to add in another template right here so right here I'm gonna go ahead and click on the plus and then go to fossum studio and I want to go ahead and find the category section so right here I'm going to go to categories and then I'm going to go ahead and select one of the ones that I use for the demo which is this one right here and click on import and then click on start alright so now you guys can see that we have this specific section right here so this is great for a category so let's say for example that you guys want to go ahead and add in product categories which we're gonna talk about in just the bits this is basically a great way to enable categories and again you guys can always change the position of this to wherever you want such as that right there so we basically created this section but let's say for example you kind of want to start using the actual you know the actual modules instead of relying on the flotsam studio so we have page title we have all these other different things right here that we can use now I want to use one and I'm going to use this for probably the remainder of the actual tutorial which is the title one so right here and click on title and now we have a title down here so I'm gonna go ahead and give this a name right here so I want to put like our categories and then right here we have like an icon or different settings now I want to go ahead and you know actually modify this myself instead of using the templates because you know if you want to modify the website you don't want to rely just on the templates right so right here I'm gonna say alright we have the style I want to in the center and this kind of creates a division it's basically introducing the next section of our area with this header right here so right here we have color you guys can go ahead and change the color of its but again I just want to leave it as something like black so I'll just I'll just click on next I think that's an okay kind of color what you guys think it looks good icon I don't want an icon right here you can go change the width of it so again you guys can just simply drag it's something like that's you guys wants to have like a custom width like that but I don't want to so I'm gonna leave it blank margin and padding I'll talk about this in just a second the size so right here I want gonna increase the size a little bit's to make it something that looks like that right there we'll use 100 we'll use like 150 from now on 150 see you 100 and sit there one more time 1 5 I'll just go and do it like this it's being weird it does that sometimes welcome to WordPress well do you want 55 and I don't want to link this anywhere so I want to actually kind of drag and drop this saw right here my click on apply' now there's a few ways you guys can do this we can take this right here and simply left click on it and drag it above our section like that or we can do it like this right here like that either way so you guys can use this section or you guys can use this section so I want to go ahead and take this and put it up there now we have too much space right here now we have a gap and there's a gap right here because when we inserted this template there's a module for a gap so I want to take that out to put it like we'll put zero so now we have this section here now let's just say for example you just kind of want to you know reduce it a little bit more you know so right here under my title we have the margin top and we have the margin bottom so you can actually kind of mess around with the margins here to kind of get it to where we want it remember we talked about margins earlier well this is a great way to use margins and again you guys can kind of find out where you guys want it so I'll put it around somewhere around there looks good right so this is a great section guys so right here you guys can see that we have our categories and is introducing the next section right here which looks really professional looks really really good so again this is a great example of how you guys can use this these little dividers to kind of introduce the next section of your websites to your visitors so I'm a click on apply and click on update now let's just say for example really quickly before we talk about products that you want to actually do this yourself you don't want to use templates well I'm gonna go ahead and show you how to use a page builder without using the templates section so right here I'm click on plus and I want to select a three column row now they also have grid they have all these other things that we can use but I want to first put a row in here so we have a row and you guys can choose different rows so if you guys can see right here we have oops let me go back there go back to options actually imma go ahead delete this really quickly just because that um I I miss collect assess all right so here I'm gonna go ahead and take this off I'm delete that and right here and click on add to contents and go to row again so we have the row right here so we have a let's go back here let's see okay well one one more time one more time at the content and then the row okay so we have these different sections and what I'm just basically trying to tell you guys is that you can have different column rows if you choose again I really recommend using their template section because it's amazing so if you want a three column row that's full width you guys can use the full width section do you guys want a three column row like this you guys can use the three column row right there so I'm gonna go type in three columns which we already have right here and then let's go ahead and add in something to these columns right here so right here I'm gonna click on this section and I want to enter in we can enter in a first we'll enter in a banner alright so we have a banner right here here me go ahead and click down so you guys can see it so we have this section and again you guys can move this to any party that you guys want but right here I'm gonna change it something like 450 I want to you know just a little bit shorter you guys can always manually type it in as well to make it easier for you guys to see and then for the image click on select media and I'm actually gonna use that same image that I use that the demo gave us so right here we have the image the image sizing is 1000 by 667 so here we click on use this image now we have this image pretty cool so here we can have like the color we can have the overlay etc now we I don't want any like kind of use the banner anymore because you know we've already set the banner but I want to actually modify the stuff inside the banner so right here I'm click on back now right here if I want to check out what's inside the banner I'm gonna click on this little icon and it's gonna choose the text box so in the text box we have text so right here I'm gonna click on this icon right here and go to options so this is basically controlling the text box guys so we're basically controlling now like the actual box itself so not the text but the box itself so right here we can select something like circle square and then you know you guys can do light or dark we can change the width of its we can scale it but I kind of like it fitting like that that looks professional we can change the margin and padding so if you guys want to change the position of this of this bubble you guys can do that right here you guys can also added padding to it so we talked about padding before you guys can kind of just you know mess around with these two kind of you know just check it out you know these are just like they're pretty self-explanatory guys it's just how you want it to look in it because there's so many options that you guys can you know mess around with like fade and left so again that's how we would set up this section all right so then again we can align it to the center or wherever you want but I want to just go ahead and say you know what I want a kind of one a square all right yeah square like that and now I'm going to go over here and then we can actually click the text box and then here we can actually modify the text so if I click on the gear icon for text and go to options now we're actually modifying the text itself right here so if you guys want to mess around with this you guys can add in more text it'll look something like that right there okay so I'm basically just kind of explaining to you how that works with the the module now let's say you want to add in a button here so right here and click on this and let's find the button module so now we added in a button and right here we can change different styles of buttons you guys can kind of see how the buttons look all right click on apply now we have different options for the buttons so you guys can do lower case small case you know you guys can change the color the style the size we'll talk more about the font a little bit later we're gonna talk about that when we introduce plugins but I'm just giving you guys an idea of how you guys can you know mess around with this the button if you guys choose to you know change all the settings again guys these options are pretty self-explanatory so I don't want to get too much into every single button or every single module because again a lot of these modules have these same exact settings as each other and they're also pretty self-explanatory you know so hopefully by now you guys are kind of understanding how this works so again here I want to move this down leave it like that so the text box I'm gonna click on the text box again and I kind of want to make this a little bit bigger so for the width right here we can kind of increase the width maybe scale it differently like that's something like that right there and then maybe right here we can you know put it to the center now let's just say for example you guys don't want to do all this work again you know because this can be a lot right so let's go ahead and duplicate this instead of actually having to manually create it all over again so for the banner section right here under the gear icon I want to actually duplicate this section so here we have the banner now I'm gonna actually left click on this and drag it over here to our other section right here so I'm gonna click on this drag it right to the add elements alright pretty easy and then do that again so I'm gonna click on the the banner section here again and I want to actually duplicate it so you guys can do it right here and again you guys can also do it right here so again you guys can see the banner right here and then right here it's there again so I'll click on duplicate and then voila there you go and then we can simply take this and drag it up here and there you go so that is a very quick way and simple way to kind of make things yourself you guys can always just click on the plus icon right here add in a row and then simply go ahead and add in whatever modules that you guys want in those rows and columns and since you guys know kind of how to use like the other settings and stuff it's pretty self-explanatory is pretty simple but we're gonna practice a little bit more or later when we talk about the about us page and contact this page but for right now I want to go ahead and forget all this we're gonna go ahead now and create some products so I'm gonna go ahead and just delete this whole section so it's a delete it right here I have this row right here that's controlling these three columns I'm gonna click on that and click on delete so I don't want that no more I just like this section right here I think that is perfectly cool so let's go ahead now and update this and we'll talk a little bit more about designing our site a little bit later when we talk about the about us and the contact us page but that was a quick warmup guys on how you guys can decorate your websites so first I'm gonna show you all how to create products through e-commerce websites then I'm gonna show you all how to create product categories and lastly I'm going to show you all how to customize your shop your account and your checkout page now this will puppy the most difficult part of this tutorial so if you have a favorite beer or drink now's the time so let's go ahead now and create some products so to do that we're going to install the WooCommerce plugin so right here I'm gonna go to my dashboard and go to plugins and go to add new right here we're gonna type in WooCommerce again WooCommerce is probably the most popular platform you know originally when WordPress first came out it was intended only for a blogging platform and the popularity kind of grew and people said you know what we can do a lot more with this platform so right here under WooCommerce click on Install Now and click on activate and you guys we brought to a page that looks just like this right here now guys in the future this might change but I just want to kind of help you guys understand you know the basic settings so we're gonna go through this setup wizard so where's your store based at well I'm gonna put mines in California and go ahead and put your address so I'm gonna put like I'll use my dummy address I've always used before and then right here we have what currency so put your currency I am United States so I'm going to use US dollar are you gonna sell physical or just digital products well I might sell both so I'm gonna go ahead and leave both right now and then right here I'm gonna go to let's go payments so right here we have stripe and we have PayPal now if you guys uses my recommended hosting such as psych round com you guys can use stripe because it comes with a free SSL congratulations but if you guys use something like Hostgator you're gonna have to go ahead and pay for your SSL or any other hosting company usually makes you pay for it so we will actually go ahead and create a stripe account a little later you guys can always click on and create a new tribe account for me and then do it yourself but we are gonna use stripe and PayPal because I want your visitors to have access to checkout directly on your websites and also have the option to go through PayPal as well so we're gonna go ahead and use both and then also we have off live and payments which is like this is like the weird stuff you know like you can take check on cash on delivery and all this other stuff but let's be honest you know like who the hell is gonna do that I that's crazy you know like oh maybe we'll pay you later no I'm not gonna do that sorry here we go to continue so right here we have shipping in guys the great part about WooCommerce is that they just introduced live shipping rates so what that means is you guys can actually have your site linked up to USPS to automatically pull the correct shipping rates and not to worry guys I will talk about how you can set your own custom shipping rates in case you want to make a little money or you want to give your visitors a discount on shipping so right here we have the way unit so you know how heavy are your products are you guys selling fridges you're selling fridges you might want to do pound if you're selling some my clothes might want to do ounces and also dimension units you know the United States we use like inches and yards but for like other countries I use like they're on the metric system so they use like centimeters and meters but here I'm gonna go ahead and say you know what I just want to go ahead and click on continue I do want to use the live rates so right here it's going to automatically install jetpack and who commerce services for us so click on continue so right here we have the automated taxes so for those of you who are in the USA congratulations we can get automated taxes I think this works for parts of Europe I'm not 100% sure but we will be using this and I will also show you if you're not in the United States how you guys can actually set up your taxes no matter where you are so I know how to set up the taxes for specific rates I'm a pro I know everything so I actually wants to actually set up jetpack so here we go to continue with jetpack and this is for people who want automated taxes you don't have to do this but I'm going to show you all the methods for taxes just in case so you guys will need to have a wordpress.com account so here I'm click on continue you guys can always go ahead and make your own all right so this is like my you know it so it's free to make a wordpress.com account guys so it's it's pretty simple so right now it's authorizing my connection and again guys don't worry if you guys don't have a WordPress account I will show you how to set up your taxes regardless but I also want to show people how they can actually set up their taxes automatically so we've done everything guys congratulations the next thing we're gonna do is we're gonna create our first product this is that exciting and I hope it is so right here and click on create a product so again I have demo images in my file if you guys choose to use those you guys are more than welcome to alright so let's go ahead and get started so now we're making products so what are you guys really selling you know I don't know what you're selling but whatever you're selling this is where we're gonna create the products alright and I want to go ahead and just dismiss this you know we don't need that we really don't need that and we have all these notices up here I just want to dismiss all these these are really annoying they're just trying to like you know warn you of stuff they're actually being helpful by reminding you of things like you know this isn't connected or that's connected but we don't really need to do that alright so I'm just gonna go ahead and close all these just because I don't want them alright closing those and dismiss this okay so you'll be brought to a page that looks just like this right here and guys in the future if you ever want to make products you go to your products and go to add a new product so if I click on add new product it's gonna bring me to this page again right here ok my website is running a little slow because my internet connection is not the best so anyways so let's go and make a new product so right here I'm gonna do some like woman's shirt women's woman's shirt now right here this is called the long tail description now really quickly I'm gonna go ahead and go to my demo website and basically show you what I'm talking about so I'm gonna make it very easy for you guys to understand so woman sure ok so this section right here this is called the long tail description this is going to show up right here on the bottom now I know that's kind of weird that's the top part it's like inversed but that's just the way it works so this part right here you'll probably talk about stuff like you know made with cotton this is like the technical details you can say now you don't have to put this this is just if you choose to have it sorry here I have the product description then right here we added some you know some text and fonts if you guys want to add in like a big header sorry here like a product description I'll go ahead and highlight this and add this as a header so a heading is just like a title it just emphasized everything and then right here you put like this is made in China whatever you want to put and then here you there's other options like gingka's can align it to the center to the left you can have these in quotations if you guys use Microsoft Word these are like the same things like bold italicize but I don't wanna get into much this because this is pretty you know this is pretty self-explanatory you can change the font sizes the color everything else you guys can do all this right here so you guys gonna kind of have fun changing all these settings but for most of you you know you might not care about that too much you just want to like list your products so I'm gonna go ahead and just paste this in all right now it's going down here we have product data so simple grouped external and variable we're first gonna do a simpler product so how much does your product cost how much what do you want to make well I want to put $200 is your product on sale if it is you can put a sale it's for $100 now now how long is this sale going to last well I want to schedule it to I'm gonna do February 20th to the 28th so this is on sale is this taxable most likely yes tax class we will talk about this a little bit later when we talk about tax classes you may or may not need this most people don't use tax classes but just for the toll purposes I will talk about that a little later next let's go to inventory do you guys have a Scoob so if you guys are a store you guys can see your screen number here do you want to manage stock so basically what this does is it's going to tell people how many you have left so for example I'm gonna say you know what's I got 10 left that's all we got time left that's all we got here back orders do you want to allow back orders so what that means is if you weren't out of the product if you have no more do you want to give people the ability to still purchase the product if you have no more if you do you click on allow if you don't you click on no allow sold individually never check this box this is very rare circumstances this is basically saying if you have this checked and someone wants to buy this product they can only buy it by itself now in very our circumstances you would use this box but for 99 percent of you you would not check this box shipping so how much does this weigh well it raised about uh I don't know sixteen ounces what's the dimensions of the length well you know it's ten ten inches and then for the width we have you know nine inches and then for the height I'm gonna do 15 inches shipping class we're gonna talk about that a little later but for again for most of you you might not need to use that link products so what is a cross sell and what is an upsell so an upsell guys is something that you recommend when someone's actually looking at the product have you guys ever been in amazon.com and click on an item and it recommends you different items that is what we call is an upsell cross-sell is something that you recommend at checkout so when someone is checking out you know it's gonna recommend whatever items you put here so once we make some products will add some upsells and cross-sells but personally I don't recommend upsell or I'm sorry cross-sells the reason why I don't recommend cross-sells is because if somebody's already out the door to check out you know authority says someone says you know I'm gonna buy this product already I'm gonna buy it I'm going to check out why confuse them even more by recommending more items I don't even think Amazon does that I think Amazon will recommend accessories for the products but not other products so I am all for upsells cross-sells it can be a little gamble you could make money you could lose money that's my personal opinion about cross-sells attributes don't worry about this we'll talk about this we talked about variable products advanced purchase no so if someone buys something what do you want it to say thanks bro there we go thanks bro so they get it purchased no same things bro if they buy this product menu order this can be a little outdated because a lot of the themes such as flat sum we can actually position certain categories but if you want to change the specific ordering for each specific product you can do that here by saying like minus 1 or minus 2 and basically let's say for example we have minus 9 or something this product is going to show up first and then the next item - 4 - 3 - 2 so it's basically noon Eric Lee numbering the items in your shop which can be very tedious and not useful I don't recommend menu orders because you can always category something to say like our feature items you know men's items etc so I don't really recommend menu order it's basically the order you list products but again you know you can use that extra so extra is theme options just for flats um but let's just go ahead and create the product first before we talk about extra so I'm gonna skip extra and we'll talk about it in the next section when we talk about another product so product image you guys need to give your product an image so what do you want people to see when they first look at your product well we got this grower here yeah she's sexy she's having a good time so we'll add her okay so we have her right there now what other pictures do you have of this girl or a product sorry here click on gallery images and I'm gonna select this one right here alright and then we'll add on one more okay so now we have two gallery images scrolling down here now this is probably the most important part guys this part right here controls this part so right here I'm go ahead and copy and paste this and paste that right there paste it right there we go so I just basically added a dash and then you know typed in something and again these are the same options as the other ones so you guys can go ahead and add in whatever options you know you guys want you guys can add in a small image right here by clicking on add media and adding something else but again that's kind of worthless because we already added product images and product galleries so you know I don't really find a use for you know adding media or a contact form for a product you know maybe for like an inquiry or some like that but generally multiple sites don't have this like I've never seen that actually and then we're here we have sharing buttons make sure to do that because you never know someone can share a product so we basically made the product but let's just say we want to go and edit some tags so right here I'm gonna add in like woman's shirt and then I don't know woman's shirts like these are basically telling people what your product is so if someone sees your tags they click on it it will take them to related products so women's shirts I'll do like sexy shirt all right and this section right here is probably one of most important ones so add a new category so this section is just for women's products woman's and I'm gonna add that to the category guys this is very important because categories are the best and only way to categorize your items with WooCommerce so if you wanna have like a men's woman in accessories categories is why you add categories so let's click on published let's go and see this product now and guys people can actually buy this like immediately like if when you when you set your stripe options and your paypal options they can come to your website and buy this right away so it's not like we're really far from the store the store is actually very close so here I clicked on view products and there you go so we have the sale icon we have women's shirt and we have you know the in stock and then right here we have the images so and then they can like you know take a look at it look at it and kind of check it out pretty cool and then right here you know we can zoom in you know zoom in however you want it so this is a great way for your customers to kind of you know look around right here we can add in reviews and also we can set something later where people can actually set reviews that have only purchased a product so if you have a bunch of trolls out there who just like hate your sites don't worry you can protect it by having people who have only purchased your product make reviews so we made the product now before I go on any further I want to show you how to edit this page that's the great part about flotsam is that you can actually edit this page you know by default guys other themes you cannot change anything on this page whatsoever so right here click on customize so we have different settings over here we have heading style blah blah blah so right here we click on shop product page and we have different options guys so you can have like a left sidebar a no sidebar will talk about sidebar guys when we talk about widgets and stuff like that but for right now we're not going to use those because we don't have any widget sorry but right here we have different things like you know product header we can add in a colour header or a title header right here now let's just say for example that you want to like you know make this look a little difference you guys can go ahead and do that so there's tons of options right here guys where you guys can add a lot of stuff so you know you guys can have a transparent header next and preview navigation you guys can you know take that out so the transparent header now it's not transparent here going down here we have the product image style so you can have it like that or you can have it like this where the images are at the bottom cool huh and then right here we have different light boxes like the flat sunlight box the light box is basically this style of when it opens so when you click on it and that little light box opens up it's just different styles you guys can use to navigate it also product image hover zoom so if someone actually hovers over the product it's going to create this little section right here where it's oom zin so you can choose to have that if not so you guys can go ahead and take that out right there product summary product title divider so we can add a product title divider or you can go ahead and add it in or you can go ahead and take it out and also you guys can like do text alignments so you know the center and then right here we up to the right and then to the left all right and then forum style you know we can change it to defaults or we can change it to flat as well for the forum style as well you know you guys can show categories you guys can show the social icons product inline tabs so right here this was control this section right here sorry here let's go ahead and change these up let's see we can do product tabs align so right here you can see the tabs are moving around and we do the left and of course guys you know this these are you know I would say you don't really need to have these but you know if you want to get customizable you can do that I like pills the best I think pills is cool see how it's like that now or you can just do it like line tabs sound like that you know but it's a great way to decorate your shop and you know I'm sure there's a lot of useful ways you can use to decorate this stuff right here so here we have like OpenCart right here products and upsells now you guys don't have to have this because we can set this in the theme options or you can you know add them here it's really up to you custome it custom HTML you guys won't need because most of you aren't developers so if you guys want to go ahead and you know add in something like Nats you guys are more than welcome to I think a lot of these options guys are just amazing you know especially like with the product header and stuff like that you guys can you know change it to whatever option that you guys want and then again you guys can go ahead and mess around with these settings because you know it's just it's just cool to mess around settings you know you can kind of change this with their title divider etc okay so it basically shown you guys a little bit about how to decorate the product page and everything else and like the product header and stuff like that so I'm gonna go ahead and add in the I want the a menu back I don't want it to be transparent so I'm gonna go ahead and take out the transparency because that looks kind of ugly okay and then right here we'll go back and then we have category page as well so we talk more about category pages I'll talk more about this like for the header I think the header actually is better to actually change so right here for the header click on uncheck it'll give it this blue section I think that's much better than the image itself so this is actually a category guys so this section right here controls the category page so the other options that we were using was if you have no categories then again you guys can always change like the list style and everything but this we'll talk about a little bit later when we talk about the actual category page itself okay so this is the actual product page and here you know this is the header for the category so we can like you know show the title and stuff like that so let's go ahead and make another product and then we'll talk more about category pages in just a bit so we just kind of customize the product page okay so let's go ahead and go to plus new and go to product so let's go ahead now and make another product we just made one and it scored make one more so we're going to do like a woman's sexy shirt woman's are we do that woman's clothes woman's clothes for for cool I don't know woman's clothes what does the woman's clothes and then right here I'll go ahead and take this description again and then right here I'll put it right here just scrolling down here I'm just gonna go ahead and add this price now you guys don't need to follow me here because I'm just simply going I'm just basically making product categories so I'm just gonna go ahead and just you know brush through this really quick just to give you guys an example of the category page itself because you might want to customize that sorry here it's gonna go ahead and paste this in there we go pasting it and then set a image right here so here we'll go ahead and select this curl right here and then I'll go ahead and select an image like that and then this is woman's and I think I'm all ready to go so I'm gonna go ahead and go to publish now all right it is publishing alright so let's go and click on View product and again right here we have the same product you know and people can always like you can kind of browse through take out the next one which is pretty cool that's another great part about this theme guys and a lot of things don't have these options so this is really amazing so we basically created a category for women so without going into the next product I kind of want to show you all how you can actually customize your category page itself so I'm gonna go ahead and go to our menu and I'm gonna go ahead really quickly and show you how to add categories to your menu it's really simple so over here I'm gonna go to menus and now we have more options right here so we have product categories and we have women's I want to add that to the menu alright and we have a woman's right there alright also if you guys go to the other see we got we got WooCommerce endpoints you guys can do like the orders downloads account details lost password etc for your customers but for most of you we're not going to go ahead and do that also here for pages what you guys have to click on view all and add the shop and the cart the checkout actually no we're gonna do my accounts and yeah my account in shop and click on add to menu so I'm we basically created these pages because when we activated will commerce it automatically created those pages for us so we don't need to do all the hard work so right here I'm gonna go ahead and just kind of categorize these to wherever I want and go to write here say venue now a good strategy guys is to take your category and drag it under your shop like that and that's how most websites habits so let's go ahead now and take a look at our site alright so we have the home Beebe out and we have the shop and right here we have women's now if I click on womans it's gonna show us all of the categories for womens so every product I made for the women's section is going to appear right here which is really cool this section right here guys we talked about widgets don't worry about that we're going to talk about that when we talk about plugins because there's a lot of different plugins and things you might want to add to your store but for right now I'm just gonna go and show you if you guys decide to customize this section you can do that so right here I'm gonna go to customize and go to category page okay so let's go ahead and scroll down here and we have list style so we can actually change how this specifically works so let's go ahead and actually you know let's go back here I'm gonna give you guys a better preview of this by going to our woman section sorry here I'm gonna click on customize now okay that's what I want to see so now we can visibly see the category page that was a little weird so over here we have our shop and we have our category page so you guys can add a sidebar or you guys can you know not at a sidebar but I really want to show you guys is this section right here where you guys can click on this and kind of change how it looks like that also you guys can have a messy grid effect so basically this theme will equalize the images for you however if these are all different image sizes it can kind of create that grid effect look so that's basically what I kind of wanted to show you guys about this and again right here we have the products so you guys can like view him if you want to look like that that's another style that you guys can use here you guys can click on equalize the height column and then you guys can actually change the height column depending on how you guys want this to look so you know that's pretty cool so going back down here how many products you want per page well I want twelve products products per row you guys can have two you guys can have one you guys can have three you guys can have a lot so it just depends on how you want to customize it also for the header again we talked about that it's gonna show up right here okay so you guys can kind of have fun you guys can show the title whatever you guys want to do and then right here a products per row for mobile users so just for mobile users you guys can set a specific amount of products to show and then right here we can add a background to it or you can add a title background color so you guys can go ahead and change the title background color as well something that you guys wants right here you're not changing the background color for this section okay and then you know you guys can go ahead and go through some of these you know set featured images background or whatever buts everything wouldn't add a picture guys it's it's not it's not ideal and it could come up really weird and then right here you guys can change like the the category box so for example guys another thing I'll talk about is your prices so let's say for example you want to change this pricing to make it look like this or like this you see how the prices are now aligning differently that's the great part about this theme guys you guys can change how what this specifically looks and then right here we have the product box style so we can't see this yet because we don't have any other categories so once you make different categories you guys will be able to understand that a little bit more here we can add in a drop shadow you guys choose to add a drop shadow so now you guys can see that there is a shadow around our products which looks pretty cool then right here like a drop shadow hover so with the hover means if someone hovers over it it's going to create a different box shadow so again guys this is amazing it's an amazing theme and there's just so much you guys can do with it so Add to Cart button right now we have no Add to Cart button so if you guys want to add an Add to Cart button on the picture you guys can do that so right here we have this really cool Add to Cart if someone clicks on it it will make this little pop-up and then they can add it to the cart and here you guys can see the product is inside the card so that's really really cool here again we have a different style I like this style I think this is the best because it has the product yeah it looks really nice you know and yet the cart is really convenient you just click on it and add it to the cart really fast so it doesn't take you to another page it doesn't take you anywhere else it just does everything right there so it's pretty incredible here we can show the ratings let's be honest let's just say someone gives you some bad ratings and you don't want it to show up well you can just say you know I'm not gonna hide those we're gonna show it we're gonna hide the ratings but we don't add any rings yet to our product so it's not gonna show up but once we add some ratings it will show up on our product show-short-description if you guys want to show a short description you guys can have it like that now this is only good in conjunction with the other style of product that we talked about which is this one right here now this would be ideal now it doesn't look well right here because we have to change the actual image height and stuff but if you're gonna run this list style you might want to add a short description of it so that looks really bad but um you know you guys can change that by adding more column or more products to the row so I'm gonna go ahead and go to or change this back to this right here and then right here scroll down and let's keep talking about what we're talking about so right here at the cart button show categories disable quick view so if you don't want people to have the quick view option which is this right here you guys can actually disable that but I think that's really cool because it's super clean do you know it's it looks great you know it looks amazing and then we have the cut of the sales bubble so right here its circle now it's square and now it's kind of you know it's it's kind of falling off the page but you know that kind of counts as a look right there it looks really cool and then here instead of saying sale you can say like super hot super hot wait wait wait wait wait wait there we go super hot and also guys instead of having once you guys put stuff on sale instead of having like the actual like like the sale thing you guys can actually add like a percentage and settle the sale like on so how much was this off like how much is it off well instead of having a sale you can live I'm sorry you can put a percentage right there so that's really really cool so that's basically guys a quick rundown of how you guys can you know fully modify your product category pages so um if you guys don't understand it fully right now don't worry about it because um you know we're gonna go ahead and keep talking about products and also show you guys how you guys can add an image right here with this section called blocks so we'll talk about blocks a little bit later in this tutorial so let's go ahead and click on X so we have our product category page which is pretty cool so we've only done one product we've done a simple product let's go ahead now and create a variable product so if you guys don't know what a variable product is if I go to my shop page right here this is my my other one right my demo website here we have different variables so right here I have small and I can just a blue or red and we can change the price of this guy's we can change you know we can basically change this to any which way you want you can add one variable you can add two variables so let's just say you have only one color you can add as many variables as you want so size color men are women you know whatever you want to add you can add it in as many variables as you want so let's go ahead and keep going so we did our product page which is really really cool and we'll talk more about the product page a little bit later in this tutorial so right here I'm gonna go to plus and go to product all right so we're now we're going to create a variable products sorry here I'm gonna do men's shirt and I'm gonna go ahead and just simply you know take this and stuff right here just you know just just copy and paste this stuff you know okay so right now under a product data I want to select a variable product okay and right here again same options guys so nothing has really changed here nothing has changed whatsoever so the shipping everything else everything is the same so the only thing we need to do now is add some attributes and some variations so right here it says before you can add a variation you need to add some attributes on the atributes tab so right here I'm click on attributes and click on add so basically what kind of attributes you want well I want size or I want color sorry here sighs so what kind of size well we have small now the sign above the enter sign so usually it's like that you must hold shift and then press the button or but it's a good - so it's the key above the enter sign okay so hold shift and press it so we have small medium and large so we were creating just one attribute right now oh I saw that wrong sorry here I'm gonna click on used for all variations and go to save attributes so right now we only have size okay so I'm gonna go ahead and first just do one just to make sure you guys understand how just to do just one okay maybe you guys only want one I'm not really sure but if you guys don't want to I'm just gonna show you how to do one and two you guys wanna do three or four and five I'm sorry you guys don't have to do it by yourself but who uses you know that many attributes so right here under variations we're gonna click on create variations from all attributes and click on go and they're warning you saying are you sure you want to do this just say yes never look at warning signs just always put yes you know that's what most people do though okay so it's it's creating our attributes all right so three variations have been added so we have small medium and large so first I want to select a product image right here so I'm gonna select uh well select this one right here okay and then we'll go ahead and set a well add in a product gallery image for that right there as well so right here we click on product gallery image and click on this one right here all right so right here at our small click on this arrow right here put the image so we're using this one right here now how much does this cost for the small well the small is $19.99 and again guys this is the same options as the single product so a sales price is it in stock how much does it weigh shipping class we'll talk about later this fly by later and description talk about the same thing so if they buy it what do you want to say so yeah good good deal good deal all right so we basically made the small one now let's click on this and go to large I'm sorry medium upload an image sale $19.99 now guys you must put the price if you do not put the price the product will not be able to be purchased so if it ever is missing you know why you can probably miss the price somewhere so right here upload an image so like this and then again I'm gonna go ahead and put the actual price right here okay and then again you know I'll go ahead and click on Save Changes now I'm gonna go ahead and add in some dummy contents right here so I'm just going to simply grab this and put this as our short tail description alright and I think we're all ready to go now really quickly I want to set this to men's because we were making products just for the men now now really quickly guys under variations it says default form values so by default where do you want it to be at by default medium small or large that so that means when someone actually views the product and they see the product what size does it want it to be on default well I'm gonna put it on medium for now and right here and click on publish alright oh it's being a little weird publish the animal WordPress guys sometimes things happen that's kind of weird so right here and click on view product alright so now we have the product and we have size small medium and large ok so that's pretty simple to understand so again it's it's the same price it's 1999 that doesn't matter what we put it up so let's say you want to add a second variation which is something like color right maybe you want to add a size and color or something else so let's go ahead and go to edit the product now guys I'll be very honest variable products are probably the most confusing product you'll ever work with every other product you guys have seen like group product single product split products it's very self-explanatory so if this is a little confusing for you don't worry about it just because now I know that's it can be very it can it can be very confusing when you're first learning how to use these stores for like you know variations so really quickly guys I'm going to go ahead and go to attributes and I want to go ahead and remove this we're gonna start over from scratch so right here I'm click on add and let's do it again so sighs and then oops I spilled it wrong so small medium and large used for all variations say view tributes now we're gonna go ahead and add in another one we're gonna add in color so we here color so we have striped blue and then was add in red and then right here I'll do use for variations and go to save attributes all right now under variations again I'm gonna go ahead and remove all these because we're gonna go ahead and add in some more so I'm gonna go ahead and just get rid of all these three right here all right it's going a little slow remove and let's remove this last one all right now right here krei variations from all the tributes and go to go and it's saying you're sure you want to do this just put yes guys just but yes all right so now it's basically adding in our attributes to our variations so it's going to basically give us a few options this time so it's gonna give us nine options now so right here we have small stripes small blue and small red medium striped medium blue medium red large stripes large blue large red so you guys will have to go ahead and put a name in price for each of these so I know that can be a little annoying but if you guys have like 5,000 variation items I feel bad for you that's a lot of work so right here upload an image and uh yeah it does this sometimes guys you know what people tell me like hey you know it doesn't work well on your website or you know sometimes you get no errors I do get air sometimes so here I have that one $19.99 I'm gonna close it small blue and then I'll use this right here of course you know this is just front of trial purposes you know so these items don't really quarterly quarterly correlate correlate oh we have a small red right there and then again 1999 all right so we basically made it for these two items or these three so the next thing we have to do guys is make it for the rest so I'm gonna go ahead and just do that really quickly you guys can you just kind of watch me medium blue $19.99 you know a lot of people like when I makes Heights for them they have really large websites with a lot of products I'm just like man like a lot a lot of products it's really hard but you're selling like just like 20 items it's easy but if some people have like thousands of items I'm just kind of like man like that's a lot of work yeah like hire some guy to do before you know large blue did I put a price here - I put a price for this one right here I think I might have missed it yeah guys remember you must put a price it is required okay so it's not gonna work if you don't have no price so right here I'll do large red okay I'm so large red and then $19.99 and go to Save Changes so we added in all the variations guys let's go ahead now and take a look at our variation product so here we go to update and go to view product so we have the size so remember meeting by default small striped small blue and small red and someone can just click on Add to Cart and voila and guys that's a really clean style like it just looks so clean like it's it's it's user friendly it's easy and then from here they can click on you the cart take a look at their stuff they can add more right here they can add less we can actually decorate this specific section too but before we do that before we get ahead of ourselves let's keep with the products in the front page and we'll get there we'll all get there you know we're all gonna have fun it's it we're working we're working we're making progress so we basically made a simple and a variable product so hopefully by now you guys know how to make products and it's pretty simple pretty easy so let's go back to our home page here and let's finish the rest of the home page on our website so let's go ahead and go to my demo websites and right here you guys can see we have these specific products and then we have products latest products on sale so the next thing we're gonna do guys is we're gonna actually put in a categories on our front page so I'm gonna go ahead and make one more product right here I'm gonna make a you got the follow me here I'm gonna go ahead and make a woman's product just so we I have three products so you guys can kind of understand how this works so I'm gonna shirts and then right here just gonna put like demo and then right here I put $19.99 and then right here I'll do women's set product image I'm gonna go ahead and select a image ok does that sometimes there goes ok it's just being weird alright so then I'm gonna go ahead and select another image so I selected this one and this one and I'll just go ahead and select this one now I'll just it's like the same image and then right here I'll do like I did some short tail description you have to follow me here I'm just gathering some demo content just to make it look clean you know all right and then women's and then click on publish all right so let's go ahead and go to our front page now and now I want to go ahead and add it in the categories right there so let's go ahead and turn on the Builder so edit with UX builder to our front page and I'm gonna show you now how you can actually add products to your pages okay so I'm gonna go ahead and scroll down right here and I'm lazy you know I don't want to recreate another section right here so I'm just gonna go ahead and duplicate this section and you know just change the title of it so right here I go to duplicate and I can actually just click on this again and just drag it down right here now the reason why its off the page right there is because I have margin over there remember so remember we had a our margin so I'm gonna go ahead and take out that margin okay so right here I'm gonna put women's products because we're making a product category section for women so right here I'm gonna put women's products now all right here mythical on+ and I'm gonna go to products so scrolling down here I'm gonna go to products because we are entering products now guys this next section it's you really got to pay attention because the great part about this theme is that this theme can do image resizing it can do image clarification it can do a lot with your images and a lot of themes don't offer that so I really want you guys to kind of pay attention here to kind of really fully understand how we can edit this and make sure your image is fit because half the time guys images can be a total pain in the butt trust me images can be a total pain so right here I'm gonna click on apply and click on update all right so we have these four images now I kind of want to make our screen right here a little bit more full width so let's go ahead and go to the theme customizer really quickly sorry here I'm gonna go to customize now right here under layouts I want to select under this site content with I want to go ahead and put 1400 because I want to basically make our page a little bit bigger so it is full width but I actually wants to you know basically make it a little bit longer so now you can see our our categories are getting a little bit longer and then we have women's products right here but don't worry we're gonna change this really quick now if you guys want to add a description in you guys we'll do that through the theme customizer but let's just first continue with putting women's products there so I'm gonna go ahead and edit the UX builder again and guys if this ever happens or it just crashes like this just refresh it it'll it'll work it'll go back to normal there we go so going back over here so right here under products I'm click on options now I want to actually go down and I first want to go ahead and filter this by categories so right here under posts or we have category I want to select women's because I want to only select women's now I did add some products like I pause the video and said some products because I want you guys to kind of see how this works maybe you guys you know don't have 5 or 6 products right but I want to kind of show you guys you know how this works so I basically put in products right there and there's different ways you guys can kind of style it so there's like normal there's overlay where you would like to go over it there's an overlay right there and then there's also all these other ones but first you know if you guys look at this right here it kind of looks the images kind of look a little like cut off it doesn't literally look correct so I would put this under normal right here now I'm gonna go ahead and scroll down right here to the image section so I just passed it we have image now the great part about this theme guys is that we can fully edit the images to make them look correct so the first thing I want to do is for the size I want to go and put original so these are the original images that I uploaded and you guys can see it looks crisp it looks really really clean and looks really good right and also I want to select the height so right here I put half so this is selecting half now I'm selecting a hundred percent now I'm selecting 200% so now I'm selecting 4.3 so this theme has a full image resizing module built inside of it to make it really really simple for you to fix your images and again we can kind of just like scale it a little bit to get the exact height that you guys want so right here up with something like 155 or we'll put something like you know 125 you know you guys can kind of you know understand how that works and then also for the width we can select the width right here and then we can also select the radius as well to kind of give it that look right there that's circular look which is really really cool so I basically added these in but I want to add in maybe more images right I don't want to have to add in you know just four so I want to add in a little bit more so to do that I'm gonna go back over here to our columns and add in five columns so now we have five images right here and now for the the type right here you guys can do like different styles so again the layout they have a lot of really cool ones you guys can select like row missionary and then also we have grid which it basically creates this little kind of like look right here so there's different ways you guys can really customize your shop and then right here you guys can choose like the grid height you guys can go through like the grid high and each specific type of layout to kind of achieve what look you want for your e-commerce websites but for the style right here or for the layouts I'm just gonna go ahead and select like a slider alright so we have our images right here and I want five columns and then of course we can add in some def right here you know it can get some emphasis of the product and then def hover someone hovers over it and of course we can add in like a animation so it'll slide in to the left like that so it looks really clean and our products look really really good and all this stuff right here can kind of control like you know left/right medium size etc small large you know you guys can kind of like you know fix the tags and you guys can you make the text fade in and out yeah so it looks really really cool you know you guys can do all sorts of different stuff for hover or you guys can add in some background color to whatever you want to really customize your shop but you know I don't want to kind of go through all the basic settings you guys kind of understand you know the post Auto slide of the slider settings you know fade into left etc so this is a quick rundown guys of how you guys can add these specific products to your page and make them look really really good and also if you guys want to add in the description of the products you would do that through the theme customizer so for example say you want your products to show up now this is being weird sometimes so I'm just gonna go ahead and do that and go to customize so sometimes um you know if the Builder gets a little backed up you just got to kind of mess about with it and fix it so scrolling down right here now you guys don't have to follow me but I just want to show you something so I want to basically add in like the product description so for the product description I believe I'm gonna go ahead and do that through the it is through the shop and then I think it's the product page I think the product page will actually apply it to our images that are not even in the product itself so let's see if I can do this right here I believe it is sorry I don't memorize every theme in particular you know so if I if I don't memorize it you know don't don't be mad at me but let's see right here so we have I think it is right here okay so right here we can actually click this and this will actually show the short description so a lot of these other ones in the theme customizer can't control it like for example we can choose to have like the Add to Cart here now you guys can't see it but if you guys click on publish and then close the page it's going to show so remember I'm adding the Add to Cart right here and I'm also adding this short description for the products so when I close this page and I open it it's going to show the short description and it's also going to change the way it looks right here so right here now we have Add to Cart right here and we have the description of the product right there so it kind of correlates each other and it looks really cool really clean now there's others different styles you guys can use for your product categories so you know this is just one of the methods guys there's tons of other methods so for example let's just say you guys want to have a flip book you guys can actually I have like a flip book on your site instead of having that default setting right here so right here I'm click on plus scroll down and go to you know there's a flipbook product list but I'm just gonna do flip book and then here you know people can actually just scroll through your products to see how it looks like there so there's different styles and methods on how you guys can display your products on your shop and again I'll click on plus and just simply do this one right here a product list and then you know we can do like on sale or featured products or best part it goes by category guys so you can't see right there but it would go by your presets for your categories so I'm gonna go ahead and just you know delete that one section because it just does not look good that does not look good okay so that is an example guys of how you guys can add in different styles or products to your page this was by far guys the biggest section because the theme has a lot of ability to do a lot for your products so I hope that was not too hard to understand and again you guys can always change the styles right here and everything else okay so I'm gonna go ahead and delete this section let's he right here so I'm gonna go ahead delete it all right I'm gonna go ahead updates okay now let's go ahead and take a quick look at our shop so right here you can see our products and if someone clicks on the product they will be brought to the product and again they can always like check it out and everything else so that is basically guys how we do that now I want to go ahead and keep talking about the products in the shop and all the things that we can do for it so I want to actually talk about the shop and I also want talk about the product extra features so when I first created the when I first created a simple product right here we talked about extra so the extra feature right here guys it actually gives you the ability to add a different stuff for your products so right here we can put like a hot sale custom tab title like amazing now our product video so I'm gonna actually show you guys how you guys can add videos for your products if you decide to have that so I here I'm gonna do models walking and just simply just I'm just gonna go ahead and take this and I'm gonna copy this right here alright so we got this video right here now I'm just gonna go ahead and post this right here now we also have a lightbox so I'm gonna leave that as default now these right here are four blocks so we're gonna talk about blocks in just a little bit but you guys can also add content above your actual products itself so right here but something like howdy and then you know great deal now I'm just putting this here just to show you where these are going to show up on the product page so right here I'm click on update and I'll click on it view the products so now you guys can see we have howdy up there and then right here we're gonna go ahead and see a great deal now the reason why it looks like that is because it's actually meant for blocks and we're going to talk about blocks in just a little bit but right here if I click on this the video it's gonna actually show that YouTube video so for example let's say you have products that you want to kind of display you know as actual video you can actually do that with this WordPress theme so it's it's pretty cool and then this right here this is bulimic or there's anorexic girls talking about like modeling or whatever but she needs to gain weight she's way too skinny so right here i'ma go to edit the product and I'm gonna actually take out that section right there but that was basically the extra section okay so now that we've talked about products and I've shown you how to display products and everything I want to talk about how you guys can basically change your your shop page and all of the everything has to deal with with shopping and products and all that stuff I'm gonna go ahead and show you guys how you guys can customize all of those pages to make them look how you want them to look so first let's go ahead and go to our shop page so this is our shop page right here and I want to go ahead and click on customize ok so this is our shop page now I want to add some widgets to this I want to add some things like you guys have seen over here on our other shop page I want to add in some like product or filter by price I want to enter in some other really cool stuff right here so over here under the let's see under the shop sidebar we're gonna add a widget and I'm gonna go ahead and add in a search by price so guys widgets are just basically little things that you can have on the sidebar and also have on the footer of your website as well so let's go ahead and go to let's just do this search product search and also over here we have a filter by price and recent reviews so I'm gonna go ahead and just do search by product search products alright and next I'm gonna do filter by price because maybe you got some cheap people on your website you know they're not cheap but you know they're on a budget you know so I'm gonna show you how to do that I filtered by price and people can go ahead and filter this and it will basically filter it by price so people can kind of you know if they're hurting for money you know we can help them out you know we don't want to exclude anybody out of our shop right so filter by price add another widgets and you guys get the idea now there are tons of widgets you guys can add we can add in categories so right here we have you know like the women's I'm sorry we have to add product categories that's for our blog so add a widget and then right here will type in products product categories so this way right here we have men's then we have women's and then we have of course on categories because we have to actually delete that one because by default WordPress creates one and don't worry I'll show you guys how to actually create or delete that so I'm gonna click on publish now just to make sure it's saved and let's go ahead and add in some other products so right here well do like I know we're gonna do a filter by prize filter by rating upsells product categories product by ratings so right here it would be a list of like you know top rated products you guys can add and you know you guys get the idea it just helps people to navigate your website so basically you guys can see it looks very similar now I do want to show you guys something I do want to show you how you guys can kind of you know change your actual shop page and be a little bit more customizable so right here we have our shop page right here on our theme customizer we have our shop and we have our shop page so the category page is the actual page were all your products are at the product page is this is the page where your product resides so first let me just show you guys how you guys can customize your shop page so click on category and right here we're gonna do let's go ahead scroll down you guys can put the sidebar on the left side or on the right side and there's different ways you guys can kind of like mess around your images right here I like this fact that you guys can equalize the image hi because you know image sizing guys is probably one of the most annoying things about WordPress you guys can change the image height right here to make it look however you want it so I'm leaving 100 you guys can list the products per page you guys can also list the product per row so if you want you know four products per row you guys can do that also you guys can go ahead and change the how it looks for tablet mobile now the reason why this product right here is slightly off is because the title is too long so men's amazing shirt so the option is basically saying we are going to you know equalize the image height which is correct however since the title is so long it's actually bumping down a little bit so that's basically why it has that feature right there so yeah so next we're gonna go to our header sorry here we have our home nav and then again you guys can kind of understand how this works these options are pretty simple categories so if you want to display specific categories on your page you guys can also do that through the WooCommerce settings we'll talk more about that a little bit later but for example let's just say you want to list only categories like men's women's and accessories on your shop and if someone clicks on it then they'll go to the that product category we can do that as well so I'll talk more about that when we talk about the WooCommerce settings because that would be under commerce settings and of course right here we can go ahead and change these settings you guys understand this probably by now so now let's talk about the actual product page itself so I'm gonna click on a product and right now I will go to product page so this is right now controlling the actual product page itself so we can actually customize a specific product page so for instance we can you know change the image size to make it look like that we can change the navigation up here to whatever we want we can you know go ahead and go through all these and make it look however you want you guys can do like a flat some lightbox instead and again the lightbox is when someone clicks on it it opens up that is a lightbox so that's basically what it means when someone says a custom lightbox and then there's product title divider we can align this to the center or to the right or to the left or however you want to do it you guys can show categories you guys can showed social icons etc all these options right here are pretty self-explanatory guys so we talked about up cells so up cells would appear in the sidebar if you chose to have a sidebar remember up cells are products that you recommend instead of the current product you're viewing so I basically shown you guys how to kind of customize your product page your category page and the account page or no not the cabbage yet but I want to introduce you all to blocks so what blocks are is blocks basically allows you to basically build this page it makes you so you guys can add stuff to it now by default you cannot do this with any other WordPress theme but flotsam you can so let me just give you an example of what blocks are so right here I'm going to click on publish and click on X now you guys all have to follow me you guys can kind of sit back and relax and just hang out and I'm gonna show you all what blocks are so over here under blocks we're gonna go to add new and right here I'm gonna do shop title and I'm going to enable the UX builder oh stay and then publish this alright and I'm going to enable the UX builder so right here I'm add some content I'm going to insert a which I insert will do uh I don't know will do a let's go to awesome studio you know I'm really lazy here you know we'll just do like a banner it will add in something like let's see here features I'll we'll do new arrivals that's perfect so we have a campaign our banner alright so over here I'll do something like call to action new arrivals here we go import I'll go and import this all right so this is the section that I currently have and of course we can go ahead and edit it here the height is a little bit too long maybe I want a little bit shorter so like do something like 300 or something and in this section these buttons right here I don't really want these buttons because we already have product categories on our page on the widget section remember so I'm gonna go ahead and delete these I don't want any buttons we can always add buttons but I'm choosing not to because I don't want to distract our customers when they're on our shop I just want this new arrival section okay and I'll click on X really quickly so I basically made the page now I want to take this shortcode remember how we talked about the header section and that footer section when we had products and it looked kind of weird well now we're gonna actually going to use that and utilize it for our shop page so I'm gonna go ahead and go to our site now so now we've made our block I'm gonna go to shop and I'm gonna go to customize all right so we're I'm gonna go to my shop right here I'm gonna go to the category page and right here I want to go ahead and paste that shortcode in there now and now it looks like that so that looks much better than what it looked like before so if you guys want to add this or something else onto your shop page you would do it through the block section so I know this section is a little a lot to absorb guys with the products and everything but I just want to make sure that you guys kind of understand you know how it works out and everything else so that is an example of what blocks are and you guys you guys can add blocks anywhere so there's tons of places where you guys can add blocks so right here we added another block actually below that but you know that's stupid because that actually will delete your products so don't do that so right here I'll click on publish so now that you guys know what blocks are we can actually add blocks on our account page our checkout page on all of the pages that you normally couldn't customize with WooCommerce so let's go ahead and decorate it so I've shown you guys how to basically custom at the shop page and again if you go to your product section and go to edit product you can add those blocks even on the specific products so over here under extra under the custom tab section right here it says short codes are allowed so you can go ahead and enter it there you guys can also do it through the theme customizer so right here I'm gonna go to product page okay product page and I believe we can go ahead and enter the shortcode also on our product page um you know I'm not really sure if we can or cannot yeah you know I don't think we can but then again I don't think you would really want to because that would be crazy adding a specific block for each specific product I think that would be a lot of work I thought you could though I really thought you could I you know I guys I don't use this theme all the time so I use a lot of themes so anyways I'm gonna go ahead and just you know save this right here yeah we can't you know that's so said oh wait I think we can here so I think we can under the UX bowler so let me actually show you one more time we can actually edit this with a UX builder now I believe with the UX builder guys you guys can actually add content below it so you guys can't add content above it but you guys can add content right here and then maybe you want to click on this and then we have the blog section or you can add in whatever you want and customize it's just like a regular page so right here remember yup the block I can go ahead and select the block and then make it appear right there but again it's only gonna appear and just in the bottom description of this section so sorry about that I thought you could but I'm gonna go ahead and just leave this but again you know I don't think people out there who really wants to decorate each specific part of the shop cuz that would be crazy adding a custom page for each product would be a lot alright so right here I'm a click on exit so we I've shown you how to categorize those specific sections so the shop page the actual product page now let's just say you want to go to checkout so view the cart now this section right here we can also edit this section as well so right here under the Edit with UX builder we can click on edit with UX builder and we can actually go ahead and customize this specific section as well so right here we have like the card section so right here we can add content and then maybe you want to go ahead and add in like something else and this is great guys where you can enter like something like coupons in so this specific section you'd want to advertise those coupons and not to worry because we're gonna talk all about the WooCommerce settings in coupons a little bit later in this tutorial so I'm just gonna go ahead and just import something really quickly just to make sure you can understand how this works so I'm gonna go ahead and take this and drag it up here and now wallah we have this section right here below our cart now that of course that is way too big so we could always reduce this size to make it look a little bit smaller and then maybe right here we can advertise some coupons to make it look really really cool so you guys can kind of understand how you guys can customize this section right here to make it look really really cool so again you know also the WCM cart do not delete that if you do delete that guys this section right here is gonna be history it's gonna disappear and I know you guys don't want that okay so I don't do that that's a no-no don't do that okay so basically we can customize the car page right now let's just say your customers make you know they have an account right so we want to be able to customize our my account shop and guys it's the same exact way so my account and right here edit with UX builder and then right here we can go ahead and put some stuff in now by default guys do not get rid of that because these are the short codes that Commerce needs for all this stuff to generate but we can always customize their portal so this right here is the portal guys and I think a great thing to do here is to add in your Facebook group or to add in future sales or to add in products that they might be interested in so for example add contents well just simply select maybe like a I count down for sale and then here you can probably put like a countdown to a sale now I'm not gonna go ahead and go through these options I think you guys can kind of read this and kind of you know get the idea of it and then maybe right here you want to add in something like social icons to your to your shop and then right here you can just put in like the you know I'm just gonna put in the number science this will make the icons appear okay so then maybe click on apply' and click on update now the reason why I'm showing you this guys is because other themes cannot do this so the fact that this theme can do this is nothing short of amazing so by default guys when you use other themes you can't decorate any of this but with fot some you can so I just want to introduce you all to this and show you all that you can edit all this stuff so I'm Finn you guys how to you know customize your account page so if I go to view the carts oh let me go ahead and close this builder really quick okay so right here I'm gonna go to view the carts and now that I've shown you guys how to decorate this section let's go ahead and go to proceed to checkout now there are various forms that you guys can use to decorate the checkout page you guys can also edit this page as well so right here you guys can go ahead and enter something else in here like right here plus Fossum studio and then maybe right here you want to add in like a thank you banner or just something to kind of encourage you know a future sale so not a countdown don't put a countdown because that would be like they're gonna come like they're not gonna buy anything and they're gonna want to come back when they get a better deal you know want to put a countdown you don't want to put a coupon you don't you know you don't want to put anything that advertises cheaper prices because that's just going to make people want to leave it could be see right here could do something like I don't know maybe you could you guys can even put in products you guys can add in member product categories onto the page or something or whatever you want I'll just do something really quick just so you guys can see it so I'll just do like christmas is coming maybe you can actually link them to a specific part of your next sale so right here I'm gonna go ahead and click on options and I'm reduce the height of this banner cause it's way too big okay I'm gonna click on apply now for this shop section right here this button maybe you can link them to a section where only they will have access to which is pretty cool you know you can link them to like something else to right here you put like or T HTTP and then we'll do like a new window click on apply click on update so what I just did is basically if someone clicks on this they're gonna go to whatever part you want them to go to so you know that's kind of a quick understanding of how you can link them to different parts of your website now if you guys don't know how to link them to different parts of your website I'm going to show you right now even though it's pretty simple so right here let's just say let's go to the woman's section you're just going to go ahead and copy this link go back to the condo go back to your check out whatever so check out and then we're just going to insert that link so this is where you get the links so wherever you want to link them it's just like you know putting the link in and you know right here so I'll just go ahead and paste this right there and apply and then done so when someone clicks on that link that we brought to the woman's shop and again you can link them to any part of your website guys you can link them to anywhere so it's just really using your imagination at this point to kind of making you know making it so you know you navigate your customers and tell them where to go ok so again this theme is amazing we can decorate this page but there's also one other feature that we can do so right here under cart and checkout layout there are different layouts for the checkout page so you don't have to use that there's like another way like a simple new and then simple focused now that is clean that is really super clean the fact that we can add it like this right here so I think that's really cool cart sidebar content you guys can add in some more content right here floating field labels that is new floating field labels well they have all sorts of options guys you know you guys can look out here so I like the focusone I think this right here is a super clean super simple checkout form I would recommend it so I'm gonna go ahead and close that now the last thing I want to do before we talk about the products or before we go on to the next part of this section is in the beginning of this tutorial I showed you guys how to do the this section right here so I just want to basically quickly show you guys how you guys can display categories on your page instead of having single products so really quickly I'm gonna go to my dashboard we're gonna go to our product section and click on categories so right here we have an categories men and women so really quickly I'm gonna edit this and just do accessories just just for spell purposes we only have to uh you know categories but so I'm just gonna go ahead and just show you guys how this works okay no I want to add an image for this so right here I'm gonna add in an image I'm just like that or maybe the glasses and then click on update okay back to categories for men's you guys don't have to follow me here I'm just kind of giving you guys an idea of how how to add first off images to your product categories and then how to display categories as well so right here women's I'm gonna go ahead and just select an upload image it's like that one no one's sound sexy huh well I didn't uh so many pictures alright well I don't that one and then update there we go so let's go back to our sites and you guys have done an amazing job by now if you guys are still with me congratulations the next thing we're going to do is show you guys how to insert product categories so us growing down here I'm gonna click on this plus and just go to product categories so right here we have product categories so let's go ahead and scroll down right there so alright here we have men's women's and then we're gonna go ahead and do something else like well the like default normal now the reason why the accessories doesn't show up actually is because we didn't any products for that category so I'm just gonna go ahead and just put in like two columns now it does look a little strange but again remember how we talked about the image sizing you guys can basically edit this to make it look however you want like you guys can make it a little bit more fixated like that and then you guys can change like the radius like to make it a little more circular etc so that's basically how you guys can you know do categories for your specific products so again you know we wouldn't do this before so I'm not gonna go through it again but that's how you guys display product categories and if someone clicks on this they're gonna be brought to that page where your categories reside so let me just show you quickly I'm gonna click on this and it's gonna take them to the woman products okay so I hope you guys understand how that works it's pretty simple pretty self-explanatory and again you know there's our shop page okay so this whole section we cover guys was everything about products decorating your products shop page widgets blocks product categories this was probably the hardest part of this tutorial everything else is pretty simple but now that you guys understand how to upload products how you guys can fully customize it's the next section we're going to do is we're actually going to finish the home page after you finish the home page we're gonna do the about and contact us and then we're gonna go ahead and talk about the theme customizer and WooCommerce settings which is probably the most important section okay so in this section we're gonna start using more widgets I'm going to introduce you all more to the theme customizer and we're also going to use some more plugins all right so let's go and get started [Music] so let's keep going and right now we're gonna go ahead and finish the homepage right here so I'm gonna go ahead and click on this right here now I'm going to show you how you can add an email subscription for your website we will need a plugin for it alright so that kind of froze a little bit it's weird but it's okay it does that sometimes so let's crawling down here I'm gonna go ahead and delete the product categories cuz I don't really want it and I want to add in content and a flat some studio so I want to go ahead and add in something like like a signup form and there's bunch of them we can add in I'm gonna go and add in this one right here now we can always make this ourself guys but personally the theme has kind of designed it around itself you know why would we do everything complicated when we can just simply go ahead and use some other templates click on it edit it or even just change the text position where who wanted you know this this way is so much easier so I highly recommend to use a template system more than the actual page Buller cuz the page boiler again you can always make it yourself but why would you if they've made thousands of templates for you you know so right here the this is a shortcode now we need to actually install a plugin so let's go and do that I'm gonna go ahead and close this so if it ever does that guys where it resets just do this right here just go to your domain and it should work fine alright so let's go ahead and install a plug-in that will allow us to add emails so right here plugins add new so in short guys plugins are basically apps for your website just like there's apps for your iPhone or something plugins are basically added features for your website so for example this one right here helps with SEO this one right here will commerce which is what we use help sell there's very there's so many plugins out there guys there's like literally 50,000 of them so there's tons of them like this one right here will limit your login on your WordPress website so someone's trying to hack on it it will basically lock your WordPress website this one is for security this right here helps with caching this right here Zulu analytics and so on and so forth now the one that we need right here is called contact form seven so right here click on install now and go to activate alright so we basically activated contact form seven now right here and click on settings and we have a contact form by default so I'm gonna go and click on add new we're gonna add a new contact form this would be called signup and right here I'm click on save just to save it just to make sure everything's ok so right here is a simple contact form this is a newsletter and this is a newsletter form vertical now this is what we want right here so I'm gonna go ahead and copy all this I know it's code it looks a little complicated but it's really not and under form right here I'm gonna go ahead and just delete all this and paste that right there and right here and click on save ok so I basically made a signup form from contact form seven so now let's go ahead and insert it on our website so right here I'm gonna click on edit with UX builder and I'll go ahead and scroll down right here and right here I'm gonna click on this right here left click now right here which says form for the form I want to select sign up so this will basically create our our contact form for us so it does look a little distorted right here so we can kind of move this around to make it look a little bit more cleaner something like that and then right here to click on apply and then update all right so now if someone signs up to this it's going to actually go to the email that we want registered for it so if you guys go back to your contact form you guys are your I'm sorry the the plugins so I'm go to my dashboard I'm gonna go to plugins installed plugins and go to settings from my contact form seven under the signup section we actually can list an email of where we want these emails to go so right here under mail you can see that - it would go to this address so whenever they sign up it's going to send them a notification saying hey you know you actually got a a subscriber and then from there you guys can use a subscription service like MailChimp to build an email list now I do have a full tutorial on MailChimp in the description of this video but in this tutorial I'm not gonna go over email marketing or signing up for email subscription because that is that will take a lot of time guys and I don't wants to get off topic and start talking about email marketing and stuff so that work there is basically how you guys add a contact form I'm sorry an email form on your website and you guys can test it so let's go ahead and test that really quickly just to make sure it's working so I'm gonna go to my gmail and I'm gonna go back to this websites and I'm gonna go ahead and you know type in an email so and then right here we'll click on signup so now you guys see this form right here thank you for your message it has been sent so if we go ahead and go to the email which is the one I currently have right here you see how it's the email is right here and then again the email that we subscribed for is right there so that is a way people can send you their emails and you can build a subscription list okay so let's go ahead and keep on going we're gonna go ahead and keep pushing to the end of the section right here and guys if you guys are here congratulations we are doing really really well so the next thing next X that we're gonna do is we're gonna do the the Instagram and then our blog section and then our footer section so right here I'm gonna go ahead and click on plus or first we gotta edit that you watched builder of course and I'm a refresh its so it does do that sometimes just lets you guys know it does get a little weird so scrolling down to the bottom I'm gonna click on this plus icon and we are now going to keep making sections now I can always just you know duplicate that other section that I have with the with the title which is kind of what I want to do and then I'm gonna go ahead and take this and drag it down woman's products and right here I'm gonna put Instagram Instagram and then right here we click on plus and then we're gonna go ahead and add in a widget actually you know we're going to do we're going to go ahead and add in a we can add an Instagram feed right here or we can use a plug-in but I'll just go ahead and do the Instagram feed because it's it's more simpler so right here you guys can already see that it's starting to come up so right here we have in the Instagram feed oops one thing about options again so there's different ways you guys can style this but the with the you know with the the type with the slider you guys can select a column amount of images etc and it's just a really beautiful Instagram model these guys I've added there are a lot of plugins that do the same feature that are usually a pro features like you got to pay like 50 bucks etc so here you guys can go ahead and add in all of the you know the settings right here such those columns and all these guys are the same exact option so I'm not going to go ahead and go through these you guys kind of understand how this works you're gonna go ahead and put in your user name right there so I use a user name from another WordPress theme let's see right here if I can go ahead and grab it for you guys again so you would link your Instagram right there not not mine not anyone elses you would put your so your user name right there it would just display your feed right here and again you guys can use it to kind of customize it and make it look however you want so let's go ahead and load this huge pillar on my other website right here I'm gonna go ahead and go ahead and do options and then simply grab this I'll go ahead and take this right here and I'm going to go ahead and paste this this is this is another WordPress theme and then you know we we can edit it so like you know columns maybe four columns so it looks like that you know something cute really cute and then again you know we can you know go to these settings maybe just eight images okay so I'm gonna click on apply and click on update alright so the next section guys is the blog section so let's keep going we're doing really good so right here this Instagram title I'm gonna go ahead and just copy this again click on back and I want to go ahead and just take this and drag it down and this is going to introduce the next section which is our blog section and then we want to add in some margin to the top like that okay so are you hearing click on apply' click on update and guys a blog post worked the same way as pages so just like we made a page let me go ahead and click on this go back the same way we made a page is the same way we make a post so right here under + new I'm gonna go to post and then right here we can just put in like you know 10 things about or 10 best vacation spots vacation I can't even spell vacation spots and then here we'll go ahead and scroll down and we can set a featured image for it and we'll put this or I don't know we'll do something like this right here or I don't we'll put that one right there and then right here you can go ahead and put in your content and you can also use a UX builder to create a custom post so just like you made a page you can do the same exact thing for your post which is pretty amazing because a lot of WordPress themes do not allow you to do that so right here under categories again and you can make a category so for example let's say you want to list specific categories on the front page you can do that right there but I don't want to really make a full blog post guys I don't really want to go through all that so I'm just gonna go ahead and probably just steal the other the content I have over here and just simply just you know take that content right there and just use that content instead of you know making everything all over again I actually just used a blog post from my website Darrell Wilson com so let me go ahead and go down here and click on this and there is my blog post simply take this right here copy it now right here guys I just added some images and I did this basically using the UX builder so if you guys want to you know get more customizable you guys can always use the UX builder instead default it'll look like this right here you guys go and publish it let me give you guys an example of how this looks all right and I'm going to go ahead and view the post and there you go so this is the actual post we have the featured image we have our content people can share it people can comments and all sorts of stuff and again guys also just like we did the the shop page we can add widgets on our blog page and we're going to talk more about that when we talk about the footer and that's the last section we're gonna talk about like widgets and footers and plugins etc so you guys are definitely getting there so also if you guys wants to edit this with the UX builder you guys can do that as well I did like the templates I think the templates are great that you guys can just kind of add a template here make it really simple and then just you know make a full post really quickly so my builder is being a little glitchy so there we go so right here you guys can just add in like a template you know like a blog or something and this is great for you know whatever you want to do so you know you guys can get the idea I'll just import it just to give you guys an idea of how you guys can mess around with the blog and use a UX builder so here you know now we can see that we have this blog and yeah so you guys get it you guys totally understand right hopefully by now you guys kind of get how that works but I don't really want to go ahead and use that so I'm just gonna go ahead and delete all this stuff I just like the actual the default stuff I think too much on the blog page can be very distracting so I'm gonna go ahead and delete this and I just want the text so just like it was before but again you can always use the you expeller to go above and beyond and add images and all sorts of cool stuff okay so let's go ahead and keep going I'm gonna go to exit builder nope so if it does that guys just go ahead and delete all that and go to our domain I know it does that weird glitchy stuff sometimes but you know what are you gonna do so lets going down here we have our Instagram and we have our blog so we made a blog post now we need to actually incorporate it on our website so right here I'm gonna go ahead and scroll down and right here under the add to content so we're gonna go ahead and add an ad in the blog section so we need to add in the blog post right here so I'm gonna go ahead and just do C I'm gonna go ahead and scroll down right here our desktop and right here is our blog but they're gonna show up and again you guys can decorate it with columns everything else but all your blog posts are gonna show up there and it looks really really clean so it looks really good and that's basically how you guys enter your blog post now of course I can always enter in more like the demo but I think by now you guys understand how that works I just basically made three blog posts and all my blog posts will show up right here okay so that's pretty self-explanatory alright so the next section we were going to do the fun stuff we're gonna do the footer section and we're also gonna do the widgets and the sidebar and guys we are nearing to the end of this tutorial so you guys are here so far congratulations because after we talked about this the last thing we're going to talk about is designing and then commerce settings and you're gonna be all set and ready to go with your e-commerce website so let's go ahead and do the footer section now so right here I'm gonna go to update click on close now all right here are our customized section so in order to decorate the footer we will need to go to the theme customizer so right here you guys can see we have footer and I will go ahead and scroll down and custom footer block remember how we made blocks earlier for the shop title and everything else you guys can do the same exact thing right here for the footer so you can actually make a custom footer so for example you can kind of like design it to look like this so maybe a text module text module text module text module etc or you guys can use the actual default settings for the theme which we are going to use we're not going to make a custom footer in this tutorial but you can so I'm just basically telling you that you know you can make one in a block and then add it to the bottom but let's go ahead now and go to footer area one so right here we have four columns and I want to edit the footer widgets so we have footer one and foot or two so this thing comes with two footers I think you should only use one of them however you are more than welcome to use a few of them and if you guys go to the flats um let me give you a quick example what I'm talking about so the flotsam demo I'm gonna show you exactly what the footer 1 is and the foot or two just in case you guys decide to to use it so let's see right here I'm gonna go to my demos really quick and give you an example let's find it let's go hunting a classic shop all right ok so this section right here is footer area 1 where you can add best-selling products you can add its arbitrary text you can add featured or top-rated products this right here is section number 2 where you can add tags your blog information about us social icons and a signup form now it's strictly up to you if you want to have a footer this big personally I believe this footer is a little bit too large you know most footers are pretty small and this comes off as a little bit too spammy but then again whatever works for you and your store you are more than welcome to do so for footer area 1 we can add a widget and I'm gonna enter the arbitrary text and then right here you can do something about us and then right here you can go ahead and talk about yourself so I'm just gonna go ahead and maybe grab some dummy text really quick and simply go ahead and just paste that right there and then you're gonna see all that text come up right there so this is the footer area 1 now I don't really want to decorate footer area 1 because I'm just giving you an example of what footer area 1 and footer area 2 is so I'm gonna go ahead and just say okay I'm gonna delete this and I only want to have one footer and I want to just use it for the arbitrary text I'm sorry the the bottom footer which is the grey area so here I'm gonna do about us and paste it in there like that alright next I'm gonna add a widgets and maybe you want to add in some products so right here we enter products we can add products by rating so when customers rate your products it can go up there or we can add product categories which is we have accessory men's and women's and then you know you can type in product categories and it'll show up there so you know it's up to you you know by now you guys kind of understand the idea of it so product categories and people can select it clicking this click on added widgets we will do contact info and map we can do that as well so right here we can enter like a contact information and map right there so that's pretty cool going over we can actually show them out I think we'll need a Google API key for that you know guys I do have another tutorial on Google Maps to display its so I'm not gonna really go through it here but it's very very simple it's really really easy but um I'll be putting that for another tutorial I'll put that in the description as well just because I don't want to go to Google API and all that stuff it's annoying so anyways let's go ahead and add in something else we'll add in we'll commerce products so products we will do some just basic products and right here we have a list of products that we'll show but I only want four to show all right so there are some products and lastly I probably want to add something like a Instagram widget right here at the bottom so right here we click on publish now in order to get that we need to install a plugin so remember we use plugins for various reasons so we're going to use a plug-in now for an Instagram widget and guys there are so many I'm sorry let's here install plugins because there are so many widgets for a bunch of different things I'm sorry go to plugins I go to add new there we go so we're here we're gonna do Instagram Instagram and there's you know plugins for there's plugins for virtually everything now the one I want is WP Instagram widgets so this one I'm a click on Install Now and go to activate and this is basically going to create a widgets so I can use this for parts of my blog or parts of my footer so let's go ahead and go to customize now so now that we have the actual plug-in installed it'll give us the ability to have that on our bottom page right here so I'm gonna go to click on footer widget to now right here out of widgets and simply find the Instagram widget now so Instagram there it goes and I'm gonna go ahead and put the actual just the random theme that I grabbed so right here there is the pictures and if they click on it it will take them directly to the at Instagram so here you put Instagram where you give us um like follow us or any other various things that you need okay so here click on publish and click on X so I basically gone over widget skies also on your blog page you can actually add widgets so if I click on this blog page right here you guys can see I have widgets right here now you guys can also edit this with the UX builder and you guys can also edit the actual post in the theme customizer so there's a lot of ways you guys can edit the blog so right here on her blog blog layout you guys can use it to like you know various various different ways you guys can decorate the blog layouts as well so I'm not gonna go too much into the blog guys cuz it is it is a whole nother ball park like this spring for example was a single post so if I do like you know single post to the left it's going to show up to the left no sidebar etc so the single the single blog post will actually control the specific blog post itself okay you guys want to decorate the actual blog layout you guys can actually add the blog section to the menu so let's do that really quickly just so you guys understand how to do that so i'm gonna click back right here you guys don't have to follow me here i just want to make sure that you guys understand how to add certain parts to your menu so right here i'ma go to view all all right see right here we're gonna go to our posts and right here we have our blog posts so you guys can simply go ahead and add in your blog posts or you can make a page for a blog and then you can actually add the blog module instead so let me just give you a quick demonstration of both to make sure you understand how to do this so right here add to menu you guys could always make like blog categories or something like that so you guys can see now we have 10 best vacation spots and if I go to visit sites you're gonna see test 10 best vacation spots and if I click on it it's going to take them to directly to that blog alternatively you guys can make a page for it so right here we can do a page and just like blog click on full with templates and publish now again you guys don't have to follow me here because this section right here is totally optional so you don't have to do that but I'm just basically explaining the overview how you do this so right here add to contents and then right here we have the can add in like a row or whatever but I want I want to find the blog module so that's all I really want is blog posts and then right here you guys can see we have the blog post so we can make a specific page for it and then with the theme customizer we can actually design it and we can also design right here too you know there's there's two ways you know how for the products section we have like the the you can edit through here and then we can also edit it through the theme customizer so there's various ways on how you can edit your blog post and it's basically guys the same exact settings all over again it's just with blog posts so blog posts act very similar to products so I here click on apply click on update I'm gonna end right here and click on X all right so we have a blog page now let's just say you want to go ahead and add this to your menu so again guys same exact thing appearance and menus and you guys can also do the same thing for your post so if you guys just want to have like a category like 10 best vacation spots on it you can do that or you can just go ahead and you know add in the entire blog section so right here blog and drag that up here click on save menu and now let's go ahead and click on visit site it's a visit site blog and voila these were all your blog posts are gonna show up now I do want to change this a little bit maybe I can add in like an image here just to make it a little bit more customizable or just make it a little bit more better you know because by default guys you always get a default blog post and you also get default pages as well so something like this right here where we could add something so I'm like this right here a little bit more a little bit more neater you know it's a little ugly all right and again guys same exacting his products so you can add post categories you can add tags to your post blog posts work the same exact way as products so right here you guys can see we have a really clean section right here and again you can go to customize and you can fully customize your blog section your layout and everything with you know through the theme customizer as well so you guys can add a sidebar no sidebar etc so I'm not gonna go too far guys into blog posts because again it is you know it is a whole new ballpark but um yeah this is basically where you guys can you know customize everything to make everything like however you guys wanted to look so there's a lot of ways you guys can customize this and again this is for the single post so when you click on it it will actually it's going to basically the the single post is for the actual section like this right here okay and also you guys will need to assign a blog page so right here under homepage and settings under posts you will need to select this to blog and if you click on publish go back to you here to blog and now you guys can see that the actual theme settings are working because before they weren't working so that's because we had to assign it first so sorry if I was a little too quick there I just kind of I don't want to spend too much time on the blog section but I also want to show you how you can customize it so again you know the blog layout you will need to set it as a you guys will need to assign it to a page but there's tons of different ways you guys can design the blog guys and I know I'm going a little quickly over the blog module but the customization you guys can do to this is incredible it's it's amazing and there's just so much stuff you guys can do with the blog and I can talk about it for another hour but I'm choosing not to just because now we're focusing more on e-commerce and I don't want to talk more about blogs and you know because we can talk about you know categories and all the sorts of stuff but it's it's yeah you guys get it you guys get it congratulations you guys graduated alright so we've basically done that we've done the blog section we've done the footer now one really big section I want to talk about is the head our section right here so we can fully customize the header section and also get a logo now if you guys do need a logo there is a link in the description of this video to fiverr.com and fiber comm guys is a great resource where you guys can get a logo for really really cheap so right here I'll type in like logo services and then right here these guys will make your logo for like 5 bucks it's really good and I got my logo from them so again the stuff they provide is really cool actually I know it sounds like kind of scammy but it's actually really cool so let's go ahead and click on customize and now in this section guys we're gonna talk all about the theme customizer and also the flotsam customizer so right here we have our header section and we have different presets guys so I want to click on presets and kind of get you guys a little bit more familiar with this so right here I'm gonna click on this one then I gonna see our header look like that I don't click on this next one now you're gonna see it looked like this so basically the logo is in the center we have some a search icon a main menu and then we have our secondary menu our account in our cart we can also do something like this or we can do something like this and we can kind of you know keep messing around we can also see how it looks on mobile and tablet as well so it's fully optimized for the you know for the phone and tablet but we'll talk about mobile optimization a little bit later this theme by default is actually very mobile responsive I have to use other themes that really aren't but I gotta be honest this theme is pretty good out of the box so right here are other presets you guys can use alright I think the one I used was something like this right here so we have like a signup form and join and all this other stuff so Oh or we click on this right here click on buy and guys the idea behind this like for example this header right here is that we can actually link them to different parts of your shop so if you guys want to link them to like a specific area of your shop that's how we can do it so for example right here we have button 1 and button - now I know right here it looks a little different but for example right here you can just go ahead and take this drag it and it'll delete it and right here under button one you can actually say by now and then right here you can link them to your shop remember how earlier we talked about how you can link them to different parts of your website that is exactly what this section is right here so I'm gonna go ahead and go to my presets again and let's just say for example you want to just you know customize this yourself you don't want the presets which I think you should because they're amazing but you're more than welcome to do anything you want so let's say for example right here under the HTML one I don't want that there instead I want to add in a search form so I'm gonna go ahead and drag and drop a search form now you guys can see a search form shows up right here so this first row right here is the blue section this middle section right here is this section now if you guys want to add a third section you guys can just simply go ahead and do like a check out button or a newsletter right here and then a navigation icon so that's basically how that kind of works okay so I'm just kind of giving you guys a quick understanding of the header section you guys can totally build your own you're more than welcome to but again you know if you want to add buttons so you can add a button here you can add a button here HTML guys don't be scared by that it's just text so right here you can see that add anything here or remove it so for example right here we have HTML 3 right here in the middle now if I want it like for example this one right here if I want to change anything I can simply just go ahead and take this right here and put like check or use Daryll or coupon and now you guys can see that that right there is a custom form and then of course right here you guys can just go ahead and copy and paste this and for example HTML 3 which is right here we can just go ahead and use that right there so now you guys can see it's showing up right there and then right here you can type in something else and then you can mix and match you can put this there or there etc now I highly recommend guys to use the presets because these guys actually do a very good job with the presets and I don't say that too much because I want people to customize the site themselves but I mean they have just one two three four five six seven eight so many different styles so I like this one right here I think this one right here is very ideal because it just encourages engagement encourages people to buy and alternatively I just think it's it's really really good so right here we have sign up and join which is basically the same thing now your customers will need to go to the account page in order to make an account so I'm gonna show you guys really quickly on how to do that so I'm gonna go ahead and open up a new tab and again you guys don't have to follow me here this is strictly optional but we need the account link to basically bring people to that page so right here under pages all pages we're gonna find the accounts section which is right here we click on view that's fine and I want to go to my account right here so copy and now sign up right here we're going to link them to my accounts now if they do not have an account guys if they do not have one it will actually link them to a registration form so for example we're gonna go to my demo website right here and I'm gonna give you a quick demonstration on how this works so I'm gonna go ahead and log out so I logged out on my website right here now I'm gonna go to my website right here and right here I'm gonna go ahead and put in the my account section so basically if you're not logged in you're going to be basically be brought to a registration form so let's go ahead and do that so I'm gonna go click on back right here and it's gonna give you guys an example of how this works so right here I'm gonna click on sign up now if you look at the bottom left of my screen it says my - account so by clicking on sign up right here you'll be brought to this page right here it's a very a beautiful contact form and right here you guys can decorate it just like we did earlier so your users will see the same thing on the my account section now really quickly I have a full tutorial guys on social login and I highly recommend it because right here someone can just click on login with Facebook just like you see all those other websites have and it can basically create an account for them via Facebook so for example if I click on this right here it's logging them in with Facebook and if you guys see the speed of that that is pretty fast so basically it already created the account everything's done and they have an account now via through Facebook so I have a full tutorial on that as well it's only about five minutes long the reason why it did not add it in this tutorial is because I wanted to put it on YouTube because other people might be looking for it and also you have to create a Facebook app so also really quickly if you guys want to change the color of these buttons right here just like how I have it right here you guys can see color so right now I'm on the button section so here I'm gonna click on secondary and then you can add success or alert or whatever color you want and then right here you can change like the outline you can shade it you know whatever you want to do you can mix and match and you know get customizable now you can get here by clicking on the button one section it'll take you to that section as well so guys there's a lot of different ways you guys can customize your header right here so I think I did something like it's a secondary and then the other one right here I just did like primary stuff like that to make it a little bit more um you know make a little bit more user friendly it's a very user friendly interface right there and so now that I've shown you guys how to do that let's talk about the actual theme customizer and all of the settings so I've kind of showed you guys how to use the actual like you know the header how you guys can customize it yourself now the reason why it's not showing up at the top right there is because we have to actually enable the top bar so right here at our top bar we've got a click on enable the top bar and you guys can control the height of its you guys can change the color the background the navigation style it is fully customizable and you guys can have tons of fun going through all of these settings so first let's talk about the presets we did the presets let's talk about logo site so here's where you can change the site identity you guys can display the logo below you guys can change the logo position however that's really not necessary because remember right here we can already change it as well so remember a lot of these options can kind of conflict each other and this is where you're going to upload your logo and you know you can upload a little go here a lite version a different style you can add the logo container with you can you know kind of change it to however you want etc logo padding a site icon now a site icon guys is also called a favicon if you look at these top pages right here you see this picture of this camera of this YouTube thing of the fibre logo this is basically what you want for your website when someone visits it so right here it's just a blank page but we can go ahead and select a quick image right here and it should be around 512 by 512 you guys can actually use a fiber you guys need image resizing or something but I'm just like this guy right here and then you guys can see right here how this guy's face is showing so this is probably where you want to add in your logo or something and you know make it a little bit more decorative I'm just using this as a you know a demo just to show you guys that's basically you know how that works but okay so next section top bar of course we can go over that header main you guys can change like the width of everything the style you guys can change like the height of everything as well and remember if sometimes it doesn't work it's because the theme the theme customizer can override certain settings so if it doesn't work it's probably somewhere in the themes customizer that you have a different setting somewhere that's basically conflicting it header bottom so here you can change the header bottom but this is disabled so if I want to enable it we can have something on the header bottom right here and now we can control like the height and everything so that's basically how we do that the nav the the height right here navigation etc so this right here controls the section right here and again we can change the the font you know make it bigger etc okay so remember you must have the header bottom right here to kind of you know decorate it make it a little bit bigger so I don't really want it though I think the that's kind of ugly you know I don't think that we really need it so I'm gonna go ahead and take and delete the bottom header all right and sometimes guys you see how I change the height it didn't work it's because you need to actually publish it and then view the page some of the settings when you're working on it require like you to publish close and then go look at the site and then it'll show up sometimes just depends on you know how it happens so right here mobile header height you guys can get an example of how this looks on mobile and we can also change the icon so you guys said I mean it's just so incredible we can change all these settings right here and right here you guys can do like header elements you guys can decide like which one comes first or seconds by kind of like just you know dragging and dropping it so right here when they click on this venue it's gonna basically show up how you want it to show up right there but I would leave it by defaults you know you can always make a separate custom menu but what's the point you know it's it's not really necessary going back here sticky header you guys can add a sticky header to this if you guys want I personally don't really think that you really need a sec yeah no too much it's you know it's it's really it's really up to you if you want to add a sticky header you guys kind of like a top bar sticky on scroll so the sticky other guys is when you scroll down you start the and you see things that this together will show up as a secondary menu okay going back down here drop down style so this might be needed now when you actually click on something and it has a drop down menu like we talked about before you can actually decorate the background of that drop down menu so let me see me give you as an example so right here we have shop and we have this section so if I want to go ahead and decorate this I can go ahead and change the actual drop-down menu color so the drop down style guys fully controls the drop down section of when someone hovers over your menu okay so you guys can go ahead and go through this you know I'm not gonna really go through these settings because this is just you know repetitiveness you know the radius make it circular or whatever you guys understand the point buttons this will actually correspond to these buttons right here any buttons that you put in your header will corresponds to the header section your account section you can actually make your account section a bit more customizable I don't have the my account section here added so I'm gonna have to go ahead and add it in right here so go ahead and add it right there so now I've added the my account section now if I click on these right here now it's going to correspond to the account so that's basically how you would customize the account you must use the account module in order for that to work all right now cart right here so this will actually control how the cart icon looks so right here if I go to cart and add it in you can now basically display the cart and you can always change the way it looks and you know see you know how that works maybe adding it up to here might be a little bit more you know it looked a little bit more nicer and it displays your products really nicely so it's it's a really good feature so you guys basically get a quick concept of all these modules right here I'm not gonna go through each and every one so you guys kind of get that but next we have our our style right here so here we have colors you guys can change the colors of the website to something that will fit your need a secondary color success color and the widget color so earlier how we talked about how those those those buttons correspond to something like secondary success alert you can basically control that here also for the base color right here you guys can go ahead and change the base color right here for anything but again you can always change all these a little bit later for links as well you can change the links and if someone hovers over the links it'll actually change to that color so see you guys right here how it's how it's a little bit darker because that it was the hover over link color and shop colors you guys can go ahead and change the sale bubble you guys can change all sorts of really cool stuff so for example right here we have sale and right here we can change the color of it to something like red and again if it doesn't work for you guys it would basically just have to save it and then just close it and check it out you can also change the color for the review stars and also for the new bubble so all that's we can change I'm gonna go over here and click on publish going back over here again you guys can change the typography or something so for example right here we contain the typography of like the headers so for example we have the header section like that controls the h1 section so remember you guys set like an h1 h2 h3 h4 or so see right here how it says this will change the font for it so right here you guys can see the font has changed because this is an h1 section now if you want to change just the base text section we can do something like this section or this font or whatever and you know you guys can kind of get the idea of how that works you guys can also change the size but again remember this is a universal setting so this will actually change it for mostly all of them so I recommend to be very you know cautious when you do that so let's change this to something a little bit more regular base color or base well I don't know will do I think a good ones like Ledo Ledo and Roboto are pretty good you know I like later on a bottle for most of them just because they're really clean lato for bottle and before we have to use google fonts but now we actually have this embedded in the theme which makes it a lot easier and you guys can kind of go through these and kind of check these out it's like you know if you want uppercase or whatever but again remember this is universal so this will change it to all the settings and navigation this is gonna basically control the navigation menu up here as well and again you guys can always change it to like you know bold italicize or ultra super lights or whatever you guys want so I'm not gonna go through all of these you know you guys kind of guys kind of I get it and again if it doesn't change make sure to actually save it and then - yeah so save it publish it and then go ahead and check it again if it doesn't work okay alright so that is all about typography again it's a very important part because many people would probably want to go ahead and change how all this looks on their websites so headlines again you guys can see this is all changed so it looks really you know it looks really ugly as a really ugly font okay so you guys get the idea you guys get the point alright publish I'm gonna go back custom CSS if you are not a developer don't worry about it image lightbox you guys can change the background color of the lightbox so for example when someone clicks on the image and that pops up with your product you can change the background color for it right there pretty cool so we've basically done all the options guys we've done the layouts we've done the shop the pages the menus this is basically the menu up here it's just a different way how you can assign more than one menu many of us won't assign more than one menu sharing social icons you guys choose to have social icons so you guys can use this shortcode but quite frankly I don't really think that's ever needed because there's also modules for this kind of stuff but if you guys want to have these social icons you can use this shortcode and it will display these specific social icons and you guys can kind of decorate it etc so if you guys would choose to like if you guys want to add social icons anywhere you just need to add this shortcode share anywhere and then here you can just display the type of icons okay so remember shortcode is like this little thing right here so that's a shortcode you just paste that into any section where you want to display social icons WooCommerce we have a store notice right here this is more for the WooCommerce settings but you know you can always can also access it in the theme customizer so we have this little store notice and this will display at the bottom of your website when someone comes to your website but I don't want it enabled so yeah product category you guys can you know show you guys can show either categories you guys can show product and categories or you guys can just show products or whatever you want to do remember how earlier I talked about how you can just show categories and that's in the WooCommerce settings so basically when someone comes to your shop page you can have it like this right here where you have like men's or women's and if someone clicks on that category it will take them to a list of all of those products so it's just another way how you guys can design your shop if you want just categories you can do categories but I think the best one to do is probably products because it it's one less button to click you know what I mean it's like you just click on it and you go there so that's what I personally recommend product images you guys can always go ahead and change the images however this theme has custom image sizing so you won't need to really even bother with that all right going back over here we have additional CSS which is you know developer stuff and then reset the theme options which will reset everything back to normal view so that's a quick rundown guys of the theme options pretty self-explanatory pretty simple really quickly I want to go ahead and talk more about the design of the site and then we're going to talk about mobile optimization and then we're going to talk about through commerce settings and then congratulations guys you guys are going to be on your way to creating an e-commerce websites alright guys so in this small section right here I actually want to show you guys how I added the wishlist section so on your products right here there's this little heart right here that says add to wishlist now this is simply done with a plug-in so if you guys want to add this to your website I'm gonna show you how to do that really quickly and again people can go ahead and click on add to wishlist and then they can browse their wishlist and then it can actually display all of the wishlist products in their account right here so it's another really cool way to kind of encourage engagement on your e-commerce websites and you know it's just good to have in general you know why not so I'm gonna go over my website right here and I'm going to quickly go ahead and install this plugin so I'm go to my dashboard plugins and go to add new and right here simply type in wishlist so again remember plugins are just added features for your websites like little things like you know compare and wish lists they have this wishlist plug-in they just have so many plug-ins for WordPress but the one we are going to use is this one right here Y ith WooCommerce wishlist and click on install now all right click on activate and the great part is this will integrates with your account so right here they have a premium version now you guys do not have to install it so we're here we click on dismissed or remember that's how most of these developers make money because they offer the plug-in for free but they also want to make money too so they offer like a premium version of stuff so right here under the ye ith WooCommerce wishlist I'm gonna click on settings and here are some basic settings for this plugin now you guys don't have to you know change all this you guys can you know you guys continued if you want but you know most of this stuff is pretty standard I mean you can change like the product added text at the carpet why would you do that you know just just keep everything basic they have some other things like if you want to share it on Facebook etc all right here my wish this on ecommerce tutorial I recommend leaving this because this will actually get ability for the customer to share their wish list on social media so I'm gonna click on Save Changes and guys that is basically its hope now let's go ahead and view our products and of course right here now we see we have the wish list and they can add it to the wish list and if they click it again it's actually going to take them to their account where they can actually browse the wish list so it'll bring them some like that then right here they have some social icons there at the bottom so this was just a small quick tutorial on how to add the wish list also I had to talk about the theme customizer now flotsam does have a theme customizer an advanced theme customizer now many of the stuff in here it's really not needed for I would say 95% of you all but for those of you who want to do custom CSS if you're a developer this is where you're gonna enter it a site loader this will basically enable a site loader I don't really recommend it's because site ground is really fast anyways we really need its site search you want to enable a live search for your products etc so these guys are pretty self-explanatory like the UX builder I don't know why anyone will leave that unchecked you know that basically takes off the flotsam studio so they do have some other options right here many of them are not necessary and I don't recommend most of these except for the Google API s but we'll talk more about the Google API s in a different tutorial on my youtube channel so for this specific ecommerce width tool we're not gonna talk about it but again setting it up takes about five minutes you just need to create a gmail account at an API key and it's all setup okay and again if you guys need the setup wizard the setup wizard is right here and this will basically run the setup wizard all over again in case you guys want like the child theme or the plugins installed etc but again most of you don't need the child theme and most of you shouldn't use those plugins because just not ideal okay so I'm gonna go ahead and go back to the tutorial which wanted to add in this quick section on the flat sub section and also the wish list many people who actually watch my tutorials are kind of like man I didn't really think I can do this I thought I had to do coding a lot of people were much older like 60 60 plus you know so you know if you guys are this far congratulations so next let's go ahead and make our about Us page really quickly and I'm gonna do this because I kind of want to show you guys how mobile optimization works as well okay guys in this section we're going to create the about Us page Octonauts we're gonna create the contact the state and contact form and then we're gonna focus on mobile optimization make sure your site is fully mobile optimized so all you have to do now is just kind of sit back relax and you know just let me worry at the pro do it alright I'm gonna go ahead and show you guys how to basically make a quick about Us page so right here I'm just gonna go ahead and do something like a slider alright right here I'm add a quick banner and then I'm going to just basically put in one of these and guys there's really no right or wrong way to do this so there's tons of different ways how you guys can just kind of make something yourself so over here I'm just gonna go ahead and delete this button and I want to actually add in a background image here so here I'm gonna add in a background I'm just gonna simply select something really quickly I'll enter in something like this right here and I want to add a quick overly let's see here let's do this this color right here alright let's add this color then I'll go ahead and reduce the transparency now here I'll go ahead and just delete this and I want to add in a title so here I'll put something like about about us I'll make this bigger and then we'll go ahead and reduce the size of this banner because the height of its just a little bit too big so we'll make it a little bit smaller you know just something to introduce the next section or something so then here I'll go ahead and add in a quick template or we can use something from we can always use stuff guys from other other templates and then kind of just mix and match stuff so for example let's just say I want to go ahead and import this section alright it is importing but I don't want this headline right here so right here I can click on this right here I can change it or I can go back over here and somebody just delete this right here because I just don't want it and then divide it right here same thing and then right here I guess you can say this looks good we can always change whatever we want right here you know it's pretty pretty simple I want to add in another section right here and I'll go ahead and I'll probably just leave that right here I want to click on this and add in a flotsam studio for the about a section right here I'm just going to select something like this right here and import it alright it is in Portuguese II this guy's to make a website like this is just like so easy like the bodice page is already done and all I need to do now is just click on open text editor and just simply change whatever text I want right there so I was being a little glitchy there let's see right here so right here we'll just change it like this you can change like abouts are about our company and then here we know we can add something in but you know I just think this is really simple you know it's it's a quick about us page we don't need to do anything with it now the main reason why I made this was because I want to show you how mobile optimization works so right here we have desktop now right here we have tablet so this is what it looks like on a tablet this is what it looks like on a phone right here now if you guys want to make any changes to it you'll need to basically make the changes to it and then you can you know see how it looks on your phone so for example we have this section right here we have this banner now guys we talked about visibility earlier remember how I brought it up we don't really need this section for mobile I mean do we really need this picture to show up for mobile no we don't so right here I want to do hidden for mobile because I'm sorry only for desktop so that means that you guys can see it disappeared because on mobile devices it's not going to show up because we don't really need that image to show up so that's an example of you know how you can use the visibility section to kind of get rid of stuff you don't really want you know and let's just say for instance we want this section to be a little bit bigger so right here under the size we can make it a little bit bigger or smaller so maybe smaller like that and then you know for this banner section I'm gonna go ahead and reduce the height of it more like that so this is what it's going to look like on our mobile device and it's fully optimized I think it looks good let's see how it looks like on a tablet now so I'm click on tablet and right now you guys can see that this kind of looks weird because this column right here is not displaying anything at all so maybe we need to go ahead and change this column so right here I'm gonna go only for desktop as well so I'm gonna go ahead and just hide that I don't think that looks good for this banner section we can probably just get rid of this too guys for visibility so for this right here we can just do only for desktop as well you know we don't don't have to have it we can always make a new section right here such as here I'll go ahead and add in a new section we get even more customizable so maybe you want to go ahead and add in something like this right here team of sliders this is where you can display like your team or something etc now for this section right here this looks really good now I want just display this just for the tablet only so right here only for tablet so right here this section right here is displaying for mobile this section right here is displaying it for the tablet and then this section like this is displaying it for the computer so the mobile optimization guys is amazing so if you guys want to have a fully different site just for mobile users you can do that so that's a good example of mobile optimization will check out our other home page once we're done with our contact section so right here I'm gonna add in a quick contact section go ahead and edit with the UX builder and then right here we do the same thing in fact we can actually just use one of their templates so right here under add to content so I'm gonna go to flotsam studio and go to contact and I have various contact forms that we can use so they have like something that like this really simple really easy you can also go to their full pages right here and so we just go ahead and browse around and since they have such a large amount of templates and resources I would highly recommend to use their templates because let's be honest these guys are probably designers or better designers than you are and you kinda just want to borrow their work you know a this is really nice I want to use it so I'm gonna go ahead and just go to our tell you what I'm do I'm gonna do the let's see what we can do here we'll do something like a quick banner right here maybe right here we'll go ahead and just import this section well use this header only so I just kind of want to use that header I don't want to use this other stuff and I'll delete the buttons so right here this banner I'll go ahead and delete it and I'll go ahead and also and delete these buttons right here because I don't really need these buttons on a Contact Us page and then here I'll just add in something like contact us and then we can added some dummy text below that click on OK then right here we'll click on the Fossum studio again and maybe just add in something like a call to action or not call to action well I didn't something like a a contact form right here where we can go ahead and just simply well I didn't something like looks like this right here this one looks really nice and you guys can always add in like content in between its so right here the contact form is not because we need to actually select the contact form so there you go we have selected the contact form this section right here is some padding that we don't really need so we can either extend this row on the column or we can just go ahead and delete it as well it's up to you I think that's we should probably just see we can do here we can actually increase this to full and then also increase this banner right here to full as well to kind of give it that full extension look so we'll do this last one right here and I think about it it's not that nice of a contact form so maybe you want to go ahead and redo this one you know I I'm not satisfied with this so I don't think it looks great so I'm gonna go ahead and just delete this whole section right here and then we'll try it again we'll add in another contact form and let's see right here you guys can tell I am NOT on a script you know I I know WordPress so well that's I don't really need to use a script I have seen other youtubers for you scripts but personally I don't need it because I think it's very simple to understand so here we'll do contact form one and maybe in the middle you guys want to add like some content you know so under the flotsam studio under the ballot they do have some like just like demo content you can add something like this right here this is totally doable right here so maybe like about us and then simply add in your content right there and then we'll click on update now is this optimized for mobile let's quickly check it it is updating let's see if we can check it really quick so for mobile or for tablet it looks just about fine and also let's take a look at mobile right here so again guys the visibility you know some sections just aren't needed you know this section right here we probably don't need this text right here this text right here is probably just you know not necessary so we can just kind of leave it like that for for mobile users but when you guys are editing your website you kind of need to go throughout the entire website and optimize it for mobile guys cuz Google will actually penalize you now if you don't have it fully optimized for mobile because they recognize that there are more mobile users and there aren't desktop users so let's go ahead and check out our home page we've never checked out our home page and I guarantee you there's probably at least one thing that needs to be changed here so tablet let's go and take a look and that's why I love their templates their templates are already fully optimized so it's really cool so there is probably one thing we need to change here which is the spacing right here with our with our our format here for our text box so we can add in some spare some padding right here see here now we're gonna change it up a little bit maybe added some negative like that there you go that's a little bit better all right so we added some negative margin I'm updated and I think it all looks good for mobile guys so it's a fully responsive website it looks great now last thing is check how it looks like on a mobile phone so huge sale we can probably reduce the size of this we don't need it to be that large so we can reduce the size of that okay sing else we got products look great the signup form looks great Instagram looks great and then right here I probably just need to reduce the size of this guys to something just a little bit smaller you know we can add it like you know like a smaller heading or something to kind of make a little bit smaller and then we can also position the the text to a certain other position we want it to be so maybe something like that's maybe make it a little bit smaller all right maybe sound like that you know something you know you guys get the point you know just kind of kind of tink around with it make sure it's optimized for mobile so now when people come to your site they're just gonna see huge sale up to 70% off and I think that's fully optimized right there so again I think this site looks great so guys you know we've basically created the entire website now the last thing we need to do is I just want to make sure the contact form is working so contact us I'm gonna go ahead and put in my email right here best website ever click on send now if it doesn't send directly to your inbox guys just check the email of the settings of where you put where the email is going to so right here I'm gonna refresh and there you go howdy awesome congratulations so the contact form is fully working guys so again you guys are amazing for making this far by now you guys know how to upload products you guys know how to do all of the technical stuff now we're gonna go ahead and move to the next setting we're gonna talk about the WooCommerce options which is the very last settings guys this is the stuff so easy so by yourself on the back alright guys the last and final section in the WooCommerce settings so first we're gonna do a little bit more of the general WooCommerce settings then we're going to talk about taxes and shipping we're also going to talk about checkout methods and lastly we're gonna talk about coupons so I'll see you all there so let's go ahead and go to our WooCommerce settings now I'm going to go ahead and disclose all these because we are done we're done with all this stuff so next let's go ahead and go to WooCommerce and go to settings so right here you're gonna put in your store dress you're gonna put what countries are you selling to now guys I also have a full commerce tutorial that's an hour and a half long so I'm gonna quickly go over basically like the essentials but if you want to get very very advanced such as like a discounted shipping and stuff like that I have a full tutorial on it so it isn't hour and a half long but it's everything you need so after you watch it you'll be like good but for most of us will just go ed and go through these options so right here you know what countries are you selling to you can actually restrict the countries that you want to sell to so for example sell to all countries except for maybe who's the bad guy today Bamm Marshall Islands Marshall Islands we are not selling to you shipping locations shipped to all countries you want to sell to you can leave that there geolocate which I highly recommend enabled taxes and taxes go ahead and Eve that and that's basically our general settings right there pretty simple not too hard products sorry here we have our products on our shop page and a lot of this settings guys when we first entered with WooCommerce these are basically everything all over again so if you want to go ahead and change stuff you can change it again here and this stuff is pretty simple to understand like enabling product reviews reviews can be left by only verified owner which I recommend because you don't want people to buy stuff on your site or I'm sorry people not to buy stuff on your site that's giving reviews right that would make no sense so let's go ahead and talk about something else a little bit more complicated like tax so taxes it can be a little complicated guys now there is a tutorial on my blue commerce tutorial you guys can watch but for those of you who want to just kind of learn about what taxes are and how they work let's just go ahead and do that I'm gonna set a tax rate now so for example we have the United States or the United States and let's say we're selling in California so California the tax rate there is around nine points or we'll just put eight point two five I'm not really sure of the tax rate in California now is shipping taxable if shipping is taxable you're going to leave that checked can you tax with the shipping and the products together if you can you're gonna put compound and again you guys can always read what it is right here as well and then right here you can click on Save Changes now what is reduced rates well reduce rate is basically saying are there certain areas that have a reduced rate tax probably within that state or city so for example not every county in California has a sales tax of around eight point two five and there's also zero sales tax so what this is guys it's basically categories for taxes so like just like we did men's women's and accessories this is the same exact thing so standard rates reduced rates and zero rates now you guys can go to tack options now if you guys are selling in a specific state like California or Arizona you're gonna be charging sales tax base off where you're from however in certain states it is recommended that you charge sales tax based off where people are buying from so that can be a little complicated so that's really why I recommend doing the automated taxes for your for your commerce websites okay so here we have a you know do you want to base tax where they are shipping from or they're billing address papí they're shipping address right that makes the most sense all right here display prices in the tax or I'm sorry in the shop excluding tax or including tax let's do executing you know we don't need to tell them the tax rate because it just makes our prices a little higher right we don't need to do that display prices during cart and check-out no I'm just going to say no we'll just excluding tax they can always look at the tax as they're checking out on the last page it's going up over here I'm click on save so you guys can go ahead and go through your standard rates and set up specific tax rates for specific places or you guys can go ahead and use automated taxes which I highly recommend if you guys don't know if you are subject to origin based or the origin base or I think state based I have a an article you guys can read from tax jar that will basically tell you what kind of tax you should be charging for your products and if you guys are selling digital products especially in California there is no sales tax however some states have sales tax for digital products so while I cannot sit there and recommend I can't go through every States I will leave resources for you guys so just simply go ahead and look for your state's I think right here you guys can just simply do a quick one on tax jar so track star sales tax now this is if you choose not to have if you choose not to have automated automated sales tax so right here for example let's say you're in Nevada their sales tax rate is six point eight five percent another state Montana would be zero sales tax that's pretty crazy you know we in California right here has seven point two five I think it's raised I think it's like nine percent or some like that maybe didn't update it or something like that so you guys can use tax jar as a resource for helping you guys understand tax C by origin based and then another thing I want to show is origin based first destination based so depending on your state's you're going to charge sales tax either where you are based out of like here so I would be charging the same rate no matter where I go or no matter where I charge however if I'm from these states right here I'm gonna be charging sales tax based off where they are purchasing the product from so it's pretty simple just go through this and you'll get it and also just just do the automated shipping guys it make your life way easier so that's a quick rundown of taxes it's very dynamic there's a lot of you can go with it and I highly recommend reading those articles about taxes okay shipping all right so you must have shipping SEC guys if you don't have shipping sets it's not gonna work so right here we have United States and I'm gonna click on edits so by default it's it's actually doing the automated shipping so this right here is all automated we don't need to do anything else everything is done for us now let's just say you don't want it automated alright so I'm gonna go ahead and delete automated shipping because maybe some of you don't want automated shipping rates which is crazy because it make your life easier but I'm going to just basically add a shipping zone and show you how to do it from scratch sorry here USA and I want to do the United States United sometimes even someone's leaving stuff on my website oh cool is nice alright so United States right here close that okay alright so right here I want to add a shipping method now what kind of shipping do I want to charge I can charge a flat rate I can charge free shipping oricon charge local pickup now we can use this in combination so for example someone who spends less than $50 we can give them free shipping I'm sorry yeah is that right yeah so let me just give you an example flat rate all right so what's the flat rate how much do you charge for shipping I want to charge 10 bucks for shipping no matter what now there is other things that we can do that you like you can do quantity and fee and cost and you can charge per per item you can be a little bit more you can be a little more in control however that tutorial guys is in the description of this video because I'm not going to go really really far in depth on a dynamic shipping cost because I have it tutorial on it already for you guys because I love you guys so much so here the the cost right here is 10 bucks so now I'm basically saying cost is $10 to ship that's it and let's just say I want to add in another shipping method so let's go ahead and say okay out of shipping method and I want to provide free shipping and I want to provide free shipping for certain people so free shipping requires what a valid shipping coupon which we'll talk about in just a second a minimum order amount a minimum order amount or a coupon or both well I'm just gonna say under $50 they'll get free shipping or a minimum order of $50 and they will get free shipping so that is pretty self-explanatory so shipping options and shipping classes we're not actually gonna cover this because again I have a full tutorial on shipping classes and packages and shipping labels and all that other stuff in the description of this video and they'll really help you guys out okay but for those of you who are just using basic shipping that's all you need is a flat rate and free shipping that's really all you need guys you guys can you know sell something else or I'm sorry change it to whatever you want but most of us eighty percent of us are just gonna use a flat rate or friction so let's go ahead now and test our store let's see if our store is actually working so here I go to view the cart and buy now our taxes and our shipping should be working so let's going down here we have our flat rate shipping of ten dollars but since they spent more than 50 bucks they can qualify for free shipping and right here you can see the taxes are calculated and if they go to proceed to checkout they can simply move on to this page right here where they can go ahead and check out and place the order now we need to set some payment processors so we don't have PayPal setup and we don't have stripe setup and hopefully you guys are using my recommended hosting so that you guys can have a simple and automated checkout process for your customers so here I'm gonna go to my dashboard who commerce and settings and here I'm gonna go to our checkout and I want to go ahead and click on Pay Pal and I'm going to enable PayPal now guys PayPal is a free service it's it's it's super simple to use so I highly recommend it so here's PayPal and you guys can click on get started and you guys can just you know sign up and you guys can use a personal account or a business account either one you guys can use you guys can use the free service right here like the PayPal standard which doesn't charge you anything at all which I recommend and once you're done going through the process of setting up your PayPal account and all that stuff all you need to do is to simply take your paypal email address and simply paste it right here and make sure PayPal standard is enabled and every time someone purchases your products it will go directly to your PayPal account and you can withdraw it any time you want and have a fully automated business so here I'm gonna go to Save Changes next we're gonna go to stripe and stripe is the number one recommended service I highly recommend that you guys use stripe so let's go ahead now and go to stripe really quick so I'm gonna go to Google and go to stripe and stripe at lower fees than PayPal so right here I'm gonna click on stripe and go to my dashboard so you will need to make an account with stripe it's free it's very easy and once you guys are here I'm basically and let you guys know what to do so you guys can go ahead and go through your profile now you guys will need a bank account because what they do is they basically send over payments from this right here to your to your bank account automatically you guys can always change it you guys can make it go to your bank account daily you can basically make it however you want it to make and it's really really simple but I want to show you how you can get money from your websites to stripe so right here we have api's and I want to go ahead and view test data so you see this key right here publishable key I want to take this and I want to put it right here where it says publishable key now over here I want to go ahead and take this key right here this is a fake account it's not a real one it's just Maya it's you know it's my secret demo you know my demo account so here I'm gonna take this and copy it and simply go ahead and paste that right there and I want to go ahead and click on the Save Changes so let's see if this works so let's go ahead and go to our website and I'm actually gonna buy two grand or the right now so this is the words getting crazy so here I'm gonna go ahead and say okay now you guys see we have the Buy Now option now if you have paper oh I'm sorry stripe enabled people can actually click on that and go directly to your website and check out immediately and they can do that for any single product now you can always disable that in the stripe settings as well if you'd like but I think that looks pretty cool but anyways I'm gonna go to proceed to checkout and then right here we have stripe now right here I'm gonna just put it in my secret credit card there we go yeah it is secret and then one two three so everything looks good right here we have our let's go ahead and put our first name last name everything else so we have our demo information right here and then uh-oh I need to enter this all and I love again all right and then right here went through this in and then one two three now when your customers are ready to checkout we're gonna go click on place order now right now the credit card is processing so we're just waiting for it to process all right duh so there you go congratulations we have successfully checked out with stripe and you made money that's it that's how easy it is and over here if we go to our events you can see that it was logged in so it's successful payment was made for two thousand two hundred sixty-eight dollars and seventy six cents and it'll show up right here in your account so right here today mm blah blah blah blah and of course you guys want to go to your profile and make sure that your bank account is enabled because they will need Bakke account information so you guys can just go ahead and you know just contact stripe guys and just say hey what I need to do to get my money out and it's pretty simple you know the balance right here and they've got to tell you like it's all automated so like right here you can expect your payment February twenty seconds super easy to set up guys so if you want to make this live you're gonna click on this right here now under API the testing is gone so right now if you click on all this stuff right here and you go back to your settings it's going to be live so let me give you an example of how to do that just to make sure you understand how that works woo commerce settings let's see your settings and then right here we have sorry checkout and we have a stripe so right here we're gonna uncheck that and now this is live publishable key so right here you can see this is publishable key and the secret key you're just going to do the same exact thing copy and paste it and simply put it right there and also we have inline credit form so it's just a nicer way to decorate the the form for stripe and then if you decide to get rid of those buttons you can take off the above the button payment requests and also like you know charge capture immediately whatever no you probably get that on actually that's that makes more sense but right here if you don't want those Buy Now buttons you can disable that and those will disappear as well so let's go ahead and check our email to see if our purchase actually went through so I'm gonna go to my email really quick and right here you can see that it says a new customer order so right here a new customer order and then right here we have our receipt as well and this will go to the customer so thank you for your order and this is gonna go to your customer so lastly guys let's just make sure that we know how to decorate those emails so we've done checkouts let's go to accounts right here and again guys this is like you know your account page generally this is for themes that don't really offer much but since our theme offers a lot so we don't need to really mess with this because this is just like permalinks and stuff so right here us go to emails and we can always decorate the emails so right here where it says from name you can go ahead and put your shop name right there from the address you're gonna put your shop address header image so where do you get this from if you want to display a logo on your on your site you need to go to your media and go to library now you're gonna go ahead and select an image and probably your logo so usually you know you probably got it from Fiverr comm or ever so I'm just gonna go ahead and add in a quick logo right here I'm gonna go ahead and see if I can find something really good really really quick maybe something I might on my downloads or something see if I can find something here all right I'm just gonna I'm just gonna use this right here the money sign you know money it's all about money everything's all about money you know so this is a very large image guys so this is not the best idea to to use let me see if I can find something a little bit smaller I can find a little bit smaller image well use this one right here okay so let's just pretend this is your logo you're gonna go ahead and copy this URL right here okay now if you want to know sizing for logos I would say 450 by 450 or 500 by 500 either way it's good so we'll commerce and go to settings now right here under emails I'm going to go ahead and paste that right there now footer text you can put whatever photo text like you know thanks for the purchase and then the site title right here will display I want to change the base color to something else a little bit more you know you better you know that was a really ugly color you know by default background color body color and text color now if you want to see a preview of it I'm gonna click on Save Changes and we can actually see a preview of it right here so there's the image of course way too big and then there's that template and then right here ecommerce tutorial thanks for your purchase okay so if you guys are looking for a specific you actually know it let's do something really quick this is do let's just grab my logo from the internet here I'll Wilson logo and then images that's me right there I'm sure we can find my logo on here somewhere there it is so 512 by 512 you know it can be a little big you know but I think that will work so right here I'm gonna go to save image as actually I will go to link address oh man this we can find it here huh there we go alright so I'm gonna upload this really quick just to give you guys a better example of that so right here I'm gonna go go to my media and add new and simply just go ahead and add in my logo so 512 it's like yeah you know I think the flotsam logo like something a little bit more skinnier is probably just a little better let's see right here it's out of my downloads they pass it let's see here there it is there we go we got it we got it we're in luck okay so clicking on media again we can find a my logo and then click on copy go back to commerce and settings and simply add that logo in so here we go to emails and then we're gonna go ahead and put that right there all rights and then we can save it and then we can preview it so people can see how it looks on an email a little too big maybe something a bit smaller guys but you guys get the point you know so you guys might want to reduce the size of its the actual ecommerce I'm sorry the logo that from from flotsam was a really good size I think was like 300 buy something if you guys do get the Fossum theme of course you guys have it you guys can look at the logo size or just ask someone hey you know what choice I'll use the logo and they can actually run it through there and you guys can kind of get it so guys I think that's basically the entire tutorial I think I covered basically everything so hopefully by now you guys can have your e-commerce website running the last thing I want to talk about before that you go is coupons which is really really really simple so if you guys want to learn how to make coupons it's almost like foolproof so right here coupon plus new coupon I'm gonna put Pattie and this gives 50% off so we can have a percentage discounts off the cart a fixed cart discount such as a dollar amount or a fixed product discount off a specific product but generally you might want like something like 10% off right coupon time-outs well just do like 10% all right they'll do 50 let's get aggressive here does this give free shipping if it does click on that if not don't press anything when does this expire well I'm say you only have a week to use this and guys this is great for email campaigns whatever it's it's great usage restrictions so minimum spend how much do they have to spend for this coupon to work well I'm gonna say 50 bucks what's the maximum well there is no maximum you guys can spend as much as you want check this box if this cannot be used in conjunction with other coupons so can this stack with other coupons I don't want this to sack with other coupons so I'm gonna put check does this also apply for on sale items well I'm gonna say this does not apply for on sale items here you can go ahead and list a specific product so like you can put like a women's specific shirt now this is if you selected or if you want a specific product and you can also exclude products from your sale the same thing with categories you can include categories or you can exclude categories from your sale lastly is usage limits uses limit per coupon so how many times can this coupon be used well I'm gonna say 100 limit usage 2x items so how many specific times can a coupon be used for a specific item I'm gonna leave that blank because I'm not really selecting items and usage limit per user so how many times can a specific person use that coupon I'm gonna say only twice and go to update all right so before I let you go let's go ahead now and test this out you know let's go ahead have some fun here I'm gonna I'm gonna go to shop and let's go ahead and we're gonna add in this we're gonna add in this and this and yeah oh I have to select something like that okay that's a cart alright and I'm gonna go to view the cart okay so we have our oh.look coupon look at that so so ours was patty so right here i'm gonna type in PA TTY and apply the coupon now this should give me 50% off all my items so right now the total is 250 dollars 89 cents click on apply coupon and voila now we have 130 dollars and 45 cents and they click on proceed to checkout and then here they can go ahead and purchase all of their products right here so congratulations guys bye now you guys know everything that I know on how to basically create an e-commerce websites so give yourself a big pause you know you guys made it you guys have a favorite beer now is the time to buy it because you guys now know how to build ecommerce websites you know more than most people out there a lot of people out there think that this stuff is super complicated and it's really not guys this stuff was super easy we had a lot of fun you know and now you guys owe me beer so my favorite beer is Modelo all right and if you guys are buying champagne it is Korbel I know I like that I like the cheap stuff the cheap stuff is really good so again guys I hope that was really helpful if you guys need any help just refer back to these sections of this video you guys need help linking categories or you know product categories or anything feel free to let me know in the comments just let me know if you guys need help more than welcome to help anybody out there this stuff's pretty simple and pretty easy to understand ok so make sure to LIKE this video make sure to share it and I will see you all later congratulations

Channel: Darrel Wilson

Views: 1,071,342

Keywords: ecommerce website, online store, how to, make website, create website, online shopping, website, build, wordpress, wordpress website, 2018, ecommerce wordpress tutorial, wordpress ecommerce tutorial 2018, how to make an ecommerce website using wordpress, ecommerce tutorial, darrel wilson, ecommerce website wordpress, how to make an ecommerce website

Id: vKBSrdKWb4Y

Length: 237min 22sec (14242 seconds)

Published: Fri Feb 23 2018