How to Build an Online Store with Wordpress 2021 - Flatsome Theme - (Ecommerce the RIGHT Way)

[Music] i just wanna hold you i just wanna look into your eyes [Music] you're the solution [Music] what's up everyone it's jamison from nyc tech club and in this video tutorial we're going to show you how to build this e-commerce website with wordpress and you don't need to know any type of coding or programming whatsoever it's just going to be a bunch of drag and drop and copy and paste and as you can see this website is beautiful it's professional it has everything that you need to build a successful ecommerce website and we're going to be using wordpress and the flatsome theme the number one e-commerce theme for wordpress so what i want to do really quickly is just show you what we're going to build how we're going to do it and then we're going to jump right into this video tutorial so if you like what you see keep watching this video tutorial because right now i'm going to give you a quick tour of all the pages that we're going to make and then we're going to jump right into this ecommerce tutorial so this is the home page i'm going to learn how to build and you can customize the text the buttons the layouts the images whatever you want you can add as many different slider images as you want and below this what we're going to do is we're going to insert some buttons right here that are going to link to different parts of your website and again you can customize your website however you want so by the end of this video you're going to learn how to use the flatsome page builder to really build whatever you want so this is just a template that you can use to really learn how to use the flatsome page builder and down here we're going to put in some blog posts so that your visitors can stay up to date on the latest happenings with your ecommerce business and down here we'll have a custom footer and our copyright and we can insert some logos or icons down here and we'll also have a back to top button that you can push to bring you right back up to the top of the website we'll insert a logo and we'll have our custom header menu up here and we'll also have some links up here and also a newsletter pop-up if you want people to sign up for a newsletter that we can integrate with mailchimp aweber or convertkit or anything like that we'll also have our top bar with some social media icons up here if you want so this is the home page and let me show you some of the other pages and this is the about page and what we're going to do on all of our different pages is show you how to insert a custom background image and custom title we can insert some share buttons like this and we can also show you how to insert different sections so we have a text box over here a meet the team section that you can insert and then some little icon boxes like this so again by the end of this video you're going to be able to create any type of page layout that you want so this is just one of the templates that we're going to learn how to make with the flatsome page builder so now what i want to do is show you the shop page and the product pages that we're going to make for this ecommerce website and you can see right here that this is the custom shop page so what we're going to do is learn how to create different sections and populate our different products so you can create any type of product that you want in this ecommerce tutorial we're going to show you how to make single products variable products virtual and downloadable products and even affiliate products so whatever you want to sell you can do in this video tutorial so again this is the custom shop page and there's also a default shop page with the flatsome theme and you can see it right here there's a sidebar right here with different product categories and a recently viewed product section and then you have all of your different products right here and you have a bunch of different pages that you can go through and then if you go back up to the top of this page right here you also have a drop down filter that you can go through to screen your products so we're going to show you how to create these two pages and also a product page that looks just like this so this is a single product so there isn't any variables different colors different sizes it's just one option and you can see right here that you can go through these different images you have the wishlist button you can add as many of these to your shopping cart as you want and then down here you have some additional information and you can see that you also have a related product section so as we create more products we're able to populate this section right here and we're also going to learn how to create variable products and this is a variable product page right here you can see in this drop down we have different size options and again we're going to show you how to create all these things in this video tutorial and you can see over here we have a description section additional information and then a review section if you want your customers to review your products also so these are just a few of the different products that we're going to be learning in this video tutorial and again we are going to be learning how to create affiliate products and virtual products also so let me just show you some of the other pages that we're going to be making in this video tutorial so just really quickly i am going to show you how to create some custom pages just like this just to practice on learning how to use the flatsome page builder and also learning how to just create different types of pages and everything like that so this is one of those pages and we're also going to be creating a blog post page and you can see it right here this is just really beautiful and professional and it's going to be really really useful when your customers want to come to your website just to see what you guys are up to so this is the blog post page and we're also going to have a really cool frequently asked questions page that you see right here with a drop down you can add as many questions and answers as you want and we'll also create a contact us page and on the contact us page if you have a physical location we can insert a google map just like this and we'll also have a section for your business information and a contact form right here for your visitors to leave you a message so this is the e-commerce website that we are going to learn how to make in this video tutorial so this is the ecommerce website that we're going to learn how to make with wordpress and the flatsome theme and just remember this website is going to be fully responsive that means it works with your desktop your laptop your tablet and your mobile device so what i want to do really quickly is just run through a transaction with you and then show you how this website works so we're on the shopping page right here and what i'm gonna do is just go and click on this product right here and i'm gonna go and add two of these to my shopping cart and once it gets added we can go and view our shopping cart and you can see right here on the shopping cart page we have our product and our totals and we're going to be using woocommerce to build out our ecommerce website so we'll talk about shipping and taxes a little bit later in this video tutorial also so i'm just going to proceed to checkout and once you come to the checkout page you can see i've already inserted my billing information right here and if i had a different shipping address i can just open this up and fill this out right here and on the right hand side you'll notice that we have our shipping and tax rate updated over here so we are going to use woocommerce and i will show you how to integrate that into your ecommerce website and you can use any type of payment option that you want we're going to use paypal right here but if you want to use stripe apple pay or anything else i'll show you how to integrate that using woocommerce also so all i have to do is check this box right here and click on the proceed to paypal button and once we're on the paypal page we can pay with credit card or debit card or we can pay with our paypal account so i'm just going to click login and once we're logged in all we have to do is just come down here and click pay now and once the transaction is complete you can see i have my receipt right here and i can click to return back to my ecommerce website and once you come back to the ecommerce website you can see that the order is complete and the email that your customer is going to get is this one right here that says thank you for your order and it has all their details right here and this is the email that you're going to get for running your ecommerce website whenever you get a new order so you'll see right here that you received a new order and it has all the details right here and then in the back end of your ecommerce website in the woocommerce dashboard what you'll notice is that you have the order details right here so you can go in and change the status of the order and you can see the billing information the shipping information and the product that was ordered right over here so pretty much this is the e-commerce website that we're going to be learning how to build today and again you already saw that it's fully functional it's responsive and it's just beautiful and professional and by the end of this video you're gonna be a wordpress expert that can customize the colors the layouts and you can sell anything that you want on your ecommerce website and again we're going to be using wordpress the number one content management system on the internet along with woocommerce to power our e-commerce website and to build out this website we're going to be using the flatsome theme and the flatsome theme is the number one best-selling woocommerce theme for wordpress you can see right here that it is a premium theme so there is a small little fee but this is one of the best page builders for ecommerce websites you can see that over 130 000 people are using this theme and it has a five star rating i'm gonna link you to this page so that you can come and check it out yourself but this theme is so easy to use that you're gonna be able to customize your entire online store however you want you have all of these different modules that you can just click and drag into your website and you can see right here we have the flatsome page builder opened up on our demo ecommerce website and what we're going to do in this video tutorial is show you how to use the flatsome theme so that you can really customize your entire wordpress website with a few clicks you can change images you can change text colors and font sizes you can customize your buttons and you can even add animations and if you wanted to you can also add additional rows and sections you can see right here that you have these modules and you have all these different types of elements that you can add to your wordpress website so you're going to be able to customize your entire ecommerce website however you want with this video tutorial and i'm really excited to show you how to use the flatsome theme so this is the flatsome theme and there's so much to this theme that you can come and check it out yourself there's a link in the video description so go ahead and click on that but this is the theme that we're going to be using to build our ecommerce website and i can't wait to show you how to use it so if you want to save thousands of dollars and build out your own e-commerce website with wordpress keep watching this video because we're going to show you how to build this exact website step by step so if you're ready i'm ready let's get started and the first thing that we have to do is we need to register a domain and get hosting so your domain is your web address and we need to get one for your own ecommerce website and we have to get hosting which allows you to store your content and run your website so there's a few different links in the video description one is to the text tutorial on how to make an e-commerce website with wordpress and if you click on that you can come to this website and there's a link to the siteground website this is where we're going to go to get our domain and hosting so you can click on this or you can come down to step number one that says register a domain and hosting with siteground there's a few links right here that you can click on to bring you to the siteground website or you can just click on the link to bring you right to the siteground website and again that's in the video description so i'm going to come up here and just click on this and once you come to this website this is the siteground website and this is where we go to get our domain and hosting and the link that you use is an affiliate link what that means is siteground does pay us a fee if you use that link so i want to say thank you in advance because it's no charge to you but it helps support our channel and allows us to make videos like this for free so once you come to this website what we're gonna do is talk about the three different plans over here so siteground is what i've used for a lot of my different websites and what i recommend to all my viewers my clients and really they're just fast reliable they're cheap and they have great customer service and that's why i'm gonna recommend them to you you can come to this section right here and you can see three different plans the startup grow big and the go geek plan the go geek plan is a little too expensive and probably more than what we need right now so we're going to focus on the startup and the grow big plan so for the startup plan this is for anyone that wants to build one website and one website only this is probably all you need and the grow big plan is if you want to build more than one website and you want to host them on the same account then you probably want to go and get the grow big plan and what's really important is in each of these options you're going to get the free ssl certificate so this is going to secure your website whenever someone makes a transaction and you also have a 30-day money-back guarantee with any of these options also so there's really no risk and it's really up to you what i'm going to do is choose the grow big plan because that's the one that i would probably use but it's really up to you and once you're ready go ahead and click on the button that says get plan and once you come to this step all you want to do is register a new domain so we just have to type in the web address that we want to register so i have mine right here so go ahead and type in yours and then once you're ready click on proceed and once you're on step number three this is where you're going to go to create your account so what you want to do is pause the video to fill out this information for your account and then the client information right here and then your payment information right here and then once you're ready push play and we can talk about the purchase information so in the purchase information what you can do here is you can select the period for the hosting plan so there's one month all the way to 36 months and just remember you have a 30 day money back guarantee so there's really no risk and 12 months is probably the best deal so that's the one that i would recommend and it also gives you enough time to know whether or not you want to run a website or not but again it's up to you what you select right here and then down here in the extra services what you're going to notice is that we have this box checked for the domain registration which is what we want and then we have the domain privacy and sg site scanner if you want to keep your identity private so no one knows that you register your domain then you probably want to select this option right here just know that this is an extra cost and you can always add this back later so i'm going to leave this unchecked just because i don't really mind and then for the sg site scanner this is really up to you there are a bunch of free wordpress plugins that you can use to scan your site so you don't really need this but again i'll leave this up to you if you want to select these two options and you can always add these back later and once you're ready just come down here check this box right here and if you want you can select this box too and then once you're ready just click on the pay now button and once everything is set up you should be logged into your siteground account and if you have the button to set up your site go ahead and click on that otherwise click on websites at the top over here and what we want to do is click on create website and once we come to this page right here we already have an existing domain that we just registered so we can just click on existing domain and then in this drop down right here you should see your domain so go ahead and select that and then click on the continue button and once you come to this step what we want to do is start a new website so click on select right here and then for the application we just want to select wordpress so click on this and then what you want to do is put in an email address and create a password for this ecommerce website and you want to make sure that you save the password because this is going to be associated with your login for wordpress so go ahead and do that and then once you're ready click on continue and before everything finishes if you didn't add the sg site scanner or the domain privacy protection you have the option right here to add those but i'll leave that up to you so once you're ready just click on the finish button and pretty much that's it so now all we have to do is just wait for wordpress to install on our new ecommerce website and once wordpress is installed what you can do is log into your wordpress dashboard but before we do that i want to note that you're going to get an email from siteground about information about your new hosting plan and in this email it's going to tell you that you're going to get an email to verify your domain and you want to verify your domain within the next 15 days when you get that email because if you don't then your account might be suspended so make sure that you look out for that email and it's just a link that you have to click on to verify that you registered the domain so be on the lookout for that and the other email that you're gonna get after you install wordpress is this one right here with your login details to your wordpress dashboard so you can see right here we have our admin url and we have our username and our password so what we can do is click on this link right here or you can use the url that i'm going to show you on the video right now or you can come back to the siteground website and click on this button right here to log into your wordpress dashboard and you should be logged into your wordpress website but if you're not what you can do is go to your website name dot com slash wp dash admin and this is the login page where you can also go to put in your username and the password that you created so you can log in this way and now you should be logged into the wordpress dashboard and this is where you can go to create all your pages and posts and upload images and also where we're going to go to create our ecommerce website but if you don't have access to this page what you can do to log in is you can always go to your siteground account over here and if you click on websites then you'll see the website details right here you can click on site tools and when you come to this page right here you should see wordpress right here go ahead and click on that and then click on install and manage and then down here at the bottom where it says manage installations you should see your ecommerce domain right here you can just click on this little button right here to log into the wordpress dashboard and it'll bring you right to this page right here so if you guys want you can go and check out what your wordpress website looks like by hovering over the website name on the upper left and clicking on visit site and this is what the website looks like right now so nothing special it just looks like a blog website but don't worry because we're gonna go and install a theme and start customizing our online store and building really whatever you want so let's go back to our wordpress dashboard so hover over your website name and click on dashboard and once you're back on the wordpress dashboard what i want to do is come down to the bottom of this page and down here i want to switch to the default dashboard so i'm going to click on this link right here and once you have the default view we are good to go and now we can move on to the next step so now what i want to do is go and install the flatsome theme so in the video description there is a link to the themeforest website right here and this is the flatsome theme page and again this theme is a premium theme and it is the number one bestselling woocommerce theme for wordpress you can come over here and see all the features and functionality so i'll let you go through that on your own but over here you can see there are over 130 000 sales as of the time of this recording and it also has a five-star rating so you're in really good hands with the flatsome theme and just really quickly you can come down here and see that you get full customer support so if you have any questions or need any help whatsoever you can just shoot them a message and they'll help you out what's really great about the flatsome theme is that it has its own page builder so you have all these different modules that we can drag into our website and create whatever type of layout that we want and there's also different designs that you can use pre-made templates and also it's just really fast so i'm really excited to show you how to use the flatsome theme and if you want you can come here and check it out yourself what we're gonna do is just come right back up to the top and i want you guys once you're ready to add this to your shopping cart or click on the buy now button and once you come to the checkout page what i want you to do if you have an account is go ahead and sign in and check out otherwise create your own account and then come down here and click on next and then enter your billing information and your payment method and once you're done push play and you should be logged into your themeforest account and once we're there i'm going to show you what we download and how we install the flatsome theme okay so again if you need to pause the video and i'll see you in just a few minutes and once you check out you should be logged into your themeforest website and i want you to come to the downloads page so if you need to hover over your username and click on downloads and you're gonna come to this page right here and i'm gonna scroll down to the flatsomething because i have all these different products and what we want to do is click on the download button so that we get this pop-up and we're going to click on all files and documentation so go ahead and download that and that's going to be a folder and now what we're going to do is go back to our wordpress website right here and we want to go and install the flatsome theme so what you can do is hover over appearance and click on themes and once you come to the themes page we're going to click on the upload button right at the top and then what we're going to do is click on upload theme and we'll get this little pop-up right here and then what i want you to do is click on choose file and what i want you to do is go to wherever you downloaded the flatsome folder so you should see flatsome dash main open that up and then go into the theme files and we want to download the version with the number so you might have a different number depending on when you download the flatsome file so just select that and click choose and then click install now and once it's installed i want you to click on the activate link and you should see the setup wizard and what we want to do is we're going to go through this so let's click on let's go and the first thing that you want to do is activate the theme so that you can get automatic updates and also access the developers if you need any help with the flatsome theme so what i want you to do is go back to the themeforest website and click on the download button and then right here where it says license certificate and purchase code go ahead and click on one of these and you should get a pop-up and you should see your item purchase code right here what you want to do is copy that and then go back to your setup wizard and paste that in right here so you need your own unique one you can't use mine so make sure that you go and get yours and paste it in and then once you're ready click on the continue button and what we can do on this tab is add a child theme which allows us to change the source code for our theme without really modifying the parent theme so let's go ahead and do this by clicking on create and use the child theme and go ahead and click on the continue button right here and then we want to install these plugins that we need for our ecommerce website so what i'm going to do is go ahead and click on the continue button right here and now we should be on the demo content page and what we want to do is we want to actually skip this because we don't want all of this demo content it's going to clutter up our website and we're going to have a lot of stuff to delete so i want you to click on the skip this step button and once you come to this page we're going to upload a new logo in just a little bit so i'll show you how to do that and we're going to use the default option right here so we don't need to change anything let's just click on continue and on this page you can see the type of customer support that the flats and theme developers are going to give you so we can just come over here click on agree and continue and on this page right here there is some additional documentation to learn about the theme and also how to use woocommerce but we're going to show you everything that you need so you don't need to actually read any of this stuff so if you guys are ready what we want to do is go ahead and click on the view your new website link and once you come to this page right here now this is what our ecommerce website looks like right now and we're going to go in and customize it and make it look a lot better but this is looking pretty good so if you guys are ready what i want you to do is hover over your website name and then click on dashboard to go back to the wordpress dashboard and once we're back on the dashboard if you see any more notifications up here that say this theme recommends the following plugin and we need to install it or activate it go ahead and click on this link right here and all we're going to do is go in here check the box and then go into the drop down click install and once the installation is complete we want to make sure that this is activated so i'm going to come down here and hover over plugins and click on install plugins and you'll see a notification right at the top that says we need to activate this plugin so go ahead and do that or if you want come down on the list and you should see the plugin down here and we want to click on the activate link and once it's activated we are good to go and i want to install one more plugin to secure our website with our ssl certificate so what i want you to do is click on add new right at the top and once you come to this page we're going to search for a plugin called really simple ssl and once the search results come back you should see this one right here we're going to click on the install button and once it's installed we'll just click on activate and once it's activated now what we want to do is click on this blue button that says go ahead and activate the ssl and we're going to have to log back in for security purposes so go ahead and do that and once the ssl is activated we can move on to the next step so now what i want to do is go through the general wordpress settings so scroll down on the dashboard to the settings section and then click on general and once you come to the general settings if you want to update your site title right here you can and you can always do this later so you don't need to do anything now if you don't want to and i'm going to remove my tagline but if you guys want to have one or change it you can and then right here where it says wordpress and site address you should see https now if you have the ssl certificate activated and all i want to do is come in here and just type in www dot and you can't change anything else so if you try to modify or change the domain name then it's going to make your website crash so if you guys want just make sure you add this and make sure you add it in the right spot and don't do anything else otherwise it's going to make your website crash and you're going to have to start all over and over here you can update your email address if you want also but that's all i want to do i'm going to come down to the bottom and click save changes and again since we updated the url we have to log right back in and once you're logged back in i want you to go back down to the settings section at the bottom hover over that and then go to permalinks and all i want to do right here is select the post name option because it's better for seo and it's going to give you better urls so go ahead and select that and then come down to the bottom click save changes and i'm just going to clean this up really quickly so i'm going to close this and also close that and now we have everything set up so we can move on to the next step so now what i want to do is go and download the demo content for this e-commerce tutorial so in the video description there is a link to download a zip file called the e-commerce demo content go ahead and click on that and you'll download this folder and you're going to have all these images in here and what we're going to do is go and upload those so we're going to hover over media and click on add new and once you're on this page all we have to do is click on select files and once you're on this page just come and click on select files and then go to wherever you downloaded the demo content folder and open it up and then we can just select all these images one by one or altogether and click choose and now we're gonna upload everything so all we're gonna do is wait for everything to go to 100 and once everything is uploaded you can see all the images right here and if you ever want to edit any of these you can click on the edit link right here or we can go and click on library right here and once you're on the media library you're going to see all of your images right here and you can click on one and you can delete it you can edit the image right here you're gonna see this pop up and what you can do is crop it you can rotate it you can even change the dimensions if you wanted to all you have to do is click the save button if you do make any changes so i just want to show you that but just remember we can also add images as we create our online store so we don't have to add everything all at once this is just easier if we're going to be using the demo content okay so now what we're going to do is move on to the next step which is going through our theme settings so i want you to come down on your wordpress dashboard and hover over appearance and click on customize and once you come to the customize page what you're going to see is the online store that you're learning how to make on the right-hand side and then you're gonna see a bunch of different tabs here on the left side which are the settings that we can select for our layout colors and everything like that so you can also hide the controls right here and you can see what the device looks like on different devices and before we begin i do want to note that there is a text tutorial on how to create an ecommerce website with wordpress on the nyc tech club website and this is a step-by-step text tutorial of every step that we're going through in this video so if you want you can come down to whatever step that we're on right now and then you can see all of these settings that we selected so if you want to print this out so that you can do them on your own that might help you out because we might go a little quick but if we do you can always pause the video or rewind and again you can always pause the video and go through all the tabs on your own what i want to do is just select what we select for the demo website okay so let's get started let's go to the header tab right here and you're gonna see this pop-up called the header builder and right at the top this is the top bar and then this is your header so over here you have your top bar line and then your header menu line right here so we can go in and customize this stuff with these modules down here or just rearrange some of these so i'm going to click the html module and drag it down here because i don't want to use that and then i want to move the social icons one over to the left hand side and that's pretty much all we're gonna do right now so later on we're going to select our top bar menu and navigation menu once we create those and we'll also come back and customize our newsletter or the pop-up a little bit later but if you guys want you can drag in whatever modules that you want or customize the stuff however you want what i want to do is just click back right here and then we're going to go back to the main page right here but right now what i want to do is just click back right here and we're going to come into the header tab and there are a bunch of different tabs right here and what we can do is go to the logo and site identity and once you come here if you want you can change your site title and tagline over here also and what we can do right here is change our site title so what i'm going to do is type in macarons right here and then for my tagline i'm going to type in cookies with a flare so if you want you can put in these two sections and then if you wanted to have the text and your logo you want to check this box or if you want to change the positioning of your logo you can do that right here what i want to do is come down to the logo image section and remove the flatsome logo and then click the select logo icon and then click on the select image button and i want to go into my media library and what i want to do is use the logo that i have right here so if you want to use the demo logo just select that one and click select and you should see the logo show up right here so if you want to upload your own logo and if you don't have one right now you can always just come in here and go to upload files whenever you create your logo and then click on select files and then you can upload your own logo so the media library has all of the demo content already uploaded but again you're going to go to this tab right here to upload your own images okay so i'm going to close this and i do want to note that you can see that we have the euro or pound sign right here we're going to go into our woocommerce settings a little bit later to customize our settings for our ecommerce website so if you want to use the us dollar or any other symbol or anything like that we're gonna customize that stuff a little bit later so don't really worry about the currency right now okay and over here that's pretty much all we have to do so you can add your own site icon if you want or a light version of your logo that's really up to you but we're just going to click back right here and what we can do is go into the top bar and if you want to disable the top bar just uncheck this and it'll make this disappear and then if you want to change the background color you can click on this and then drag this wheel or put in a color code or you can also just wait till we go into the style tab and change the primary color which is going to change the top bar also so that's what i do so i leave this blank right here but i did want to just show you that so let's click out of that and what i want to do is come down to the header mobile menu so click on this and what i want to do is come down to the header mobile menu and what you can do is choose your icon style right here for your mobile menu and then down here in the menu elements these are the items that are going to show up in your mobile menu so if you want to hide any of these so they don't show up just click on the eyeball and then you'll see that it's no longer the dark blue color so that means that this one isn't going to show up and there are a bunch of different items here so if you want to pause the video to select whichever ones that you want to show up go ahead and do that right now but you can always come back here later and customize your mobile menu but i just wanted to show you that you can do that over here okay so just remember that for a little bit later and then come down to the sticky header and what we can do here is we have our header and if we want the menu or the header section to come down as we scroll down then we want to keep the sticky header enabled but if you don't want the header to come down the screen as you scroll down then you want to disable this so i'm going to leave that up to you but i'm going to leave it as the default and you also have the option of changing the settings for your sticky header right here also so we're not going to make any changes here and what i want to do is come down to the card section and just select this icon because i think it looks a little bit better and then we'll close out of that and then what we can do is go to the contact section really quickly so in this section this is where you can update your contact information if you're using the contact widget so if i drag this in just to show you what you're going to notice is that in the top bar we have this contact section right here and then you can customize the phone number the email and whatever else that you want to put in right here and then that's going to update for this section right here and that's only needed if you're using the contact module but we're going to remove this so we don't need to do anything here but i did want to show you that so i'm going to click back right there and we don't need to go into these two right now and we can always come back here and do that later so what i want to do is go to the follow icons and in this section what you can do is choose the icon style for your social media buttons up here and the only social media buttons that are going to show up are the ones that you have urls for so if you want to have a pinterest social media button show up up here what you want to do is type in the url for your social media account for pinterest or any of these other social media platforms also okay so i'm gonna update this section a little bit later on my own so my social media buttons might change a little bit but you can pause the video if you want to update this section right now just remember to click on the publish button to save everything if you do make any changes we're going to click back right here and then i'm going to scroll back up here and click back to go back to the main page and what i want to do is go into the style tab right here and go into colors and what you're going to notice is i've already updated my color codes so the preview of the online store that we're learning how to make has already been updated so in the text tutorial we do have all the color codes right over here in this section choosing our layout settings so if you want to pause the video and copy and paste all of these different color codes and then put them into the different sections right over here for each of these you can do that or you can customize your colors for your own website to be whatever you want so if you want take some time and change the colors or select whatever color codes you want and then push play once you're ready and just remember to push the publish button to save everything so if you guys are ready i'm going to go back right here and then go into the global styles and we want to just put in 0px right here and once you do that go into the typography and i just want to change the font style for the headline the base and then the navigation and the alt fonts so this is going to be really easy all i'm going to do is just go into each of these drop downs and type in the laura font so it's l-o-r-a and i'll just select that and i'll do it for each one of these so i'm going to do it very slowly and if you guys want to do it too go ahead and do that and we don't have to change anything else the font sizes and the styles all look good i just wanted to change the font family because i think this looks a little bit better and once we do that we are good to go we can click on the publish button right there and then click back right here and we don't need to go into these two tabs so i'm going to click back and we can skip down to the woocommerce tab right here and we can go into the payment icons right here and you're going to notice that we have our icons right here and they should show up down here in the footer section so what you want to do is select the icons that you want to show up so if i want the amazon one to show up i can just click on the eyeball and maybe i'll remove the cash on delivery and what you want to do is down here in the placement you want to make sure that you select the absolute footer option and if you also want these icons to show up in the cart sidebar you can check this box too but i'm just going to select this one and then once you're ready come up here click publish to save everything click back right here and then what we can do is we're not going to go and change anything in the product images tab or the checkout tab right now we can always come back here and do that later for the cart tab we're also going to leave everything as is and you can see right here that this page refreshed to show you the product page and what i want to do is just show you how you can change the layout for this page so all you have to do is click on the product page tab right here and then you have the product layout options right here so you can select whichever one that you want i want to select the no sidebar options so if you guys want to do that go ahead and do that and you do have these other options over here so if you guys are ready let's go back right here and let's click on the publish button just to save everything and once that's saved let's click back right here and now what we're going to do is jump down to the footer tab right here so in the footer section what you want to do if you want to have the same look and feel of the demo website is disable the footer one and then also uncheck the footer two right here and then down here in the absolute footer section what i want to do is change the color code right here so i'm gonna type in pound sign three 333 and you're going to see a darker gray color right here which is what i want and then what we can do is just change the business name down here so instead of ux themes i'm going to delete this and type in tech club so you can type in your own business name if you want and all this other stuff is just code that shows the current year and then just makes the font bolder okay so once you're ready you can also come down here and you can disable the back to top button if you don't want to have a button that scrolls you back up to the top but i think we're going to leave that for now so all we're going to do is just come up to the top click publish and then go back and what we're going to do is skip these tabs right now but we can always come back in here and go through these settings a little bit later the last thing that we're going to do is go into the share tab and in the share icons i just want to uncheck the tumblr and whatsapp so my products are going to allow for sharing on facebook twitter email and pinterest okay so once you're ready click on the publish button right here and we can go back right here but we are pretty much done with our theme settings so now let's close out of this by clicking on the x and once we're back on the wordpress dashboard now what we're going to do is go and create our home page and our blog page so what you can do is hover over new and click on page or on the left hand side hover over pages and click on add new so once you come to this page right here it's going to say welcome to the block editor we can just click next next next and get started and this is how we create a page and if you miss the left hand sidebar over here what you can do is click on the dots on the upper right and then just exit the full screen mode and then you'll be able to see the dashboard on the left hand side but we don't really need that right now so we're just going to click and add our home page title so we're going to type in home right here and then what i want to do is go into the page attributes and i want to choose the page full width option right here so go ahead and select that and once you do all we have to do is click on the publish button two times to publish this page and once the page is published if you want you can go and check it out what i want to do is click on the w right here because we're going to go back to the wordpress dashboard and we're going to go and create our blog page so we can just click on add new right here and once we're back on this page i'm going to type in blog and we don't need to change the page attributes for the blog page because that is part of the settings and the theme settings so what we're going to do is just click publish right here and once the page is published now we are going to go back to our wordpress dashboard again so click on that w and now what we want to do is set the home page and the blog page so to do that we're going to scroll down and hover over settings and then go to reading and once you come to this tab right here select the static page option and then go into the home page drop down and select the home page and then in the post page select the blog page and then just click on the save changes button and once the settings are saved we are good to go and now we can move on to the next step so now what we're going to do is go and customize our home page so you can see on the demo website right here we're going to learn how to create this exact page step by step so if you want to learn how to create this page let's go back to our wordpress website right here and we want to hover over pages and click on all pages and once you come back to this page let's just click on the home page link right here and once you come to the home page let's click and turn on the ux builder so that we can go and create our ecommerce website and once the page builder loads what you're going to see is the ecommerce website over here and don't worry about how large the footer is right now this is going to shrink as we create some blocks and sections for our home page right here and if you want to hide the section right here you can click on the arrow and it makes it disappear so you can see what the website looks like on the full screen and over here you have the wheel if you click on that this is for your page layout so you can go in here and change your settings but we don't need to do that so we can click back right here and what i want to do is go and create a bunch of different sections so you can see on the demo ecommerce website i have the ux builder open and what we're going to do is create all of these different sections for our home page so this is a new section and then this is a section and this is a section with some modules inside that we're going to learn how to customize so let's go and create this section right here which is going to include a slider with a banner and some text boxes and a button so on our ecommerce website right here what i want to do first is delete this section so we can hover over this block and then click on the wheel and we'll get this pop-up and we can click delete right here and once we do that we can click on add elements or we can hover over this and click on the plus button and we'll get this pop-up to add our content and before i actually select the slider element right over here i do want to note that you can insert a pre-made template right over here so if you like any of these what you can do is insert it and then put in your images and customize the text but what we want to do is learn how to use the ux builder so that we can customize and create whatever we want for our online store so over here i want to select the slider option so click on that and what you're going to see are these presets and if you want we can choose the blank option or you can select any of these other ones and you can see what they look like so say for example we chose this one and if we selected this one we can come in here and customize the stuff we can edit whatever we want we can add our background image or color and pretty much that's all we have to do but what i want to do is choose this one right here the huge sale one and then we're just going to go in and customize it a little bit so if you guys want you can select whichever one that you want you don't need to follow along exactly but if you want to know how to make the demo website then just select this one right here click apply and then you're going to come into the edit banner but if you're not in this section and you're on the main tab right here just double click this and you're going to come in here and what we can do is change the height so i'm going to come in and just change this to 700px and then we can add our background image or color right here so i'm going to click on select media and in my media library i'm going to select this image but if you want to upload your own images click on upload files and then click on select files and find the image that you want to use again we're going to use this one for our first banner image so i'll click use this image and you're gonna see it get inserted right here and again you can add a color or an overlay or anything else that you want so i'm gonna click apply right here and then i'll just click update just to save everything and what i can do is open up this banner and you'll see that we have our text box right here and then if i expand this we have all of these different modules and what we can do is just go into each of these and edit them so let's go to the first text box right here and let's edit this so just click on this and you're going to get this little pop-up over here and what we want to do is go and open the text editor and what i want to do is just change my text right here so i'm going to paste in the text that i have on the demo website and what you can do if you want to see some more styling buttons is click on the toolbar toggle and you'll see this section right here so you can format your text however you want but we have everything that we need we have heading 4 and the 11 point right here so i'm just going to click ok right here and we can go back right here and what i want to do is i'm going to leave the divider and just come down to this text box right here so i'll click on this and then i'll open up the text editor so we have this section right here i'm going to delete this and what i want to do is just paste in my text right here and we have it as heading 1 which is what i want and then i want to highlight this and just go in here and change this to 160 percent just to make it larger and once i do that i'm gonna click okay right here and just go back and what you'll notice is that we have three different buttons down here i wanna remove the left and the right hand one so we can just right click and we'll get this little pop-up and we can click delete right there and do the same right over here and now we just have one button right in the center and if i want to edit this i can just double click it and we'll go to the edit button right here and we can go into the text and just type in learn more and you can format this button however you want there's a bunch of different options here we're going to leave everything as is and i want to come down to the link section and this is where we can link our button to another page or another section so if you want to have an active link but you don't have the link right now just put in the hashtag right here but we're just going to type in the about page url for that page that we're going to create a little bit later so it's https colon slash slash www dot your website name so nyc tech store shop dot com slash about slash and you can open up the link in the same window or a new window if you want we're going to leave it as the default so we'll just click apply right here and we'll click to update this just to save everything so in case this crashes or anything like that we don't need to redo all this stuff and so we have our first slider image right here and now what we can do is click add to banner and now what we can do is add our second slider image so to do that we want to add another banner to the slider so click add to slider and then find the banner module and click on that and again you're gonna see the sliders show up right here and you can choose whatever option that you want we're gonna use the same one we're gonna go with the huge sale option so click on that and then just click apply and you're gonna see the banner show up right here and if you want to make the height a little larger you can't and you're going to see the banner show up right here and i want to change the height to 700 so you can change it to whatever you want and really it's just through trial and error to know that i like the 700px right there and then i'm going to come into the background section and click on select media and just choose this image right here and then click use this image and now we should see our background image right here and what i want to do is just go in and edit our text boxes so what we can do is if you want you can just double click this and you'll get the text editor to pop up right here and we can go in here and just delete this text and type in all your favorites and this is from the demo website so if i go too fast you can always pause the video to type in whatever you need to and we're going to leave the formatting how it is so we'll click ok right here and then we'll go into the second text box and double click that and we'll just highlight the first line right here and i'll just paste in delivered right here and i'm going to highlight this and then go in here and change this to 160 percent and then for the bottom right here i'm gonna delete this and just paste in to your door and we're going to leave the formatting just like that so you can see that this is how it looks and so i'm going to click ok right here and maybe we'll go back right here and before we go and edit our buttons i want to click on the update button right here and just really quickly on the right hand side you do have these buttons to undo your steps or redo them and then you can see what the website looks like on the different devices and then you also have this play button to play your animations so you can see that the text actually rotates in like this if you want to change the animation you want to go to the main module which is this text box right here open this up and down here where it says animate you have a bunch of different options so if we chose the fade in one and now if we click on the play animations you can see that it changes just like that so maybe i'll leave it just like that just for fun but we're going to go back right here and what i want to do is expand this and i'm gonna delete two of these buttons so delete this one and then delete this one right here and then we'll just go into this one so i'm gonna come into the text box and type in browse products and then what we can do is come down to where it says layout and choose the color option that we want so you have a bunch of different options here i'm going to select the primary color option so again we set these in the theme settings a little earlier in the style tab and then for the style of this button i want to come in here and change it to the default option but you'll notice that there are a few different options so you can select whichever one that you want and now we have a button with the primary color as the background color and if you guys want you can add an animation for this button to enter with and what we want to do down here is if you guys want to add a link to the product page or the shop page you want to type that in right here so maybe we'll leave this as is right now and we can always come back in here and edit the shop page that we're gonna make a little bit later because we're gonna create a custom shop page i believe so right now just leave it as the hashtag or the pound sign just so that it's an active link otherwise if you remove this then when you hover over this you're not going to make this an active link so you're not going to get that mouse with the finger okay so i'm going to put that right back there and then click apply right here and click update and now we should have our first section all done for the home page right over here so what we can do now is we can add our new section right below so if you guys want click on the plus button right here or what we can do is add a new element underneath this entire section because this whole thing was one section and now we want to add a new section right below so click on this and what we want to do is go into the search box and type in gap for gap and then select that and that's going to be some spacing in between these two sections and we can leave it at 30 px but if you wanted to you can make the gap larger so we're going to click apply right here and then let's add a new element so click on add elements and then just scroll down to the content section and we want to add a text box so click on that and there's a bunch of different options you can see that we have the lead paragraph paragraph with the headline or headline what we're going to do is just choose the paragraph options so click apply and we're going to open up the text editor and we're going to delete the demo text and just type in we are the original macaroon shop blah blah blah and all we're going to do is center this and then what i want to do is just highlight this text and then go into the font size and change it to 120 and then click ok right there so now we have our text right here and we can click apply and if you guys want to what we can do is just down here click on the plus button to add our next element which is also going to be another gap so click on that and this time around what i want to do is i just want to type in 15px right there and click apply and then what we're going to do is add a row so instead of coming down here and clicking on the plus button i think it's easier just to click on the add elements so we're going to add a row so right here where it says layout you should see it click on that and the one that we're going to choose is the three column options so if you guys want just come down to the bottom and click apply and you should see the row settings right here and our three columns right here and we don't need to do anything so we can just click apply right here and when you expand the row you should see the three different columns and we can go into the first one so we can just click on the plus button right here and what we want to do is add a banner so click on this and we're going to go with the blank option so select that and click apply and once you get your settings right here we want to go and change the height so double click this and just type in 160 px and then in the background image section click on select media and then choose the image that you want to use so we're going to use this one right here and click insert and you should see it show up right here and what we can do if you come down to the hover section in the background section is you have these different effects so i'm going to choose the zoom fade option so look what happens when i hover over this banner now it zooms in just like that and that's an effect right here so you can choose whichever effect that you want or maybe you don't want one it's really up to you and then in the link section right here this is where we can put a link for our banner so i'm going to link this to the about page so i'll type in https colon slash w w w dot our website name so nyc tech store shop dot com that's a really long name i don't know why i chose it but we're gonna go with slash about and now that's going to link to the about page that we're going to create a little bit later okay so if you don't want to put in a link right now you don't need to but it's really up to you and then once you're ready click apply right here and then we have our text box right here so we can just double click this to open up the text editor and i'm going to highlight this text and i'm just going to replace it with why macaroons and if you want two lines like this what you want to do is just push the shift and enter button and then you get two lines just like that and i'm gonna leave this as the same font size that i see right here 17 and then the heading two so this looks okay to me so i'm going to click ok and then just go back right here and what i want to do is add a little line below so if you want just click on the plus button right here and then find the divider and click on that and you should see the settings right here and we're gonna leave everything as is so i'm just gonna click apply right here and if i click out of this you should be able to see that there is a little divider line right below the text so that looks pretty good to me and we're gonna go back here and now we're gonna go and edit our second column so what we can do is just go in here expand this click add to column and we're gonna do the same steps that we did for this one right here so we're going to come in here and click on banner we're going to select the blank option come down to the bottom click apply and then in the height section we'll just double click this type in 160 px click on select media and again if you want to upload your own images click on upload files and then click on select files if you want to use the demo content just select this one and click insert and you should see it get inserted right here i'm going to come down to the hover section and change it to zoom fade and then for the link for this page this is going to be for the team page but i think right now i'm just going to put a pound sign or hashtag to make it an active link that doesn't go anywhere so when someone hovers over it they're going to see the finger that makes us a link but it's not going to go anywhere so if you guys want to do that go ahead or if you want to link it to another page and you know the url right now go ahead and type that in or just come back to this section a little bit later so i'm going to click apply right there and then double click on the text box and i'm going to take the text right here and just replace it with meet the team and then click ok right here and i'm going to go back and i want to add a divider line so click add to text box and then just choose this and that looks pretty good so we'll click apply right there and then we'll do it to this last section right here so we'll click the plus button go in here choose the banner and then we have the blank one selected so we'll click apply and then we're going to change the height to 160 px and again remember if i go too fast just pause the video but i'm just going through the same steps that we did for the other two columns so it should be pretty easy so we're going to come in here and we're just going to select this image right here and click insert and then i'm going to come down and choose the hover option but again you have a bunch of different options so it's really up to you we're going to go with zoom fade and i'm gonna put in the pound sign again and i'll remind you guys to come back here and update these urls or these links for these buttons a little bit later okay so we'll click apply and then what we're gonna do is go in and click on the text box and we'll double click on that so we get the text editor right here and we're just going to paste in shop right here and it's going to go to our custom shop page so we're not using the default shopping page in this tutorial we're going to show you how to make a custom one but if you guys want to use the shop url then i'll show you what that looks like a little bit later also okay so we'll click ok right there and then the last thing that we want to do is add our little divider line below so we'll come in here click on this and then just click apply and now we have these first two sections right here so let's click on the update button to save everything and once everything is updated i'm going to collapse everything just to make sure that i don't add an element in the wrong section so click on this button right here and now let's add a new gap so let's come down to the content section find the gap and just insert the 30px gap so we don't need to change anything click apply right here and what we want to do now is go and click on add elements and then scroll down to the content section and at the bottom over here is the title section go ahead and click on that and what we want to do is change our title right here so this section is going to be for our featured products so you can just type in featured products right here and then in the style drop down i want to select the center option so you can see it just centers it just like that and that looks pretty good so now we can click apply right here and now what we want to do is add our product section down here so let's click on add elements and then scroll down to the shop section and you should see the products element click on that and there's a bunch of different options here so you can show the items on sale the future products best sellers or anything like that so we're going to show the products that we create that are going to be called feature products so go ahead and select this and then click apply and you should see the product settings right here and our section right here and nothing is going to show up right now because we haven't created any products but the section will show up after we create products and set them as featured products so what we want to do is just come in here and i want to go into the drop down and select the normal option and what you can do is you can add an animation for your products and then down here you can select what you want to show up in the product section we're going to leave everything as the default and then down here you can show how many products you want so we're gonna leave this as eight and then in the filter post section this is where you can select what you want to show up so we're selecting the featured products but if you wanna show the on sale products or all your products you can just select that here so we're going to leave this as featured and let me just show you on the demo ecommerce website really quickly that this is what's going to show up once we create some products so we're going to show four different products and if your viewer wants to see some additional products they can click on this arrow and they can see the other products and there's gonna be eight total okay so let's go back to our e-commerce website and let's just click on the apply button right here and if you guys have any questions about the featured product section let me know in the comment section and again just remember this section is going to show up after we create some products and we label them as featured products so now let's go and create a new section so click on add elements and we want to go and find the title element again to create our blog post section so just find this one and click on it and then come in here and just type in delicious ideas if you want the same title as the demo ecommerce website and we're going to center this and then just click apply and then we're going to go and add our blog post section so click add elements and we can just search for the blog post element so find that and click it and then let's use the normal option so let's click apply and in our settings right here we're going to go with the default setting and then i want to come into the animation drop down and i want to make these fade and left so there is a default blog post right here and you can see when i push the play animations that it's going to fade in from the left because i selected that right here and then if we come down to the post section i just want to have three blog posts so i'm going to change this number to three right here and then once you're ready let's click apply and click update to save everything and we are going to delete this blog post in a little bit and we're also going to create our own blog post so you can see on the demo website that we're going to create blog posts that look like this a little bit later okay so the last thing that i want to do is i want to come back up to the slider and i want to show you one of the settings that you can select so let's go and double click on the slider and it's going to open up the slider settings and once you come back into the slider settings if you come down to the auto slide section what you can do is turn on or off the auto slide so what that means is that the slider image is going to go to the second image after six seconds right here but if you want to change the amount of time that we stay on one slider image you can do that right here and right now the pause on hover is turned on so that means that when someone hovers over the slider image it's going to stay on this image so it won't automatically go to the second image and i want to turn this off so i'm going to turn this off right here and that's just personal preference so when my mouse is hovered over this after six seconds it's gonna go to the second image and then it's gonna come back to this one after another six seconds okay so it's really up to you but i wanted to point that out to you guys so click apply once you're ready and then click update one more time and once everything is updated we have just created our ecommerce homepage and just remember the product section is going to show up after we create our products and we label some of them as our featured products so this section is going to be blank right now and we're also going to learn how to create some blog posts a little bit later so this section is also going to fill out okay so again make sure that you click on the update button to save all of your changes and then once you're ready let's click on the x right here to go back to our wordpress dashboard so now if you come to your ecommerce homepage you should see your custom top bar and then our header section and then our two image slider right here and then down here we have our custom buttons with the zoom in effect and then our featured product section which doesn't have any products right now but we are going to learn how to create them very very soon and then we have our blog post section right here and then down here we have our custom footer so now what i want to do is i want to move on and show you how to create some products but before we do that we have to go and customize our woocommerce settings so let's hover over our website name up here and click on dashboard and once you're back on the wordpress dashboard now what we're going to do is go through our woocommerce settings so if you see this notification at the top that says run the setup wizard for woocommerce go ahead and click on this otherwise what you can do is hover over woocommerce here and click on settings so i'm going to click on this button right at the top and what we want to do here is go through the setup wizard so click on yes please and the first thing that we have to do is put in our store details so you can see right here i've already put in my address and where i'm located so if you need to pause the video and fill this out and then once you're ready click on the continue button and you can send woocommerce your data if you want i'm going to leave this unchecked and just click on continue and then what you want to do is choose the industry that you operate in so i'm just going to check some of these boxes and click continue and then what you want to do is choose the type of products that you want to sell so i'm going to check these two boxes right here but if you want to sell these type of products what you can do is upgrade your woocommerce so it does cost additional money but you can upgrade to sell these type of products so it's really up to you but once you're ready click on the continue button and then what you want to do is select the number of products that you're selling and if you're selling somewhere else you can select the options over here and then if you want to market on facebook you can enable this and if you want to collect emails with mailchimp you can enable this and if you want to use google ads you can enable this one right here so we're just going to enable mailchimp right here but if you want to use these other ones you can turn them on and they will install some plugins onto your wordpress website okay so click on continue once you're ready and once you come to this page we're already using the flatsome theme so we can just click on continue with my active theme and what we want to do on this page is we want to activate the jetpack and the woocommerce services so that we can automate our taxes so click on yes please and once you come to this page you might have to create an account so if you do put in your email username and password i think i already have an account so i'm going to click on this link at the bottom over here and i'm just going to log right in and all we have to do is click on the approve button right here and now you should be on the woocommerce homepage and what we want to do is finish our setup so we have these different tabs here and we're going to go through these together so we're going to skip add my products because we're going to show you how to create products in the next section of this e-commerce tutorial so let's click on personalize my store and we want to skip the adding products because we don't want to import any demo products so click on this and then we already have a home page created so we can skip this and we already showed you how to upload a logo so we can skip this too and we don't need to add a store notice so let's click on complete task right here and now what we want to do is go and set up our shipping so click on setup shipping and we can go into more details with the shipping a little bit later but if you want to set up a fixed cost for shipping in your country what you can do is type in a price right here so what i'll do is probably just type in five dollars and then we can have a shipping rate for the rest of the world if we enable this so go ahead and turn that on and maybe we'll charge a little bit more so we'll come in here and charge ten dollars for the rest of the world and again you can make up whatever prices you want or you can update this a little bit later in the woocommerce settings right here so i'm going to show you this after we go through all these steps so if you guys want click on complete task and now what we can do is set up our taxes so click on this button right here and you can see right here that jetpack and woocommerce can automate your taxes for you so this is going to make your life a lot easier so i'm going to click yes please but if you want to configure your own taxes manually you can do that but this just makes life a lot easier so we're going to click on this right here and now you should be on the woocommerce settings page so if you don't see this page go ahead and hover over woocommerce and click on settings and we're on the general tab right here this is where you can go to update your address and your selling locations and where you ship to and we also have taxes enabled and we also have coupons enabled so we're going to show you how to create coupons a little bit later but it's really easy just click on coupons under woocommerce and then you can go and create your coupons that way and then down at the bottom this is where you can select the currency so right now we have the us dollar but you can go in here and select whatever you want and the formatting and once you're ready click on the save changes button and once your settings are saved what i want you to do is go to the products tab so click on this and once you're on the products tab you should see the shop page already selected for you and this is a page that's created by woocommerce and we are going to show you how to create a custom shop page so we might not really use this one but let's just leave this as the shop page right here and then down here in the measurements what you want to do is select the weight units so i'm going to go with ounces and then for the dimensions i'm going to go with inches and if you're using a shipping plugin you want to make sure that you have the dimensions selected correctly so if you want to change these go ahead and do that and then once you're ready click on the save changes button and once that's saved let's go to the tax tab and on the tax tab right here what you can do is you can disable the automated taxes or you can change any of these settings over here we don't actually change anything so we don't need to click on the save changes button but if you do make any changes make sure you do that and you also have these other options here but again we're using the automated taxes so we don't really need to do anything so let's go to the shipping tab and what you can do on the shippings tab is you can go and edit the rate that you're charging for your country and also the location is not covered by this region right here so all the other countries that you ship to you can just click on the edit button and then you can go in there and change rate or what you can do is change the flat rate to free shipping and if you want to add some additional shipping zones just click on this button and you'll open up this page right here and what you can do is put in the name so we can just do something like canada and then in the region right here we can just type in canada and just select this and then we can add our shipping method right here and you have the flat rate option local pickup so maybe we'll go with flat rate and click to add this and once it gets added what you want to do is click on the edit button and then put in the price right here so we can just do something like 12 and click save and then once it's added then we can click on the save button here if we need to but now this region is added so if we go to our shipping zones and what you're gonna see is canada get added to the shipping zones so you're gonna charge five dollars here and twelve dollars to ship to canada and then if you're shipping to any other region we're gonna charge whatever price is included in the locations not covered by your other shipping zones okay so you can go in and edit all these or you can delete these it doesn't really matter so there are some additional tabs here that we don't really need to cover they're not that important but you can go and click on them on your own what i do want to do is talk about the shipping extensions so if you click on this link right here you're going to open up this tab with some plugins and these are premium plugins or upgrades to woocommerce that allows you to calculate your shipping using different methods so you can use usps right here ship station you have ups and then fedex and you can add these on your own to automatically calculate your shipping so you can check them out you can just click on extensions come in here click on the ones that you want to use and then just go through the process to integrate them into your wordpress website okay so i'm going to go back to this page right here and before we move on i do want to note that i do have a tutorial on how to use woocommerce on the nyc tech club youtube channel so you can go and check that out and we will be updating that shortly after we publish this video right here so if you have any questions or need some additional help with woocommerce check out those videos and you can always leave a comment and i'll get back to you as soon as i can okay so once you're ready let's click on the payments tab and once you're on the payments tab what we want to do is enable some payment options for our ecommerce website so on this page right here we can enable paypal and we are going to enable some additional ones by going to the extensions and adding some additional plugins but for paypal let's enable this if you guys want to use paypal and let me show you how to set it up so let's click on the setup button right here and once you're on the paypal page let me show you what you need to do to enable paypal you want to make sure that this box is checked and then over here is where you want to put in the email address associated with your paypal account and then if you scroll down into this section where it says receiver email this is where you can put in your email for where you want to get notifications whenever you receive a payment or get a transaction so this can be different than your paypal email address it could be your domain email or your business email or whatever you want and then what you want to do is come down to the api credentials and you want to go to paypal to get your api credentials so i have a paypal tab opened over here and you want to make sure that you have a business account with paypal and once you open up or log in and you want to make sure that you have a business account with paypal so once you log in what i want you to do is hover over your name and click on account settings and you'll come to the account access page and what you want to do is come to where it says api access and you want to create your api credentials so go ahead and click on the link to create your credentials and the api keys that you want to create are the nvp soap api integration so it's the classic option and i've already created mine so all i have to do is click on manage api credentials and it's going to bring me to this page right here where i have my api username password and signature and all i have to do is click show on each of these and then i'm going to see what the username password and signature are and i want to copy and paste those into these different boxes right here so i'll let you do that on your own and then once you're ready all you have to do is click on save changes and once the settings are saved now what i want to do is i want to integrate the paypal checkout button so that's going to be a one-click checkout so if you want to do that what you want to do is click on extensions right here and it's going to open up this tab right here and then go to the payments tab and what we want to do is go to this paypal option that's called paypal checkout with the smart payment buttons all you have to do is click on this and on this page right here all we're going to do is click on install now and this is a free upgrade so all we have to do is click on the continue button right here and you can just come down here and click on the purchase button and once you get this confirmation all we have to do is click add to site and you can just click on approve right over here and now all we have to do is let paypal and woocommerce install the plugin that we need and once everything is installed you should be redirected to the woocommerce settings and if you are then what we can do is click on the setup payments tab right over here and what you can do is also integrate stripe for free if you click on the setup button so i'll let you do that on your own and you can also integrate the woocommerce payment option if you want and you can see that there is a small little fee so again this is up to you but what i want to do is come down to paypal checkout and i want to set this one up with you so we're going to click on setup and all we have to do is click on the connect button right here and then you can type in your paypal email address and click next and then all you have to do is just log right in and then just click on agree and connect and once everything is set up just click on the go back to woocommerce button and let's go back to our website and you should be redirected back to the payments page right here and again if you want to integrate woocommerce payments or the stripe option then you can set these up on your own and also if you click on extensions right here you can go to the payments tab right over here and we were here a little earlier to integrate paypal checkout but you have all these other options such as stripe amazon pay and all these other ones that you see over here so you can click on the extensions link and come to the payments tab and check these out on your own so i'll let you do that and again it's really really easy to integrate these what i want to do is just show you now that we set up paypal checkout i want to go back to the settings and show you what everything looks like so back in our settings i want to go back to the payments tab and once we're back here now you should see the paypal checkout option and i want to click on the manage button and once you come to the paypal checkout page you want to make sure that the paypal checkout option is enabled and then down here the api credentials are already going to be inserted for you because we use the setup wizard to integrate everything with paypal and down below you should see the button settings and we can come in here and customize our paypal button a little bit later if we need to but it might look just perfect so we're going to see once we create our shop page and our different products and then we can consider coming back in here and customizing some stuff if you do make any changes you want to make sure that you click on save changes down here but right now we are good to go so now what we can do is go through these other tabs so click on accounts and privacy and once you come to this page there's really not much to do here but you can see all the different options and then down here if you want to create a privacy policy page there should be one created for you by wordpress and if you want to create a new one you can come in here and create that page so that sets it up right over here and you can change your policy or your checkout policy right here if you want also so again down here click on save changes if you do make any changes but we're not going to so if you're ready let's click on emails and on this tab all i want you to do is make sure that you have the correct email address set up for whenever you receive a new order a cancelled order or a failed order so if you want to change these go ahead and click on the manage button and update everything everything else is going to be sent to your customers email address and then down here you can customize the email template with different colors or different text so i'll leave that up to you just make sure that you click save changes if you do make any changes and once you're ready we can go into the integration tab and there's really nothing to do here but i didn't want to skip any of these tabs so we're not going to make any changes here so we can go to the advanced tab and on the advanced tab what you can do is select a cart page a checkout page an account page and a terms and conditions page and by default woocommerce sets up these pages for you so we don't need to create these pages or select them but what we do need to do is create a terms and conditions page a little bit later and then come in here and select that page and if you want to do anything else you can come in here and change whatever you want but we're going to leave everything as is because there's really no reason to change anything but if you do make any changes again click on the save changes button at the bottom okay so we're going to come back in here a little bit later but right now we are good to go and we have just learned how to set up our woocommerce settings so now what we can do is move on to the next step so now what i want to do is show you how to create some products for your ecommerce website so to create a product on the left hand side you can hover over products and click on add new and once you're on the add new product page this is where we're going to go to create our different types of products so we'll put in our product name right here and then we can insert our long description right here and if we want to format this section we can use the short code right here to customize the section a little bit so i'll show you how to do that and then down below in the product data section this is where you can go to choose the type of product that you want to create so the first type of product that we're going to learn how to create is called a simple product and i'll talk more about that in just a few seconds but in this section this is where you can put in the price you can update the inventory you can select your shipping options and so forth so we'll go through these tabs in just a little bit to show you how to enter your information and then at the bottom over here this is where you put in the product short description so really quickly let me go to the demo ecommerce website and show you what a simple product looks like so this is a macaroon and we only have one option there's only one color one size there's no variables and that's what a simple product is so the first thing that we're going to do is learn how to create a simple product just like this and we'll have our title our price our short description right here and then down here we'll have our category names and product tags and then down here this is the long description and what you can do is you can put in one long paragraph or you can use the short code to create columns like this and format the description so we're going to show you how to do this just in case you want to and you can also populate a related product section when you have additional products that have similar product categories or product tags okay so let's go and learn how to create a simple product on our ecommerce website so the first thing that we're going to do is come over here and type in the product name so we're going to type in sweet velvet right here so if you want you can type in your own product name and then what we're going to do is come over here and type in our long description so if you have a paragraph or a few sentences that you want to paste in for your product you can just paste it in or type it in right here but if you want something like the demo website where we have two columns like this then we have to use short code so let me show you how to do that on the ecommerce website so if you don't see this row of buttons then you want to click on the toolbar toggle right here and right here is the shortcode so if you click on it what we want to do is we want to add a row so click on this and we'll get this pop-up to insert our row and the number of columns that we want is 2 right here so we're going to go with the one-half and one-half option so just select that and if you wanted to add an animation you can or a hover effect but we don't need to do that because this is just a long description row so we can click ok right here and you should see the shortcode get added right here so we have a row that starts here and it ends right here so it always ends when there's a slash right there and then we have a column that starts right here and ends right here and then we have our other column right here and you can see right here it says insert content here so what we want to do is just delete this text and then we can paste in our title right here so it's going to say nutritional information and then if i push enter right here i can add a little divider just like the demo website so you can see right here that we have a little divider let's go in here into our short codes and in our elements we should see the title and dividers so we have this little pop-up we can just click on this one right here and now what we can do is start a new line and then paste in our information so i'm just going to paste in the text from the demo website so if you guys want you can go to the demo website and copy and paste that in or you can type in your own stuff and again what i'm showing you right now is how to create two columns for the long description and so we have our first column here and now we want to go into our second column and delete this dummy text right here and paste in our new title for this column so it's going to say product details and again we'll insert a divider so you can just copy and paste this in or you can go to the shortcodes and then come down to the elements again and you have a bunch of different elements so you don't need to just use what i'm using but you can play around with the stuff and really just put in whatever you want but if you want the divider just come in here and select it and then we can create a new line and just paste in our text right here so now we have our first column and our second column and if you guys want to go and check it out what we can do is come up to the top over here and click on the preview button so i'm going to click on that and open up a new tab and if i open it up and we scroll down to the long description you can see we have two columns right here with our text so again what i'm doing here is using the shortcode to create two different columns to format this section but again if you want to you can always just paste in a few sentences or paragraph for the long description for your product also i just want to show you how to use the short code to really format this section okay so let's go down to the next section now and what we're going to do here is insert our product information so the first thing that you want to do is make sure that you choose the type of product that you're creating and right now we're creating a simple product so just make sure you select this one and then if this is a virtual product you can check this box right here and you're gonna see some tabs change so you can see that the shipping disappears because it's a virtual product and then if you have a downloadable product you're gonna have this section pop up so you can upload the files or the file that you're going to be selling so that other people can download okay so we're actually going to be selling a physical product which is a macaroon and we can put in the price right here so let's just type in 6.99 and if there's a sale price you can type it in also but right now we're just going to leave it as a regular price and then in the inventory tab right here if you wanted to put in an sku or enable the stock management you can just turn this on and then you can type in the quantity if you wanted to but we're going to uncheck that and then for our shipping we can put in the weight and the dimensions and this is important if you are using one of the woocommerce shipping plugins so make sure that you put in the weight and the dimensions if you have a plug-in that's automatically calculating the shipping rates for you otherwise you can leave the stuff blank if you wanted to and we don't really cover linked products in this video tutorial but if you have some products that you want to upsell or cross-sell you can put in the product ids right here and then they'll show up on the product page so in the attributes section right here we don't have any variables so we don't need to add any attributes to this product but we will when we create a variable product and then if we go to the advanced tab right here we also don't have to put anything here but you can see right here where it says enable reviews if you don't want people to be able to review your product you want to uncheck this but i like to have my product page have reviews so we're going to leave this checked and then right here where it says get more options if we click on this you can see there are some additional woocommerce plugins or extensions that you can add to your ecommerce website but sometimes these cost more money and we don't really need them so we're really not going to go through this stuff but you can check these out yourself and then you can also check out the additional extensions and again in the woocommerce tab over here you can go and check them out on your own also so let's go to the product layout tab and this is where you can go if you have a custom product layout template so we don't have any created because we're going to be using the flatsome product page but if you had some then you can come in here and choose the layout option that you want and then you can put in some short code for the top and the bottom of the header section or below the product section right over here okay so let's go to the extra tab right here and this is a new tab with the flatsome theme so if you want to bubble you can enable this and then you can have a title like new or sale or anything like that and then you can also have a custom tab title over here so we're not going to insert that because sometimes it doesn't look too professional but if you want you can play around with this see what it looks like when you enable it and then you can go and preview the page and then down here you can also add a product video if you wanted to also all you have to do is just put in the url for the youtube or vimeo video right over here and then you can change the video size and then it's going to be a pop-up on your product page okay so we have just gone through how to add the product data for a simple product and really all you have to do is go to the general tab and put in the price and then you can put in a sale price also if you wanted to and the other important thing is coming to the advanced tab right here and disabling or enabling the reviews but by default this is enabled for you alright so now what i want to do is just come down to the short description section and again what you can do here is just paste in a little paragraph or sentence or you can use the short code again to format this section so what i'm going to do is just go to the product page right here and we're going to scroll up and i'm just going to take the text right here so i'm going to copy all of this and then just go back to my ecommerce website and just go back to my ecommerce website and i'm going to paste in this information right here and if you're wondering how i inserted this image right here i can delete this and what you can do is click on add media and if you want to upload your own image all you have to do is go to upload files click on select files and then upload the image that you want to use if you want to use the demo content this is the image that i just inserted so again so i'm just going to click on this one and then click on insert right here and you're going to see it get inserted right over here okay so now what we're going to do is come up here and we can add our product image over here so just click on set product image and in my media library i'm just going to select this macaroon right here and click on set product image and once you see it get inserted right here if you want to add some additional images you want to come into the product gallery and click on this link and what you can do is select as many different images as you want all i do is i push down the shift key and then i just check all of these images so we'll go with three even though i probably want to use these images for this macaroon but let me just show you if i click add to gallery they get inserted right here and you can always remove these by clicking on the x right here and then what we can do is come up to the product category section and if you want to sort your product by categories what you can do is click on the add new category right here and then just type in a category name so we can type in macaroons right here and click add new category and then i can also type in red velvet and also insert this one and now you can see we have two category names red velvet and macaroons and if we create some additional products and we use the same category names then we're going to populate a product section with related products that have the same category names and we can do the same with the product tags so let's go to the section right below this and right over here we can put in some tags so we can type in pink and red velvet and just push enter and now we have our product tags right here and again the product tags and the categories help you populate the related products or similar products okay so now let's go up to the top and the last thing i want to talk about is the visibility so over here we have catalog visibility if we click on the edit button right here what you're going to see is that you have the option to make this a featured product if you remember on our home page we have a section for featured products so if you want this product to show up on the home page in that section you want to check this box to make it a featured product okay so you also have these options right here to determine where this product is going to show up but we're just going to go with the shop and search results so let's click ok right here and again just remember that we selected this to be a feature product so it shows up on the home page if you don't want it to show up on the home page then you want to uncheck or leave this unmarked okay so now all we have to do to create this product is click on the publish button right over here and once the product is published if you click on this link right here you're going to go to this product page right here with the simple product so you can see we have our images right here and we have our title our price our short description and then we have our category names and product tags with our share buttons right here and then we have our long description down here so if you want to create some additional simple products what you can do is go back to the ecommerce website and you can click on add new to create some additional simple products just remember that you have the catalog visibility over here and if you click on edit you can make this a featured product so it shows up in the feature products section on the home page if you don't want the product to show up on the homepage then just leave this unchecked okay so go ahead and pause the video if you want to create some simple products right now or you can do that a little bit later what we're going to do is we're going to move on and show you how to create a variable product that looks just like this so the difference between a variable product and a simple product is that with a variable product you have different variables so you can have as many different variables as you want and with this product we have a size variable with different sizes right here and what we did with the different sizes is we actually have different price points so you can see when i select 12 ounces it's 6.99 but then if i select 10 pounds it turns to 10.99 so what we can do is show you how to create a variable with just different sizes and one price so if you're selling a t-shirt with different colors or different sizes i'll show you how to do that and we can also show you how to create a multi-variable product with different price points also and down here you can see we have our category names and product tags share buttons and then we have our long description right here and the additional information tab has our different sizes right here and just like these simple products if you have a bunch of different products with different categories or product tags that are similar to this product then you're gonna have a related product section just like this so if you want to learn how to create a variable product let's go back to the online store that we're learning how to make and let's go and create a new product so we can just click on add new right here and once you're back on the add new product page i've already filled out some of the stuff so if you need to you can pause video and create your own product i put in the product name and then i put in the long description right here and this time around we went with some sentences and then at the bottom over here i put in the short description and over here we have our product categories i have ethiopia and coffee and then some product tags right here and what we can do right now is add our product image so click on set product image and all i'm going to do is just choose one of these so i'll just choose this one and set image and i'm not going to add a product gallery or additional images but just remember up here and i said this in the last section also that you can make this a featured product if you go into catalog visibility and check this box to make this a feature product and then that's going to make this product show up in the home page so the main thing that we have to focus on for a variable product is the product data section so if you guys need to you can pause the video and update the product name the long description and short description and all this other stuff or you can just keep watching to see how we create a variable product and then you can pause the video afterwards and create your own so the first thing that you want to do if you're creating a variable product is come into this drop down and select variable product and what you'll notice is that you get some additional tabs right here and we don't need to do anything in the general tab and we don't need to go and do anything in the inventory tab unless you want to add an sku number and you want to manage your stock and for shipping we already set the shipping rate and again if you're using a plug-in or an extension then you want to add the weight and the dimensions so the plug-in can calculate the shipping rate for you and then for link products we don't go over this so if you guys need some additional help check out the woocommerce tutorials that we have and what i really want to do is come to the attributes tab so click on this and what we want to do here is add our variable so in this drop down right here you should see the custom product attribute option go ahead and click on add right here and you're going to get this little pop-up over here and what you want to do is type in the name of the variable so we can go with size right here and then we want to add our values and what you'll notice is that you want to separate it with this line right here so i can do something like 5 ounces and then so i can do something like 5 ounces and then again you want to use the lines so you want to click on shift and then the slash so it makes that line right there and then we can do five pounds and maybe 10 pounds and once we have our size variable and our different options right here we want to check these two boxes so that you can use this for the variations and then click on save attributes and what you can also do is you can add some additional variables so what we're going to do is we're going to show you how to make a few different types of variable products the first type is just going to have one variable but then we can do two variables and then different price points for the different values so in this example we're just going to have one variable and we want to go and set the price for this product so to do that we want to click on the variations tab and once we're on the variations tab all you have to do is make sure that the ad variation is selected and then click go right here and now you should see the variable get added right here and to add the price what you want to do is click on this down arrow to expand the section and then what we're going to do is just put in a price point right here so the price is going to be let's say 10.99 and right here you can see that it's for any size so that means if you select the 5 ounce 5 pounds or the 10 pounds it's all going to be 10.99 but if you wanted to you can add some additional variations and then just select five ounces and then only the five ounce would be ten dollars and then you can have these other options to have different price points if you had additional variations so we'll show you how to do that in the next example i think so right now we'll just have the 1099 and maybe we'll make this on sale for 8.99 just to show you what the product looks like with a sale price okay so again you can put in the weight and the dimensions right here and what we want to do is just click on save changes at the bottom and once that's saved we can just scroll back up and again you can always come in here and you can edit the price just expand the section or close it you can also remove it and again in these other tabs there's really nothing to do we have the reviews enabled and then you have your extensions right here and the product layout options we're going to leave this blank and you also have the extra tab right here which we're not going to touch so with a variable product what you really want to do is just select in the product data section that this is a variable product and then really just come down to the attributes and you want to add your variable and the values and then come into the variations tab and add the variation and then you can go in here and then add the price and whatever else that you want so once you're ready what we want to do is publish this product so click on the publish button and once the product is published if we click on the view product link we should be brought to this page right here and you can see that we have our price and it's on sale so we have this little bubble right here that says it's on sale and then we have our size variable right here with our different options so we can just put in our size that we want and then just click add to cart and we're good to go so you can see everything else looks pretty much the same and now we have the additional information tab right here with our variable information so this is how you make a single variable with one price point and what i want to do now is i want to show you how to make another variable product with different price points based on the values so let's go back to the online store that we're learning how to make and let's go and create a new variable product and once you're back on the add new product page again i already filled out the information here because this stuff is pretty easy so if you need to you can pause the video put in the product name your long description and then the short description at the bottom the product image and any other additional images if you want and then your product tags and your category names right here and one more time i just want to remind you guys that if you want to make this a featured product you want to click into the catalog visibility and then just check this box right here and click ok and then that's going to make this product show up on the home page so i will show you what the homepage looks like after i create all my different products just to show you again what the website is going to look like once it's complete but right now we're talking about variable products and how to create a variable product like the one that you see on the demo website right here where we have different price points based on the values in our variable options so we have 12 ounces that's going to cost 6.99 and then 5 pounds is going to cost 8.99 and 10 pounds is going to cost 10.99 so if you guys want to learn how to do this what you want to do is go back to the ecommerce website that we're learning how to make and then come down to the product data section right here and remember we want to go in and choose the variable product option and we're going to get some additional tabs right here and we don't need to go through all of these what we want to do is just go to the attributes and add our variable so again go in here click on add and again we're going to come in here and just type in size and let's go i don't really remember the variables that i chose earlier so we're going to do 5 ounces 5 pounds and 10 pounds i don't know if that's exactly the same as i had for the last coffee roast but that's okay because this is just a demo and i just want to show you how to do this so we want to check these two boxes once you're ready and then click save attributes and once everything is saved we're going to go to the variations tab and once we're on the variations tab what we want to do is create a price point for the five ounce the five pound and the ten pound so what you can do is you can click add variation three different times and then select the different values and then go in and create the different price points or what you can do is if you go into this drop down we can create variations from all the attributes let me show you what happens when we select this and click go and just click ok and now you should see the three different values right here or the three different options and again you could have gone in here and added the variations one by one so you could have clicked on this three times to get these three different lines and then gone into each drop down and then just selected the values on your own but what we did was we went in here and clicked on create variations from all attributes and click go and then it just gave you all of the different options so that just saves a little bit of time and now what we can do is go into each one of these and just expand them and then just type in our different price points so we can do 6.99 for the first one right here and then we can collapse this and then go into the second one and type in 8.99 for the five pound and then collapse this and then go into the last one and type in 10.99 and that's all you have to do to create different price points for all the different values so now when someone selects this value they're going to get a certain price and then when they select the 10 option they're going to get another price so all you have to do now is click save changes and again you can go through these other tabs if you want but we don't need to really go through them so it's super super easy all you have to do is add your attributes which is the size variable or whatever variable that you're using and then the values and then come to the variations tab and again you want to add all the different variation options that you want for different prices and once you're ready we can just come up here click on publish and once the product is published if we click on this link right here it's going to bring us to our website and you can see we have our range right here and let me just test this out i'm going to click on 5 ounce and you can see that it's a certain price and then if we click on 10 pounds it changes to another price and if i scroll down here we should see the related products section now because both of these products have the same product category which is coffee and i think they might have the same product tags also so again you need to make sure that you input the product categories and the product tags if you want that related product section to populate okay so now what i want to do is show you how to create another variable where we can have some additional variables so we can have more than one variable and we can also have the same price point or different price points it's all up to you so let's go back to our e-commerce website and let's go and create a new variable product so click on this link right over here and once we're back on the add new product page you can see right here i already filled everything out so i have my long description short description product image category names and product tags all i really want to do is i want to show you how you can create a variable product with more than one variable with different price points so what i want to do is again go into the product data select that we're creating a variable product so that we have the variations and the attributes and we're just going to come into this section right here so i'm going to click on attributes and i'm going to add my first variable so click on add and the first thing i'm going to do is i'm going to type in the roast so we're going to go with light and also dark and we'll just click use for variations and then we'll click save attributes and once this first variable is added i'm going to add a second variable so i'm going to click add one more time and this is all you have to do to add multiple variables to your products so this time around we'll go with size and we'll go 5 ounces and then 5 pounds and 10 pounds and we'll click on use for variations and click save and now we have two different variables roast and size and now let's go and add our different price points so click on variations and what i want to do is i want to have different price points for the different sizes but not for the different rows so we're going to go and create three different variable options so click on go right here and you can see that we have our first variation so i'm going to let the user select any roast that they want but i want them to select the five ounce option to get a certain price so we're going to go in here and we'll just put in our price right here so maybe we'll make this one 7.99 and we'll just close this and then what i want to do is add another variation so click go right here and now you can see we have our second variation and i want to go in here and change it to five pounds but again they can select any roast that they want and we'll come in here and we'll type in 10.99 and i'll close this and i'll add one more variation for the 10 pound option and again i'm just going to go in here and select 10 pounds and then expand this and we'll just type in 14.99 and maybe this one's on sale for 12.99 i don't know if that's gonna look good but we're gonna do it just for fun anyways so click save changes right here and once everything is saved i'm going to come up here and click on publish and once the product is published if i click on this link right here it's going to bring me to my ecommerce website and you can see we have a price range and the sale bubble right here and if our customer comes in here and chooses their roast type and then their size they're going to get one price and then if they change their size they're going to get another price and if they don't select a value for the roast then the price is going to disappear so they need to make sure that they have a value for both of these options in order to get a price okay so this is how you can create a multi-variable product with different price points but if you wanted to just have a multi-variable product with one price then what you can do is just come back to the ecommerce website and in the variation section all you need is to have one of these lines with any roast and any size and then you can come in here and then put in the price and if you remove these other ones then whenever they select a value for both of these they'll get that price but what we did was we just created variations with different values and different options to create our different price points okay so if you guys want you can pause the video to create some additional variable products on your own what i want to do right now is i want to show you how you can save the variables so when you go to your attributes tab over here you can actually just populate all of these with a click of a button instead of having to type in the name and the variables every time so if you want to learn how to do that let's go to the attributes tab underneath products right here and once you come to the attributes page this is where you can go to save your different variables with different values so that you can use them for your variable products with a click of a button so all you have to do is just type in the name of your attribute right here and then in the slug you can type in the same name and then click add attribute and once you see the variable right here what you want to do is add the values for this variable so to do that just click on configure terms and once you come to this page this is where you can type in your values so i'll type in small right here and for the slug i'll also type in small and click add new size and once that's added i'm going to type in medium and you don't need to use the same values these are just examples for this section right here so i'm going to type in large and once i type these in you're going to see them all in this list right here and we can rearrange these so i'm going to bring the top one up here and then move the large to the bottom over here and once those are saved now let me show you how to use these in the product page so let's go and create a new product so click on add new and once you're on the add new product page this is just a demo for a variable product so i'm not going to fill all this stuff out i just want to come down to the product data section and then select the variable product and go into the attributes right here and now in this drop down what you're going to see is the variable that we just created so we can select that and click add right here and you can see that it gets added and in this values box if you click in it you can add the values one by one or what you can do is click on select all and you'll see that they populate just like this so you can also delete them like that so this saves a lot of time if you have a bunch of products that have the same values so you don't need to type them in each time just with a click you can see that you can add everything and again all you have to do is click use for variations and click save and once that's saved just go to the variations tab and you can just click on go right here and once you see the variation right here just click and expand this and then you can put in your price and all that stuff so what i wanted to do was just show you how you can save variables and the values so that you can use them with a click of a button just to save yourself some time so if you guys want you can pause the video to create some additional variable products for your ecommerce website otherwise what we're going to do is we're going to move on and i want to show you how to create some simple products that are virtual products and downloadable products and then we'll also touch on affiliate products so if you guys want to do that let's go and create a new product and once you're on the add new product page let me quickly go over how to create a virtual or downloadable product so you can fill out all the stuff on your own this is just going to be an example so in the product data section right here you can create a virtual or downloadable product using the simple product or a variable product it's probably easier with a simple product so let's just choose that one right now and all you have to do if it's a virtual product is check this box right here and what that's going to do is it's going to remove the shipping tab so you can see right here if i click on this there is the shipping tab because this is unchecked and then once we click it the shipping tab goes away and when you're selling a virtual product it's most likely going to be a downloadable product so you probably want to check this box too and you're going to get this section right here so what you want to do for a downloadable product is you can just click on add file and then upload the file that you want to sell so that people can download it and then you have limits that you can set right here and then you can expire the download link over here also so it's really easy and you can also do this with a variable product so let me just show you really quickly if we go to the variable product all you have to do is go into attributes right here and then you can create a custom attribute so we'll just type in something like test right here and then a and b just for fun and then go click use for variations and click save attributes and once that's saved we can go into the variations and all we're going to do here is just click go and once you have your variation right here just click and expand this and then over here you have your options to make this a downloadable product and also a virtual product and again what you can do is you can just come in here and upload your file or files that someone can download once they purchase it so it's really easy and i just wanted to go over that because some of you guys want to create a virtual website or downloadable products to sell so that's all you have to do so it's really easy and i just want to go over that because there are some people that want to sell virtual or downloadable products so it's really easy if you guys have any questions let me know and again one more time if you guys want to make it a featured product go click on the edit link right here and check this box okay so now what we're going to do is we're going to show you how to make an affiliate product so let me just change this really quick so you guys know that we're making an affiliate product so now what i want to do is really quickly show you how you can add an affiliate product to your website so i'm going to change the title right here just so that you guys know that this is an affiliate product and let me show you how to make this so again we're going to go down to the product section right here so we can just go in here and we can select the affiliate product and the only difference here in the general section is you want to add the url for the product or the affiliate product right here and then you can put in your text for the button to buy the product over here and once someone clicks on this button it's going to redirect them to the affiliate page okay so it's really easy again all you have to do is add the url for the affiliate product right here and then put in some text for your button if you want right here and then you can go through these other steps of adding the price and you can go in and enable the reviews over here and all that stuff so you can fill out everything else the short description the long description the product image and the tags and categories it's really up to you so that's how you can create all different types of products on the ecommerce website that we're learning how to make using the flatsome theme and woocommerce so if you guys want you can take a break right now and create some additional products for your own ecommerce website i think that's what i'm gonna do and so if you want pause the video and then push play once you're ready and we'll move on to the next step all right and welcome back so i took a break to create all my different products so i have some simple products variable products featured products regular products any type of product that you can think of i probably created for this demo website and what i want to do really quickly is show you on the home page so let me go and check it out you can see when the home page of the ecommerce website loads now if i come down here we have our featured product section with our featured products and i can scroll through this list and you can see all my different products and now if you go to the shop page which is a default page created by woocommerce this is what you should see so you should see all of your different products right here and you can also customize a sidebar in the widget section so i'll show you how to do that a little bit later but we are going to be creating a custom shop page in the next section and you can see it right here we're going to have three different sections with titles and some products right here and so you can see that we'll have another section right here and another one right here so if you want to learn how to create this page right here with the flat some page builder let's go and create a new page so back on our ecommerce website we can hover over new right at the top and we can click on page we can hover over new right at the top and click on page and once you're on the add new page the first thing that we have to do is type in our page title and you can't type in shop right here because woocommerce saves the shop title for the default shopping page so we want to type in another name right here and this is just a page that either it can be your custom shopping page or just a page to practice building another page with so i'm going to type in products right here and once you do that we're going to leave the template as the default so we can just click on the publish button right at the top and once the page is published let's turn on the flatsome page builder and once the flatsome page builder is turned back on you guys already know what to do so the first thing we're going to do is delete this wp content blocks so we'll just go in here click on this click delete and you can see that we have all these templates you can choose them if you want but we're going to learn how to build a custom shop page and i have the demo website opened up right here with the flatsome page builder and you can see when i go back right here that this is going to be really easy all we're going to do is put in some titles and some products and that's pretty much it so back on our ecommerce website the first thing that we're going to do is add a title element so click in here and then scroll down to the content section and down at the bottom of here you should see the title element click on that and all we're going to do is type in our title for the products right here so it's going to say french macaroon and then in the style right here i'm going to center this and then i'll just go back right here and add another element and what we want to do is search for the products module so type in products and this is the one that we want products dash custom so click on that and what you're going to see in this section are a few different options so in this drop down right here if you click on it it's going to populate all your different products by name and you can actually customize what shows up over here so right now you can see that we have some macaroons and also our coffees so we probably just want to show our french macaroons here so on the demo website you can see that i actually selected all the items that are going to show up in these two rows right here so if you want to do that you want to go into the drop down over here and then just find the items that you want to add one by one and with the power of video editing i have added all my different products so if you need to go ahead and pause the video and add your products and then what we can do is come down here and i want to leave the number of products that show up in this section as 12 but i want to change the number of columns from four to six and what that's going to do is just give me six columns per row and we're gonna have two rows just like this and that's pretty much all we have to do so if you guys are ready let's click back right here and let's click on the update button to save everything and once that's saved we're gonna do the same two steps that you see up here for our next section so i'm going to click on add elements and just type in title right here and click on this and then i'm going to paste in my title so it's going to say handmade desserts and we'll style this at the center and then we can click apply right here and then we can add our custom product module so we'll type in products again and we'll just find this one and click on it and once you see the product show up you can see that i've already added my different products once again and i changed the number from 12 to 6 right here and then the number of columns to six also so if you guys want pause the video to add this section to your e-commerce website and i went a little fast because these steps are really easy and i didn't want to waste a lot of time making you watch me select all of these different products so once you're ready though push play and then click on the apply button and we're going to add our last section which is going to have our coffee products or just another product section so again what we're going to do is click on add elements and then find the title element and click on that and i'm just going to type in roasted coffee right here and you guys already know i'm going to click on the center option click apply right here and then we'll go and find the product element one more time so we'll just type in product right there and then just select this one and once the product section shows up you can see i've added my different coffee products and i changed the number that is going to show up to four right here and i left the number of columns as four so if you guys want go ahead and pause the video to add this section as well and then click on the apply button right here and then click on update and pretty much that's all we have to do to create our custom shop page right over here and again you can always come in and customize this however you want and you can always use one of those pre-made templates as well or you can use the default shop page so again click on the update button right here just to save everything and now what i want to do is i want to show you how to customize the default shop page with that sidebar so we're going to close out of this and once we're back on the wordpress dashboard i want to get the sidebar to show up so what we can do is click on the dots right here and then exit out of the full screen mode and then on the left hand side over here i want to hover over appearance so come down here and then click on widgets and once you come to this page what you're going to see are a bunch of different widgets that you can drag into these sections over here so we have our sidebar for our blog post pages our default shopping sidebar and then our product sidebar so what we're going to do right now since we're on this page is we might as well just go in and customize all the stuff so let me show you on the demo ecommerce website that this is the shop sidebar so we have product categories and you can expand these and then we have the recently viewed products right here and then on the product page we have something very similar but we just changed the title right here to browse and again we have our different categories right here and then we have our products that we just recently viewed and then on the blog post page you can see right here it's a little different it's going to be on this side and then we have our latest posts recent comments categories archives and you can add a bunch of other stuff you can really customize this stuff however you want so what i want to do is go back to the ecommerce website that we're working on and let's go and customize the shop sidebar first so what i want to do is just show you what i add but you can always add any of these other widgets so the widget that i'm going to look for is the product categories widget so if you scroll down they should be in alphabetical order and you can click and drag this up to the sidebar or you can just click and expand this and then you can select where you want to put it so we're going to go with the shop sidebar and then we'll just click add to widget and if we scroll back up now you can see that the product categories widget is added to the shop sidebar and if you wanted to change the title you can but we're not going to make any changes here so we don't really need to do anything but you can always come in here and delete this if you want also so we're going to collapse this and then we want to go and find the recently viewed products widget so we're going to scroll down here and we have it right over here so again you can click on it choose the shop sidebar and click add widget and now if we come up here you can see that we see it and if you want to customize this you can but we're going to leave it just like this and what i want to do is add these same two widgets to the product sidebar so again i'm going to scroll down here and look for the product categories just go in here and this time around i'll select the product sidebar and click the add button and before we scroll back up i'm going to just go down and look for the recently viewed products widget click on this and again just make sure that the product sidebar is selected and click add and then we'll come up to the product sidebar right here and this time around i'm going to change the title to browse and i also want to add the product count so i'm going to check this box right here and if you do make any changes you want to click on the save button right here and once that's saved we can collapse this and i don't think i want to make any changes here so i'm going to collapse this one and now what we can do is go and customize the sidebar so again what we're doing right now is we're going to be customizing the blog sidebar right here so if you want something like this what you want to do is go into this section and first we can delete some of these so i don't have the search widgets so i'm going to go in here and delete this and then i'm also going to delete the recent post widget so delete this and once that's deleted i also want to delete the meta widget right here so i'm going to go in here and delete this and i'm going to rearrange these so i'm going to move this one right underneath the categories and now i'm going to go down here and find the flash some and now i'm going to come down here and find the and find the flat some recent post widget so just click and expand this click the sidebar and click add and once it gets added right here if you want you can add a title for this section so i'm going to type in recent post or latest post and then we'll just click save right here and then if i want i can collapse this and we can move it up to the top over here and then i want to find the tag cloud so down here you should see it so i'm going to click and expand this and then i'll just add it to the sidebar so we'll scroll back up and then i just want to go in here and add tag cloud as the title and click save right here and once that's saved i'm going to collapse this and put this underneath the recent comments and then i'm going to open up the recent comments right here and just type in recent comments as the title so i'll click save right here and pretty much that's all we do to customize our different sidebars for the online store that we're learning how to make but again you can come in here and add whatever widgets that you want and you can always go and check out the different pages and see if you like what you see otherwise you can come back and update it okay so if you guys are ready we are ready to move on to the next step so now what i want to do is quickly talk about product categories and how you can set them up so on the demo ecommerce website right here you can see that we have two different categories coffee and macaroons and if we open this up we have some child categories for the coffee and also for the macaroons so if you want something like this what you want to do is go back to your ecommerce website and we could have set this up when we created our products but i didn't want to confuse you so right now i can show you how you can organize everything what you're going to do is hover over products and then click on categories and once you're on the product categories page this is where you can see a list of all your different categories so if you want to edit any of these delete them you can do that here so the first thing that i want to do is i want to remove the uncategorized list right here so what we're going to do is just go to coffee right here if you have a coffee category and click to make that your default one and once you do that now if you hover over this one you can actually delete it if you wanted to so that's what i'm going to do and once that's deleted now what you're going to see is we have coffee right here and then we have some subcategories and we also have macaroons right here and then some subcategories but we also have some coffee roast right here which we didn't give a parent category earlier so on my ecommerce website right now you'll notice that in the product categories we have coffee macaroons and then these other ones that are just floating around but inside each of these you can see we have our subcategories so if you want to move these ones underneath coffee or macaroons what you want to do is come to this list and then find one that doesn't have a subcategory and the subcategory ones have the line right there so let me open up this one by clicking on edit and once you're in the edit category what you can do is come to where it says parent category and then just choose the parents so we can put this one under coffee and then just click update right over here and then what we can do is go back to the categories and we can do this with all of them we can go into guatemala and we can just come in here choose our parent category name and click update and pretty much that's all you have to do to have a parent category and then a subcategory but you could have also done this when you created a new product so let me just show you really quickly let's click on add new and once you're on the add new product page you can see down here in the product categories that we have a parent category and then some subcategories and then same with the macaroons so if i wanted to create a product i could just say this product is going to be part of coffee and also guatemala or what i could do is i can add a new category name by coming down here and clicking on add new category and let's say we have a roast from africa so we can type in africa right here and then what i can do is just choose the parent category right here and then click add new category and what you're going to see is that it gets added underneath the coffee category right here and then if i wanted to have the parent category also i could just check this box so this is how you can create categories with subcategories and you can also do new ones so let's just do let's say a new category right here and what we're going to do is not have a parent so we'll just click insert and then we can just add a child category so let me just type that in right here and then i can just select the parent category as the new category and then just click insert right here and now you can see that it falls underneath right here okay so i just wanted to show you this because i want you to make sure that your website is organized and if you ever want to delete any of these just go back to categories right here and then you can go into your list over here and maybe we'll just delete these two so we'll just check these two and then go in and click delete right there and now if we go to our demo ecommerce website and we refresh this you can see that we have our product categories right here and now if we open them up we can see our subcategories so this looks a lot more professional all right so i just wanted to show you guys that and that's kind of one of those things that not a lot of people will show you but i want to make sure that you guys have everything that you need for your ecommerce website so give this video a thumbs up if you thought that was helpful and let's move on to the next step so now what i want to do is go and show you how to create the about page for your online store so we're going to have a page title with some share buttons and a background image and then we'll insert some different sections right here maybe a team section and then some values like this so again we're going to be using the flatsome page builder so let's go back to our wordpress website and let's go and create a new page so hover over pages and click on add new and once you're on the add new page just type in about for the page title and then make sure you're on the document tab right here and then go into the page attributes and select the full width option and then just publish this page and once the page is published let's turn on the flatsome page builder and once the flatsome page builder loads now what we can do is go and add our elements so let's click on add elements and what we want to do is add a banner so go ahead and come down here to the content section and click on banner and let's just go with a blank banner right here so let's come down to the bottom click apply and what we want to do is go and find the banner so click on that and let's go with the blank option and come down here click apply and once these settings show up let's go in here and let's change this to 300 px because we don't want a super long title section and then let's click on add media and once the media library shows up just remember you can always add your own images by clicking on upload files we're going to use the demo content so in my media library i want to find this image right here the title slider so i'm going to click use image and once you see the image right here we can double click on the text box and once we get this pop up i'm going to replace the text with our story as the page title and then i'll just click ok right here and then we can come down and click on apply and i want to add a divider line so click on add to text box and then let's type in divider or you can see it right here so we can just add this and click apply right here and now what i want to do is add some social media buttons right below that so again click on add to text and we can just type in share icons and you should see this right here go ahead and click on this and you should see the share icons right here so if you want to customize these go to your theme options and there is this tab right here on the main page called share and this is where you can select the icons that will show up using this element okay so i'll let you guys do that on your own but these ones are the ones that show up by default and what we want to do is go and click on the apply button right here and then click on update and once everything is updated i'm going to collapse the banner and let's click and add a new element so we're going to add a new section so click on this and we're gonna go with the default option so make sure that one is selected and then click apply and once you come into the section settings just come down to the bottom and in class right here let's type in container and that's just gonna make this a little box so it's going to contain everything and once you do that click on the apply button right here and now what we can do is go and add our first section so let's go in here and let's find the text element so click on that and what we can do is just go and delete this text and then paste in our text and i'm going to center this and then highlight this text right here and then change this to 110 just to make it larger and if you want to change the font color we can just go in here and just select the font color that we want so go with this gray color and then we'll click apply right here and once you're ready let's click back and now i'm going to add a title section so we'll just type in title right here click on this and we're going to come in here just type in our title so it's going to say a family owned business and we'll center this and then we can click apply and what i want to do now is i want to add a little story about my business so i'm going to add another text box right here and again what you can do is really just add whatever you want so you don't have to do exactly what i'm doing but this should give you a really good idea of how to use the flats on page builder to customize your own ecommerce website so i'm going to paste in some text here and i think i'm going to center all this stuff so i'm going to highlight everything and just center it and that looks pretty good so i'm going to click apply right here and click apply again and just click on the update button just to save everything and once that's saved we can scroll down to the bottom and now i want to add my next section which is going to have the employee section right over here so if you want to add this let's go back to the online store that we're learning how to make and let's click add to section and the first thing we're going to do is add a new title section so click on that and we can just type in meet the team and we can center this and once we do we can click apply right here and now what i want to do is i want to add a row section so click on this and let's just click on the row option and let's go with the four column option so click on that and then scroll down and click apply and once we have our row settings right here we don't need to do anything so let's click on the apply button right here and in our first element right here go ahead and click on the plus button and type in team member to find the element right here so click on that and once the team member element shows up this is what you should see so we can go and customize it by adding our profile image right here so this is an image of me so if you guys didn't know this is the man behind the voice and we're going to change the name right here to put in my name and my title will be chef and then down here in the social icons what you want to do is add the url for the buttons that you want to show up so i'm going to add facebook and instagram and i'll also add twitter right here and you can add as many different links as you want but we're gonna just add those three and click apply right here and then you'll see the little text box right here let's double click that or and we're gonna get our text box right here and what we can do is just highlight and delete this text and then paste in our own text right here for our employee and i can center this and click ok and now we have our first employee right here so what you guys want to do for these other rows is just click on the plus button and then you want to find the team member element and then just click and add it and then you can go in and customize it what you can also do if you want is you can just click on this team member right here and then click on the wheel and you can actually duplicate this and you can make a copy of it down here and then if you click the team member and drag it into wherever you want to place it you can see how easy that is so again all you have to do is click on the team member button right here and then all you have to do is click on the wheel and you can duplicate this and once it loads you can just click and drag it right over here so i'll let you guys do that on your own if you guys want to pause the video to update this section go ahead and do that and then once you're ready we're going to create the next section so the last thing that we're going to do for our about page is create this value section so if you want to do something like this i'm going to show you how to create some additional columns and rows so back on the ecommerce website that we're learning how to make i'm going to go back to the main page right here we're going to collapse the section and click on the update button to save everything and once everything is saved now we're going to add a new title so go ahead and click to add to section and type in title right here and click on this and all i'm going to do is type in values right here and we'll center this and then we'll click apply and now i want to add a row right underneath so i'm going to click add to section and just add a two column row so we'll select this one right here and then scroll down and click apply and once we have our row right here what we can do is just click apply and then we can go and add our icon box so i want to search for that really quickly so we can just type an icon and you should see it right here so let's click on that and once the icon box shows up let's go and add an icon so click on select media and just choose your icon so we'll just select this one right here and once it gets added i want to center this so i'm going to go in here and just click center and then i want to change the size of this so you need to drag this wheel you can make it larger or smaller i'm going to go with something around 44 or 46 so we'll go at 46 right here and then we can just click apply right there and now i want to come into this text right here so i'm going to double click it and just highlight all this text and paste in the text that i want and then i'm also going to center this so i'm going to highlight and center it and then just click ok just like that and we can do the same thing on this site so let me just do it really quickly we're going to click on add element and just type in icon and find the icon box and once it gets added i'm going to click on select media and this time around let's add this one it doesn't really matter which icon i choose but you might need to go and get your own icons if you don't want to use the ones i provide to you so it's really up to you and we're going to center this and then we're going to click and just drag this to 46 as well and then we'll double click on the text box and then just come in here and paste in my own text and then i'm going to center this and you want to do this for the second row or as many different rows as you want so at the bottom over here what we can do is click the plus button and then we can add another row with two columns and then you can just do the same thing so i'm going to click apply right here and now we have our two columns right here or two rows and again we can just go in and just type in icon box and select that and i'll do this one more time and then you guys can go and just do it on your own but we have our icon right here we're gonna center it and then we'll drag this wheel to 46 if i can get to it right over there and then we can just go into the text box and highlight all of this text right here and just paste in our own text and then i can just center this and that's pretty much all i have to do so i can click ok right here and then you can add your last one if you want over here so i don't want to keep doing this with you guys because again this is a demo website and you guys are probably going to customize it yourself so go ahead and pause the video if you want to add additional sections or whatever you want for your ecommerce website and then once you're ready push the apply button and then click on update right here and once that's saved we have just learned how to make our about page and if you guys want you can pause the video to customize your own ecommerce about page on your own but now what we're going to do is move on and show you how to create another page just to practice with the flatsome page builder so this is going to be very simple we're going to create another title section and then just add another section down here with a little text box so if you guys want to do that or if you want to skip this section it's really up to you but practice makes perfect so let's go and create a new page together so we're going to exit out of this and once you're on the adding page all we're going to do is type in our title right here and then go down here and choose the full width option in the template and then click on the publish button twice just to publish this and once it's published let's turn on the flatsome page builder and the first thing that we're going to do is go and add a banner element so we'll come in here just select the banner and we'll go with the blank option and click apply and once the settings show up we're going to come in here and change the height to 300 px and then click on select media and i want to add the same image that we use for the about page so select this one and then we can just double click this and we can come in here and we can type in our title so again i'll type in y macaroons and what i want to do is change this to heading 1 just to make it a little bit larger so we'll click ok right here and i'm going to click back right here and add a divider to the text box so we'll just come in here and select this and then we'll click apply right here and we'll also add the share icons again so i'm going to come in and just type in share and then just select this and they should load and once they show up we can just click apply right here and then click update and now what i want to do is collapse this and we're going to add a new element which is going to be a section so click on that and we'll just go with the default option so we'll click apply right here and all i want to do is come down to the bottom again and i want to make this a container so i'll type in container for the class and click apply right here and then what we can do is add our title section so you can see how easy this is and so once we have our title section right here we're just going to paste in our title that says that's easy because they're delicious and then we'll center this and click apply right here and now we can just add our text section down here on why macaroons are so amazing so we're going to click on add section and all i want to do is just find the text box and once that pops up what we're going to do is go with the paragraph option and we can open up the text editor and we can just take this text and delete it and then just paste in our own text and i'm going to highlight all of this just to center it and also to change the text color so you have all of these formatting buttons that you can use and once you're ready just click ok right over there and then click on the update button and that's all we have to do for this page that we just created and again the reason why i wanted to do this was because you might want this page and also it just gives you some extra practice with the flat some page builder for the ecommerce website that you're learning how to make okay so if you guys are ready let's actually close out of this and go and create another page and once you're back on the wordpress dashboard now what we're going to do is learn how to create a frequently asked questions page for the online store so you can see right here that it's pretty simple and we have a cool little feature right here that lets us expand the questions and answers for our ecommerce website so let's go back to the ecommerce website that we're learning how to make and let's go and create a new page so go ahead and click on new page and once we're on the add new page all i'm going to do is put in my page title so it's going to say frequently asked questions and then in the template this time i want to go with the center title option so go ahead and select that one and then once you're ready click on the publish button and once the page is published you guys already know we're going to turn on the flatsome page builder and once the flatsome page builder loads you're going to notice that we already have our page title right here because of the template that we chose in the page attributes so all we have to do is we need to add our little section right here so the first thing that we're going to do is add a text element so go in here and just find the text element and we can go with the paragraph option so we can just click apply right here and we can double click this to open up the text editor and i'm going to paste in the text from the demo website so you can see that it gets added right here and if you want to link some of this text to another page or something like that what you can do is just highlight the text and then you can click on this little icon over here and what i'm going to do is link this text to my email so if you guys have a gmail account or a website email you can type in mail to colon and then your email address and that's going to link this text to your email so if you guys don't have a web domain email address for your ecommerce website i'm going to link you to a video that i'm going to create an update to show you how to do that with your own domain name okay so once you type in this text right here if you want to link to your email just click apply and that's pretty much all you have to do and if you guys want to change the text color we can just highlight this and then go into the text color right here and maybe we'll select this color just to make it a little unique so that people know that this is a link right here and now what we can do is go back right here and we want to add our questions and answers so click on add elements and i want you to type in accordion and what that's going to do is give us the little pop-up so that we can collapse and expand stuff so just click on this and you should see it pop up over here and if we click back right here you're gonna see three different accordion panels and if you want to add some additional ones just go into any one of these and then click on the wheel and you can duplicate it and then you can create another one just like that so you can see now there are four of them and if you want you can also delete these so you can add as many of them as you want so i'm gonna have two of them for my demo but you can add as many as you want and what we want to do is first just double click this and what you can do here is just type in your questions so i'm gonna paste in the question from the demo website so it says what do we charge for ordering at the shop and then we can go back right here and if you expand this you can add a text box so just click on add to accordion and then find the text box and click on that and then we can use the paragraph option and we can just open up the text editor and what we can do is just go in here and type in our answer and you can format this however you want and then click ok and then click apply right here and now if i go in here and i click on this you can see that it opens up and it has a text box and this one doesn't have anything right now because we haven't added any elements but you can see all you have to do is just come in here and click to add a text box and then you're good to go so what we can do is do it one more time we'll come into the second one right here i'll double click this and then we have our title section which is where we add our question so i'm just gonna paste in a question right there and then come back here and then expand this and again i'm going to add a text box so i'll use the paragraph option and then i'll open up the text editor and then i can just come in here and paste in my answer and click ok and then click apply and click update so you can add as many questions as you want and then we can close this so that we can see what it looks like so we can collapse that and we can open up this one and that's pretty much all you have to do for the frequently asked questions page and you can always customize it some more if you want really depends on your own ecommerce website and the design that you want for your website but i'm pretty happy with this and i hope you guys are able to make a beautiful frequently asked questions page if you need some additional help let me know make sure that you click on the update button to save everything and then once you're ready let's exit out of this and once you're back on the wordpress dashboard we are almost done with this tutorial on how to make an ecommerce website with wordpress the next page that we're going to learn how to make is this contact page so we're going to insert a google map just like this if you have a physical location and then right below it will have two rows or two columns with some information and a contact form so if you want to learn how to make this for your online store let's go back to our own wordpress website and let's go and create a new page so once we're back on the add new page all we're going to do is type in our page title right here and for this template we're going to go with the full width option so once you're ready click on the publish button and once it's published let's turn on the flat sum page builder and once you see the flatsome page builder let's go and add a new section and we're going to go with the default option so we can just click apply and we don't need to go through the settings so now we can add our maps so click on add to section and let's just type in map right here and click on this and once you see the map show up you might see this notification that says this is for development purposes only what we have to do is put in a google api key so we're going to do that after we create this page and then this map is going to show up correctly okay so first let's change the height right here so just click in here and if you need to you can try to double click but if you can't then you can move it around and then you should be able to click into it and then just change it to 400px and then what we want to do is put in the latitude and longitude so what i want you to do is open up a new tab and go to maps.google.com and if you have a physical location you can type that in right here and then what i want you to do is right click on the pin so if you right click on this you'll see the what's here go ahead and click on that and down here you should see the latitude and longitude if you click on it then it's going to show up over here and we want to take these numbers at the bottom so this first number is the latitude so i'm going to copy that and then i'm going to try to paste it in here and again if you need to drag this around left and right then you can click in here and then paste in that latitude number and then what we can do is go back to the map right here and get the longitude so make sure that you have the negative sign if you have that and then we're going to come in here drag this around a little bit and double click into it and then we can erase this and then just paste in our latitude or longitude number right here so now you can see that it shows up right here and now if we want we can zoom in on it but i'm going to leave this as is so this looks pretty good and now what we can do is we can add our address right here so if you want just double click on this and then what you can do is just delete this text and then type in your own address right here and the way that i made the spacing for this is i just clicked shift and enter so that it just doesn't make a gap between these two lines right here okay so go ahead and type in your address and once you're ready click ok and then we can go back right here and let's save this so let's click on the update button and once everything is updated now let's go and add our next section so click on add to section at the bottom and let's click on row and let's add a two column row so just select this one and then come down to the bottom and click apply and now what i want to do is go and add some rows over here so let's click on add to section and click on the row and let's go with the two column option and click apply and we don't need to do anything in the row settings so we can go back right here and let's add a text box right here so click on this and just find the text element and we're gonna go with the paragraph option so click apply and we can open up the text editor and what we can do here is just take this text and replace it with our contact information so if you guys need to you can pause the video and fill out this section so that you have your information and then once you're ready click ok and we can go back right here and the last thing that we're going to do is add our contact form right here so that viewers can send us a message so click on the plus button and then go into the search box and type in form and this is the one that we want so just click on this and now what we can do is go into this drop down and just select the contact form one so this is a default contact form that is created for us by the contact form plugin so if you want to go and customize this i'll show you how to do that in just a little bit but you can see right here that we have our contact form now and we can click on the update button and pretty much our contact page is complete so this is what we have and if you guys want to customize this more you can but just make sure that you click on the update button once you're ready and now let's go back to the wordpress dashboard and once you're back on the wordpress dashboard i want to show you how you can customize the contact form really quickly because on the demo website we actually get rid of the subject section so i want to show you how you can do that so back on the ecommerce wordpress dashboard what i want you to do is find the contact tab right here and then click on contact forms and once you come to this page right here just click on the edit button and you're gonna see the edit contact form what you can do is click on the form tab right here and then you're going to have your html right here so if you guys want to get rid of the subject line all you have to do is just highlight this and then you can delete it and then move everything up and that's all you have to do okay so if you do make any changes you want to click on the save button right here or you can always just create a new contact form and then you can just use that one you can go into the drop down on the page builder and select the new contact form okay so once that's saved we are good to go and we can actually go back and go and check out that page and once the contact form loads you can see down here now we don't have the subject line and we just have these three boxes and we're good to go so that's how you can create and customize your contact form so what i want to do now is show you how to create the terms and conditions page and this one is really easy just like some of our other pages so let's go and create this page and then we can go into the settings and set it so if you guys want hover over new and click on page and once you're on the add new page let's just type in terms and conditions right here and then for our page template we're going to go with the center title option so click on publish and once the page is published let's turn on the flatsome page builder and once we have the flats and page builder we're going to come in here and we're just going to add a text element so let's choose the paragraph option and then open up the text editor and this is where you can type your terms and conditions or whatever you want so it's going to be super easy i'm just going to paste in the text from the demo website and then click apply right here and then click apply right here and click update and once everything is saved now what we're going to do is move on to the next step so right now what i want to do is show you how to create some blog posts so that you can have a blog page like this and also individual blog posts so let's go back to the online store that we're learning how to create and we want to exit out of this page so click on the x and once you're back on the wordpress dashboard i want to go and create some blog posts but first we want to go and delete the default blog post so hover over post and click on all posts and i want to delete the default blog post that we see right here so we can just click on trash right here and once that's removed now what we can do is go and show you how to create a blog post so let's click on add new and once you come to this page right here you can just type in your blog post title and then you want to come down here and write your article so i can just come in here and paste in my text and now we have our blog post and we can go back to the document tab right here and then i can put in some category names for the blog post so once we see the section we can just click on add new category and i can type in macaron and i'll push enter and i can type in dessert and maybe i'll type in treats right here so if you wanted to you can also add some tag names if you wanted to and you can insert a featured image right here so just click and expand this and then click on set featured image and in my media library i can just find the image that i want to use so maybe i'll select this one and click set featured image and once it gets added if you guys want you can update the excerpt right here or you can just have the excerpt be the first i think 15 or 20 words and that's pretty much it so all we have to do now is click on the publish button right at the top and once the blog post is published let me show you something on the demo website so you might see your author name right here and it might say admin or whatever your username is if you want to customize that what you want to do is go back to the ecommerce website and down here in the user section you want to go and update the username so if you want to do that just go and click on all users or your profile and this is one of those things that aren't really covered in a lot of tutorials so i'm really happy that you're watching this tutorial because a lot of people just don't talk about this stuff because they think it's like a waste of time or they think that you're not going to remember or know about it and i really want to just try to cover everything and that's why we go into the details just like this so over here in the name section for your profile i want you to type in your first name or whatever name that you want for the author or user and then you can type in your last name and your nickname right here so maybe we'll just type in james k and over here where it says display name publicly you're going to have this drop down and you can select whichever way that you want the name to show up on your blog post so we're going to go with jameson right there and that's pretty much it we can come down to the bottom and we can just click on save changes all the way down here and once that is updated now if you go to your blog post you'll see that it's written by whatever the display name is okay so if you guys want go ahead and create some additional blog posts super easy just hover over new click on post or over here click on add new and once you're ready push play and what we're going to do is move on to the last step of this video tutorial and the last thing that we're going to do is show you how to create the header menu up here the top bar menu and then at the bottom over here the footer menu right here so if you guys are ready let's go back to our ecommerce website and we want to go down to appearance and then click on menus and the first thing that we have to do is create a menu so we're going to do the header menu first so just type in header right there and then click on create menu and once the menu is created now come to the menu settings and just check the main menu option to display this as the main menu and then come into pages and click on view all and you should see a list of all the pages for your ecommerce website and then you can just check the boxes of the pages that you want to show up as links so i'm going to select these pages that you see right here and then click on add to menu and once the items get added what we can do is we can rearrange these so i can move the blog down here and the frequently asked questions right here and then maybe the contact right there and we'll move this one up here so we have our items right here and we can also change the navigation labels so instead of products since this is my custom shop page i'm going to come in here and type in shop and then we can change y macaroons to just macaroons and then for blog i'm going to change this to delicious ideas and then the faq is just going to say faq just to save some room and once we do that now i can show you how you can add some sub menu items so you can see on the demo ecommerce website that we have our navigation menu up here and then underneath shop when you hover over it we get this little pop-up with some different category links right here so if you want to do this on the ecommerce website that we're learning how to make we want to go and create some custom links so click and expand this and then what you can do is type in the url for the category pages and then the text that you want as a link so i do have some tabs opened up over here so this is the macaroons page so what i would do is copy the url and then i would go back to my ecommerce website and i would paste in that url right here and this is for the macaroons page so i would just type in macaroons right here and click add to menu and then if i wanted to add some items underneath the macaroons what i would do is go and get the links to those specific categories but first what i want to do is just drag this underneath shop and if i indent it like this it becomes a sub menu item so that when i hover over it it's a child item so that's what you want to do and then we can go to red velvet and copy the url right here and we can just go back to the ecommerce website and put in a new url and then we can type in red velvet right here and click add to menu and pretty much this is what you're going to do to have a bunch of sub category items that show up as a drop down so we'll drag it underneath macaroons and again we'll indent it so that when we hover over the shop page we'll see macaroons as the parent and then these are the children links so what you can do is do that for whatever categories that you have and you can create as many different sub menu items as you want so i'm going to do that really quickly and with the power of video editing now in my shop list over here you can see i have my macaroons and my coffee and then i have sub links underneath okay so if you guys want pause the video to update your own header menu and then once you're ready click on the save menu button and once the menu is saved we can go and check it out so i'm going to hover over my ecommerce website name and click on visit site and once my ecommerce website loads now i can see my navigation menu right at the top and you can see that when i hover over shop we have this drop down right here so this is looking really good and now what we can do is go and customize our top bar so you can see on the demo ecommerce website that we're gonna have our account login page the wishlist page and then a shipping and returns page which we didn't really create but you guys can create that on your own i'm gonna just put in a fake link right here and then we also have our sign up for the e-newsletter okay so let's go back to our e-commerce website and what we can do is just hover over our website name and click on menus and once we're back on the menus page we want to create a new menu so click on this link and we want to type in the name for this menu so i'm going to type in top bar right there and click on create and once the menu is created in the display location i want to select the top bar option and then i'm going to go to view all over here and the pages that i want are the my account page and also the wishlist page and then since i don't have a returns page yet i'm just going to create a link for it so first i'm gonna click add to menu right here and we're gonna see our two items right here and i can just go in and change the navigation label right here so i'm gonna type in create account and i'll just close this and we'll leave it as wishlist and then i'm gonna go and create a custom link for the shippings page so i'll go in here and since i don't have a link right now i'm just gonna type in the pound sign to make it an active link that doesn't go anywhere and then in the link text we can just type in shipping and returns and click add to menu so if you do create this page you can just add the link or go into your pages list and then find that page and add it okay and pretty much that's all we have to do so we can click save menu and again if you guys want to go and check it out we can do that really quickly and once the ecommerce website loads now you can see we have our top bar up here with our different links and if you want to customize the newsletter pop-up that you see right here with a contact form what we want to do is go and create that contact form and then go and insert a short code so let's go and do that really quickly let's go back to our wordpress dashboard and once you're back on the wordpress dashboard what i want you to do is come down on the left hand side to contacts and click on add new and once you're on the add contact form page let's just title this contact form newsletter and then in the presets tab there's gonna be some code here what you can do is go in and grab whichever format that you want so i want to go with the vertical options so this one down here just copy all of this and then go to the forms tab right here and you want to remove this text and then just paste in that text that you copied and then click save right here and once the contact form is created you're going to see some short code right here so what i want you to do is just highlight all the short code and copy it and we're going to paste it into our ecommerce website but before we do that i do want to note that we are using the contact form 7 plugin and i do have tutorials on how to use this and how to integrate mailchimp aweber and constant contact to save the emails that are going to be submitted to the signup form so if you want to learn how to do that go ahead and check out those videos and you might want to subscribe because we're going to update the videos very very soon so subscribe to the nyc tech club youtube channel we're not going to cover that in this tutorial but be on the lookout for that video okay so once you copy the short code right over here we want to go back to our customize page so on the left hand side of your wordpress dashboard hover over appearance and click on customize and once you're on the customize page let's just go into the header right here so we have the header builder and then double click on the newsletter right here and in the layout pop-up over here we just want to come down to the form shortcode and paste in our shortcode right here and this is going to update and now if we click on the link you'll see this pop-up and it has your text right here and then down in the bottom over here is the sign up form so if you want to change your text you can come in here and change the title and then the subtitle all i want to do is i want to add a background image right here so i'm going to click on select image and once i'm in my media library i'm going to scroll down to this image right here and click on select and the image will show up in the background when we go back to our website so i'm going to click on the publish button right here and once that's saved i'm going to close out of this and now if you go to your ecommerce website and you click on the newsletter link right here you should see the pop-up and you should see the newsletter with the sign up form right here with the background image okay so you can go in and customize it however you want you can even change the height of this box if you wanted to in the customize tab but i'll let you do that on your own what we have to do is go back to our wordpress dashboard and put in our footer menu so we can hover over our website name and just click on menus and once we're on the menus page just remember that you can always hover over appearance and click on menus and you'll come to this page right here so we want to go and create the footer menu so click on the create a new menu link and what we want to do is just create a footer menu so i'm going to type in footer and click on create and once the footer is created let's come down to display location and just select the footer menu and then click on view all in the pages and this is where we can add our footer menu items so i'm going to go with the faq and then also the terms and conditions and i'm going to click add to menu and i'll also add a custom link because i don't have a page for the privacy policy page so i'm going to go in here and i'm going to just put in the hashtag right now because i don't have the url since we haven't created this page but you can do that on your own and i'm just going to type in privacy policy right here and click add to menu and once the items are added i'm just going to go into the frequently asked questions and change the navigation label to faq and then click save menu and once the footer is updated just know that in your pages list if you go to all pages if you come over here you should have a draft privacy policy page created by wordpress so if you wanted to you can click on the edit button and you can edit the text and then you can publish this page to make it a real page for your ecommerce website okay so one of the other things that we want to do before we round out this tutorial is we want to go back to the woocommerce settings to set the terms and conditions page so hover over woocommerce and click on settings and once you come back to the settings page just go to the advanced tab and once you're on this page come to the page setup and right here where it says terms and conditions we want to go and set this page as the terms and conditions page that we created a little earlier in this video tutorial so just find that page and select it and then just come down to the bottom and click save changes and once your settings are saved one of the other things that i want to do is just really quickly show you how to create coupons for your ecommerce website so underneath the woocommerce you should see this link called coupons go ahead and click on that and once you come to this page you can click on the add coupon button or you can click on the create your first coupon button and once you come to this page all you have to do is just type in your coupon code right here so it can be any name that you want and then you can put in the coupon amount right here and you do have a few different options so you can see the discount type right here percentage discount fixed discount or fixed product discount so i'll leave that up to you and you can also make this coupon expire anytime so you can go through these settings right here and then just click on publish and then you can send out this coupon to all of your customers and viewers and anyone else that you want to use it okay so pretty much we have just learned how to create our ecommerce website with wordpress and the flatsome theme so let's go and check out our website one last time so let me be the first to say congratulations on learning how to make your own e-commerce website with wordpress i really hope you enjoyed this video tutorial on learning how to use the flatsome theme and woocommerce and if you did please give the video a big thumbs up and also make sure to subscribe to the nyc tech club youtube channel because we're always coming out with new videos just like this if you guys need any help if you guys have any questions comments suggestions or recommendations leave a comment in the comment section below i want to say congrats again thanks for watching and i'll see you in the next video

Channel: NYC TECH CLUB

Views: 35,023

Keywords: ecommerce website, online store, wordpress, ecommerce wordpress tutorial, ecommerce website wordpress, how to make an ecommerce website, how to make online store, woocommerce, flatsome theme, flatsome tutorial, create ecommerce website, create an ecommerce website in wordpress, free ecommerce website, create an ecommerce website with wordpress, make an ecommerce website with wordpress, make an online store with wordpress, create an online store with wordpress, ecommerce tutorial

Id: _2S_Q-ybZD0

Length: 170min 15sec (10215 seconds)

Published: Wed Aug 05 2020