BUILD AN ONLINE STORE WITH WORDPRESS 2021 - (FLATSOME THEME TUTORIAL!!!)

[Music] i just wanna hold you i just wanna look into your eyes [Music] what's up everyone it's jameson from nyc tech club and in this video tutorial we're going to show you how to build this beautiful and professional ecommerce website using wordpress and the flatsome theme 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 by the end of this video you're going to be a wordpress expert with your own online store that's going to be able to sell anything that you want so what i want to do before we get started is i want to give you a quick tour of exactly what we're going to build and how we're going to build it so if you like what you see so far and you want to save thousands of dollars building out this website yourself keep watching this video because we're going to show you how to build your own ecommerce website step by step but first let me give you a quick tour so this is the homepage that we'll learn how to make and you're going to be able to customize the colors the fonts the layouts whatever you see in this video tutorial you're going to be able to customize with the flatsome theme and the ux builder so we are going to be learning how to make this exact home page but just in case you want to change anything you're going to be able to after you watch this video tutorial so at the top of the page over here you're going to see a top bar where you can add an announcement or a little message for your visitors we'll also have a top bar menu that you can customize and what's really cool is you're gonna have this newsletter opt-in link right here so if you click on it you'll get this pop-up where your visitors can sign up for your newsletter or often to anything over here and at the top we'll also have some social media buttons if you want and then we're gonna have our custom header menu over here and we will be showing you how to make a mega menu so you can see that you have this pop-up just like that and when you come in here you can hover over these images and you'll get this little effect so we'll show you how to customize your header menu if you want just like this and we'll also show you how to create your own custom logo for free in this video tutorial down below you're going to have a slider that you can customize with as many different images as you want and you can add buttons or links or whatever you want so you do have the option of scrolling through this and changing the amount of time that you spend on each image on the right hand side over here we'll have some links to different parts of our website and then below this we're going to have a featured product section and you can add as many different featured products as you want and then we'll have a featured category section for your visitors to shop for different types of products and then we're also going to have another call to action down here to let your visitors sign up for your newsletter if they don't click on the top bar link and below this we're going to have a blog post section to keep your visitors updated with the latest happenings of your ecommerce business and then if you guys want to integrate your instagram handle to have your instagram feed right here i will show you how to do that also and below this we're going to customize our footer section with some details about our business we can add our blog posts some product tags over here and then also an opt-in form and then we can show people what type of payments we accept over here we'll have a footer menu and our copyright and a back-to-top button right over here so this is the homepage that we're going to learn how to build and you can see at the top over here we do have a login button if your customers have an account with your ecommerce business and also a link right over here if they add anything to their shopping cart and they want to go and check out so any of these effects and again any of these images or this layout you can customize however you want we will be showing you how to do that with the flatsome theme but now what i want to do is i want to show you what the about page looks like and for the about page we're going to insert a custom background image and have a custom page title with a sub headline and then we'll have a section to talk about your business or your story and we'll insert some employee profiles right here that you can link to different pages or to their social media buttons and you can always add some additional sections to your pages if you want but i wanted to keep this page pretty simple so again this is the about page and now what we're going to do is talk about the shop page and this is the shop page that we're going to make so we're going to customize our shop page with a custom sidebar with different filters and then we'll create a bunch of different types of products that we can add to our website so just remember you can sell pretty much any type of product that you want if it's a single product a variable product a virtual product or even an affiliate product we're going to show you how to create all those different types of products in this video tutorial so you can see when you hover over these images you get the alternative image and you can also add this to your wishlist if you want and you have this filter at the top to filter your products if you want also so really quickly i'm going to show you the different types of products that we're going to learn how to create in this e-commerce tutorial so this is what the product page is going to look like in our ecommerce website and you can always customize this page however you want and this is a single product so what that means is there's only one option there's no different sizes no different colors this is only a single product and you can see right here that we have our featured image and then down here we have a gallery and if you click on this image you'll get this pop-up just like this and you can go through all the other images over here we're going to have our product name our price our description and you can add as many of these to your shopping cart as you want you'll have the category name and the product tags and you can also share this product on different platforms and below this we'll have a long description section and then we can enable reviews for our customers to leave reviews if we want also and if you have more products similar to this we'll have a related product section just like this so this is one of the type of products that we're going to learn how to make and again this is the product layout page for our ecommerce website so now let me show you what a variable product looks like and you can see right here that the product page is very similar to the single product page the only difference is that this product is a variable product and what that means is that there are different sizes different options or anything that you want to include for a variable so you can add as many different variables as you want and you can have different price points for the variable also so we're going to be showing you how to create single products and variable products and we're also going to be showing you how to make affiliate products and for an affiliate product you're going to see the same product layout as all of the other products that you can create on your ecommerce website the only difference is that this product is linked to an affiliate program so you can see right here that my button says buy from amazon and you can customize the text however you want but if you click on this button and your visitor is going to be redirected to the affiliate program that you link to and if they purchase the product then you'll get credit for it as an affiliate so again we're going to be creating single products variable products and affiliate products and the last type of product i'm going to create is a virtual product so i'm not going to show you the product page right here but i will show you the back end of a virtual downloadable product that we can create so you can see right down here that when you select these boxes which i will show you how to do a little bit later you can make this a virtual product where you can upload a file for someone to download if they buy it so we're going to be creating a bunch of different types of products in this video tutorial and by the end of this video you're going to be able to create all different types of products that you can sell on your online store so really quickly i want to go through the other pages that we're going to learn how to make in this video tutorial and with your online store you can also create some blog posts to keep your visitors updated with the latest happenings of your website so we're going to show you how to customize your blog post and you can see right here that this is a single post page and we're going to show you how to add some share buttons over here and also a comment section if you want so your visitors can leave you a comment so we're also going to be creating a contact page where we can have a physical location with a google map and we can have a frequently asked question section just like this and also a contact form where your visitors can leave you a comment or send you a message if they have a question so we're going to be creating a bunch of other pages also but this is pretty much the online store that we're going to be learning how to make today and you're probably wondering how the heck are we going to make this website and like i said earlier we're going to be using wordpress to make our ecommerce website and wordpress is the number one content management system on the internet it powers about 40 percent of all the websites out there including the rolling stones bloomberg ll cool j vogue and a bunch of other websites so i'm really excited to show you how to use wordpress and we're going to be using the flatsome theme which is the number one best-selling woocommerce theme for wordpress and this is a premium theme so there is a small little fee but you're going to get a bunch of premium features that's really going to let you customize your website however you want you can see right here that it has a five-star rating and almost 150 000 people have used the flatsome theme to build their own e-commerce website so i'm going to link you to this page so you can check out all the details of the flatsome theme but the great thing about the flatsome theme is that it's always updated so it's compatible with the latest version of wordpress and it's always secure and you're not going to have any issues if you want to create custom mega menus full with containers or you want to have a responsive website which means that it's going to work on the desktop tablet and mobile device you want to make sure that you're using something like the flatsome theme this theme is going to let you customize everything from the colors the fonts the spacing the layout whatever you want you're going to be able to do in this video tutorial you can see right here that you're going to get a bunch of different modules that you can just click and drag into your website and customize and if you need any help or have any questions you're going to be able to reach out to the developers because you are going to get premium support you can see right here that the flatsome theme has a google speed of 98 out of 100 meaning it has a fast load time that's going to give your visitors a great user experience there's a bunch more that i can talk about this theme but pretty much this is the best ecommerce theme available for wordpress you're going to get a bunch of premium templates that you can just import into your website and customize and you can also create pretty much anything that you want so again click on the link in the video description come to this page and check out what's so great about the flatsome theme but really quickly what i want to do is show you how we're going to be using the page builder to build out our ecommerce website so this is the flatsome page builder and with the page builder you can create any type of custom layout that you want with a few different clicks so don't be intimidated by what you see right here these are just the different sections and all the different modules and i probably created this page in less than five minutes you can see how easy it is to use we can add a new button right here by clicking on the plus button and then we'll see our modules right here and we can just click on the button choose the style that we want and click apply and you'll see the button show up and we can come in and change the color and maybe we'll change the style and then we can come down and add an icon and you can see it get updated right over here and if we don't like it we can just come over here and click on the undo button and then we can just remove it just like that so the flatsome page builder is really easy to use and you're going to be able to customize your entire website using it you can see right here that you have all of these different modules and elements that you can just click and drag into your website and customize and what's really cool with the flatsome theme is you also have the flatsome studio and inside the flatsome studio you're going to get hundreds of pre-designed layouts and templates that you can just import into your website and on the left-hand side you can see a list of all the different types of templates that are created for you so if you wanted to add a mega menu you can just click on this and you'll see all the different types of mega menu templates right over here and if you want to check any of them out just click on the preview button and then if you like it you can import it into your website so this is just one of the many premium features that you're gonna get with the flatsome theme and i can't wait to show you how to use it so by the end of this video you're gonna have an online store that is up and running and you can sell whatever you want you can see right here if i click on this product we can actually run through a transaction really quickly so all i'm gonna do is just select a size and click add to cart and you can see that it gets added right here i'm just going to click on the checkout button and on the checkout page if i have a coupon code i can put that in right here and i will be showing you how to create coupon codes in this video tutorial and i have my billing information already filled out but if i had a different shipping address i can put that in down here and then on the right hand side you can see that we have our order details so in this video tutorial we will be integrating woocommerce so i'll show you how you can add your shipping rates and tax rates and also how you can integrate different payment options for your ecommerce website so right now i'm using paypal and all i have to do is check this box that says i have read and agreed to the terms and click on proceed to paypal and once i'm logged into the paypal account i can just come down and click pay now and you can see that i have my receipt right here and then we can come down here and we can just click to return back to our ecommerce website and once we come back to the ecommerce website you can see that the order is complete so pretty much we have a fully functional ecommerce website that is going to be up and running so before we get started i did want to just sign into my wordpress website so that you can see on the woocommerce dashboard that once you get an order you're going to see the order right here and if we click on it we'll get some additional details so once you come to the order page you're going to see details of who made the order and you can change the status of the order right here and you can see the items that they purchased down here you're also going to get a new email whenever you get an order so you can see it comes right to your inbox with the details right here and you can see that paypal actually works because we get an email right here that says you receive payment from your customer so there are some additional details that i'm not going to cover right now but i do run through another transaction towards the end of this video and you can check it out on your own but pretty much i just wanted to show you that by the end of this video you will have a fully functional ecommerce website so pretty much that's all i have to say about what we're going to build and how we're going to build it so if you guys like what you see and you want to build a beautiful and professional ecommerce website with wordpress and the flatsome theme then keep watching because we're going to show you how step by step so if you're ready i'm ready let's get started so the first thing that we're going to do is we need to register a domain and get hosting so you can see on the demo website that my domain is nyctecluby.com so we want to register a domain for the ecommerce website that you're learning how to make and then we want to get hosting which is going to store all of our content and load our website for our visitors so they can buy whatever they want to buy so what i want you to do is go to the video description and click on the link to bring you to the text tutorial on how to create an ecommerce website with wordpress and the flatsome theme and i'm revamping my website so that's why it looks very basic right here but this is the text tutorial that has every step of the video so you can print this out and follow along if i go too fast but what we want to do is come down to step number one and what you're going to see here are some links to the hostinger website and that's where we're going to go to get our domain and hosting so once you click on one of these links it's going to bring you to this page right here and you can see that you can save up to 90 off depending on the plan that you choose and hostinger is where we're going to go to get our domain and hosting so i'll let you come to this page and you can check it out but hostinger is really fast they're reliable they're cheap and they have great customer service and that's why i'm going to recommend them to you so what we want to do is when we come to this page we want to come down to this section where it says find the perfect domain and what we're going to do is type in the web address that we want for our ecommerce website so i'm just going to type in nyctechclubby1.com and then i'll click on search and we're going to try to get this domain for free depending on the plan that we choose so don't worry too much about the price right here but what i want you to do is make sure that you find a domain that is available so if it says that this one's available that means that no one else registered it and you can use it for your ecommerce website and if it isn't available then go and search for another one that just means that someone else already took that domain so what we're going to do is click add to cart and once that's added now what we want to do is we want to choose our hosting plan so we can click on this button right here that says select hosting or what you can do is hover over hosting at the top click on this and then click on wordpress hosting so once you come to this page right here this is where we're gonna go to get our hosting plan and if we scroll down a little bit you can see that there are four different plans the single wordpress wordpress starter business and the pro the pro and the business are a little too expensive and probably more than what we need right now so we can always upgrade to these plans later as we grow so what we're going to do is focus on the single and the starter plan so you can see that the price difference is not really meaningful but i want to talk about the differences between the two plans so if you just want to build one website and one website only then all you really need is the single plan because you can just host one website but if you want to build more than one website and host them on the same account then you probably want to choose the starter plan because you can host up to 100 websites and then you have 20 gigabytes of ssd storage on the starter plan and the starter plan can manage additional traffic to your website but it really just depends how much traffic you get per month the important thing is that you're going to get the free ssl certificate with both of these plans you can see that you get the free ssl right over here and the ssl certificate is going to secure our website for transactions which is really important with an e-commerce website and you also get a free domain with the starter plan and maybe that's because you pay an extra dollar and you also get unlimited bandwidth which is really going to help with transferring data and not slowing down your website the one thing that i do want to mention is that you do have a 30-day money-back guarantee with any of these plans with hostinger so if you decide that you don't want to build a website anymore or you want to choose a different plan then you can just contact hosninger and then get your money back so hostinger has really great customer support they're available 24 7 and whenever i reach out to them they get back to me right away so super fast reliable cheap and great customer service and that's why we're going to use them today so what i want you guys to do is decide on which plan that you want to choose if it was me and i was recommending a plan to someone in my family i would probably choose the starter plan because you get more for your money but it's really up to you so once you guys are ready go ahead and click on the add to cart button and once you come to this page this is where we're going to go to sign up for our account and register our domain so the first thing that we want to do is choose our billing period so you can choose one month all the way to 48 months and you can see the longer term you go the cheaper it is per month but what i usually recommend is either 12 or 24 months just to give yourself enough time to know whether or not you really want to run an ecommerce website so i'm going to select 12 months right here but again it's really up to you and then what you want to do is come down and create your account so i'm just going to type in my email address and then once you're ready come down to select payment and choose the payment option that you want to use and over here you're going to see your order information and what you'll notice is you get a discount right over here what i want you to do is come to have a coupon code and click on this link and then type in super one 1-0 so it's super 10 and then click on the plus button right here and your discount is actually going to increase to 64 so you can see that you get a larger discount right here and then once you're ready come down to the payment information fill this out and if you guys need to pause the video to do that and then once you're ready click on the submit button and once host ender is set up now what we're going to do is go through the guided setup so click on start now and what we need to do is still claim our domain so go ahead and click on select and we want to type in the same domain name that we want to register so i'm going to type in nyc tech clubby one and then come into the drop down and select whichever type of option that you want so i'm going to go with com and then click search and you'll see the domain show up right here and we are good to go as long as you can register it so click continue and we're going to build a new website so we want to choose build a new site so click select and once you come over here just put in your email address and then create a password and then once you're ready click on continue and for this step right here we don't need to choose one of these templates so we can just scroll down to the bottom and just click on skip i don't need a template and once you come over here you want to check to make sure everything looks good so you want to make sure that you have the correct domain and then right here where it says your chosen website location i actually want to change this to where i'm located so i'm going to click change right here and then go into the drop down and choose the nearest location so i'm in north america and this is just going to make my server a little bit faster because it's closer to me so i'm going to click select right there and then right here we're using wordpress and then you have your admin email if everything looks good then all you have to do is click on finish setup and now all we have to do is just wait for hostinger to set up our wordpress website and now you can come in here and set up your website so i'm going to select company right here and click next and now you're going to be asked to put in your contact details so if you need to you can pause the video and fill out everything that you need to right here and then once you're ready just click on the button that says finish registration and once the website is set up what we're going to do first before we go to our wordpress dashboard is we're going to go to our control panel so go ahead and click on manage site and once you come to the hosting your dashboard for your ecommerce website we want to come down to the security section and right here where it says ssl certificate we want to click on the setup button and what we're going to do is install the ssl certificate so just make sure that you have your domain right here and then click on install ssl and once that's installed we are good to go and we can click close right here and you can also set up the cloud fare option if you want so if you guys want to go ahead and click on setup right here and again just double check the domain and then click on install cloudfare and cloudfare speeds up your website load time and also protects against ddos attacks from bots or anyone that's trying to attack your website so it's good to install it and once it's installed we can just click close right here and then we are good to go so now what we're going to do is we're going to come to the button over here that says edit website and click on this button to go to your wordpress website and once you come to the wordpress dashboard this is where we're going to go to customize and build out our ecommerce website if you don't log into the website right away then go ahead and log out of your host android account and log back in and then go back to the dashboard and click on the edit website button and you should be brought to the wordpress dashboard so the first thing that we want to do is we want to go and change or update our password so that we can log into our account so what you want to do is hover over users and then click on all users and once you come to this page right here what i want you to do is click on the edit button for the user and then come down to this section where it says password and set a new password so what you can do is type in a password or you can take this one right here and just copy it and save it somewhere and then click hide and then what you want to do is just come down here and click update profile to save your password so now whenever you want to log into your wordpress website you're going to use your username and the password that you just created to log in okay so what i want to do really quickly is just show you what the website looks like now that we installed wordpress so hover over the website name on the upper left and click on visit site so you can see that this is what the website looks like right now it doesn't look like an ecommerce website it doesn't have an online store this is very basic and what we want to do is we want to go and install the flatsome theme so we can start building out our ecommerce website so what i want you to do is go to the video description and click on the link to the flatsome website or you can come to the text tutorial and come down to whatever step that we're on right now so right here it says step number four and click on this link to go to the themeforce website where we can get the flatsome theme and you're going to be redirected to the themeforce website and this is the flatsim theme so if you click on the link it'll redirect you right to this page right here and we already talked about the flatsome theme and how awesome it is so we're not going to go over that again so all i really want to do is come to this section right here and what we can do is just click add to cart and once we get this popup just click on go to checkout and what you're going to do on the checkout page is create your account and then go through adding your billing information and check out so if you need to you can pause the video to fill all this stuff out and then once you're ready push play and i'll see you on the inside when you're logged in so that we can download the files that we need and move on to the next step and once you get the flatsome theme you should be logged into your themeforce account and you can see right here i'm on my dashboard and i'm on the downloads tab right here so if you need to come to this page just hover over your username and click on downloads and you'll come to this page right here and what we want to do is come to wherever we see the flatsome theme and then click on the download button right here and what we're going to do is just download the installable wordpress file only so go ahead and click on this and that's going to download all the flatsome files that we need so now what we can do is we can leave this tab open or we can close it and once we're back on our ecommerce website what i want to do is go back to the wordpress dashboard so we can just hover over our website name and click on dashboard and once you're back on the wordpress dashboard now what we're going to do is go and install the flatsome theme so hover over appearance and click on themes and once you come to this page right here we just have to click on add new and then click on upload themes and then click on choose file and what i want you to do is go to wherever the flatsome theme is saved and you can see right here that we have a folder we want to make sure that it's a zip file so if you need to right click it in your downloads folder or wherever you have it saved and then compress it so it turns into a zip file like this and then once you find it go ahead and select it and then click on choose and it should show up right here and all we have to do is click on install now and once the flatsome theme is installed what we want to do is click on the activate button so click on that and you're going to come to the setup wizard and we want to go through these steps just to set up the flatsome theme so that we can make our ecommerce website so let's click on the let's go button and the first thing that we can do is put in a token right here so that we can get updates for the flatsome theme automatically so what we want to do is come over here where it says enter your envato token and click on generate a token and what you're going to have to do is log into the envato account so envato owns themeforest so it's going to be the same login information that you use to sign up with the themeforest website to get the flatsome theme and once you do that you're going to come to this page right here that says create a token and you can just type in a name right here so maybe type in your first name or your website name and then once you do just come down to permissions needed and check these boxes so you can see right here view the users and bottom name the email and then download the items the user has purchased verify purchases of the users items list the purchases and then verify purchases and so once you select these options go ahead and come down to the bottom check this box that says you have read and agree to the terms and then click on create token and once you do you should see your token right here and we can just go back to the wordpress website right here and paste in our token and then check this box and then click on register and you should see that it says your token is valid so go ahead and click on continue and we want to install the child theme so if we make any changes they save no matter what when the flatsome theme gets updated so we're going to click on create and use a child theme and now we can click on continue and we want to install these plugins so we can use them for our ecommerce website so click on continue and now we should be on the demo content page and what we're going to do is we're going to import all the demo content and then we're just going to delete what we don't need so we're going to use the demo content as our template to create our online store so what we're going to do is come down here and click on continue and just install all the demo content and now we should be on the logo and design page and if you guys have a logo already you can come in here and you can upload your own logo to replace the flat someone in this video tutorial i'm going to show you how to create a logo for free using a website called logo maker so if you guys don't have one right now we can skip this and then come down to the preset and we're going to use this template right here so go ahead and select that and then just come down to the bottom and click on continue and once you come to this page we can just click agree and continue and once we come to this page right here we have just set up our flatsome theme and we're going to go and set up woocommerce a little bit later so we don't need to go through that right now so let's click on this button right here to view our website and once you see your website now this is what you should see so we have the flatsome theme installed and the demo content so there's a bunch of stuff that we don't need but what we're going to do is go and choose the template that we're going to use and then go and customize everything to build our own online store so we just learned how to install the flatsome theme so i want you to hover over your website name at the top and let's go back to the dashboard and now what we're going to do is we're going to install the additional plugins that we need for the wordpress website and then go through our settings so what you can see right here on the dashboard is that this theme recommends the woocommerce wishlist so we want this plugin so that we have a wish list for our ecommerce website so let's click on begin installing this plugin and once we come to this page right here we're just going to select this so it selects everything and we can go into the drop down select install and then click apply and once that's installed now what we can do is scroll down to plugins hover over that and click on install plugins and this is going to be where we see all the plugins that are installed on our ecommerce website and what we want to do is activate this plugin so at the top over here you can click activate or in this list over here you should see the plugin and we can just click activate also you can also delete and deactivate any of these plugins that you don't need so if you ever want to remove them you can just come to this page and click on deactivate and delete okay so now we should have the wish list right here and when we need to we will go and set that up but right now we are good to go and what i want to do is i want to install one more plug-in to secure our website using the ssl certificate so what we want to do is click on add new at the top and once you come to this page right here we're going to go to the keywords right here and just type in really simple ssl and push enter and once you see the search results this is the one that we want this is going to secure our website so just click install now and now you can just click on activate and once you see this page right here we want to go and click on the blue button right here that says activate the ssl and we're going to be redirected to the login page right here so we just need to log right back in and now you should see a lock at the top because that means our website is secure and we are going to show you how to change your password and everything but first what we want to do is go through our general settings so at the bottom of here you should be on the settings tab let's go to the general tab and once you're on the general settings this is where we can go to change our site title and tagline so i'm going to change my website name right here to sweet sweaters and for my tagline if you guys want to have one and usually it shows up on your tab right here then you can just change it right here so i'm going to type in for cotton lovers and once we type that in we are good to go and again you can leave this blank also if you want and what i want to do is come down to where it says wordpress and site address and i just want to type in www dot right here so you can't change anything else all you can do is add the www dot so don't try to change your domain or anything like that because if you do it's going to mess up your website and you're not going to be able to access it and then you're gonna have to start all over again so just double check to make sure that all you're adding is what you see highlighted right here if you want to add that and then you're good to go if you want to change your admin email you can do that right here also and then once you're ready come down to the bottom and just click on save changes and you're going to be brought back to this page right here because we updated our url so we have to log right back in and once you're logged back in now what we're going to do is we're going to move on so we're going to go and download the demo content in case you need some images to use to build out your online store so there is a link in the video description to download a zip file so go ahead and click on that and then once you do what i want you to do is hover over media and then click on add new and once you come to this page right here this is where we can go and upload our demo content so if you guys have your own images that you want to use you can upload those and you can also upload images one by one as we go through our pages and creating our products so right over here let's click on select files and what i want you to do is go to wherever you save the demo content or your own images and just select them and then click on choose to upload everything and you might not have the same exact images that i'm uploading because these are copy written but i will make sure to find some images that you can use and then you can substitute them out once you're ready for your own images for your ecommerce website so what we're going to do is just wait for everything to load and once everything is loaded we're going to talk about how you can edit your images and then we're going to move on to the next step and once everything is uploaded you should see all your images over here and if you want to edit any of them you can click on the edit link right there or what you can do is over here where it has the media tab you can hover over that and click on library and once you come to this page this is where you can go to edit your images or delete them so what we can do is click on this one and we'll get this pop-up right here you can delete the image by clicking on this or you can click on edit image right here and you'll get this pop-up with your image and you can crop it if you want you can rotate it you can flip it and you can change the dimensions right here and if you do make any changes you want to click on the save button otherwise just click cancel and then close out of this so this is where you can go to edit and delete your images you can also add more and as we go through our pages posts and creating our products you can also add images one by one okay so if you have any questions let me know otherwise let's move on to the next step so now what we're going to do is go through our woocommerce settings so that we can set everything up so that we can have transactions for our ecommerce website and we're going to do this first so that we get it out of the way before we start customizing and building our website so this isn't the most fun thing to do but we want to make sure that we do it because it's probably most important so that we can get paid so we want to hover over woocommerce and go ahead and click on home and you should come to the setup screen right here and what we want to do is go through these tabs and then we're going to go through the woocommerce setting so what i want to do right here is just type in my address so go ahead and type this in and you can see with some editing i just populated everything and then once you're ready click on the continue button and right over here it says build a better woocommerce if you want to send your analytics to woocommerce then go ahead and check this box what we're going to do is just click on the continue button right here and once you come to this tab right here what i want you to do is select the type of products that you're going to sell so we're going to show you how to create physical and downloadable products but if you want to sell any of these other ones just note that these are premium features with the woocommerce plugin so you do have to pay an additional amount but you can always sell any of these also so if you're only selling physical products just select this one but if you're selling an ebook or something that someone can download then you want to select this one too so again i'm going to show you how to create both of these so once you're ready let's click on continue right here and once you're on this page you can select how many products you're going to sell so we'll probably sell something like 11 to 100 and i'm not selling anywhere else so i'll just select no right here and we're going to install the recommended free business features and if you need to you can click on the little i right here so you can see what these are all about and once you're ready let's click on the continue button once again and once we come to the themes tab we already installed the theme that we're going to use for our ecommerce website so all we have to do is click on this button right here that says continue with the active theme and once you come back to the woocommerce dashboard what we're going to do is go through the checklist over here to finish setting up our website and it's okay if you don't see all these check marks just like my website because what we're gonna do is we're gonna go to the settings so hover over woocommerce and then click on settings right here and what we're gonna do is go through our general settings right here to set up our entire woocommerce website so we're not going to skip a beat so the first thing that we're going to do is we want to be on the general tab right here and this is where you enter your store address so we should already have this entered but if you want to update this you can and you can also update the locations that you sell to so if you want to exclude any countries you can just select the countries that you want to sell to over here and what we're going to do is we're going to enable taxes and also we're going to have coupon codes if you want to create them for your customers so we'll leave those selected and then down here in the currency options i have the us dollar selected but if you want to use the euro or the pound or anything like that you can select that right here and then once you're ready click on save changes and once the settings are saved don't worry about these notifications up here we're going to go through these in just a little bit and we might actually remove them but what we want to do is focus on these tabs right now so let's click on products and once you come to this tab right here you can see that we already have a shop page set up so we don't have to do anything there but right here where we have measurements if you want to change the units for the weight and the dimensions you want to do that right here especially if you're using a plug-in to calculate the shipping rates you want to make sure that you have the right units for the weight and the dimensions so go ahead and update this so for me i'd probably go with pounds and then dimensions i would probably go in inches and we're going to leave the reviews enabled if you want to disable the reviews for your products you can uncheck this box right here so i'm going to click save just to save everything and once the settings are saved there's really not much to do right here but we can just go into these really quickly and once you come to this tab this is where you can enable your stock management and you can allow people to hold products for a certain number of minutes and you can just change whatever you want here i'm not going to make any changes but i just wanted to show you that this tab is available and then same with downloadable products right here what we can do is enable making people login in order to access a downloadable link if you want to but you don't need to so again i'm not going to make any changes here but if you do make sure that you click on the save button so i'm going to get rid of these notifications so if you see them right now i'm just going to click on the x's right here just to delete them because it's just going to clear things up so i'm going to remove those and now let's go to the tax tab and once you come to the tax tab there's really not much to do for our ecommerce website because we're going to automate our taxes using the woocommerce tax plugin so you can see right here that we have this enabled so if you want to disable this and add your own rates you can but i'm going to leave that enabled if you make any changes click on the save button right there otherwise let's go to the shipping tab and once you're on the shippings tab right here this is where we can go to add different countries or regions and then add different shipping methods so we can have free shipping flat rate or we can use an equation for products times weight or anything like that so you can see right here that we have the us and then we have locations not covered by your other zones so this is a catch-all so if you do add some additional regions like canada mexico or europe then you can create shipping methods and then for all the other countries that are not created you can have a different rate over here so what i'm going to do is just really quickly show you how to add a shipping zone so we're going to click on add shipping zone and i'll just type in canada right here and then i'll come down here and this is where you can find the country or region that you want to add the shipping zone for so we'll just select canada and then i'm going to click on this button down here and i'm going to go with a flat rate so i'll just click on that and you'll see that it gets added right here and now what we want to do is we want to add the fixed charge so i'm going to click on edit and i want to come down here and i guess i'll charge 10 for my flat rate but you can see when you hover over this equation right here you can actually enter an equation for the quantity times a certain price or anything like that to create a shipping rate so this is a mathematical formula that you can create with some codes and you can see it all right here so i'll let you guys play around with that on your own but if you need any help let me know in the comment section so i'm going to click save changes right here and now you can see we have canada and they're going to have a flat rate of 10 and you can always go in here and edit and change that so that's saved right there so now we can go back to our shipping zone so i'm going to leave this page and now what you'll see is we have the us which has free shipping and then canada which has a flat rate and then we can go into locations not covered by my shipping zones and we can also add a flat rate or you can go with free shipping or local pickup so i think i'm going to charge more for these other regions so we'll just come in here and maybe we'll do 25 dollars just because it's probably going to be more expensive so you can see that we added that and it saves automatically so we're good to go and what i want to do is actually change the shipping rate right here for the us because we already have one selected and i want to change this so i'm going to disable the free shipping and then go and add a new method which is going to be the flat rate option and maybe i'll be nice and what i'll do is add five dollars so i'm gonna click edit right here and i'll just type in five dollars and if i wanted to i can hover over this and we can do something like times quantity or the total cost or a fee minus this or that so again just hover over this and you'll see how to create an equation in case you don't want a flat rate okay so i'm going to click save right here and that's pretty much all we have to do with our shipping zones or shipping rates so now we have the us which is going to be charging a flat rate and also canada and then we have our catch all which is going to be charging even more okay so i'll let you guys play around with that on your own and there are some additional options here if you want to print labels and you also have this extensions link right here so if i click on this i'm going to open up a new tab and just show you really quickly that woocommerce has a bunch of different premium plugins that you can use to enhance your wordpress website so what we can do is go to the shipping tab right here and what you're going to see are a bunch of different shipping options so we have shipstation ups fedex and you can enable these plugins to calculate your shipping rates for you and print labels and everything like that but these are premium plugins so you do have to pay for them okay so i'm going to close this but i did want to just show you that just in case you want to use that and now we are good to go let's go to the payments option to set up our payments and once you're on the payments tab what you're going to see are a few different payment options and we're going to set up paypal together but if you want to use woocommerce payments to accept credit card payments using stripe then you want to enable this and go through the setup but paypal also allows you to use credit card payments so we're just going to enable paypal but you can also click on the extensions tab right here and you'll see some premium plugins from woocommerce to integrate different payment options such as amazon pay square braintree and a bunch of others so again this is just another option for you if you want some additional payment options but i like to use paypal and that's what we're going to use for our tutorial but again if you need to you can always integrate any of these other ones and just set them up so we want to turn on paypal standard right here so just turn that on and then once you're ready click on the setup button and once you come to this tab right here what you want to do is make sure that paypal is enabled and then type in the email address that's associated with your paypal account right here and then over here is where you're going to put in the email address that you want your order sent to so whenever someone buys something off your website you want the receipt or the order information sent over here and then down here in the api credentials what we want to do is go to paypal and get this information so that we can process refunds via paypal so if you want to do that open up your paypal account so i'm going to go to this tab right here and what you want to do is log in and then come to account settings and click on that and you'll come to this page right here and what you want to do is create some api credentials so i already have mine so you can see right here i just have to click on update but what you want to do is go and create some so if you need to i don't know what the exact link is now but it should be in this section so we can click on update right here and for our api credentials what we want to do is come down to the classic options so the mvp soap api integration is the one that you want and what i'm going to do is click on manage credentials right here and once you create your api credentials what you're going to see is an api username password and signature and what you want to do is click on these links to show the api keys and then copy and paste them into these different boxes right here and once you do all you have to do is click save changes and once everything is saved now we have paypal enabled for our ecommerce website and we are good to go and we can always come back here if we need to customize anything but right now we are ready to move on to the next tab so let's click on accounts and privacy and once you come to this tab there's really not much to do but you can go through the settings for guest checkout and account creation and enable or disable whichever one do you want and then down here in the privacy policy section your visitors are going to see a registration privacy policy and also a checkout privacy policy that you can update right here and it's going to link to the privacy policy page that is sort of created for you with the wordpress installation but you can go into your pages and you can update this privacy policy page if you want okay so what we're going to do is just come down here click save changes if you do make any changes otherwise we're going to come up here and go to the emails tab and you can see on this tab right here this is where your order information is going to go so when you have a new order cancel order or fail order it's going to go to this email address and then for these other options when someone puts in an order or they're processing an order or something is complete it's going to go to the customer's email address so if you want to update these just click on manage right here and you can come in here and just change the email address and then come down to the bottom and click save okay so we're not going to make any changes because i have everything set up but again if you need to just come in here and change whatever you need to and then once you're ready let's go to the integration tab and in the integration tab there's really nothing to do here but i just wanted to go through every tab with you guys so we're going to really just skip this one but if you guys have any questions about it let me know so let's finish this off by going to the advanced tab and on the advanced tab right here this is where you can go to select the default pages for these pages right here so we have a cart page checkout and my account page already set up for us because when we install woocommerce these are created for us so we don't need to do anything here we are going to create a terms and conditions page a little bit later and we'll come in here and select that page and there's nothing else that we need to change over here so you can click on save changes if you want but we are good to go and we don't need to go through these little tabs right here so we have just covered everything with woocommerce on how to set up our ecommerce website with the woocommerce plugin and i do have a full video tutorial i think it's over an hour long on how to use woocommerce if you want to check that out so i'll link you to that but now what we're going to do is go back to our wordpress dashboard and we're going to move on to the next step so now what we're going to do is choose the template that we're going to use for our home page and over here i have a tab opened up for the flatsome theme and the reason why is so i can show you the page that we're going to select so if you come to this page and there is a link in the video description you can come and see all these different pages and the one that i want to select for our demo is the grid style 2 so you can see it right here and what we're going to do is select this template and then we're going to go in and customize it by changing the images the text and adding whatever we want so we're going to go back and again this is the grid style 2. you can choose these other ones if you want but this is the one that we're going to use for our video tutorial so we're going to go back to our ecommerce dashboard right here and down in the pages let's hover over that and click on all pages and once you come to this page right here you're going to see a bunch of pages already created for you and that's because we imported all the demo content from the flatsome theme and so we want to keep all the stuff right now so that we can just select whatever we want to use and go in and customize it or learn how to build it but when we're done with our website and we're done building everything we're going to come back in here and delete everything so the first thing that we're going to do is we want to find the grid style 2 and we're going to go and rename this as the home page so once you find it right down at the bottom over here go ahead and click on the edit button and once you come to this page right here you're going to see this pop-up you can just click on the close button because we're going to be using the ux builder which is the page blur from the flatsome theme to create and customize our ecommerce website what i want to do right now is right here where it says grid style let's change this to home because this is going to be our new home page and all we have to do is click on the update button and once the page is updated if you want we can go and check it out really quickly so we can just click on view page and once you see the page right here this is the flat some template for the grid style 2 and what we're going to do is go into the page builder and customize everything we're going to change the images the text the colors the links and you might not see the images on this template because just like the demo content the flat some images are copy written so they can't give you them so they give these blocks of images instead but that's okay because we're going to go in and customize them with your own products and images in just a little bit so now we have the grid style 2 selected and what we want to do is go and add it as our home page so if you want to do that we can hover over our website name and click on dashboard and once you come back to the wordpress dashboard let's come down to the settings hover over that and then click on reading and once you come over here to the reading settings and the homepage displays all we want to do is we want to select the home page over here so we can come in here and just find that home page that we just created or we just renamed so it should be right here so just select home and then click on save and once that's saved now if someone goes to our url so i have nycteclubby.com when we go to that url people are going to see the template that we just selected as the home page so it's going to be that grid style tool that we're going to customize in just a few minutes okay so now we are good to go and now what we want to do is move on to the next step which is going through our theme settings so if you want to do that we want to hover over appearance and then click on customize and once you're on the customize page what you're going to see are a bunch of different tabs over here to go through your settings to change the layout the style the colors all that stuff and then on the right hand side over here is your web page template so this is the home page but you can always click on these links to go to these other pages and over here you can hide the controls and you can check out what the website looks like on different devices so you can see right here you can just hide them just like that so we're gonna stay on the desktop right here and what i want to do is just go through the tabs that we go through on the demo ecommerce website so you can see right here we have the navy blue color which is the default color for the flatsome theme and over here on the demo website you can see that a lot of the colors are different so what we're going to do is just go in and customize things so that we can really make it our own and you can follow along and do the same colors that we do in the demo website or you can change them to be whatever you want okay so the first thing that we're going to do is go into the header tab right here so go ahead and click on this and what you're going to see is the header builder right here so our header is what's over here and also the top bar up here and we're going to go in and customize it a little bit and what i'm going to do is just show you what i did for the demo website so if you want to disable the top bar just come into the top bar tab and open it up and just uncheck this to disable it you can also change the height the text color and the navigation style if you want and down here you have some additional options so what we're going to do first is we're going to come over here because this is the top bar when you hover over it and you can see that we have this text box right here this html one if we double click on this it's going to open this up and what we can do is just change our text right here so i'm going to type in big sales coming soon make sure to sign up with our newsletter and you can see that i have the bold html right here just to make the text bold so if you guys want go ahead and type something in and then once you come back over here we can click on the pubs button just to save our changes and it's a good idea to click on that publish button once in a while just to make sure that you save your changes so you can also see on the top bar that we have a navigation menu up here so we can customize this a little bit later when we go over how to change our menus and you can also see that we have a link to a newsletter so if we click on this we'll get this pop-up and what we can do is integrate a newsletter opt-in form for our customers or visitors to sign up for a newsletter a little bit later and we can also add a background image and everything so you can see down here that we have this tab right here so if we just double click on it it's going to open up the newsletter and we can change the style we can change the text and we can also add a background image and again a little bit later when we go over contact forms and newsletter opt-ins we're gonna put in some short code right here so that we have a sign up where people can put in their email address and sign up for our newsletter okay so we're going to skip this for now but if you guys want to update your social media icons over here all you have to do is just double click on social media icons and then over here you can change the icon style and you can also put in the urls for your social media pages right here so let me just show you all we have to do is come into facebook and just type in www.facebook.com and then so mine is nyc tech club and that's pretty much it so now when someone clicks on that facebook link it's going to go to this page right here so you guys can do this for whichever social media buttons that you want to show up if you leave them blank then the icon will not show up so i'll let you guys do that on your own and again you want to click on the publish button you don't have to every time but it just makes sense too just to save everything and we're back on the header page right here so now what we can do is kind of go through some of these tabs just to show you what we changed so the first thing that we can do is if we come to presets and you open this up you can see that there are a few different layouts for the header menu so if you like any of these other options then go ahead and just select them the one that we're using right now is the first one so for example if we click on this one you can see that it refreshes and then the header builder also updates and the header section changes just like this so it's up to you guys and we will be going over the colors in just a few seconds or a few minutes so don't worry if you guys don't like these colors and you're wondering what the heck like when are we going to change these colors and everything because we are going to be doing that so again you have all these options so just choose whichever header type that you want and then click back over here and what we can do is go into the logo and site logo tab and this is where we can change our logo so you can also change the site title and the tagline if you guys didn't do that in the settings but what we want to do now is we want to upload our own logo so what we can do is click to remove this and if you guys want to use the demo logo then we can just upload that but i also want to show you guys how to create your own free custom logo so if you guys want to do that let's go and open up a new tab and what i want you to do is come to this website called logomaker.com so it's logo maker without the e so l-o-g-o-m-a-k-r-dot-com so make sure that you type in that correctly and once you come here we can click out of this and this is just a quick tour so we can click next on all the stuff and just click done so we're going to run through this a little quickly because i already have a demo image or logo in the folder but i wanted to show you guys how to make your own logo for free so what you can do is you can type in whatever type of icon or image that you want for your logo so i'm going to type in a sweater right here and push enter and i'll just select this one and you should see it show up right here and we can drag this little corner to make it smaller and you can also change the color to be whatever color that you want so you have this entire wheel right here so i'm going to place this over here for now and then i want to add some text so i'm going to click on the t right here and we'll get this pop-up and what we can do is just type in the name of our website so i'll type in sweet sweater and over here is where you can change the font style so go into this drop down and choose whichever one that you like so maybe you like the fancy cursive and then you can come over here and then just change the design like that and then what i want to do is add some space and i'm going to choose the icon right here make it a little bit smaller and maybe just place it right over here like that so if you guys want you can change the font color also so you just want to make sure that you click on that and then you can change the font color to whatever you want and then once you're happy with it all you're going to do is come over here click on the little disk that says save logo and it's going to have this notification right here all you have to do is just click on no thanks download low resolution file and you'll be good to go so you'll download that file into your downloads folder and then you can close this and now you have your logo and we can go back to our ecommerce website right over here and now i'm going to show you how to upload your logo so if you guys need to pause the video to go over the logo maker website to create your custom logo go ahead and do that and just remember you can always come here and update your logo or change it however many times as you want so if you have any questions about logo maker let me know i'm going to close this and now we have our logo file so again i'm going to show you guys how to upload this file now so if you need to pause the video go ahead and do that but what we're going to do is come over here and then click on select image and you're going to get this pop-up right here and right now we're on the upload files tab so if you want to upload your own image or file just click on select files and then find that image and then just select it and then click on upload over here if you want to use the demo content go to the media library and again we already uploaded all of our demo content and you can see that we have our logo right here and i created this using the logo maker website so you can create a beautiful custom logo on your own and all we're going to do is just make sure that we select that so it's checked right there and then click on select right here and what you're going to see is the logo show up right here and now it should refresh and show up up here so that's all you have to do to add your logo and you can change the positioning if you want and then we are good to go but you can also change the width of the logo section and everything like that it's really up to you you can also add a little site icon which sometimes shows up on the web browser up here or the tab if you want so i'll let you guys do that on your own but again super easy just go and get the icon that you want and then you can upload it by clicking on this button right here so what i'm going to do really quickly is click on the publish button just to save everything and then let's click back right here and there's really nothing else that we need to do right now again we're going to come back in here a little bit later and customize the newsletter for the top bar and we'll probably talk about the wishlist also so right now we can just go back to the main customize page right here and now let's go into the style tab and this is where we can go to customize the colors and the font styles so let me show you what we did for the demo ecommerce website let's go and click on colors and what you can do on this tab is customize the colors for your online store so you can see that you can change the link colors the widget colors the shop colors and even the primary colors and everything like that so what we're going to do is we're going to change whatever we did for the demo website and you can pause the video and customize whatever you want and you can always come back in here and do it later when you have more content so that you can see what changes so first for the primary color right here we're just going to click on select color and i'm going to select this black color and just drag this over here to the right hand side just to change it to maybe one four zero zero zero zero so it's this black color and if you ever want to go back to the default color you can just click on this button right here so i'm gonna click on select color just to close that and then for my secondary color i'm gonna come in here and change the color code so i'm going to delete this and i'm going to paste in the color code pound sign dd9933 and it's just going to be this orange color and then for the success color i think i'm going to keep this as is so i'm not going to change this and then for the alert color right over here i'm going to keep this as is also so we can come down to the base colors and i don't change these ones also so we're just going to leave these as is but if you guys want to you can always come in and customize the stuff these are for your typography or your font colors for the base font and then the headline font and then you have your divider color which is this little line right here but everything is set to the default and i don't change anything for the link colors also but you can if you want you can see when you hover over these that you get a different color so you can change those if you want and then down here you have your shop colors so you can change the sale color the new bubble the review stars or whatever you want so again just pause the video or come back whenever you want and play around with this stuff it's really really easy and the fun part is really customizing your website so you can see what we changed here and again if you need any help you can check out the text tutorial that we have on the nyc tech club youtube channel and again if you need any help you can always go to the text tutorial on the nyc tecla website and then you can check out all the color codes that we use for all of these different sections and then you can paste them in if you want what we have for the demo ecommerce website so i'm going to go back over here and the only other thing that we do in the style tab is if you guys want to change the typography just click on this and then over here is where you can change the font styles and how bold everything is for the headline the base font and then down here for anything else so again all you have to do is just come in to the drop down and then you can type in whatever font you want or you can select from any of these options and i'm not going to change anything but that's how you do it and you can also change how bold or how unbold or italicized everything is over here okay so we're going to keep everything as the default because i think it looks pretty good but it's always up to you and just let me know if you guys have any questions so we're going to go back to the main page over here and now what we're going to do is go to the blog tab and what we can do here is change the blog layout so really quickly i'm going to click on the blog link just to bring us to the blog post page and then we can talk about these tabs so if i go to the global tab this is where you can change the date box which shows up right over here above the featured image so you can change it however you want and then for the blog layout that's for this page that you see right here so you can see that the blog posts just are on top of each other right now but if you want to change it so that you have no sidebar you can and then you can change the layout to something like a grid option like this or any of these other options so if you want to see what they look like just click on them and then you can see but we're not going to make any changes here i just wanted to show you that because i do want to make sure that you can customize your entire ecommerce website and then same with the blog post you can change the layout for your blog pages so if we come over here and just click on this blog post so that we can go to it you can see that this is what it looks like right now but if you want to change it you have these options over here and then you can disable or enable any of these other things that you see okay so again we don't make any changes to our website but if you want to go ahead and do that i'm going to click on the publish button right here we're going to skip woocommerce right now we don't need to go through this but we can a little bit later if we need to and what i want to do is just come down to the footer tab and what we can do here is we can customize our footer section at the bottom so you can see that this is footer one and then down here is footer two and then we have our absolute footer down here so what i'm gonna do is i'm going to disable footer one because i don't want this section to show up on certain pages and the footer shows up on every page so i'm going to come down to footer one and just disable this but if you guys want to know how to customize that i will show you how to do that when we customize the widget section for this other footer so i'm going to come down to footer two and i just want to come down to the background color and i want to change this background color to the red color so i'm going to click on this and then for the absolute footer what i want to do is i want to change the copyright name so instead of ux themes i'm going to change it to my business name which is going to be with love so you can change it to whatever your business name is if you want and there is some html and short code here so this shortcode is going to populate whatever year we're in so if it's 2020 2021 or 2022 that is going to make the year just show up just like that and i want to center this and then what i'm going to do is just change the background color right here so i'm going to type in pound sign 14 0 0 0 and i think i need to change this a little bit because it populated some random code for me so it's going to be 14 0 0 0 0 so you can see right here i don't know if i said too many zeros but that is the color code and then down at the bottom if you want to change the back to top button or if you want to remove it you can but that's pretty much it so i'm going to click on the save button over here and then once you guys are ready let's click back and now what we can do is we can come down to the share tab just to show you that this is the icon that is going to show up for your product pages when you share a product so these are the icons that will show up and if you want to select more so that your visitors can share the products on different platforms you can select these options but i just wanted to show you this page so we're going to go back here and we're back on the main customize tab and we're going to go through the woocommerce tab if we need to a little bit later and any of these other ones will go through also later when we go through the header menus and footer menus and then also customizing our widgets for the blog post and the footer section and if you guys want to add any css to customize your website you can do that over here but we're not going to do that because our website is just drag and drop so again click on the save button once you're ready or the publish button and if you guys want you can always pause the video and customize your website some more go through all these tabs it's pretty self-explanatory but we already went through everything that we need to for the demo ecommerce website and we can come back to this section later but i think we are done with the administrative stuff and now we can move on to really customizing our website so what i'm going to do is just close out of this and we're going to move on to the next step and now what we're going to do is we're going to customize the home page so we're going to add our own images and update the text and the links and there are going to be some things that won't show up yet so we don't have any featured products because we haven't created any and we don't have any new blog posts because we haven't learned how to create those yet but by the end of this video our homepage will populate with everything so let's just go in and customize this page so that we have something and it's also a lot more fun than all the other stuff that we've done so if you guys want to do that you can click on the edit section over here and then click on edit with the ux builder if you're not on this page we can go back to the dashboard really quickly and we can go and hover over pages and then click on all pages and we'll go to our pages list right here and i just need to find that home page which is this one right here and we can click on the edit button and this is the edit page and if you don't see the sidebar over here what you can do is click on these dots and then you want to exit the full screen mode and then the sidebar will show up and we have everything already set up over here we don't need to change anything in the page attributes you can see that this is the template that we're using so all we have to do is turn on the ux builder which is the flat sum page builder so click on this button right here and once the ux builder shows up this is what you should see so we have the preview screen of our website on the right hand side and then over here we have all these different blocks or elements that really make up our website so you can see when i hover over this you can see on the right hand side that we have the gap and then we have the grid right here for our section and then if i scroll down a little bit we have the title and then products and so forth so you can add as many elements as you want you can also rearrange these by clicking and moving them if you wanted to so if i click on the plus button right here i have all these different elements that i can just add to my web page so we don't really need to do anything because we have a fully created template for us and we just need to add stuff in there but let me just show you a little bit more really quickly so you can see when you hover over these sections you have this little blue line right here and if you click the plus button right here you're going to see the elements again and you can add something so let's add a button right here you can see that it adds it right over here and then you can go in and customize it you can select the type of button that you want so maybe we want this one and then we can click apply and what you're going to see over here is the edit button section so you can change the text right here to something like hello and then you can add whatever you want so you can add a link or anything like that you can discard this or you can click apply which is going to save it and now you can see that the button is added here if i want to move it let me just show you let me scroll up over here let's add it to the top over here you can see that the button shows up right there and you can remove this by clicking on the wheel right here and just click delete and then it's going to disappear so whenever you hover over these sections you'll see that blue line so you can add elements to it if you want and you can see that you have everything here so some of these are going to be expanded or collapse but we have everything that we need so what we're going to do is just go in and customize everything and you should get a really good idea of how the ux builder works as we go through this tutorial one of the other things i do want to note before we move on is if you click on add elements right here you're going to have the flatsome studio and i am going to make a tutorial on how to use the flatsome theme and we'll go over this in more detail but the flatsome studio has a bunch of pre-made templates that you can import into any page whether it's a blank canvas or a pre-made template so you have all this stuff over here okay so that's something i look forward to if you guys want just make sure to subscribe to the nyc tech club youtube channel and you'll get a notification once i make that video so what we're going to do now is we're going to edit this first section right here so the first thing that we're going to do is we're going to add some slider images into this large banner right here so if you want to do that we can double click this or we can double click this or what we can do is just expand this section right here and what you're going to see are three different grid items so we have the nine by 12 and you can see the little gray box around it and then we have two three by twelves right over here so we're going to go into this first one and just expand this and you can see all the content over here so the more that we expand the larger the details get so this is the first banner and we're going to have a second banner which means we're going to have two images and i can show you on the demo website just remember that we're going to be creating this and also this and you can see right over here that is this is banner 1 and then for banner 2 that's going to be this one so whichever one is highlighted is what we're editing right now so what we're going to do is just double click on the banner right here and then you'll get the edit banner and what we can do if you want is change the height i kind of like this so we don't need to do anything there but what we want to do is change the background image so we can remove this and then we can click on select media and we're going to see the media library right here and i'm going to use this image and the demo images might not be exactly the same because these are copy written but i will give you some placeholders to use and you want to substitute them out with your own e-commerce photos once you're ready if you want to upload your own images click on upload files right here and then click on select files and then find the image that you want to use so i selected this one we have the check mark right there so i'm just going to click on use image and you should see it show up right here so you can see that we have our image and you can change the effect over here if you wanted to there's a bunch of different options that you can do so you can see when we hover over this we have these options so let's just choose a different one really quickly let's go with grayscale so you can see when i hover over it it changes to a gray scale like that so that's just an option for you so i'm going to choose the zoom fade just because i like that one and we don't need to do anything else if we wanted to link this whole image to another page we can put in the url right here but i'm not going to do that i'm only going to link this button down here so we are good to go with the banner and if we click back right here we'll go back to the main page and what we want to do now is we want to update the text over here so what we can do is just double click on this and it's going to open up this text editor so i do want to show you how you can also do this by just going into the different modules over here so you can see whenever you hover over this stuff you'll see the blue box or the gray box so you can see we're on the text box right here i expanded this and this is the text box all we have to do is just double click this and it'll open up this section where we can customize our font size our line height the alignment even the text color if we wanted to change it if you want to change the text you can type it in right here with some html or what you can do is open up the text editor and this is the same thing that i saw when i just double clicked on this element right here so you have your text right here and we can just go in here and change whatever we want so i'll just type in sweater season right over here and you have these buttons also to format your text so if you do want to format anything just highlight it and then you can change it however you want just like that and there are some additional buttons right here so you'll see this toolbar toggle if you click on that you're going to open up this section so you have additional stuff you can change the font size and you can also change the font down here if you want to so i'm going to leave the rest of the text just like this but you do have options up here and you also have this button right here so if you go into this drop down you have a bunch of other stuff that you can add or customize for your text right here okay so what i'm going to do is just click ok right here and you can see that we have our text now it's updated it says sweater season new arrivals on the shop and i'm kind of happy with how that looks so i'm going to click back right here and what i want to do is i just want to update the button to link to the shop page so what we're going to do is we can hover over this and double click it or we can double click it right here so once we do that we're on the edit button right here and we can change this to shop if you wanted to or anything like that so it's really up to you guys what you want to type in for the text for your button and you can also change whether the letters are uppercase or lowercase right here and then you can change the color to some of your theme colors so you have the primary color which is black or the alert which is red and if you want to change these you can go back into your theme settings and do that and there are some different options for your buttons so you have all these options you can play around with them and see which one you like and you can make the button larger or smaller also and you can also add an animation for how this button loads on to your website and over here this is where you can add some spacing for the button so this line right here is for the top and then this for the right and this for the bottom and the left so if i just drag my mouse you can see that it increases the spacing for the top over here and that looks a little weird so i'm going to remove that but that's just an option for you guys to customize your button and you have these other options also including making your button a lot larger which is also weird so i'm going to just turn that off what we really want to do is come down to this section and if you want to add an icon you can see that you can add that just like that and we also want to add a link so what i'm going to do is link this button to the shop page and we don't have the shop page already created but i know the url so if you want to do that just type in https colon slash slash www dot your website name so i'm going to type in nyctechclubby.com and we're going to link this to the shop page so it's going to be slash shop right here and just another slash and we're going to open this up in the same browser window so we don't need to change this and that's pretty much all we have to do so again you guys can customize whatever you want you can play around with the buttons and we're gonna click apply here and then if we click on the update button right here it's gonna save our changes so now our button when we hover over it and click on it it's going to go to the shop page okay so now what we want to do is we want to change the next banner so what we can do is click on this and it will bring us to the next page you can also click on the arrows right here if you wanted to and you can customize these arrows so let me just talk about that really quickly if we double click on the slider right here it's going to open up the slider edit and what you can do is you can come down here and you can change the navigation arrows so over here you can turn them off or you can change the style right here okay so there's a lot to do a lot to customize the flatsim theme has all the tools and resources for you to really build out whatever you want and it's really really easy it looks a little confusing a little overwhelming when you first kind of look at the stuff but it's really easy all we're doing is just going section by section to customize our website so again we're on this banner section right here and we can open it up and everything looks good we just want to come in and change the image so we're going to remove this and then click on select media and i'm going to select this image right here you guys already know how to upload a new image so once we select that i'm going to click use image right here and you can see that the image shows up just like that and now what i want to do is i want to come into the text section and customize this text so what we can do is just double click on this and it'll open up the text editor and what we can do is just come in here and change our text so i'll type in comfort and joy and you guys can type in whatever you want and just remember there is this toolbar toggle right here to expand this section and you can change the font sizes you can change the type of header font or paragraph font over here and you do have these other options right here also okay so if you do want to change the text color we can highlight this and we can just come over here and we can choose whatever color that we want we can also click on the custom option and then i'm going to drag this over here and you can see that this is the color code ffff which is white so i'm going to select that and then i'm going to click ok right here and now you can see that we have our text so that looks pretty good and now what we can do is come over here and we can double click on the button and all i'm going to do over here is i want to change the color from primary to white and if you guys want to what you can also do is come down to the bottom and change the text link right here and what we can do here is we can change the button text if you want to and we can also change the color right here so i'm going to select white and then for the style i'm going to select the bevel option and you can add an animation if you want over here to make the button come in a certain way and down here in the link section i already linked this to the shop page so if you guys want to you can type in your website name and then just put in shop and it'll go to the shop page you can also just type in a pound sign right now to make it an active link that doesn't go anywhere and then you can come in here and update this later so it's really up to you and i'm gonna click on the apply button and i'm gonna click update just to save everything and there's one thing i didn't mention with our images so with this banner image if we come in here and double click this back in the background section over here you can add a solid color instead of an image if you want and you can also add an overlay so what we can do is we can come in here and we can just click and drag this wheel and you can see that it's a dark color right now but if we change the transparency right here you can see that it just fades in like that so you can see that we have our image so it's really up to you guys what you guys want to do and i kind of like it like this so i'm going to choose this overlay right over here so you can always remove this by clicking on the x but i like to just tint this image sometimes just to make it less glossy or colorful so i'm going to click apply again and click update and now we are good to go with the banner section let me know if you guys have any questions but hopefully you guys can see this is really really easy to just customize this flatsome template to make our ecommerce website let's jump over here now and let's edit these two banners so let's double click on this one and what we're going to do is come over here and remove this image and then we'll just click on select media and find the image that we want to use and then click on use image and we should see it right there and if you guys want to link this image then what we can do is come over here and just scroll down to the link section over here and let's just link this to the shop page so we can link this to any page that we want and i'm going to just type in the pound sign to make it an active link that doesn't go anywhere so when someone hovers over this they'll see the little mouse button that says you can click on it but when you click on it it doesn't go anywhere so if you guys want to update this later you can to a category page or a product page or anything like that okay so i'm going to click apply right here and then we'll click update and now let's come down to this banner and let's just update this one so double click and again we're going to come in here remove this and then click on select media and you can always upload your own images if you want we're going to just use this demo image right here and click use and once it gets added i'm going to again just come in here and we don't need to add an overlay unless you guys want to but i'm going to come down to the link section and just type in the pound sign again not putting in a real url but you can if you want okay and i just want to tell you that because i don't want you guys to have a website that doesn't have links that go anywhere or just images that you can't link to anything else so i want to make sure that you guys know that and i'll try to remind you guys towards the end of this video that you do need to update your urls so let's come to this text box and just double click this and let's come in here and replace the text so i'll just type in stay warm this year and then we'll click apply and you can always change the text colors if you want also so you can see right here that this is where you can do it and you can also do it when you open up the text editor and you can change the text colors here okay so we're going to go back right here and again i like to click the update button just to save everything you don't have to do it each time and if you guys want to change the divider or remove it you can always do that just click on the wheel and you have your options to edit everything you can also delete it or you can make a copy of it right so we have our first section done and we can actually close all this stuff so we can close this grid and we can also close this grid and close this section right here so we have just completed the first part of our home page and i hope you guys are really excited now that we started customizing the ecommerce website we're going to come down to these sections over here and there's really not much to do right now because we don't have featured products but let's talk about this element a little bit so let's go first to the title element and double click this and what we can do here is customize the title section so if you want to change the style you can you can also update the text right here and you can also change the color if you want so i'll let you guys do that on your own and really there's nothing else that we need to do here so i'm going to go back and what we want to do is go into the product element so we can just double click this and it's going to open up this section and let me just show you on the demo ecommerce website that we have this featured product section and these products are featured products so we're going to select them to show up in this section so what we want to do over here in our elements or the edit element for the products is you can customize the style and you can come back in here after you populate the section if you want to change anything but what you're going to do down here in the filtered post section is make sure that we show the featured products otherwise if you select all it's just going to show all your different types of products or the sale products so right now we just want to show the featured products in the section so we want to make sure that we select that and that's pretty much it so i'm going to click apply right here and what i wanted to do was just show you how you can customize this section and same goes with the featured category section again that's just going to be this title section and then for this element product categories what we're going to do here is just show our categories so on the demo ecommerce website once we create some products we're going to add some category names for those products so we have men's scarves socks or whatever category names that you want so what we can do is just go into this element really quickly and just show you how you can customize it so double click on product categories and again what you can do in the edit box over here is customize the style or the layout if you just want to filter the categories what you want to do is right over here in the meta section you can come in here and then you can choose the categories that you want to show so if we just want to show bags we can just select that and you can see that it's just going to populate bags but what we're going to do is just populate all of our different categories so that we can just filter through this with an arrow like this and we don't have any categories right now we're using the demo content so we will delete these ones and we will create our own a little bit later so don't freak out if you see these category names and you're wondering what the heck are these i don't want to sell shoes or posters or anything like that we're going to remove these and add our own a little bit later okay so we're going to click apply right here so we didn't make any changes but i will click on the update button just to save everything and now we can move on so you can see over here that we have a little gap and this is just some spacing so if you ever want to make this larger or smaller you can change that right here you have this little arrow that you can increase by just clicking and dragging to the right and then you can make it smaller by dragging it to the left okay so what we're going to do now is come down to the banner section and this is going to be a newsletter opt-in sign up section so we're going to put in a background image and then we're going to show you how to create some newsletters for this section and the header section so really quickly let's go to the demo ecommerce website and you can see the section right here we're going to add an image and we'll change the text if you guys want to and then we'll have a sign up section right over here so let's go back to the online store that we're learning how to make and you can see right here that we have this little arrow or icon so if we expand this we have the text box right here and then all these different elements so the first thing that we're going to do is double click on the banner to add a background image so once we come over here we can just remove this and then click on select media and what we can do is just find the image that we want to use so i'll just select that one and you can see that it gets inserted right here and you can see that we have an overlay already if you want to remove it or change the tint you can and over here you can change the height for the section you can see as i drag this wheel it just gets larger and i'm going to undo this so click on this button on the right but that's just for you guys and i am talking a little faster because i think this stuff is pretty easy but i don't want to go too fast because i know that you guys might just be learning but i also don't want to get you guys too bored where you say oh it's too hard or you get you're too boring so i want to make sure that we're going at an even speed okay so we have our banner image right here and now what you can do is double click into the text box over here and you can change your text to whatever you want so i'm not going to change anything but again you guys can customize this on your own and then click on ok right here and then down here you're going to see another text box so what you want to do is double click on this one and you can see that it says insert contact form here so what we're going to do is get some short code and then what that's going to do once we paste that in is it's going to populate what you see right here so what we want to do is go back to the online store that we're learning how to make we're going to close this right now if you guys need to pause the video to update your text go ahead and do that and then once you're ready click on apply right here and then click on update to save everything and what we're going to do right now is we're going to go and create two newsletter opt-in forms one for right here and then one for up here so when we click on this we're going to get this sign up right here okay so we want to go and exit this right now so go ahead and click on the x at the top and once you exit the ux page builder for the flatsome theme let's go to our dashboard so hover over your website name and click on dashboard so once we're back on the wordpress dashboard now what we're going to do is we're going to show you how to create newsletter opt-in form so we're taking a little break from customizing the home page and this is going to be pretty fast so we have a contact form plugin and over here you should see a tab called contact go ahead and click on add new and once you come to the contact form what we're going to do is create two newsletter contact forms and in another video i'm going to show you how to integrate the contact form with constant contact and constant contact is probably the best email service for email marketing and a way for you to save the email addresses whenever you get someone to sign up so subscribe to the nyc tech club youtube channel or i will put a link in the video description once i create that video and it's going to be very detailed and step by step so right now let's just focus on making our e-commerce website with all of our elements so the first thing i'm going to do is create a newsletter so we can just type in a name right here so maybe i'll just type in newsletter one and what we want to do is take some of the short code or html so there's a few different options you have the contact form horizontal and vertical i'm going to take the horizontal option right here so just copy all this text and then what you want to do is go to the form tab right here and just come in here delete all this and then paste in that text that you just copied and that's pretty much it now there are some additional tabs over here that we don't really need to go through but over here you can see that you have a confirmation message that is going to be sent or shown to your visitors once they submit their email okay so you can go and check these out yourself but i will again have a full video tutorial on the contact form 7 and also how to integrate constant contact so once we have everything here what we want to do is go ahead and click on the save button and once that's saved what you're going to see is some short code here and before we go and copy and paste this into our home page let's go and create our second newsletter opt-in form for the header section so again click on add new and what we're going to do right here is just type in newsletter 2 and this time around i'm going to choose the vertical option so that means we're going to stack everything so i'm going to copy this and then go back up to the form tab and just paste that in right here and then click save right here so now you can see we have our second contact form right here and if we go to the contact forms tab what you're going to see is a list of all the contact forms that are created for you and by default there's going to be a few of them that are created when you install the demo content and the plugin but these are the two that we want and you can see right here that we have the short code so what i'm going to do is just keep this tab open but if you guys want to write the stuff down or copy it somewhere we're going to paste this into our home page so i'm going to open up a new tab and i am back on the ecommerce website right over here and what i want to do is just hover over the edit page and turn on the ux builder and once we come back to this page right here the first thing i'm going to do is come down to the banner section over here and then just double click on the insert contact form and i'm going to delete this and then i'm going to go to my edit contact form so i have my short code right here and the one that i want is the vertical one so it's the newsletter one so i'm going to copy this shortcode and then i'm going to come over here and just paste that in and then i'm going to click ok right here and then click apply and then click update and that should save everything and once it does we can go and check it out so i'm going to close this and once we see the ecommerce website if i scroll down to the banner section you can see right here now we have our opt-in form so this is what we want and again you can customize the button or the text if you go to the contact form so if you do want to change the sign up button right here what you can do is always go back into the edit newsletter and then on the form over here you have your text so right over here where it says sign up if you just change the stuff inside this quote you can change that text okay so i'm going to go back because i want the short code for the newsletter too and what we want to do is we want to turn on the customizer so that we can access the top bar so i'm going to come over here click on customize and once we're back on the customizer page i'm going to go into the header and then you should see the header builder right here we're just going to double click on the newsletter element and you only need to do this if you do have the newsletter element for your top bar and you can see that it pops up like this and again you can change your text over here what i want to do is just paste in the short code right over here so i'm going to go back to the contact form and this time around i want the second newsletter so i'm going to highlight this text right here and then copy that and then just paste that in right over here and what we can also do is add a background image so you can see if i click on this it's going to pop up and it's a black image right there let's go and just add an image so click on select image and we're going to come to our media library and i'm just going to select this image and click insert and we might need to refresh this so i'm going to click out of it and then i'm going to go back and click on newsletter and you can see that the image shows up now so we are good to go and that's all we have to do you can change the height if you want to for this section but again it's always up to you so you can just change the number and then have px on there and then you'll change the height of this okay so i'm going to click on the publish button right here just to save everything and then i'm going to close out of this because we should be good to go and you should be brought back to the ecommerce homepage and now if we come over to the newsletter opt-in form you can click on it and you'll see the opt-in right here and you can change the image and you can change the height i'm gonna let you guys do that on your own and if we come down to the banner section over here we also have a newsletter opt-in over here okay so again we're going to show you how to customize and integrate constant contact with the contact form plugin in another video so make sure you subscribe and look out for that video so we're going to come back to the home page and customize everything else for our online store a little bit later but right now what i want to do is move on and show you how to create products for the ecommerce website that we're learning how to make so that we can populate these sections right here so what we're going to do is go back to the wordpress dashboard so hover over your website name and click on dashboard and once you're back on the wordpress dashboard the first thing that we're going to do before we go and create some products is you might see this notification at the top that says mailchimp for woocommerce you can integrate this with your website if you want but i'm going to turn it off so i'm going to go to my plugins down here and then click on install plugins because again i'm going to be integrating constant contact in another tutorial for this website so instead of using mailchimp i'm going to use constant contact for the newsletter so right over here i'm just going to disconnect or deactivate this so i'm going to click other right there and just click on deactivate but it's really up to you if you want to keep this you can see right here that this plugin connects woocommerce to mailchimp to sync your data and send out campaigns and stuff but again you can use constant contact which i think is a better platform so now what you can do is to create our products before we do that we want to clean everything up so what i want you to do is hover over products and click on all products and over here you're probably going to see a list of products and i already put everything in the trash bin so what you probably want to do is check the box at the top to select all your products and then in the drop down select move to trash and click apply and you're going to have to do that two or three times to remove everything so that you don't have anything on this page and everything is in the trash bin over here so you can see it when i click on the trash link i have all my products that were made from the demo content and we can delete this by clicking on empty trash right there so i'll let you guys do that and then the other thing i want you guys to do is come down to categories and click on that underneath products and also check the box up here to delete all of your categories so just click on this and then click apply and the only one that's going to be here is the uncategorized option and do the same with your tags so if you need to you can pause the video to do all this because i did do it without recording it so again check the box to delete all the tags or check them and then just click on delete and click apply and that's going to clean everything up so that we can start with a blank slate okay and there shouldn't be anything in the attributes but if there is then you can also clean that up and then once you're ready what we're going to do to create our first product is we're going to hover over products and we're going to click on add new so go ahead and click on this once you're ready and once you come to the add new product page this is where we can go to create our product so let's go and look at a demo product on the demo ecommerce website and this is a simple product so what that means is there aren't any variables no different sizes no different colors there's only one option and you can see right here we have our image we have our title the price and then this is the short description and over here we'll have our category and product tags and the social media share buttons over here that you can select in the theme settings and you can change the color of this button in your theme settings also so we will talk about the woocommerce tab a little bit later but you can come down here and you can see that this is the long description and then you have a review section if you enable this and then below this you do have the related products if you have some additional products and these populate based on the category names and the product tags that you create so what we're going to do is show you how to create a simple product just like this so we're going to go back to the ecommerce website that we're learning how to make and the first thing that we're going to do is put in the product name right here so you can type in whatever you want i'm just going to type in wide neck right here and just remember that this section is the long description so what we can do is i will take this text right here even though this is the short description the long description shows up down here so i'm going to take this text and i'm going to write this is the long description and then i'm going to paste this in just so that you can see it after we publish this product so you do have some additional keys here you can format your text however you want and you also have a short code over here if you want to customize a section if you want to add a row or a column or a slider or any of these elements and you can also use the ux builder to create a special section over here also and you can also use the ux builder to create a custom section hall and you can also use the ux builder to create a custom section also so you can just click on this and then play around with it if you want but we're not going to do that because i think the demo page over here looks pretty good so i just want to keep it very simple like this so what we're going to do is come down to the bottom and this is the short description so remember this shows up next to the image so again i'm just going to paste this in and we don't need to change anything here what i want to do is come up to the product data section and remember we're creating a simple product so in this drop down you can see that there are a few different types of products that you can create a group product an affiliate product a variable product and a simple product so this is the one that we're creating right now and then if this was a virtual product you would select this and the shipping tab disappears and then if this is a downloadable product you can select this and then you can upload the file right here so that people can download it and then you can limit the number of times that they can download it over there but this is a sweatshirt that we're creating so it's a physical product and we are going to be sending it to people so what we want to do after we select the simple product right there is put in our price right here so you can type in whatever you want and you can put in a sale price if you want also and you can also schedule the sale price so if you click on this you can put in the dates for the sale and then if you have a sale price right here it will automatically just update for the dates over here so in the inventory tab we don't need to do anything here but if you want to put in an sku number you can you can also manage your stock here so if you put in the quantity then it can count it down and track it for you so we're going to skip this because i don't want to do that but again this is just an option for you part of the woocommerce plug-in and then for shipping this is pretty important if you're using a plug-in to calculate your shipping rates so you want to put in the weight and the dimensions right here but since i'm using a flat rate option i don't really need to do this but you can add this so that people can see it in the additional details also so for link products you can upsell and cross sell products if you search and type in the product names and if you don't know what these are you can just hover over the question mark and then you can see what this stuff is so we do have tutorials on how to use woocommerce a full tutorial i think it's over an hour long maybe two hours and we do show you how to use woocommerce step by step so we are showing you pretty much everything but the full video tutorial just focus on woocommerce does probably give you a little bit more insight so i'll link you to that in the video description and you can check it out for attributes this is where you can add your product variables such as sizes and colors and we don't need to do this for a simple product but we will do it for a variable product a little bit later if you come to the advanced tab this is where you can enable or disable the reviews so we're going to leave this enabled this is by default so we don't need to do anything there and then these other tabs are just premium features so you can add some additional extensions if you want and then for the product layout you can change it a little bit you can add some content to the top and the bottom and then down here in the extra tab you can add a custom button if you want to enable this and then you can change the title of the button to say something like special new or sale or anything like that and then it'll show up on the product image okay you can also add a product video and you can change the size if you want also but we're not going to do that so really all you have to do for a product is come in here especially for a simple product and put in the price and then maybe the shipping weight and dimensions if you want so once we do that we can come to the product image section and this is where we add our image so click on set product image and we're going to go to our media library right here and i'm going to find the image that i want to use so we'll just select this one and we'll insert it and then if we want to add some additional images we want to come down to the product gallery and click on this link and then we can just add some images just for fun so these aren't going to be the correct images but i'm just going to add some just so that you can see that we can add them right there you can also remove them if you want and then what we want to do is come over here and we want to add some product categories so that we can filter our products and also for the related product section so we'll click on the add new category and i'll type in women's and i'll push enter and then we can do long sleeves just like that and you can add as many different categories as you want and same with the product tags again this helps filter everything so we're going to type in women's right here and we'll do winter and sweater and just push enter and you can always remove these and if you want to delete them you can come over here and just delete them again just like we did a little earlier now at the top over here this is where you can publish your product you can also save it and you can publish it at another date and right over here where it says catalog visibility if you click on the edit link this is where you can select to make this a featured product and if you select this and click ok that's going to make this product show up in the featured product section on the home page so you can see right here that it's a featured product now so that's what i want and pretty much that's it so now what we can do is just click on the publish button and once the product is published let's go and check it out so click on view product and this is what you should see so we have our featured image right here and we can click on this and then we can see our gallery and over here is our short description and then we can add as many as we want to our shopping cart and you can customize the color of your button in the theme settings and we have some additional details right here and then our long description down here you can see that this says this is the long description so we are going to have related products once you create more products so that section will populate and we can also talk about how to change the product layout for this page a little bit later but first what i want to do is go through creating the rest of the different types of products together so the next type of product that we want to create for this video tutorial is a variable product so what that is is having a drop down like this for different options and you can have more than one variable so if you have size and color or anything else you can add additional variables so i'm going to show you how to do that and then i'll show you how to store these variables so you can just click and add it with just a click of a button so let's go and create some more products and then we're going to show you how to customize the product page so back on the ecommerce website that we're learning how to make let's go and create a new product let's hover over this and click on product and once we come back to the add new product page i already filled out a lot of the information because it's pretty straightforward just remember that this section is for the long description and then down at the bottom this is the short description so again on the demo website the short description shows up right over here and then the long description is down here and when you have a variable product you can also have this additional information tab with your variable information so on the add new product page for the online store that we're learning how to make you can see right here i put in the title and all the other stuff and now what we want to do is we want to come down to the product data section and this is where you're going to go to select to create a variable product so again what we're doing right now is we're creating a product with different options so what we want to do is come in here and select variable product and you can see right here that now things have changed so again if we go back to the simple product you'll see that some tabs disappear and we have the virtual and downloadable option over here but when we go to a variable product you can see that this disappears and then we have the variation tab that shows up over here and that's because we're going to be able to add our variables there so again we can go through this and if you want to manage your inventory you can right here and again if you select this you can put in the stock quantity and everything like that and if you're using a plug-in to calculate your shipping rates you want to make sure that you put in the dimensions and the weight right over here again we're going to skip the link products but we have video tutorials on how to use woocommerce that go over this and what we want to do for a variable product is we need to go to the attributes tab and over here is where we're going to add our variable options so the first thing we're going to do is click on the add button right here and we're just going to add one variable for this product so let's go with size right here so this is where you put in the variable name and then this is where you put in the different options so you can see right here that there are directions for how to separate stuff so you want to use this line and for a macbook you're going to click on the shift and the slash button on the right hand side of the keyboard so what we're going to do is just type in small right here and then we put in this line to separate things and then we type in medium and the line and large just like that and then what we want to do is we want to check this box this is used for variations and then click save attributes and a little bit later in this video probably after we do the variable stuff i am going to show you how you can add and save these variables so you don't have to type them in each time okay so just be aware that we're going to show you how to do that so once we save our attribute right here we want to go to the variations tab and now all we have to do in this drop down there are a bunch of different options but you can just select the add variation which is the default option and just click go right here and what you're going to see is the variable show up and if we want to just have one price for all of our different sizes right here then we want to just make sure that we have the parent option selected so it's going to be any size and we can just drop this down to expand the section and this is where you can go to putting the sku number and then if this is a downloadable product you can check this box same with the virtual product and you can manage your stock right here all we're going to do is just type in a price so we'll go with 59.99 and maybe this will be on sale for 39.99 and again you can change your stock status but this updates on the product page if you do so if you put something like out of stock or on back order then that's going to show up on the product page so make sure that you don't change that unless you don't want people to be able to buy your product and down here you can put in the dimensions and the weight but the main thing is you want to open up the section and put in the price for when people select whatever option that they have then the price is going to show up okay so all we have to do is click on save changes right here and that's pretty much it now we have our variable product with a price and then you can go through these other options you can disable the reviews if you want and then you have these other premium features down here which we don't have to go through so we have our product image here and our product gallery if you guys want go ahead and upload some images and then once you're ready come over here and what we can do is select an existing category and also put in another one so maybe we'll go with sweaters and i'll just push enter and then over here for the product tags i'll go with sweaters and women's just to put those in again this can help with related products and we can also make this a featured product if you want just remember that a featured product shows up on the home page in the featured products section so if you don't want that to show up then make sure that you don't select that so i'm going to click publish right here so you can see on the product page right here that this product is on sale we have the bubble right here and you can see that we have our full price and the sale price short description and now we have our variable option right here so we can just select small and then we're good to go we can remove this if you want also and everything else is pretty much the same and just remember that we have the additional information section now because we have a variable product and we also have a related product because we have similar categories and product tags and again i will show you how you can customize the product page a little bit more in just a few minutes but this is how you create a single variable product let's go and create a multi-variable product so maybe you have size and color okay so let's go back and show you how to create another product so we're gonna hover over new right over here and click on product once again and once you come back to the edit new product now what we're gonna do is create a multi-variable product that means we're gonna have more than one variable and i already filled everything out so just remember this is the long description and the short description is at the bottom and i also made this a featured product and you don't need to do this for every one of your products only the ones that you want to show up on the home page otherwise they'll show up on the store page okay so what we're going to do is come down to the product data section and this is where you go to select the type of product that you're creating so again we're creating a variable product so we want to select this and that's going to update the tabs right here and the main ones that you need to focus on are the attributes and the variations tab for a variable product so i'm just going to go to these two so we'll go to the attributes tab first and this is where we go to add our variable options so we want to click on add right here and once we get this pop-up right here what we can do is type in the name of our variable and then the options right here so we'll go with small medium and large and then what you want to do is check this box that says use for variations and then click save attributes and that's going to save this variable and then what we want to do is we're going to create another variable so i'm going to come in here again and click add and this timer i'm going to go with color so we'll come in here and just have some different options so we'll go with white red and blue and then again just check this box that says use for variations and then click save attributes and now we have our variables and you can always add more if you want and now what we're going to do is come to the variations tab and click on that and once you come to this tab right here there is a drop down and what you can do is create variations from all your attributes and what this is going to do is create small and white small and blue small and green or whatever you have in the medium and small medium not medium and small but medium and red medium blue and then you can put in price points for each option or variation and that's okay if you want to do that but we don't need to do that so we're just going to go with the add variation option and click go right here and once you see the variations right here if you want to allow anyone to select any size and you want to price your product based on this option over here so they can select any size and the white color and we can have one price and then we can select the red color and have a different price and same with the blue then what you want to do is you want to add some additional variations so we can do that by just clicking go like this and then you'll see another one and we can do three and i'm just going to use this as an example and then i'm going to delete this but we can go with white and we can go with red and we can go with blue right here and then if we expand these we can say that the blue is 49.99 and then we can come into this one and say this one is 39.99 and then the white is the cheapest at 29.99 and again what this is going to do is allow people to select any size and then a color so let me just show you really quickly and then we're going to come back in here and then remove this stuff so you can see the person can select any size and then if they choose a color they're going to get a different price so you don't have to do this but i want to show you really quickly because this might be important for people that sell certain things like coffee with different sizes and all that so we're gonna click on view product really quickly and we have the product page right here and so i'm gonna select a size so we'll go small and then you can see that we have a range right here if i select white it updates to this price right here and then if i select red it changes to the other price and then same with blue so the way to do that is again what you're going to do is you're going to add a bunch of different variations over in the variations tab and then you just select your options here and then you expand this and then you put in the prices okay so what we're going to do right now is remove this because not everyone wants to have different variations like that but they do have different variables or multi variables so if we just go with any size in any color so again we're just selecting the top option we can come in here and put in the price that we want so maybe it's going to be 49 and again you can put in the weight and if this is a downloadable product or virtual you can select those options just click save right here and now if we come over here we have our variation and then we can click on the publish or update button right here and now what we can do is go and view this product and once the product page loads you can see now we have one price but we have more than one variable so if we come in here and select the size and a color the price doesn't change because we only have one price for any type of variation but if you do want a range then you want to go and add those different variations and the different prices okay so super easy and before i let you guys pause the video to create simple and variable products i want to show you how you can save these variables so you can add them a lot quicker than typing them in because if you have hundreds or thousands of products you don't want to type in the size and the options each time so let's go back to i guess we can go back to the edit product page really quickly so click on this i guess we can go back to the edit product page so click on this and once you're back on the edit page or the wordpress dashboard now what we're going to do is show you how you can save these variables so you don't have to add them each time by typing them in so this is something that i don't think any other wordpress tutorial shows you how to do with ecommerce so i like to do this because i know it saves people a lot of time and it's really grueling to just type this out over and over again so what we're going to do is we're going to come to the attributes tab go ahead and click on this and once you're on the attributes page what you're going to do is type in the name of your variable right here so we're going to go with a size variable and for the slug i like to type in the same name and then for the ordering it's up to you but i like to leave it as custom ordering but if you want alphabetical order then you can choose the name option if you want so i'm going to click on add attribute and you should see it show up right here if you want to edit the name or the slug you can click on the edit link right here you can also remove it by clicking on the delete button but what we want to do is add our options so we're going to click on configure terms and once you come to this page this is where we add our options so we're going to go with small medium and large and i'm going to type in the first option which is going to show up on the left hand side so that's going to be small and again i like to type in the same name for the slug and click add new and then we're going to go with medium right here and this is just a demo so if you have different variables then go ahead and add those instead of the size option i just want to kind of show you this to make your life a lot easier and again i think this is the only tutorial or the myc tech lip tutorials are the only ones that really show you how to do this so we have our options right here and if you want to rearrange these you can click and drag these around we're going to go back to the attributes page and just check to make sure that they have the right order you can see that we have the size variable right here and it goes large medium small i want to rearrange this so i'm going to go back to configure terms and what i'm going to do is drag the medium into the middle and the small at the top just like that and now let's go back to attributes and see if that rearranges stuff for us and you can see now it looks a lot better the ordering is right so you can add another one if you wanted to you can go with color just like this so we can type it in and again click add attribute and then we can just come in here and we can add the colors that we want so maybe white and then we'll add red and blue just to make our life a lot easier and then we'll just type one more right here and then i'm going to show you how to use this stuff and again the goal here is to make it so you don't need to type the stuff in every time that you create a variable product and once you're on the add new product page let's go and just type in a random name so variable product and this is just an example so i'm not going to really fill everything out for you guys but what i want to do is show you how you can use those saved attributes so if we come down to the product data section and select variable product now when we go to the attributes tab instead of selecting custom product attribute and clicking add to add our variables if we go into this drop down you can see that we have the saved variables so we can just select size just like that and click add and you'll see it pop up and then if you click on select all you can see the variables show up just like that and then just click use for variations click save and then you can go through the steps of going to the variations tab and then just clicking go right here and then you'll see the tab right here and then you can go in and change whatever you want super easy and just an easy way to really save your variables so i hope this saves you some time it's just a little shortcut that i like to use for ecommerce websites that i make and hopefully that you guys can use also so what you guys can do right now if you want is you can take a break and pause the video to create some simple products and variable products for your online store or you can keep watching and we're going to show you how to make a virtual product and an affiliate product really quickly just so that you have those options and then we're going to move on to our other pages so again you can pause the video if you want otherwise keep watching and we're gonna go and create a new product which is going to be a virtual product and then we're gonna go and talk about the product pages and all that stuff a little bit later okay so if you guys want hover over new and click on product and once you're back on the add new product now what we're going to do is show you how to create a virtual downloadable product so you can see that that's what the title is right here and i'm just going to show you this one time because it's really really easy so i already filled out pretty much everything and again the main thing that you want to do whenever you create a product is come down to the product data section and select the type of product that you want to create so this could be a variable product but i think it makes more sense to be a simple product and i'm gonna make it a virtual product so you can see when i check this box the shipping tab disappears and when i check this box for downloadable we get this section to upload a file so maybe we'll just type in a price right here so i think for song 1.99 sounds about right and then what you can do is just upload your file right here so click on add files and you'll get this little section right here and what you can do is name the song so maybe it's just going to be song name because i don't know the name of the song and then you can put in the file url if you know it or if you upload the file to your media library you can also just choose file so what we can do is click choose file and in my downloads folder right here i'm just going to upload one of these songs so i'll click on choose and you can see that it's being uploaded right over here and once it's uploaded just make sure that it's selected right there and then we can click insert file url and you should see the url right here but if you want to use another image or file that you have saved just know whenever you click on one of these you're going to see the url down here so you can see when i click on this one you see the file url same with this over here okay so again we're selecting this one and i'm going to click insert so i see it right there and you can add some additional files if you have more than one that you want to include in the sale and then over here you can change the limits for how many times someone can try to download this and if you want to go unlimited that's fine and you can also make the download link expire if you want so you can see when i click on here that i can make it expire after a certain number of days like that okay so i'm going to delete that and that's pretty much it so that's how you add a virtual downloadable product and then you can go through these other tabs but again you don't need to and we can also add an image for this so there is no default image it's just a picture of a file or something like that so you probably want to add your own image or if you have a cover image or something like that so i'm going to choose one of these just for fun even though this isn't related to the product i just want to show you when i add that it's good to go i'm going to leave the product tags and the categories blank this time and i'm just going to publish this just to show you what it looks like once the product is published so let me go and click to view the product really quickly and you can see right here imagine that this is a cover photo for a cd or a song and then we have our virtual product right here and all we have to do is click add to cart and then check out and then we'll get a link or your customer will get a link to download that song and that's pretty much it so we have our description right here and we have a short description right there okay so super easy and again if you have any questions with how to add a virtual product or downloadable product let me know but if you guys want you can pause the video and add some additional ones but the last product that we're going to create is an affiliate product because a lot of people want to know how to create affiliate product websites so i just want to show you how to do that really quickly all we have to do is hover over new and again go and create a new product and once you're back on the add new product page now what we're going to do is learn how to create affiliate products for our ecommerce website and you have to figure out what affiliate program that you want to join so that you can sell whatever it is that you want i'm going to use amazon associates for this example because i have an account with them i don't really sell too much or make any money using amazon but i have an account so that's the easiest thing for me to do and all i have to do is just click on this and i'll open up the product page i can see the product right here and we have the price and there's a range so this would be a variable product and you can see that there is a short description here and then if i come down here there's a long description so i can copy and paste all that stuff into these different sections so we have our long description and then our short description right here i didn't put in everything but this is just an example and then over here in the product data section just like our variable products and simple products we want to select the type of product that we're creating so right here is the external affiliate product we want to select that and all we have to do is we can link to the page for the affiliate website so if you see over here there is the get link so i'm going to just click on this and you can see on this page right here if i click on text only then i can come here and then i can get the short link and then i'll just copy this and then i'll go and paste that in right over here and then i can put in whatever button text i want so maybe it says buy from amazon even though that's a long text maybe something like that or just buy product and then we can put in our price right here i think there's a variable range because because this product is being sold by different vendors but i'm just going to put in one price i'm not going to make it a variable product even though it probably is because there should be different sizes so i'm just going to put in 19.46 and we won't put it on sale and i'm not going to do the variables or anything like that but that's all you have to do you have to link the product to the product url page and then you can put in your text and then the price so that people can see it and then we can put in an image right here i didn't download the amazon images so i'm just going to use one of these so let's go with i don't know let's go with this one right here and i won't add a product gallery because we don't really need to this is just an example of showing you how to use the product data section for affiliate products so i'm going to come up here and click publish and then we're going to go and check out the product page and once the product is published let's click on this link right here and you can see right here we have our product page and we have a button right here that says buy from amazon so if i click on this check out what happens it redirects me to the amazon website right over here and then i can just select my size add it to my shopping cart and check out and then i think amazon has a cookie that will link people back to my account so i will get a small little commission so you can see how easy it is to create an affiliate product again all you have to do is just go into the edit product page and then down in the product data section select affiliate products and then use the affiliate link right over here so that when someone uses it you get credit so again you can see all the different types of products that you can create simple products variable products affiliate products and even group products so again if you guys want to go ahead and pause the video to create whatever type of products that you want to create and then once you're ready push play and we'll talk about the product layout pages and the store page that we can customize with a sidebar and some widgets so what i'm going to do really quickly is i'm also going to pause from recording to create some additional products for my own ecommerce website that we're making just to fill everything out so i'll see you in just a few minutes and welcome back so i'm on the shop page and you can see right here that i created a bunch of different custom products for my online store that i'm making and if you guys pause the video to create some additional products that's awesome if you didn't you can always go and create some more later but right now what we're going to do is move on and show you how to customize the product page and also your shop page so on the shop page right here you can see that we have some widgets in our sidebar over here so we have a product categories widget filter by price and then recently viewed products and this is a sidebar that shows up on the shop page and i can show you how to customize this in the widgets page but first what i want to do is just go to a product page and just show you the layout for the product page so i'm going to click on this product and it's going to bring me to this page right here and what you're going to notice is that we don't have a sidebar nothing on the right-hand side and nothing on the left-hand side just our image and our product details if you guys like that sidebar what you can do is go into the customize page and change the product layout so if you're on a product page right now you can click on customize or the product page link and if you're on your wordpress dashboard let me just show you again that we're going to go back to the wordpress dashboard and i'll show you how to go to the theme settings so all you have to do is hover over appearance and then click on customize and once you're on the theme settings all you have to do is click on woocommerce and then click on product page and you'll come in here and this is where you can choose your product layout so what i want to do is because i have a header menu up here i'm going to click on the shop page and then i'm going to click on a product just to bring me to a product page and now you can see that i have a preview of a product page and what we can do is just choose the layout option that we want so i can choose this one right here and check out what it looks like and you can see that the sidebar shows up over there maybe i like this one and if i do then i can just select this one so it's really up to you you can play around with this stuff and i will show you how you can customize the sidebar in just a few seconds but let me just go through the rest of this tab really quickly because the one that i like is the no sidebar option but i'm going to select this one for now just so that we can customize it and i'll come back in here later and change the product layout down here in the product header you can change how the layout looks for your header for the product so we can select this and you can see that it just changes where you have the category over here and then in the gallery section if you want to change how your gallery looks so instead of having the images down here you can select this option to have the images show up on the side over here so really it's just personal preference and it just depends on the design that you want for your own product pages and again there are some additional options down here so you can change the text alignment if you want and a bunch of other stuff so i'll let you play around with this this is where you go to customize the product page what i'm going to do is just select one of these options with the sidebar right now and click on the save button just so that we can go in and customize the stuff so i'm going to close this and back on the wordpress dashboard i want to go back down to the appearance tab hover over that and this time around i want to click on widgets and once you come to this page right here what you're going to see are some available widgets on the left hand side that you can just add to your sidebars and we have the sidebar right here for the pages and blog posts and then the shop sidebar for the online store and then the product page is going to have the product sidebar right here and you can also customize your footers so right now we're just adding some widgets to the product sidebar if that's what you want for your product page so i'm going to come in here and just add two of them i'm going to come down and add the recently viewed products you can click and drag this up to the product sidebar or you can just click on this arrow to open this up and then just select the product sidebar which is where we want to put it and then click add widget and you should see it get added right here and then you can change the number of products that you want to show right over there so maybe we'll just type in 6 right there and you can change the title if you want and then i'm going to come down and find the product tag cloud and just add this one also so you can see that i have two widgets in my product sidebar and i want to click save right here if i edit any of them and now we can go to the online store and we can just click on this product right here and once the product page loads you can see now we have our sidebar with our widgets that we just inserted just like that so that's pretty much all you have to do to customize the sidebar and you can do the same with the online store or the shop page by customizing the shop sidebar so there are already some widgets if you want to come in here and delete them you can otherwise you can add some more and again what you can see is over here on the shop page once it loads that we have a sidebar right here so we have the recently viewed products we have filter by price and then our categories and whatever else that we have over here which is added by default and you can rearrange these just by clicking and moving them around if you want okay so if you do make any changes go ahead and make sure that you click the save button but this is pretty much all you have to do for the product sidebar and also for the shop page and the same with the sidebar so we're going to go over blog post pretty soon so if your web page has a blog post layout with a sidebar you want to come back in here and customize this section with whatever widgets that you want so i'll remind you about that but we probably won't go over how to customize it or what we do in this video tutorial again because we don't need to cover it it's pretty simple but just remember that there is a sidebar option for blog posts and pages that just have a sidebar okay so just remember if you do want to customize the product layout page what you can do is just go to the product page so click on a product and then at the top over here you can click on customize or you can click on product page and it'll bring you right to the product layout tab so you can see right here that you can choose whatever layout that you want and i think i might just keep it with the left sidebar it actually looks pretty nice so this was the one that we used earlier the no sidebar option but i think i'm going to go with the left sidebar option now so let me know what you guys think or let me know what you guys choose if you do make any changes click on the publish button right here and then we are good to go so now let's move on to the next step so now what i want to do is i want to go back to the home page just to make sure that everything looks good right now and then we can move on and create some blog posts so i'm going to close the theme settings and we should come back to our website right here i'm going to click on the logo to go back to the home page and once your home page loads if we come down to the featured product section we should see some products right here because we created some products that we selected as featured products to show up on the home page in this section so that looks pretty good and if we come down to the featured category section you should see the category names right here and the number of products but the problem is we have an uncategorized option which we want to remove because that doesn't seem professional and we also don't have any thumbnails or images for the section so we want to go and insert those for these different categories so let's do that first before we come down and show you how to create some blog posts so what we're going to do is show you how to customize the categories for your ecommerce website so let's go back to the wordpress dashboard and once you come back to the wordpress dashboard before we actually move on i just want to note that i think we're probably more than halfway done with this video tutorial there's really not much left to do so i hope you guys are excited i hope you guys are looking forward to having your own online store and making a bunch of money and hopefully this video tutorial is helping you guys so i'm on the demo website right here and i just want to show you guys what we're going to be doing right now so again we had the featured product section already populated and what we have to do now is we need to add thumbnails or images for our product categories so this looks a lot better than those placeholders so what we're going to do is on the dashboard right here for our wordpress website we're going to hover over products and we're going to go and click on categories so on the product categories page what you're going to see is a list of all your categories right here and you can always add more if you want what we're going to do first is we need to remove the uncategorized option that shows up because that just doesn't look that professional so what we want to do is make another one the default and it doesn't really matter which one you make so i'm just going to hover over the top one over here and click make default and once everything is updated you should see the question mark move and if you hover over it says this is the default category and it cannot be deleted so now what we can do is we can delete the uncategorized option so it doesn't show up so i'm just going to click delete right here and just click ok and you should see it get removed just like that and now all we have to do is go into each of these and upload a thumbnail image and that's pretty much it so i'm just going to do this one time and then you can upload thumbnails for all your other categories on your own okay so let's go to the top one right here and just click on the edit button and once you come to the first edit category for whatever category name that you have all we have to do is come down to the bottom and down here where it says thumbnail we can click on this button that says upload image and once you come into the media library you can use any of the demo images or you can upload your own images using the upload files tab so i'm not going to waste too much time i'm just going to select this image and click use image and you should see it update right there and then we can just click on the update button and pretty much that's it so we can go back to our categories right here and what you guys can do is pause the video and then upload thumbnails to all your different categories and then once you're ready push play we'll go and check it out on the home page and then we're gonna move on to creating blog posts so i'll see you in probably just a minute or two so i'll see you very very soon all right and welcome back so what i did was i added some thumbnails for the product categories and now i'm just going to go and check out the ecommerce website so i'm going to click on visit site and once the online store website loads we're going to come down to the featured category section and now we have our thumbnails and when we hover over it looks pretty good and if you guys have more than four then you can scroll through them just like this so that looks really really good and now what we're gonna do is we're going to update our blog post section so there are some default blog posts here that we want to get rid of and then what we want to do is we want to have a blog page that ends up looking like this so we're going to have a sidebar and then we'll have a few different blog posts with thumbnails and excerpts and people can click on them and they'll go to the blog pages which look like this so you can see right here we have our content and then a comment section below so let's go back to the ecommerce website that we're learning how to make and the first thing we want to do is delete the default blog post so i'm going to go back to the wordpress dashboard and once we're back on the wordpress dashboard let's hover over posts and click on all posts and you can see right here that there are some default blog posts and this is because we imported all the demo content so what i'm going to do is just check this box at the top to select everything and then go into this drop down and click on move to trash and click apply and once everything is deleted we are good to go and you can click on the add new button to create a blog post you can hover over new and click on post or what you can do is just come down here and click on add new under the post tab and once you're on the blog post page all you have to do to add a blog post is putting your title right here and then you can type in your text right here and if you click into this area you also have this plus button so you can add a block and there are a few blocks here and you can click on browse all and you should see all of your different modules here that you can add and when you hover over them you can see what they are so if you want to add an image or a slideshow or a gallery you can do that just by clicking and inserting just like this okay so what i'm going to do is just create a basic blog for you guys and then you guys can pause the video and create some additional ones just know on your homepage that you're going to be showing three blog posts so you probably want to type out three so that it doesn't look weird so what i'm going to do is just go to the demo website and just take some of the text over here and this is just to save some time so i'm going to come back to the ecommerce website paste that in right here and then i'll come down to the bottom and just take this text and if you want to format this text again just go to your theme settings and that's where you can do all the customizations and everything like that so that's all i'm going to do i'm just going to type this in just like this and you can always format this stuff however you want so i'm going to just unbold that and then for the featured image if you want to have a featured image you want to click on the post tab right here and then down here in featured image click on that and then just click to add an image and set feature product right here and you should see the media library and i'm just going to select this image right here and click set and now what you can do is you can add an excerpt if you want otherwise it's just going to take some of the text in your first paragraph and you can also add categories and tags if you want also so what you have to do once you create your blog post is just click on the publish button right here and then click on it again to publish it and now what we can do is we can go and check it out so i'm going to click on view post and you can see the blog post right here so i'm going to talk about how you can change the author name in just a few seconds but if you guys want to go and create some additional blog posts you can i'm not going to do this again with you because it's really really easy but if you guys want to change the author name let me show you how to do that we're going to go to our wordpress dashboard so hover over your website name and click on dashboard and once you come back to the wordpress dashboard come down on the left hand side to users hover over that and click on all users and you should see your username right here and you can always add some additional ones if you want other people to access your website so i'll let you guys do that on your own but let's go and click on the edit button right here and on the profile page right here this is for your admin user so what you can do is you can change the name right here so i can type in jameson and maybe my last initial and then my nickname i'm going to type in james k and then what i can do right here is display publicly as i can come in and select how i want my name to show up so i'm just going to use this and then i can change my email right here for this user if i want to and you can put in a bio and a profile picture if you want it's called a gravatar so you can click on this and do that what you probably want to do and i don't know if we talked about this earlier is you probably want to change your password right now or at least sometimes to secure your website so you can do that for the admin user just by clicking on set new password and then you can use the strong password right here or you can create your own and then what you want to do is just save it and then you probably want to log out and all that stuff but that's pretty much all you have to do and then come down to the bottom and just click on the update button right over here so once the name is updated now if we go back to our blog post we should see a difference so i'm going to click on all posts and i'm going to click on view for my blog post and once you come back to the blog page now you can see that the author name is my name instead of the admin user so if you guys want you can pause the video to create some additional blog posts what i want to do really quickly is show you how you can customize the layout for this page and also your blog post page and also remind you guys that you can go into the widgets page to customize the sidebar so if you guys want to change the layout for the blog post page what you want to do is hover over customize and go ahead and click on that and once you come to the theme settings all we have to do is go into the blog tab right here and you have the blog layout this is for the main blog page so let me show you on the demo website because i already have a bunch of blog posts that we have the right sidebar option here and then we have all of our blog posts just a line like this so you have different options here you can have the no sidebar option or the left sidebar and then over here for the post layout you can choose how you want the grid to look also so we just have them lined up one by one on top of each other so you can customize it however you want and then for the blog post like this individual blog post you want to come to the single post open this up and then you can choose your options over here so if you want to change stuff you can just click on this and then you can see what it looks like when you update it so again it's really up to you and you can also select what shows up on the blog page so if you want to uncheck any of these you can do that on your own but that's pretty much it and if you do make any changes click on the publish button right here okay so what i'm going to do really quickly is probably create two or three more blog posts just to fill out the home page because if i go to the preview page of the homepage what you'll notice is down here at the bottom we have a blog post section and right now i only have one blog post so i want to add these and then what we're going to do is come in and connect instagram to our homepage and then we'll move on to do some other stuff and we'll wrap up this video tutorial on how to make an ecommerce website so i'm going to take a pause and maybe you guys can do the same to create some blog posts and then i'll see you in just a few minutes and welcome back so you can see i added two blog posts and i have a draft one right here and i just wanted to show you how you can use the blocks to add an image gallery and there's also a way to use the ux builder to customize your blog post also so i have the draft blog post right here and first i'm going to show you how to add a block so if i click to start a new paragraph or section we can click on the plus button right here and then we have the gallery right here but we can click on browse all and you should see the blocks right here and i'm just going to click on the image gallery but if you want to add a video or something else you can do that too so we'll click on this and then we can click on select images and go to the media library and i'm just going to choose some random images just as an example and then we're going to open up the ux page builder after this and show you how you can also add another gallery so you can see that the images show up here and we can click and rearrange these if we want and we can add a caption and we can click insert and you should see the gallery show up like this and it might not be to your liking but first let me just show you what it looks like so i'm going to click on the publish button really quickly and let's go and check it out so we can click on view posts and here's our blog post and if i come down here you can see that we have the image gallery and if you don't like this i'm going to go back to the edit page really quickly and just remove this so i'm going to come back into the blog post and down here i'm going to click on this section and then just click here and click remove and i'm going to update this again and once it's updated i'm going to go back to the view post and once we come to this page you can see that the blog post is gone but what i want to do is i want to hover over edit posts and now i want to edit with the ux page builder so i'm going to open that up and once it shows up right here what you're going to see is our blog post section and what we can do is add an element so we can come in here and we can type in gallery and you can see this one right here wp gallery this is the one i want to insert and then what we can do is we can customize it some more so you can see that we can have four columns if we want and we can also link this to another page or no pages so i'm going to click none right there and there's some additional options here but what we can do is click on edit gallery and we can go into our media library and what we can do is click add to gallery so we can come in here and we can find the media library and again we can just select the images that we want so again i'm going to select eight right here and click add to gallery and we're going to click update and now you can see that they are customized in a row of four instead of the default setting where we had three and three and then those two large options so this is just another way to customize your blog post and once you click update we are good to go i'm going to close out of this just to show you what the blog post looks like now so we're back on this page and if i scroll down now everything looks just like that so you do have a few different options and it's really up to you but again i just wanted to show you how to do this because i want to make sure that you know how to really customize your ecommerce website okay so if you guys are ready let's go to the home page just to make sure that our blog post section populates now so i'm going to come down here and scroll down a little bit more and now we have our blog posts so this is looking really good and so now what i want to do is i want to show you how to integrate instagram because this is a little confusing for some people that use the flatsome theme so let's just talk about how to integrate instagram so what we're going to do is first we're going to turn on the page builder so hover over edit page and click on edit with the ux page builder and once the ux page builder loads for the flatsome theme let's click on the instagram feed and just double click this to open it up and we're going to go through our settings really quickly so what you want to do is type in your username for your instagram account and then we're going to leave this as 10 images for this section and i want to come down to the layout option and change this to the row settings and then i want to go in here and select the container and then i'm going to go with small and change the number of columns to five so once i do that you won't see the instagram feed show up yet because we need to connect it and everything like that so what we can do first is click apply and click update to save everything and i'm going to link you to the instructions on how to connect the instagram and facebook account but really what you want to do is go into your instagram and go into your settings and then change the account from personal to business so you can click on this link to do that and then what you're going to do is you're going to go to your facebook account and link instagram to the facebook business page so i do have facebook opened up so i'm going to show you how to do that you have to open up a new tab and go to your facebook page which should be a business page and once you do what we're going to do is on the side over here the left hand side we're gonna come down to the settings tab click on that and then in this drop down over here you should see instagram if you click on that there's gonna be a button right here to connect to your instagram go ahead and click on that and then log into your instagram account and everything should be connected and then you're good to go then what you're then you should be good to go then what you're going to do is go back to the flatsome theme and we already saved everything for our instagram feed because we set everything up so we're going to close out of this and we're going to go back to the wordpress dashboard so hover over your website name click on dashboard and then once you come back to the ecommerce or wordpress dashboard we're going to come down to flatsome hover over that and then click on the advanced tab and once you come to the flatsome theme advanced options just come down to instagram and click on that and then all you're going to do is you're going to log into facebook to connect the instagram business account so just click log in with facebook and i'm just going to click on continue and then what you're going to see is a pop-up that says connect your instagram business accounts and if you have more than one then you can select which one you want to use i'm just going to check this one and click on connect and now you should see it right here and you can always disconnect a little bit later if you want i'm going to click on save changes and then now we can go to our home page and check it out so once the flatsome theme ecommerce website loads we can just scroll down and now you should see the instagram feed right over here so the hardest thing for you is probably going to your instagram account which is going to be probably on your phone and then just go into your settings and then you want to change the account from personal to business so again if you just click on this link right here it's going to show you how to do that so you have all the instructions right here i will link you to this in the video description under this section so you can check out all the stuff and once you link it then you just want to go to facebook and connect it and then go back to the flatsome theme and integrate it so that's an easy way of saying that's all it takes to add the instagram account feed to your website okay so pretty much we are done with the homepage for now and we will go over the menu and the footer a little bit later but first what we want to do is we're going to talk about two more pages i'm going to create which are the about page and the contact page so this is the demo ecommerce website and let me just show you the about page really quickly and what you can see right here is the template about page that we're going to go in and customize so you can always add some additional blocks or modules but we're just going to go in here and edit the template so we're going to go back to our ecommerce website and we're going to go to the dashboard and find this page so click on dashboard and once you come back to the wordpress dashboard we're going to go to our pages list so hover over that click on all pages and what you're going to see are all of the demo content pages and we're going to delete most of these a little bit later but you can always use these as references for how to create those pages or even templates to customize for your own website but right now what we're going to do is just come into the search box and type in about and push enter and you should see the about page show up right here so what we're going to do is turn on the ux page builder and customize it so click on the edit with ux builder button and once the page builder loads you should see the about page template right here and it's really easy all we're going to do is just come in and change a few things and maybe add a background image so we have our banner section which is this section and then we have our row section down here and we can expand the stuff just so that we can see all the different modules or the different blocks over here so when we hover over this we can see what we're trying to edit so the first thing that we're going to do is come into the banner section right here double click on this and we're going to add a background image so you can change the height if you want i'm just going to remove the background image and click on select media and in my media library i'm going to select this image as the background image and click on use this image and you should see it pop up just like this and pretty much that's all we have to do if you want to add an overlay you can there's already one added for you and you can also just have a background color if you want that and you can change the width and you can also link the section if you want but we're not going to do that so we're going to click apply right here and just click update just to save everything now we're going to come into the text box i'm going to double click over here open this up and i want to change this and also the text down here so i think i have everything already copied from the demo website so i'm just going to paste it in just like that and you can just highlight whatever you want and then you can format the text you also have the font size right here and then you can change this text too so go ahead and do that if you guys want and then we're gonna click ok right there and if you guys are on the text editor or text editing section right here you can modify your text here with some html or you can always just open this up and you can edit it there you can also change the font size and the alignment and the color over here if you need to but we're just going to click back right here and then what we're going to do is come down to the row section over here so what i want to do is first i'm going to come into this section and just double click on the text box so i'm just gonna so i'm just gonna come in here and delete this and i'm gonna paste in my text right here and i'm going to highlight this and just change this to 120 and then i'm going to center this just like that and you do have other options here to customize things however you want i'm just going to click ok right there and i'll leave the font color as is so i'm not going to change that i'll click apply right here and just click update just to save everything and then what we're going to do is come down to this section and just add some team members but just remember you can always come down here and you can add another section if you want to add another text box or images or anything like that so let me show you how to add a team member we're just going to double click this and open up the edit section right here and what we can do is add our profile image for this employee right here we're going to click remove and then click on select media and we can just go into the media library and just select a profile image and then if you want to change the name you can do that right here so there should be a name already created for you you can change the title right here and then if you want to add or delete social icons that show up right here you want to put in the urls and these are active static links with the hashtags so that's why the button shows up but if we remove one then you can see that it just disappears you can also link the profile section to another page if you have a dedicated page for this employee just put in the url right over here okay so i'm going to click apply right here and we'll go back to this section and what you're going to notice if you expand this is there's a text module right here to change the description right here so you can just double click on it and then put in whatever text that you want all right so pretty much that's all you have to do and you can do it a few different times over here i'm not going to do this with you because it's just the same steps you're just going to change the image change the name and then put in the urls for your social media buttons so what i'm going to do with the power of video editing is i'm going to just update this section right now and so what i did was i just created some additional employee profiles right over here just inputted their profile photo and just changed the number of social media buttons right here and i didn't customize it too much because this is just a demo ecommerce website so we are good to go with the about page let me know if you guys need any help with customizing this page some more but what i want you guys to do if you guys are ready is just click the update button to save everything and then once you're ready click on the x to exit out of this and you should be brought back to the pages list right here but if you need to you can hover over pages and click on all pages and now what we're going to do is we're going to move on and show you how to customize the contact page right here so we're going to have a map with our address if you have one we'll have the frequently asked questions section right here and we'll insert a contact form over here so if you guys want to do that what we can do is go to the pages list right here and i want you to search for the contact page so just type that in and push enter and you should see the page right here and again we are using a template so we want to just click on the edit with the ux builder and once you see the ux builder for the contact page what you'll notice is that we have a google map over here with an address text box and then we have an accordion feature with some questions and answers and then this is where we have to insert our contact form short code so we have to go and create a contact form and then get the short code so we're going to do that in just a bit but first what i want to do is i want to customize this map so what we can do is just double click on this to open it up and you can change the height if you want and for our location what we want to do is put in the latitude and the longitude so what i want you to do is open up a new tab and what i want you to do is go to maps.google.com and put in your address and what you're going to do is find the pin and just right click on this and you'll get this little pop-up and you want to copy the latitude and the longitude so click on that and then you can paste it wherever you can paste it right here if you need to or write it down but what you want to do is paste in the latitude and the longitude right here so that you see a pin right here and once you do that you can come into this box right here double click it to add your address and your availability or anything like that it's up to you and we are going to be adding our google api key so that we get rid of for developmental purposes and the color of this map so that actually is visible for our visitors in just a little bit so we do have directions here and we will walk through that after we're done customizing this page so let's go back to the contact us page for our online store and let's click on the apply button if you don't want to change anything else so you can see right here that we have a bunch of different stuff so if we scroll down this is the frequently asked questions section so if you want to change the title just click on this and you can change the title right there you can click into the text box and you can change anything that is written right here and then down here this is the accordion so this is where you can go to add your questions and answers you can see when you click on it it opens up and you see the text box with the answer so when you click on an accordion panel you can change the question and then you can just click into the text box and then you can change the answer right here so you can do that for each of these you can just click and then you can add the question and then click right here and then add the answer if you want to remove any of these then you just want to go to the main page and you have all of your accordions over here you can see when you hover over them and what you can do is just right click and you can just delete it just like that okay so i'll let you guys do that on your own and the other thing that we want to do is over here we want to insert a contact form so you can see on the demo website that we have a contact form just like this so if you guys want to do that let's go to our wordpress dashboard so i'm going to use this tab right here and just type in my website and once you're back on the wordpress dashboard all we're going to do is come down to the contact tab and click on add new and once you come to this page we're just going to type in contact form for the title and then we're going to take the short code that you see right here copy that and then go to the form tab and we actually don't need to change anything here but we're just going to paste this in and you can change the submit button to something else if you want but that's pretty much it so we're just going to click save right here and once it's saved we can just take the short code right here so highlight this and copy it and then go back to the contact form and then just click to open up this text right here and then open up the text editor and we're just going to delete this and paste in our short code and click ok and then click apply and then click update and that's pretty much all we have to do so let's go and exit out of the ux page builder and once we come back to this page right here let's go and check out the page really quickly so let's click on view and once the page loads this is what we should see right now so we have our map section which doesn't show up because we haven't created our api key but we have our frequently asked questions and then our contact form right here so this is looking pretty good and now all we have to do is we need to follow the directions to add our google map so the first thing that we have to do is we need to go and create an api key so if you guys want i'm going to link you to this page in the video description for this section so go ahead and click on the link and then you'll come to this page and we want to click on this link right here that says generate api key and it's going to open up this google page right over here and you're going to come to this page right here to get your api key and all you have to do is come down here and you can read the directions but you want to just go to the project selector right here click on that and on this page right here there's this tab called api and services just hover over it and then click on credentials and once you come to this page right here just click on create credentials and then click on api key and pretty much that's it all you have to do is just copy this so you can highlight it and click copy and then just click close and then we can go back to our wordpress website and then we can go back to our wordpress website and what we want to do is we want to go to the flat some theme options hover over that and then click on advanced and you can do this in the wordpress dashboard too and then down here it says google apis go ahead and click on that and we can just paste in our new api key right here and you want to make sure that you have your own so don't type in this one i think it has to be specific to your own website and then click save changes right there and once that's updated now what we're going to do is go back to the contact page just to make sure that everything looks correct so again i'm going to hover over pages and click on that and we want to search for the page because we haven't deleted everything yet but we will before the end of this video tutorial and once we find the contact page right here i'm just going to click on view and you should see the contact page load and we have our map right here and if you want to customize the map a little bit then what you can do is just go back and turn on the ux page builder and once you see the contact page you can just double click on the map and then what you can do is come into the map section and you can customize it however you want so if we want to change the color we can just click here and you can see that it gets a little darker or a different color it's really up to you so i'm going to just cancel that but again you do have that option and then over here in the zoom you can also just zoom out if you wanted to also so maybe something like 16 might be better but it's really up to you okay so i'm going to click apply and click update and pretty much we are good to go with the contact page so now what i want to do is i want to close out of this and you can see right here i'm on the ecommerce homepage and now what we're going to do is we're going to come down and learn how to customize our footer section so these are all different widgets and what we want to do is make sure that we insert our signup form for our newsletter over here if you guys want so we're going to go to the widgets page so hover over your website name and then just click on widgets and once you're on the widgets page what we're going to be doing is customizing the footer 2. so over here we already have the widgets installed because this is from the demo template and we're probably going to keep everything as is but i want to talk about the flats and blocks so you can see there is an about us one and then also one down here for the newsletter and if we open these up you'll notice that it has this block drop down and you can select whatever you want and same with the newsletter and you're probably a little confused right now but i'm going to explain this in more detail in just a few seconds so if you guys want to remove any of these other ones just recent post one or the product tags then you can just go in here and click delete i'm going to leave them so i'm going to so i'm just going to focus on the flats and blocks for the about us and the newsletter so the developers of the flatsome theme have created some templates for us to choose from and we can go in and customize them so over here on the left hand side you should see ux blocks let's click on this link right here and you're going to see a bunch of different blocks that are pre-made for you and you can always go and create your own using the ux builder but over here we have the footer about us so what we want to do is go ahead and click on edit with the ux builder so that we can go in and customize this pre-made block so you can see right here that this is the block and you want to double click this and then you can just type in whatever text you want so maybe i'll just type in something and i'll paste in some random gibberish just like that and click ok and then what we can do is you can format this however you want you already know how to use the ux page builder and then we can come into the follow icons and double click this and then we can just add or remove whatever icons that we want so maybe i'll just remove the pinterest one and then click apply and then click update and then we can just close this so after you update the footer about us and the widgets and let me just go and open that up in a new tab so that you can see all you have to do is just go and select that block and it's going to be updated so again in the footer two let's just open this and we just customized this one right here so it's already selected and whatever changes we made in the ux block builder is going to show up now in our footer section so we can do the same with the newsletter so right over here we have the footer newsletter let's open this up with the edit with the ux builder and once you see the ux page builder what we can do is just double click on the text block right here and we can remove all this and update it with whatever we want to type in so i'll just type in something like make sure you subscribe to our newsletter and i'm going to make that one word and then i'll click ok right here and then i'll go back and now to add our newsletter we can just add a contact form element so click on add elements and we can just type in form right here and you should see form cf7 just select that and all we have to do is come into the drop down and select the contact form that we want to add so i think the one that we want is the newsletter one so you can see that it's like this if you guys want newsletter two then just select that and you'll see that it updates and this one is actually better to have this on top and this on bottom so i'm going to click apply right here and then click update and then we should be good to go and again all you have to do is make sure in your widgets that you select that block so we can come in here and we have that selected so we don't need to make any changes if you do you can click the save button but now we can go back to our home page and check out our footer and once you're back on the online store that you're making let's come down to the footer section and just check to make sure that everything looks right so you can see that we have this updated and now we have our newsletter sign up and again i will show you how to integrate this with constant contact or mailchimp or any other service in another video so make sure that you subscribe to the nyc tech club youtube channel so that you get alerted for that and over here you can see that we have our bottom footer with some different types of icons for payment options let me show you where you can change that and we can also talk about how you can update the menu over here so if you guys want to change what shows up right here for these icons for payment options just go to the customize tab and click on that and once you're on the theme settings all we have to do is click on woocommerce and then go into the payment icons and you should see the icons right here and to make them disappear just click on the eyeball and when it's not dark blue then you can see that it doesn't show up over here and if again you want to change the copyright what you can do is go back into the footer right here and just scroll down to the absolute footer and then you can update it here if you want to change the footer menu items i'm going to show you how to do that when we go through creating our header menu so i'm going to click on publish right here just to save the changes for the payment icons and let's actually move on to the menu stuff so we're going to close out of this and now what i want to do is move on to show you how to customize the menu that you see right over here and also the top bar menu and then at the bottom we have our footer menu way down here but before we do that we need to clean up our ecommerce website because we have a lot of demo content and pages that we don't need and we also need to update our urls so we're going to go and do that first so what i want you to do is hover over your website name and then go back to the wordpress dashboard and once you're back on the wordpress dashboard the first thing that we're going to do is we're going to come down to our pages hover over that and click on all pages so once we come to the pages list right here you might hear some christmas music outside because it is about christmas time as i'm recording this and there's someone on their saxophone on the sidewalk outside playing music for people so i'm gonna keep recording but i wanted to let you guys know if you hear that background noise let me know hopefully it doesn't bother you but we are almost done with this video tutorial so what we're going to do on this page over here or what we're going to do is we're going to clean everything up because we have a bunch of demo content that we don't really need so we're going to check all of these boxes at the top and then we want to uncheck a few of these so i'm going to uncheck the blog page cart page checkout page and then i'll scroll down here and i'll uncheck the home page also once we do that what we can do is just come up here and click move to trash and then click apply so once those pages are moved to the trash again we want to come up here and just select this box to check everything and we are going to leave about 11 or 12 pages so we're going to have to uncheck some but this is just the easiest way to clean everything up so i'm going to scroll through this and just let you guys know if there's anything else on this page that we need to uncheck and there isn't so we just want to make sure that we have the blog cart and the checkout page and then we can remove all of these ones so again we can go to the top and just click move to trash and click apply and now we should see an updated list and again we're going to check this box and i want to uncheck the blog cart checkout my account wishlist privacy policy and we can leave the sample page but we want to uncheck the shop page and the about page we want to uncheck i'll show you guys how to create the faq page so let's uncheck that one and then and we have the home page right here so we want to uncheck this one also so again you can see the home page and then the faq about shop page privacy policy wishlist my account checkout cart and blog page you can always add these pages back in the trash bin if you mess up but let's go and click apply to move everything to the trash and now we should see a list like this and what we're gonna do is again just check this box and i'm going to start from the bottom over here and just go up and see these pages so i'm going to uncheck starting from home faq about shop and then these ones right here so if you want you can pause video to see the pages that we're leaving up on the page over here and then we're going to remove the other ones to the trash bin and now we should have 24 pages left and we can just check this box again and we'll just clear out the list and i will show you the pages list after we clean everything out but i want to make sure that we do this together just so that we make sure that we're all on the same page so everything else i'm going to leave and we'll just come down here click move to trash and click apply and now we have 14 pages and i think there's only a few pages that we need to check off so hotspot the instagram logo price and search box and let me just go through this list everything else looks like we're going to keep so we can just click move to trash and click apply so now you should see nine published pages and we're going to create a terms and conditions page and i think we're missing the track my order page so i'm going to go to the trash bin really quickly and i'm going to type in track right here so go ahead and type that in and you should see the page right here and we want to restore this so just click on this link right here and now we can go to the publish list right here and now we can go to the all link right at the top so now this is the official list of pages that we should have right now so you can see blog cart check out my account wishlist privacy policy shop track my order about faq and home if you have these then you are good to go and we're going to update our urls in the next section and now what we're going to do is make sure that our urls are correct so i know from making this website that the only ones that we need to focus on are the ones that say parent pages over here so about faq and home if you want to publish the track your order and the privacy policy page just open up the link by clicking on edit link and you're going to go to this page right here and then click on the publish button so wordpress creates the privacy policy page for you and you want to make sure that you customize it so that it fits your website or business and then you publish that and then you have a link in your footer or somewhere like that so same with the track my order page if you want to publish this there is some woocommerce short code that you want to make sure that is included so you don't need to change anything there all you have to do is click on the publish button so we're going to focus on these three tabs right here the about page the faq and the home page so for each of these in the page tab you're going to see the permalink section and what you're going to notice is that the url is a long url and what we want to do is we want to fix this so we need to come down to the page attributes and we need to remove the parent page so all we have to do is click the x right here and then we can click out of this and then we can click on the update button and once it's updated if we come back up to the permalink you can see that it's clean right here and this is what we want so we're going to do that with the faq page too and we haven't actually created this page but i'm going to show you how to do that in the next section but we want to just come down to the parent page and again click the x to remove that and then click update and then we can come up and you should see that it looks a lot cleaner and then we'll do the same with the home page so you can see right here that all we have to do is just come down and click the x and then click update so if you have any weird urls that's all you really need to do because the flatsome developers created parent pages that linked all your other pages with the demo content okay so pretty much that's all we have to do and just make sure that you do that and then once you're ready let's move on and show you how to create your faq page and the terms and conditions page and now what we're going to do is go and customize the faq page so if you want to have that on your ecommerce website hover over the faq page and then click on edit with the ux builder and once you see the ux page builder what we want to do is we want to customize this page so you can see right here we have a text box if we open this up we can just put in our text so i'm going to paste in some text from the demo website so it just says if you have a question you can get it answered if you come over here and so if you need to pause the video to type in whatever you guys want you can also add a custom title if you want and i'm going to click ok right here and then we can go back and you'll see that we have a block right here so you can see that it says block faq accordion and nothing shows up so what we're going to do is go and delete this click on the wheel and then just click delete and then click on the add elements button and i want you to search for the accordion so you can scroll down if you want or you can just type in acc and you should see it show up right here go ahead and click on this and you're going to see it pop up right here and what we can do is we can go back and you can add as many questions as you want so you can see in the accordion panel when we double click on this it opens up this section right here and what we can do is type in our question so i'm going to go to the demo website and i have the ux builder open right here i'm just going to click on the first question and just copy this because it's going to save some time and then i'm going to paste it in right here and so we have our question and then what we can do is we can just click and open this up and we can add a text box right here so click on the plus button and then what we can do is come down to the content section and just find the text block and click on that and you can see that it gets added right here and you can put in whatever type that you want we're just going to go with the paragraph option so click apply and then we can open up the text editor and then i'm going to go to the demo website to get the answer right here so we'll just copy this and then paste it in right over here and that's pretty much all we have to do so we can do it a few more times i'm going to go to the second accordion right here and then again go into the demo website and just copy the question and then paste it in right here and then we want to add a text block so again click on the plus button and then click on the text and then paragraph option right here and then you can open up the text editor and then put in your question or the answer so i'm going to click in here and just copy this again because it's just a lot faster than coming up with an answer on my own and then i'll do it one more time with you guys and then i'll show you how you can add some more questions so we have our third question right here we're just going to come right here and these questions are a little bit silly so if you do pause the video to actually read them you might get a little laugh out of them but that's up to you guys so i'm just going to take this last question copy it and paste it in i know i went a little fast right here but it's really easy again all you're going to do is paste in the question and then add an element which is going to be the text box and then choose the paragraph option and then you can just paste in or type in your answer right here and then once you do that click ok right there and then click apply and then you're back on this page right here i'm going to click update really quickly and so i can collapse these just to make it a little bit easier for you to see so if you want to add another question just click on this button right here and then you're going to get this added and you can see right here is where you can put in your question and then you can add another text box if you want to remove them just right click this and then click delete and then it's going to disappear just like that and so that's pretty much it super easy super basic i don't think this page needs to be too fancy but if you guys need any help you want to customize this more let me know in the comment section otherwise paste in the questions and answers that you want to and then make sure that you click on the update button right here to save everything and then once you're ready close out of this and we'll go and create one more page together and now what i want to do is create a terms and conditions page which we need for when people check out or when they're about to buy something so what we're going to do is create this page so let's click on add new and for this page let's just type in our page title so i'll type in terms and conditions right over here and you can come down and you can select the page template if you want over here i'm going to go and do that when we turn on the ux page builder so all we have to do is click on the publish button and once the page loads this is what you should see and we want to turn on the ux builder so hover over edit page and click on edit with the ux builder and once you come to this page right here we're just going to create a simple terms and conditions page that people can check out so we're going to add some elements so this is the first time that we're not using a template we're going to come in here and we'll just find the title element so we'll just search for title and click on this and then what we can do is add our title right here so i'll just type in terms and conditions and then what we can do if you want is you can center it and you have these other options also i think i'm just going to leave it to the left hand side with the normal option so you can also change the size if you want to but i won't do that i'm going to click apply right here and then all i'm going to do is come into the elements again and just add a text box over here so click on this and then we can choose the one that we want to use maybe i'll go with the paragraph with the headline right here and once we have this i'm going to click apply and then we can just double click to open this and i'm going to go to my demo website and just take this text right here and just paste it in so i'll just copy that and i'm going to paste that right here and for this first line maybe i'll come in here and change it to heading 3 just to make it a little bit larger and click ok and that's pretty much it so if you want to link your email then what you can do is come into the text editor and then just highlight the text that you want to link and then click on the insert edit link right here and then you can see it says mail 2 with the colon and that's pretty much all you have to do and now if someone clicks on that they're going to open up their email so that they can send you an email okay so you can customize this however you want i just want to make a basic terms and conditions page and save it so i'm going to click update right here and once we do that we want to go and set this page in our woocommerce settings so i'm going to close this and once we see the page right here we're going to go into our dashboard so hover over your website name and click on dashboard and once you're back on the wordpress dashboard we're just going to come into woocommerce and then click on settings and once you're on the woocommerce settings just go to the advanced tab and over here in the page setup you're going to see terms and conditions we just want to come in here and you can just type in terms right here and you should see your page go ahead and select that and that's going to set that page so that it shows up in the my account page or when people check out so we want to make sure that we set that and then just come down to the bottom and click save changes and pretty much that's all we have to do to set the terms and conditions page so now we can move on to the last step which is talking about our menus so our footer and header menu so what we want to do is we want to go to the menus page so hover over appearance and click on menus so once we're on the menus page right here you're gonna see two menus that are already created for you from the flatsome developers and right now we have a bunch of stuff that no longer exists because we moved a bunch of stuff to the trash so what i want to do is just delete these two menus and start from scratch so at the bottom over here click on delete menu and then click ok and we want to delete the secondary menu too so this is the menu that shows up in the top bar and the footer so we're going to click delete and click ok and once everything is deleted now what we want to do is just uncheck these boxes and we want to create our first menu which is going to be the header menu so i'm going to type in a header right there and click on create and once the header menu is created what i want to do is just select the pages that we want to show up in the header menu but when i was looking at this list of all the pages that we have i realize that we don't have the contact page in this list and i think that's because i might have deleted it so we want to go and add it back so let's go and do that really quickly because we should have everything in our trash can hover over pages and click on all pages and once you come to this page let's go to the trash link at the top and then over here i want to type in contact and just push enter and we should see it right here let's go and restore this page and once it's restored i'm going to go back to the all link right here and we want to just make sure that it looks correct so we want to go in and click edit and once we come to this page i want to just change the permalink because you can see that it has elements slash whatever so we're going to come down to the attribute section and just remove the parent page and then click on publish and click on publish again and so now our link should look good and i'm just going to go and check it out really quickly so everything looks great i don't know why i put that in the trash so i apologize about that but i'm going to go back to the menus page now so i'm just going to hover over my website name and then just click on menus right here so once we're back on the menu page right here we have our header menu created and i just want to select the main menu and what we can do is just come into the pages tab and click on view all and then just select the pages that you want to show up so i'm just going to select a few of these so i'll just add the home page the blog page about page contact page and the shop page so after you select the pages that you want to show up click add menu and they'll show up right here you can also create blog post links and then custom links if you come in here type in the url and the navigation label right here and just click add and in any of these you can change the label so you can just click and expand and change the name right here so instead of home we can type in something else and there are some other options so let me first just rearrange these so i'm going to move these up and then move this down and if you ever indent this stuff this makes it a drop down menu with a sub item of this item right here so we can go into the shop one right here just expand it and you'll see the navigation label and then what we're going to do is show you how to create a mega menu which i showed you on the demo website so when you hover over this it expands and looks really awesome just like this so we're going to do that in just a few minutes and then we're going to come in here and select that block to set that so again you can rename these if you want but this looks pretty good so i'm going to click on save right here and what we should also do before we go and check this out is we should also set this as the mobile menu just because we want to make sure that we have a menu for both of them so i'm going to select that and just click save one more time and i probably could have done that earlier but it's never too late to fix your website so i'm going to hover over my website name and click on visit site and just click leave page right here and once our ecommerce homepage loads you can see right here now we have our header menu and this looks pretty good and what we're going to do is create a mega menu over here and then we're also going to create a menu for the top bar and then when we come down to the bottom we're going to create one down here too so that's what we're going to do right now we're going to create our other menu so what we can do is hover over our website name and click on menus and once we come back to the menus page let's create a new menu so click on create a new menu and what we're going to do is just type in the name right here so i'll type in secondary and just select the footer and the top bar for where we're going to display it and then click on create menu and this is going to be pretty easy we're just going to go into view all for the pages and again just add a few of these links so i'm going to add the home blog privacy policy the about and then i'm going to come down and add the faq and maybe the contact page so i'll click add right here and once you see everything what we can do is just rearrange these so i can move this up here and maybe move the contact down here and for the blog post maybe i'll change the title to our stories just like that just to show you guys how that works and i'm going to click on the save menu button right there and now what we can do is just go and check it out to make sure that it looks good so now you can see we have our header menu and also our top bar menu up here and then if i scroll down to the bottom we should see the footer menu down here which looks pretty good so we have everything that we need and the last thing that we're going to do is i'm going to show you guys how to add this header menu which is a very cool feature that the flatsome theme has so if you want something like this we want to go back to our wordpress dashboard so just hover over your website name and click on dashboard and once we're back on the wordpress dashboard we're going to create a new ux block that we're going to save as our mega menu so over here hover over ux blocks and click on add new and what we're going to do is just type in the name right here so we can just type in mega menu and then we're going to publish this and once it's published we want to turn on the ux builder so click on this and once you come to the ux builder what you can do is add whatever you want to your new block and you can use this for the mega menu or what you can do is and once you come to the ux builder what i want you to do is click on add elements and you're going to see all your modules and blocks over here and you can click and add whatever you want but we don't actually need to do that because again what we're doing is we're using the flatsome theme and we're using as many shortcuts as we can so up here is the flatsome studio if you click on this what you're going to see are a bunch of pre-designed layouts and templates that you can just click and drag and use for whatever you want so we didn't have to talk about this earlier because we have been using templates but if you guys want to use any of these pre-made layouts or options you can also use these to customize your website so what we're going to do is just come down to the drop down mega menu so it's right down here just click on that and what you're going to see are a bunch of different menu options and you can preview them if you want just click on the link but this is the one that we want this is the one for the demo website so i'm just going to click on the import button and what it's going to ask is if you want to import the demo images and we're just going to say yes so we'll just click on start right here and we'll just wait for this to import and you should see it show up right here and now all we have to do is what we've done for all of our different pages and templates is just come in and customize the stuff however we want so we have two rows of menus and then two images that we can link to different pages also so remember this is for the shop tab so if i go to the demo website you can see right here that this is for the shop tab and what we have here are different category links for different pages for our different products so what we're going to do is go in and customize this so if you guys want you can just expand the columns right here and you can see all of the different options that we have inside so we have our menu links right here for this first column and then if we expanded this other one or we just click in here what you'll see is that you can change stuff here and then down at the bottom over here we have two more columns for the images so what i'm going to do is just show you how we can customize this stuff really easily and then we're pretty much done so i'm going to click on each one of these so for the first menu link i'm just going to click in here and then we can change the category name and i can just type in a category name right here so i'll type in cashmere and this is just a random name so don't hold me to it because i don't have a link for cashmere but over here what we can do is go into this drop down and we can add a label so you have sale or popular or new or hot or whatever you want and then down here in the link section this is where you're going to link the item so you can come in here and you can select a blog post or you can come into your category names and select one right here or what you can do is type in a url so if you guys want to know what your urls are for your categories we can come to our dashboard right here and this is a new tab and we can just come down to products and then click on categories and what you can do on the product categories page is you can just hover over this and if you click view right here it's gonna go to the long sleeves page for the categories and then you can just come in here and just copy this and then we can go into our mega menu right here and then we can just paste in the link but again just remember you do have that drop down if you don't put anything in here where you can actually select the category name and then all you have to do is click apply right here and then click update and that's all you have to do to edit your menu links and you can remove these if you want so we can just come in here and we can delete this and i can delete another one just like this and you can always add more just by clicking on add to menu just like that and then just selecting a menu link and then you'll see it show up right here and then you can put in the category name so really quickly what i'm going to do is just edit this section and also this section again all you have to do is just click in here you can change the menu link and then you can add your link right here and you can also delete whatever you want in these two columns so i'm going to do that really quickly just so that we can update this section and then we'll move on to the items on the right hand side okay so if you guys want pause the video to edit your menu items over here and then push play once you're ready and we'll move over here and welcome back so you can see right here i updated my links for the categories and i also deleted some of them and now what we're going to do is just move on to this section right here so what we can do is just click into this image box right here if you want to change the image from the default image that gets imported you can just click remove and then you can upload your own image you guys already know how to do that and you can also link this image if you just come down to this section right here you can put in a link so what we can do instead of having the hashtag there is i can come over here just copy this link and then come back here and paste that in and then what we can do is come down to the text box and you can update this on your own so i'll just leave that as is and then i'll come into the other image box right here and again you can remove this and edit the image and then for the link section i'm going to come in to this category page and just copy that link and paste that in right here and again you can update the text if you want but i'm not going to it's super easy to create a mega menu especially using the flatsome studio so once you guys are ready you want to click on the update button just to save everything and then you're good to go so now what we're going to do if you guys are ready is close out of the ux builder and we're going to go back to our menus page so that we can set this mega menu in our header menu so i'm going to click the x right here and once we come back to the wordpress dashboard we want to go back to the menu page so i'm going to hover over appearance and then click on menus and once you're on the menus page just make sure that you're in the header menu so if you need to select it go ahead and do that and you should see the structure right here and what we're going to do is come down to where we want to add the header menu so i want to add it into the shop page tab so i'm going to click and expand this and then right here where it says flats and menu items if we come in here into the ux block and go into this drop down we should see the mega menu option so just select that and then you can reveal this on the hover or click so you can select which one you want and what you want to do is you want to update the design so i'm going to go in here and i'm going to go with the full width option but you do have these other options some of them aren't going to really let you see the header menu so you want to select one of these so i'm going to go with the full width option and then we can just come up here collapse this and then we can click on the save menu button and pretty much that's all we have to do so once it's saved now let's go to our ecommerce website so hover over your website name and click on visit site and once the online store loads you can see we have our home page right here and i'm just going to show you that the mega menu does work when we hover over the shop tab so you can see we have all of our links right over here and you can go in and customize your own mega menu if you want so let me know if you guys have any questions about the mega menu or anything else but pretty much we are done learning how to make our own e-commerce website with the flatsome theme and wordpress so what i want to do is just run through a transaction with you guys really quickly but before i do that i do want to note that you can make coupon codes so on your wordpress dashboard over here if you ever want to make a coupon code for your visitor or customer just hover over woocommerce and then right here click on coupons and you can see right here that you might have this message that says the coupon section has actually moved to a marketing tab so that's fine if you don't hover over woocommerce you can just go to the marketing tab right over here and again click on coupons right there and all you have to do is just click on and once you come to this page right here if you see this notification that says coupon management has moved that just means that there's a new tab called marketing over here and you can just click on coupons and you'll come to this page instead of going through the woocommerce tab so it's all the same there's just a new tab right here okay so all you have to do to add a new coupon is click on add coupon or if this is your first coupon you can just click on create your first coupon and you'll come to this page right here and you can just type in your coupon code whatever that is and then you can just come down and you can choose the type of discount that you have if it's a fixed discount a percent or anything like that and then you can just put in the coupon amount and you can put one in the expires and click save and then share this coupon code with everyone that you want to okay so super easy again let me know if you guys have any questions but again we do have video tutorials on how to use woocommerce that you can always check out so back on the ecommerce website right here i'm just going to run through a transaction with you really quickly just to show you that the website works after we spent all this time building it out so what i'm going to do is just hover over this product and click on it and on the product page right here i'm just going to add this to my shopping cart and once we get this pop-up right here i can click on checkout or i can click on view cart and you can see in the shopping cart that we have our product right here and i don't have a coupon code but if i did i would type it in right here so i'm just going to click on proceed to checkout and on the checkout details you can see i already have my billing information inputted and down here i can put in my shipping address if i have one that's different than the billing address and then over here we have our order details with the shipping rate and the tax rate so all we have to do is come over here check this box that says we have read and agree to the terms that links to the terms and conditions page and then click on proceed to paypal and once i come to the paypal page i can just log in and i can just come down here and i can click pay now and once everything is paid you can see that i have a receipt right here and then i can return back to the ecommerce website and once you come back to the ecommerce website you're going to see this page right here that says your order is complete and the email that your customer is going to get is this one right here that is a receipt from paypal and as the admin owner of your ecommerce website you're going to get a notification of payment to your email address and you're also going to get an email that says you have a new order right here and you can always see your new orders on your woocommerce dashboard so let me just show you that really quickly and then we'll wrap up this video tutorial so i'm going to come to my website name and go back to the dashboard and once we're back on the wordpress dashboard if you come down to woocommerce and just click on home and you're going to come to your woocommerce dashboard and you're going to see the order details right here and you'll have statistics about your ecommerce business over here as you get more data and you can always click on the order right here or you can go to the orders tab and you'll see all the details about the order in this page right here so you can see when the order was created the billing information shipping information and the items that were purchased and you can also change the status of the order over here so your customer can stay up to date if they want to track their order if you do make any changes you want to click on the update button right here but that's pretty much it so woocommerce has everything that you need to understand and track your orders so pretty much we are done learning how to create our ecommerce website with the flatsome theme so i'm going to go back to our home page and give you some final words and then i'll send you guys on your way so let me be the first to say congratulations on learning how to make your own e-commerce website with the flatsome theme i hope you guys enjoyed this video and if you guys need any help whatsoever leave a comment in the comment section below and i'll get back to you as soon as i can i hope you enjoyed this video and if you did please give it 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 and we'll probably have a few more with the flatsome theme so again thanks for watching i hope you guys build something really really beautiful and professional and i hope you guys make a bunch of money let me know in the comment section if you need any help whatsoever hopefully i'll see in the next video thanks for watching and i'll see you later

Channel: NYC TECH CLUB

Views: 34,635

Keywords: online store, ecommerce website, make an ecommerce website, create an ecommerce website, build an online store, wordpress website, wordpress, 2020, 2021, ecommerce website tutorial, flatsome theme, flatsome theme tutorial, ecommerce website with wordpress

Id: hksI6U4K7DA

Length: 206min 53sec (12413 seconds)

Published: Tue Dec 22 2020