How to Create an Ecommerce Website with WordPress – ONLINE STORE 2019!
Articles,  Blog

How to Create an Ecommerce Website with WordPress – ONLINE STORE 2019!


[Music] What’s up everyone? It’s Jameson from NYC Tech Club Today, I’m gonna show you how to make this beautiful and professional ecommerce step-by-step with no coding or programming, whatsoever. The best part about it, you’re gonna save thousands
of dollars building out this website yourself. As you can see, this website is just beautiful, it’s professional, it’s easy to navigate, and it has everything that you need to run a successful online store. When I created this website, I wanted to create something that you can be proud of, something that represents you and your brand. So what I did was I took inspiration from Fortune 500 companies, such as Apple, Alibaba and Amazon—all of which are multi-billion dollar companies that have spent hundreds of millions of dollars on web design research. What I came up with was this web design which has everything that you need. In this video tutorial, we’re gonna teach you how to setup your WordPress website, design your own layouts and pages. We’re gonna teach you how to integrate WooCommerce and different payment options, and you’re also gonna learn how to create different types of products, including variable products and downloadable virtual products. The best part about it, we’re gonna be using WordPress, the number one content management system on the internet. So if you wanna learn how to create an ecommerce website with no programming or coding whatsoever, and you wanna save thousands of dollars building this out yourself, keep watching this video because I’m gonna show you how step-by-step with no steps skipped. But first, I wanna give you a quick tour of exactly what we’re gonna build. So if you’re ready, I’m ready. Let’s get started. So this is the custom Home page that we’re gonna learn how to make for our ecommerce website using the Flatsome Theme. We’re gonna have a custom slider with as many different images as you want. And then we’ll insert this button section right here to link your visitors to different parts of your ecommerce website and then we can have this featured product section showcasing some of the products that you sell. And then we’ll have a blog post section to keep your visitors updated on the latest happenings with your ecommerce website. At the bottom down here, we can have a footer with some custom links and your copyright, and then we can insert some icons for your payment options or some social media buttons down here. At the top of each of your pages, we will have a header menu, and we can customize this to have a dropdown with different submenu. We’ll also have a top bar where you can have a sign up for your newsletter. So if your visitors click on that, you’ll get this popup right here and then your visitor can juts sign up for your e-newsletter, okay? So this is the Home page that we’re gonna learn how to make and now, what I wanna do is show you what the About page is gonna look like. So this is the About page that we’re gonna learn how to make. You can see that we’re gonna have a custom page title at the top with some social media buttons right here. You can customize the layout of these pages however you want, but you can see right here what we’re gonna do is insert an About section right here, and then we’ll have an Employee section right here with some profile photos and a little biography. And then we can have some social media button links right here to the employee social media pages. And then below this, what I’m gonna do is show you how to insert this section right here with some icons and then little description sections right here. So this is the About page that we’re gonna learn how to make, and I wanna show you another page that we’re gonna learn how to make in this ecommerce tutorial. So this is another page that we’re gonna learn how to make in this ecommerce tutorial, and you can see that we’re gonna have a custom page title and insert some social media buttons. Depending on the ecommerce website that you have, you can insert whatever images or background title images that you want. So I will show you how to do that in this video tutorial, and down here, we just have some text for this page right here. Really, this page just helps you learn how to use the Flatsome Page Builder. So I’ll show you how to make this page, and what I wanna do now is just show you what the Blog Post page that we’re gonna learn how to make looks like. So this is the Blog Post page and you can see that we have a featured image for our blog post right here with the blog title and the category name and then some details about when this blog post was written right here. You can see below the featured image that we have an excerpt section with a button to link to the actual blog post. On our Blog Post pages, we will have a custom sidebar just like this. So I’ll show you how to customize your sidebar however you want. You can see that we have some additional blog post down here. So what I wanna do really quickly is just show you what one of these blog post looks like. So I’m gonna click on this one right here. So you can see right here that this is a blog post page, and down here is where all the text is So in this video tutorial, I will show you how to insert images and how to format your text however you want. And then down at the bottom of this page, we do have a social media buttons to share our blog post. And then down here, if you wanna have a comment section for your visitors so that they can leave you a comment, I will show you how to add that also, So this is a blog post, and we’re gonna create a few of these for our ecommerce website, but right now what I wanna do is move on and show you the shop page that we’re gonna learn how to create for this ecommerce tutorial. So this is the shop page that we’re gonna learn how to make in this ecommerce tutorial, and you can sell any types of products that you want. So for my demo website, I have macaroons and you can see when we hover over these images, we do get an alternative image. If you want, you can add this to your wish list or you can click on this button to get additional product information. You can see on this custom page that we do break out our sections into different product categories. So if you’re selling different products, I’ll show you how to add these different categories right here. By the end of this video, you will learn how to customize your Shop page however you want, but this is the page that we’re gonna learn how to make together. So what I want to do right now is show you what are some of the products that we’re gonna learn how to make are. So the first type of product is going to be a simple product. So this is what the Product page looks like.
Right now, we’re on a simple product and a simple product is when
you have one price and one option. So we’ll have some information right here for our product. You can see that we have a main image right here. If we click on it, we can expand it and we can go through our image gallery right here. Below this, you can see that we can have
as many of these. Below this, we can add as many of these to our shopping cart as we want,
and then we have the category names and our product tags right here. We can insert some share buttons right here and then we can have a longer description down here in the description tab. If you want, we can enable the reviews so that your customers can review your products after they purchase them. At the bottom of all of your product pages, we will have a related products section that you see right here. This is gonna be based on the product categories and similar products that you create. So this is a simple product where you have one option and only one price. What I wanna do now is show you what a variable product looks like. What I wanna do now is show you what a variable product looks like. What a variable product is, is when you have different options for your sizes or
different colors or anything like that. For this variable product, I created it with different price points. So you can see if I go into my variable and I choose 12 oz at $699, and then if I choose these other options, you can see that the price actually changes. So I’m gonna show you how to create variable products with as many different variables as you want. If you want to have different price points for
the options, I’ll show you how to do that also. For all of these product pages, they are very similar. So you can see that we have the description section right here and then the related product section down here. So for this video tutorial, we will learn how to create simple and variable products. So if you have any questions about that, you can leave them in the comment section below. But right now, I just wanna move on and show you the other pages that we’re gonna learn how to make such as
the Frequently Asked Questions page. So you can see right here that this is the Frequently Asked Question page. So if you wanna have one of these, what you can do is have the accordion feature just like this where you have the question and then your visitors can click on this and make it expand to show the answer. So this is just a premium function that you have with the Flatsome Theme, so I’m really excited to show you how to use it to create the Frequently Asked Questions page. One of the last pages that I wanna show you that we’re gonna learn how to make is the Contact Us page. So for the Contact Us page, if you have a physical location, I’ll show you how to insert this map that pinpoints where your location is and you can have your address right here. Below this, what we can do is customize this page to have some additional information and then have a contact form so your visitors can fill this out and contact you directly. So if you wanna learn how to create all of these pages in this video tutorial, keep watching this video and I will show you how step-by-step. But really quickly, what I wanna do is just run through a transaction with you, just to show you how this ecommerce website works. So back on the Shop page, I’m just gonna open up this product right here. On the product information page, I’m just gonna click and add three of these to my shopping cart. Once the product is added to my shopping cart, I can go and view the cart. On the Shopping Cart page, if I wanna remove this product, I can click on the “X” right here or I can adjust the quantity if I wanna change this. But all I wanna do is just proceed to checkout.
So I’m gonna go right here and click on this button. Once I’m on the Checkout page, if I have a coupon code, I can insert that right here. But I don’t have one so I’m gonna close that Just to save some time, I did fill out my billing information right here. And then on the right hand side of the checkout page, you can see the order details right here, including the shipping rate and also the tax rate.
So we have our total right here. For my demo ecommerce website, I integrated PayPal as the payment option. But I will show you how to add some additional payment options if you want. So all I wanna do right now is click on the “Proceed to PayPal” button. Once I’m redirected to PayPal, I can just log in. Now what I can do is just come down here and make my payment. Once the payment is made, I should see this notification right here make my payment. Once the payment is made,
I should see this notification right here Now, I can go back to the ecommerce website by clicking on “Return to Merchant.” Once I’m back on my ecommerce website, you can see that the order’s completed right year and I have my order details right here, and I have some additional information right here. So this is how you complete a transaction on the ecommerce website
that we’re learning how to make today. What I wanna to do is quickly show you how you can see the order information on your WordPress dashboard. So I will have a video link on how to use WooCommerce but WooCommerce is what we’re… So I will have a link on how to use WooCommerce, and WooCommerce is what we’re using to build out our ecom… So I will have a link on how to use WooCommerce and WooCommerce is what we’re using to support our ecommerce website. On the Orders page right here on your WordPress dashboard, you can see that we have the order that we just submitted and the status is processing right here. So if we click on this link, it’s gonna open up this page right here. So on the Order page, this is where you can go to get the billing information and the shipping information, and the shipping information, and also where you can go to get the product information and the quantity that’s ordered. So you can always come in here and see the order details for all the orders that you get from all of your different customers and the email that you’ll get as the owner of your ecommerce website is this one right here where you get a notification of the payment received. You can see that you have all the details right here. Then as a buyer, you’re gonna get this email here which is a receipt for the order that you just created. So your customers are gonna get an email in their email inbox, and you’ll also get one whenever you get an order on your ecommerce website, okay? So this is how you create a transaction for your ecommerce website. Now, what I wanna do is quickly talk about the Flatsome Theme, which is what we’re gonna use to build out our ecommerce website. So this is the Flatsome Theme, and this is what we’re gonna use to build out our ecommerce website and create all of our custom layouts and options that we want for the online store that we’re learning how to make. The Flatsome Theme is the number one bestselling ecommerce theme for WordPress, so I’m really excited to show you how to use it. This is a premium theme so there is a small one-time charge. But again, you’re gonna be able to build whatever you want with this theme. You can see right down here that over 80,000 people are using this theme and has a five star rating With this theme, if you ever need any help, you can get customer support or And with this theme, if you ever need any help, you can contact the developers and you can get support 24/7. Again, with this theme, you do have a bunch of different layouts and options that you can select from or you can use the Custom Page Builder which is what we’re gonna use in this video tutorial to create all of our different layouts. So I’m gonna link you to this page and you can come here and check out all the custom options and the functionalities of this theme. But again, this is the number one, bestselling ecommerce theme for WordPress, and I’m really excited to show you how to use it So if you’re excited to use the Flatsome Theme or you wanna learn how to use it, keep watching this video tutorial because I’m gonna show you how to make this exact website step-by-step. So if you like what you see and you wanna save thousands of dollars building out an ecommerce website on your own, then keep watching this video because we’re gonna learn how to build this exact website step-by-step.
So if you’re ready, I’m ready. Let’s get started. The first thing that we have to do is register a domain and get hosting service. So what I want you to do is click on the link to the text tutorial on “How to Create an Ecommerce Website with WordPress.” That’s gonna bring you to the NYC Tech Club website to this text tutorial with all the steps in this video that you’re watching What I want you to do is come down to Step 1 where it says, “Register a domain and get hosting service with HostGator.” So what we’re gonna do is get our hosting and our domain from a website called “HostGator.” Once you come to step 1, you will see some links over here, and you can click on either one of these
and it’ll bring you right to the HostGator website. So go ahead and come here and click on this. Once you come to this page, this is the HostGator Home page You can also come here by typing in www.hostgator.com. Once you come here, Once you come here, before we go into the hosting plans, I do wanna note that I recommend HostGator to all of my viewers and all of my clients,
and I use them to run all of my different websites, because they’re superfast, really reliable,
they’re cheap and they have great customer service. So HostGator is gonna have everything that you need to run a successful e commerce business and that’s why I’m gonna recommend them to you. So once you come to the Home page right here, what I want you to do is click on this link right at the top that says, “Web Hosting”. Once you come to this page, you should see three different hosting plans: the Hatchling, Baby, and Business Plan. The Business Plan is
a little too expensive and more than what we need, so we’re just gonna focus on the Hatchling Plan and the Baby Plan. So the Hatching Plan is if you wanna build one website and one website only, then all you need is the Hatching Plan. If you wanna have more than one website and you wanna run them on the same hosting plan, then you wanna get the Baby Plan. With either one of these plans, you’re gonna get the free SSL certificate. So what this is gonna do is secure your website so whenever any information is transferred from a client or visitor to your website, it’s gonna be secure. So you can choose either plan that you want, but for this video tutorial, I’m just gonna choose the Hatchling Plan. So once you’re ready, just click on the “Buy Now” button. Once you come to this page, this is the HostGator sign up page. We’re gonna go
through all these steps together. So the first thing that we’re gonna do is come to step 1 where it says, “Choose the domain” and we wanna register a web address. So what you wanna do is type in the web address that you wanna register right here. So I’ll just type in “flatsometheme.com” and push “Enter”. Once the search results come back, if you see this green check mark and it says, “Added,” then we’re good to go and we can move on. If you don’t see this green check mark, what that means is you have to put in a new web address because someone else registered the one that
you want, and then see if it’s available. So if you see this green check mark, let’s just move on. What I want you to do is scroll down to the bottom over here where it says, “Domain Privacy Protection.” This is an extra service and an additional cost, so you can keep this if you want but you don’t really
need it and you can always add this back later. So I’m gonna uncheck this, and then
once you’re ready, let’s go down to Step 2. Step 2 is choosing your hosting plan. So again, in this first drop down, you can choose the Hatchling, Baby or Business Plan. For this video tutorial, I’m gonna choose the Hatchling Plan but if you wanna host additional websites on this plan then you can choose the Baby Plan. But since we’re just making one website, I’ll just select the Hatchling Plan right here. And then what you can do is go into the “Billing Cycle” dropdown and you can select the terms for this hosting agreement. So you can always renew every month, but what I usually recommend is either 6 or 12 months just to give yourself enough time to know whether or not you wanna run a website or not. But you can see if you choose a longer term, it’s gonna be a little cheaper. So for this tutorial, I’ll just choose 12 months. And then what you can do is create a username and a security pin. I’m not gonna do this with you because I’ve already created my account, but go ahead and do that. Once you’re ready, let’s go down to Step 3. Step 3 is entering your billing information. So again, I’m not gonna do this with you but if you need to, you can pause the video and fill out all this information right here and then push “Play” once you’re ready. And then we’re just gonna move on to Step 4. Step 4 is adding additional services. By default, HostGator selects a few of these for you. So what we wanna do is just go through each of these and see which ones we need. So for the free SSL certificate, this is gonna be free with your hosting plan and you wanna have this if you run an ecommerce website because it’s gonna secure website whenever information is transferred from your visitor to your website. So leave this one checked, but you don’t need the SiteLock Monitoring, so we can uncheck this. For the email we, have a video tutorial on the NYC Tech Club YouTube Channel that shows you how to get an email address using your domain for free. So we don’t need to check this one. And then with the Site Back up, again you can use a free WordPress plugin to back up your website, so we don’t really need this one either, and then we don’t need the HostGator tools. You can always add these services back later but right now, they’re just additional costs. So I recommend
that you uncheck all of them except for the free SSL certificate, okay?
Once you’re ready, let’s go down to Step 5. Step 5 is entering coupon code and by default, you can see that there is a coupon code inserted by HostGator and you get a small little discount over here. But what I want you to do is delete this coupon code and I want you to type in “NYCTECHTECH30” and then click “Validate.” What you’ll notice is that the discount increases over here once you type in “NYCTECHTECH30” because this is one of the highest coupon codes available with HostGator and it’s gonna let you save almost 60% off. So make sure you type in “NYCTECHTECH30” right here and click “Validate.” And then once you’re ready, all we have to do is come down to the bottom and check this box that says,
“You have read and agreed to the terms. And then once you’re ready, click on the “Checkout Now!” button Once your order is completed, you should see this notification right here. If you click on this button, it’s gonna open up this page right here. You can see that we have the hosting information down here. So I have flatsometheme.com right here and you can see over here that we have some access links that we can click on. So I’m gonna come back to this page in just a little bit, but first I wanna go to my email. I wanna show you that you’re gonna get this email from HostGator titled, “Your Account Info” and it’s gonna have your control panel link right here, your username and your password. So if you ever need this information, just come back to this email right here, okay? So what I want you to do if you haven’t already, when you come to the “Order Complete” page, click on this link right here that says, “Return Home.” You’re gonna go to this page right here and what we’re gonna do now is go and log in to our control panel, so we can install WordPress and start creating an ecommerce website. So if you’re on this page right here, go ahead and click on this button that says, “Launch cPanel.” Now, you should be on your cPanel. If you ever you need help getting to this page, go back to your HostGator email titled “Your Account Info” and then click on the control panel link. Just type in your username and password, and once you log in, you should be on this page right here, okay? So what we’re gonna do right now is install WordPress. So come to where it
says, “Popular ring links,” and then hover over “Build a New WordPress Website” and click on this link. Once you come to the installation page, just come into this drop down and select your web domain and then leave this blank, and then click “Next.” Now, what you’re gonna do is just put in your blog title right here. So we’ll just type in “Shop Shop” and then I’ll type in my username. So I’ll just type in “Admin” and then my first and last name and then my email address right here. And then once you’re ready, just check these two boxes to agree to the terms. and then once you’re ready, click on the “Install” now button. Once the installation’s complete, you should see this notification right here and you should have your login details right here. So you can save this information if you want or you can go to your email inbox and you should have this email from HostGator titled “Install Complete.” Down here, you should have all of your details to log in to your WordPress website. We’re gonna log into the admin URL so that we can go and customize and build out our ecommerce website. So if you wanna do that right now, all we have to do is click on this link or what you wanna do is type in your web domain name and
then put in “/wp-admin” at the end, okay? So let’s click on this. Now, you should be on the login page for your WordPress ecommerce website. So go ahead and type in the username and password from your installation details that you see right here or in the installation email that you have right here. So once you type in that information, we’re good to go and we can click on the “Log In” button. Once you’re logged in, this is your WordPress dashboard and you’re gonna become very familiar with the WordPress dashboard as we go through creating our ecommerce website because this is where you go to build out all of your different pages and posts and upload media and different images and everything, so you’re gonna become an expert with the WordPress dashboard as we go through this video tutorial. But before we do anything, what I wanna do first is just show you what your ecommerce website looks like now that you installed WordPress. So I’m gonna go to my website by hovering over my website name and clicking on “Visit Site” on the upper left. Once your WordPress website loads, this is what it should look like right now. So it should look very basic and nothing like an online store, but don’t worry because we’re gonna go into WordPress and customize our entire ecommerce website to look very much like the demo WordPress website that you see right here, okay? So let’s go back really quickly to our WordPress dashboard and I’m gonna hover over my website name on the upper left and just click on “Dashboard.” Once you’re on the WordPress dashboard, now what we’re gonna do is go and get the Flatsome Theme to build out our ecommerce website. So if you haven’t already, I want you to open up the text tutorial and there is a link to this page on “How to Create an Ecommerce Website with WordPress” in the video description, and then come down to Step 4 which is gonna be getting the Flatsome Theme. You can see right here
that there is a link to the ThemeForest website where we’re gonna get the theme. So go ahead and come down here and click on this. You should be brought to the ThemeForest website and you should be on the Flatsome Theme page right here. Again, as I mentioned before, this is the number one bestselling WooCommerce theme for WordPress. It does have a 5 star rating, and you’re gonna build out a beautiful and professional ecommerce website with the Flatsome Theme. So once you come to this page, all we have to do is click on the “Buy Now” button. Once you’re on the Checkout page, if you already have a ThemeForest account, go ahead and click on the sign in button right here. If you need to create an account, go ahead and pause the video and then create an account by filling out this information and then going through these other steps by clicking on the “Next” button right here. Once you’re ready, go ahead and push “Play” and you’ll be logged in and then I can show you the files that you have to download so that we can
install them into our WordPress website. So I’ll see you in just a few minutes. Once you checkout, you should be logged in to your ThemeForest website now. You can see right here that I’m on the “Downloads” tab. If you need to get to this page, you can hover over your username and click on “Download” and you’ll come to this page right here. What I want you to do is come to the Flatsome Theme and we’re gonna click on this download button right here. We wanna download all the files and documentation. So go ahead and click on that and download the zip file that’s going to download. And then what I want you to do is keep this tab open because we’re
gonna come back to this page in just a little bit. But now, let’s go back to our WordPress dashboard. What we wanna do is install the Flatsome Theme so that we can start building our online store. So on the left-hand side, go ahead and hover over appearance and then click on “Themes.” And then once you’re on the Themes page, what we’re gonna do is just click on the “Upload”button right here. Once you come to the Add Themes page, just click on the “Upload Theme” button. You should see this little pop up section and go ahead and click on the “Browse” button right here. What I want you to do is go to wherever you just saved the files that you just downloaded from the ThemeForest website and then you should see a folder called “flatsome–main.” Go ahead and open this up. You should see some folder right here. We’re gonna go to the “Theme Files” folder, and you should see the Flatsome zip file right here. So right now,
the version is 3.6.2 but you might have a newer version as you watch this video tutorial depending
on when you watch it. So go ahead and choose the latest version right here. Once you’re ready,
go ahead and click on the “Open” button. Now, you should see the filename right here.
So let’s go and click on the “Install Now” button. Once the theme is installed, let’s go ahead and click on the “Activate” button. Now, what we can do is go through the setup wizard for the Flatsome Theme. We can also go to the theme settings a little bit later and customize our settings there. So I’ll show you how to do that in just a little bit. But first, let’s go through this Flatsome setup wizard. So the first thing that we can do is activate our theme so that we get automatic updates and access to the Flatsome Theme developers. So if you wanna do that, you wanna put in your purchase code. To find your purchase code, you can go back to the ThemeForest website. And on the Downloads page right here, just click on the “Download” button and then download the pdf with the purchase code right over here. You’ll get a document with your purchase code and then you can just pace that in right here. I’m gonna do that on my own so that I don’t show you what my purchase code is. But once you’re ready, go ahead and click on the “Continue” button. Now, what we can do is install a Child Theme. We should have a child team so that we save all of our different customizations and settings whenever the Flatsome Theme needs to update so those updates won’t get overwritten. So what we can do is just leave the name right here and then click on the blue button says, “Create and Use Child Theme.” Once you’re ready, go ahead and click on the “Continue” button right here. Now, what we can do is install the plug-ins that we need for this WooCommerce tutorial and you should see them right here. Plugins are tools that really just help you customize and build out your ecommerce website. There’s a bunch of different plugins that you can get on WordPress. So I’ll show you that in just a little bit. But right now, let’s go ahead and just click on the “Continue” button. Once the plugins are installed, now we should be on the “Contents” tab. What you can do here is install the demo content from the Flatsome Theme demo website if you want. I’m gonna uncheck some of these boxes because I don’t wanna install everything. Just because we’re gonna have to go in and create a bunch of different pages and posts in this video tutorial, so I don’t want to go in and have to delete and edit a bunch of different stuff. So all I’m gonna install is the Contact Forms, the Blocks, the Widgets and the Settings. But you can select whatever you want but you will create a little bit of a mess if you do select everything. So once you’re ready, go ahead and click on the “Continue” button. Once you’re on the logo and designs tab, if you wanna upload a new logo, you can replace the Flatsome logo by clicking on the “Upload” button right here and then finding the logo image that you wanna use. If you wanna use a new logo but you don’t have one right now, I will show you how to go to the Theme Settings a little bit later and then you can upload your logo there. So down here in the “Select Preset,” we wanna select this option right here. So once you’re ready, let’s click on “Continue.” Once you’re on the Supports tab, all we have to do is just come down here
and click on the “Agree & Continue” button. Now, we have just set up our ecommerce website using the Flatsome setup wizard, and we will go through our WooCommerce settings a little bit later to create the settings that we want for our ecommerce website. But right now, we are good to go. So let’s just click on the “View your new website!” link. Once your ecommerce website loads, this is what it should look like with the Flatsome Theme. So it looks a little different than what we saw a little earlier when we just installed WordPress, but it doesn’t look like the demo ecommerce website that you see right here right now. But don’t worry because we’re gonna go in and customize this entire website to really build whatever type of online store that you want, okay? So let’s go back to our WordPress dashboard right now. So hover over your website names and click on “Dashboard.” Once you’re on the WordPress dashboard, let’s come down to the plugins tab on the left-hand side and click on “Install Plugins.” Once you’re on the Plugins page, just come down to your list of plugins and make sure that you have the Contact Form 7, the Social Login, WooCommerce, WooSideBars and the Wishlist plugin. If you have those, then what I wanna do is come back up to the top and I wanna add another plugin so that we can activate our SSL certificate so that our SSL certificate so that our website has a secure connection.
So click on the “Add New” button. Once you’re on the “Add Plugins” page, all I want you to do is come to the search box and type in “SSL.” If you push “Enter,” you should see the search results show up. What we want is the Really Simple SSL. So you can see right here that it has over a
million active installations and it has 5 stars. So let’s just click on the “Install Now” button. Once the plugin is installed, what we wanna do is activate it. Once you come back to the Plugins page, if you see this notification right here, go ahead and click on the blue button that says, “Go ahead, activate SSL.” Once you see that the SSL is activated, now what I want you to do is come down on the left hand side to “Settings.” Hover over that and click on “General.” You’re gonna be asked to log in again, so go ahead and type in your username and your password and click “Log in.” Once you’re on the General Settings page, just come down to where it says, “WordPress” and “Site Address” and make sure that it says “https” right here. So if you see the “s,” that means you have a secure connection so whenever a visitor sends you information for a purchase or anything like that, it’s gonna come through a secure connection, okay? Also on the Settings page right here, you can change the site title or the tagline. We can also do this in the Theme Settings a little bit later, so I will show you how to do that. But if you do make any changes, always make sure that you come to the bottom and click on the “Save Changes” button, okay? So if you’re ready, we can move on the next step. Now, what I want you to do is go back to the text tutorial on “How to Create an Ecommerce Website with WordPress.” On this page, what we’re gonna do right now is go and download the demo content if you need some demo images similar to the once that you see on the the demo ecommerce website right here. So if you have your own images, you can use those but if you do need some placeholders, go ahead and click on this link right here on Step 7. So you’ll get a zip file with some demo images very similar to what you see on the demo ecommerce website. They might not be exactly the same because I do have to pay for the copyright in order to have those images. But once you download the zip file, what I want you to do is go back to your WordPress
dashboard and let’s go and upload all of these images. So on the left-hand side, to upload your images, you’re gonna hover over “Media” and then click on “Add New.” Once you’re on the Upload New Media page, all I want you to do is click on “Select Files” and you’ll get this little pop up right here. What you can do is go to wherever you just downloaded the zip file. So I’ll go to my ecommerce folder. You should see a zip file or a folder called “Ecommerce Demo Content.” If you open this up, you should see all the images that you need right here. So again these are demo images. I’m just gonna select all of these and I’m just gonna upload everything all at once. But if you want, you can select these one by one and upload them. So I’ll just click on the button right here. You should see all the images uploading right here. So what I’m
gonna do is just wait for everything to upload and then we’ll move on. So I’ll just wait just a little bit. So I took a few minutes just to let everything upload. So you should see all the images right here. If you ever wanna edit these images, you can click on the “Edit” link right here or what you can do is hover over “Media” and then click on the “Media Library” tab. Once you’re on Media Library, this is where you can see all the images that you just uploaded on to your WordPress website. You can use any of these images and if you wanna edit any of these images, just click on the one that you wanna use and then click on the “Edit Image” button. What you can do here is you can crop the image by selecting the area that you wanna crop or you can flip or reverse this image however you want
and you can also edit the size of this image over here. So if you do make any changes, you wanna click on the “Save Changes” button but we’re not gonna do anything here. So I’m just gonna close out of this, and that is how you edit your images that you have for your WordPress website. You can also upload some additional images over here in the Media Library or you can do it as you go through creating your pages and posts. So I’ll show you how to do that a little bit later, okay? So if you’re ready, we are going to move on to the next step. Now, what we’re gonna do is go through the Theme Settings for the Flatsome Theme website. So what I want you to do is just hover over the Flatsome tab right here and you should see this little pop up. We wanna go to the Theme Options. Once you’re on the Customize page, this is where you can go through the Theme Settings to customize the layout and the styling options for your ecommerce website that you’re learning how to make. You can see that I’ve already changed some of the style settings for my demo website over here. So we have different colors, a logo and different font styles. So what I wanna do is just show you what I selected for the demo ecommerce website. You can always pause this video and go through these tabs in more detail on your own. We’re just gonna go through the options that I selected. If I go a little too quick, you can always go to the text tutorial on “How to Create an Ecommerce Website with WordPress” using the Flatsome Theme and on Step 8 right here, it has all the layout settings. So you have everything from what I changed to all the color codes and everything like that. So if you need, you can print this out and just go through it on your own to make the same exact look and feel that you see on the demo ecommerce website right here, okay? So back on the ecommerce website that we’re learning how to make, the first thing that I wanna do is go to the Header tab. Once you open up the Header tab, you can see the Header Builder pop up over here. So if you wanna customize your header, which is this section right here, then what you can do is drag whatever icons or widgets that you want into these different sections. So this first row right here is your top bar, and that’s gonna be this section right here. So you can see I put some social media buttons and then I’m gonna have a navigation menu at the top and then a little newsletter sign up form right here. So you can always pause the video and just make sure that you have the same layout as I do down here. So we have our logo and navigation menu and then some log in stuff and the shopping cart right here. Don’t worry about the currency you see right here. Right now, I think this is a British pound but we’re gonna go into our WooCommerce settings a little bit later and customize the currency and all the WooCommerce settings, okay? So you can always click on any of these such as the newsletter widget, and you’ll get this section right here where you can customize the label for the newsletter or anything like that. So again, you can always check out what we do on the text tutorial. But what I wanna do is just go through the tabs that we go through for the demo ecommerce website. So I’m gonna jump to the logo and site identity tab and if you open this up, this is where you can change the site title and your tagline. This mainly shows up on your tabs right at the top. So you can see it says, “Macaroons” and “Cookies with a Flare.” So if you want, you can change that. And then, you can customize your options right here such as your logo position if you don’t want it on the left-hand side, but I like to leave it as default. And then down here where it says, “Logo Image,” this is where you can upload your own logo if you haven’t already. You can always come to this section a little bit later if you don’t have a logo right now. All you’re gonna do is click on the “Select File” button, and you should get your Media Library. If you wanna upload your own logo, go to “Upload Files” and then click on “Select Files” and then find the image or logo that you wanna upload. If you wanna use the demo content, make sure that you’re on the Media Library tab and you should see all of your images that you uploaded a little earlier in this video tutorial. What you wanna do is find the “logo.png.”
So select that and then just click on the blue button. You should see the logo appear right here and it should refresh on the previous screen right here. That’s all we do, but if you wanna add a site icon, you can right down here but we don’t do that for this video tutorial. So once you’re ready, go
head and click on the “Back” button. Once you’re back in the header section right here, before we move on, I do wanna note that you can always save your settings by clicking on the “Publish” button right here. You can always do this at the end or whenever you make any changes. And then down at the bottom, you should see some icons right here. So you can see what your website looks like in the PC or the tablet device or the mobile device. So if you ever wanna check out what your website looks like with these different devices and you wanna make sure that it is responsive, go ahead and click on these
little icons right here, okay? So once you’re ready, let’s go to the Top Bar tab. Over here is where you can disable the top bar if you don’t want this little section to show up up here. But I think it looks pretty professional and pretty good, so I like to leave this enabled. If you wanna just change the background color for the top bar right here, you can do that by clicking on “Select Color” right here and then dragging this wheel to whatever colors that you want or you can type in a color code here. So I don’t change the background color here because I go into the Styling tab a little bit later, and I changed all of my different colors that I want for my ecommerce website. So this is the primary color that I have for the ecommerce website. So I’ll show you how to do that a little bit later, but if you just wanna change the top bar background color right now,
you can do that right here, okay? So I’m gonna click “Back” right here and I wanna jump to the mobile menu tab. I just wanna show you really quickly that in this section where it says, “Menu Elements,” this is where you can select what you want to show up in the mobile menu. So we can always come back in here a little bit later after we create all of our different pages and everything, and we can select which elements we want to show up. But if you just wanna select some of these default options to show up,
all you have to do is click on the eyeball right here and then you can see that the color for this section changes to a dark blue and then these are the items that are gonna show up in your mobile menu, okay? So again, just remember that you can always click on the “Publish” button to save on the changes whenever you want. I’m gonna go back here because we’re not gonna mess with this right now. We can always come back to this a little bit later. So let’s go to the Sticky Header tab. What you can do here is if you look at the previous screen right here and I scroll down, you can see that the Header section right here shows up. So this is a sticky header. We have the default settings right here so if you wanna remove the sticky header, you can just uncheck this box right here and then you can choose the style that you want for how the sticky header shows up when you scroll down. So there are a few different options here but I like the “Jump Down” option so that’s the one that I selected. So again, you can play around this on your own.
Once you‘re ready, we’re gonna go back right here. I just wanna skip down to the Shopping Cart tab right here. What you can do here is choose the cart style, the icon style and if you want the same cart icon as the demo ecommerce website, choose the middle option right here.
Once you’re ready, let’s go back. The last thing that we’re gonna do is come down to the bottom to the “Follow Icons.” If you click and open that up, you can choose the icon style that you want. So let me just scroll up on this previous screen. So my social media icons show up on the top bar up here but you can place this widget wherever you want. But if you want these icons to show up, what you have to do is come into this section and type in the URLs to the social media pages for those social media buttons. That’s the only way that these buttons are gonna show up. If you leave a blank, then they’re not gonna show up, okay? So once you type in everything, what I
wanna do is just go back right here and we can go back to the Main page right here. But if you made any changes, let’s click on the “Publish” button just to save everything really quickly. Once everything is saved, now what I wanna do is come down to the Style tab. We’re gonna go into the Colors tab right here. You’ll notice that it has all the different color options. So I don’t wanna go through these one by one with you but again, I do wanna remind you that I have each of these color codes in the text tutorial on Step 8, and you can see all the color codes right here. So if you want the same colors, what you’re gonna do is just highlight and copy the color code for each of these, and then go back into the Customize tab over here. And then for the Primary Color, just click on “Select Color” and then you can paste in the color code right here. And then do that for each of these color options, and then you’ll have the same colors as I
do for the demo ecommerce website, okay? A lot of these are pretty self-explanatory so you can just go through all of these and choose whatever colors that you want. And then once you’re ready, click on the “Back” button. What I want you to do is come down to the Global Styles and type in “0px” right here for the Button Radius. And then we can go to the Typography tab and this is where you can select the font that you want for your ecommerce website. So for the demo ecommerce website, we go into this dropdown for the font family in each of these sections, and I just choose the “Lora” font. So it’s L-O-R-A. So if you want the same font, go ahead and put in the Lora font for all of these. If you wanna choose another font, that’s fine. Go ahead and just choose whichever one that you want. That’s all you have to do to change the font style for your ecommerce website, and then we can go back right here. We don’t need to go through these
other two tabs. So let’s click “Back” right here. Now what we can do is come down to the Shop tab, open that up and go to the payment icons. What you can do here is select the payment icons that you want for your ecommerce website. So if I come down to the bottom of this page right here, you can see that we have some payment icons for the different types of payments that we accept on
our ecommerce website. If you wanna edit this, you can just come over here
and select the icons that you want to show up. So you can see if I select “Amazon,” then that’s gonna show up over here now. What I did down here in the Placement section is I selected the “Absolute Footer.”
So that’s gonna show up down here. But if you want this to show up on the
Cart Sidebar also, you can check this box. But all I want is this one for my
demo ecommerce website, okay? So now we’re gonna go back. We don’t need to go through the Product Images tab right now, we can always go to this later and edit this section. And then same with the Checkout tab. We can come back here a little bit later and set the Privacy Policy page and the
Terms and Conditions page after we create them. So I’m just gonna go back to the main page right here. We wanna skip the Layout tabs because we’re gonna use the default layout settings. So let’s go to the Footer tab right here. What I want you to do, if you wanna have the demo ecommerce website look, is disable the Footer 1, so uncheck this box, and then disable the Footer 2 right over here by unchecking this box. And then what I wanna do is come down to the Absolute Footer section, and I wanna change the Background Color really quickly. So I’m gonna go in here and just type in the color code “#3333”and that’s gonna make it a darker black or gray color right here. And then if you want the same text that I have on the footer where it says, “Copyright, the year and then your company name” what you can do is go to the NYC Tech Club text tutorial on “How to Create an Ecommerce Website with WordPress,” and then just come down to Step 8 with all the layout settings. In this section right here, there should be some text in a yellow box and what you can do is just copy this, and then you can put in your own company name in this section right here between these brackets. You can
also change the name right here or the year, okay? So go ahead and paste that in and then if you wanna add some additional text such as the social media buttons that you see on the demo ecommerce website at the end over here on the footer, what you can do is go back to the text tutorial, and then copy and paste this section into the secondary section right here. That’s gonna put the footer or the social media buttons in the footer over here. But I kind of like the payment icon, so I’m gonna use that instead of the social media buttons. But if you do make any changes, go ahead and push the “Publish” button right here.
And then once you’re ready, click “Back.” Once you exit out of the Customize page, you should
be brought back to your dashboard. If you’re not, you can just hover over your username and
then click on “Dashboard” and you’ll come back to this page right here. What we wanna do now is create the Home page and the Blog Post page. So what you can do is hover over “New” and click on “Page” or if you’re on the WordPress dashboard, just hover over “Pages” and click on “Add New.” Once you’re on the Add New Page, all we’re gonna do right now is create the pages. So we’re not gonna go in and customize them. So I just wanna type in “Home” for the page title right here. And then for the Home page, I wanna come to the Page Attributes and in the Template dropdown right here, there are a few different layout options. So what I wanna do is just go with the “Page-Full width” option. So go ahead and select that for the Home page. And then once you’re ready, click on the “Publish” button. Once the page is published, I wanna create one more page. So click on “Add New.” On this page, we’re gonna type in “Blog” right here, and we don’t need to change the Template option in the Page Attributes. So go ahead and click on the “Publish” button. Once the page is published, now what I want you to do is come down on the left hand side to the Settings tab and go to the “Reading” tab and click on that. On the Reading Settings page, what we’re gonna do is set the Homepage and the Blog page. So click on “A static page” right here and then go into the Homepage dropdown and select the “Home” page that you just created. And then for the Posts page,
we’re gonna set this as the “Blog” post page. So once you have these options selected, come down to the bottom and click “Save Changes.” Once the settings are saved, we are good to go
and we can move on to the next step. Now what we’re gonna do is show you how to create the Home page, using the Flatsome Page Builder. So everything that you see right here, we’re gonna learn how to create on the Home page right now. So if you wanna create a Home page that looks just like this, what I want you to do is go back to the WordPress website that you’re learning how to make, and we wanna go to our pages. So hover over Pages and click on “All Pages.” Once you come to this page right here, you should see a list of all your pages and you can delete this sample page if you want by clicking on the
trash link right here. I’ll do that a little bit later. So what we’re gonna do right now is just edit the Home page so that we can customize it using the page builder. So hover over Home and then click “Edit.” Once you come to the Home page, just make sure in the Page Attributes that in the Template dropdown that you have the “Page-Full width” option selected because that’s what we’re gonna use to build our Home Page with. We can turn on the UX Page Builder by clicking on this tab right here. Once you come to this page, this is the Flatsome Page Builder and we’re gonna create our page step-by-step so I’m gonna show you how to add all the different elements and different sections either by clicking on the “+” button right here or the “Add to Content” button right here. But really quickly, I wanna show you how you can insert one of these premade templates right here and then you can go in and customize them however you want. So if you wanna use one of these templates, you can but you’re not gonna get the demo images. You’re just gonna get placeholders. So what I want to do is just show you really quickly what happens when you click on one of these. So I’m gonna click on the Classic Shop right here. Now, you should see the template get inserted right here with the template layout. Again, you won’t get the demo images but you will have placeholders. What I wanna do is just quickly show you how you can edit some of these elements but you’re gonna get a better understanding of how to create all this and how to edit this stuff as we go through making our ecommerce Home page together. So really quickly, just on the left-hand side, you do have all of your elements right here. So you can see right at the top, you have a slider and then below that, you have a row. You can expand this section and you can see you have three different columns and you can go into each of these and you can go and edit all of this stuff. If you want to delete anything, all you have to do is click on the “Wheel” and you’ll get this little pop up and you can delete right here. Or you can go into the Options and then you can customize the different elements or you can make a copy of them if you want also. You can also just double click on the element and you will get the options right here. So really quickly, if you wanted to edit the text right here, I can double click on it and I’ll get this pop up and then I can just edit the text however I want. And then all I would have to do is click “Okay” right there and that’s gonna change things. If I want to remove one of these buttons, I can click on it and then you get this little blue button. I can click on the “wheel” right here and then I can click on the “Delete” link, and that’s gonna remove that button right here. And then I can just go into these and edit the text however I want. If you do make any changes, you wanna click on the “Apply” button right here, and then you wanna click on the “Update” button right here in order to save your changes, okay? So that’s just a quick overview of how to
use these templates and how to edit everything. Now, I know I want a little quick, but again we’re gonna go over everything step-by-step as we go through creating the Home page on our own with a blank template. So really quickly, what I’m gonna do is remove everything and then we can start building out our Home page together, okay? So let me just close out of this. Once I’m back on the blank canvas for the Flatsome Page Builder, now we can build out the different sections on our custom Home page. So you can click
on the “+” button right here to add your first element or you can click on the “Add to Content” button. That’s gonna open up this little section right here on the left-hand side. There is a button called Flatsome Studio. If you click on that, there are a bunch of different premade templates for different sections that you can add to your different pages. We’re not gonna use this in our video tutorial but I do wanna mention it. So I’m gonna close out of this. The first thing that we’re gonna do for our Home page is add a slider. So right down here in the Layout tab, go ahead and click on the “Slider” button and you should see the slider get inserted
right here. If you ever wanna delete this element, just click on the wheel and you’ll get this little pop up, and you can click on the “Delete” link right here or you can click on the “Options” link and that’s gonna open up this section that you see right here. If you go back to the main page right here, if you ever wanna go into your Options, you have the wheel option right here or what you can do is just double click on this, and it’s gonna open up the options right here. So what I wanna do for each of these elements is just show you the options that I selected for each of these elements that we add into our different pages. So for the slider, I’m just gonna come down to the Navigation section and I wanna remove the bullets. So I wanna just have the arrows for navigation and you’ll notice what I’m talking about once we add our background image for our different slider images. And then down in the Auto Slide, what you can do is change the amount of time that you stay on each image for your slider. So right now, it’s at 6000ms. So that’s six seconds. I want to put in “5000ms” so that we stay on each image for five seconds before it automatically switches to the next image, okay? So once you’re ready, you can click on the “Apply” button right there and then click on “Update”. What that’s gonna do is save the element that you inserted and then the options that you selected. But you can always do this at the end. So now we have our slider and what we wanna do is add some elements inside our slider. So you can click on the “+” button right here or the “Add to Slider” button right here. Again, that’s gonna open up this little tab right here and we wanna add some banner images or banner section. So I’m gonna click on the “Banner” right here. You should see the banner get inserted right here. There are a few different options for the different layouts. So if you want different text options, you
can select any of these ones right here. We’re gonna use the blank one though for
this video tutorial and you can just click in here. What I wanna do is go into the Options for this banner. So if you don’t see this section right here, just click on the “wheel” and then click on the “Options” tab and you’ll come to this page right here. What I wanna do is change change the height for this banner. So in here,
I’m gonna delete this and type in “700px.” Down here in the Background section, I wanna add the background image. So I’m gonna click on “Select Media.” Once you get the Media Library to show up, if you wanna use the demo images, just find this image right here which is the slider.jpg and select that and click on “Use image”. Now, you should see the image inserted here, and you can always remove this if you want. So we have our background image for this first image slider. Now, what we can do is just go into this textbox right here and if you click on it, you can edit this text. So what we’re gonna do is add a few different text elements. So we can delete all of this by just going in here and deleting this or what we can do is open up the text editor. You should see this popup to edit this text box. What you can do is just type
in your text right here. So I’ll type in “Welcome to The Macaroon Shop” and you can see on the demo WordPress website on this slider image right here, we have a text block and then a
divider line and then some additional texts. So all we’re gonna do for this text block is just add the “Welcome to The Macaroon Shop” and I have it as Heading 4. If you wanna change the font size, you can do that here. Or you can change the heading size. And then, in the Formatting tab right here, you can change the styling for this font or you can add animations and all that stuff. So it’s really up to you but we’re just gonna type in this text right here. And then once you’re ready, push “Okay.” And then we can go “Back” right here. Now, in this section right here, what I wanna do in this text box is I wanna add a little divider line. So I can click on the “+” button right here and I can get this little pop up. I’m just gonna click on the “Divider” option. You should see a pop up here and you can customize the width, the height and all that stuff for the divider line if you don’t like it. But I like it just as the default right here, so I’m gonna click “Back”. Now, we can add another textbox. So we can do that by clicking on the “+” button right here, and then we can just click on the “Text” option right here. Now you should see this little pop up with different options and we can just choose the one that we want. I’m just gonna go with the blank “Paragraph” right here so I’ll just click “Apply.” What we can do is just double click on this to open up this text box right here. We can actually go and edit the text whatever we paste in in the Text Editor. So if I click on this and open this up, we can just paste in or type in “Delicious Goodies,” and I have this on two lines right here and you can see that it’s Heading 1. I actually want to highlight this and I wanna go and change the font size to “160%” just to make it larger. Again, you can format this text with animations and different styling options if you want. But once you’re ready, click “Okay”
right here and then let’s go back. We can add another divider line if we want. So you can click “Add to Text Box”. Or you can just hover over the Divider line and click on the “wheel” and then duplicate this, and then just go back right here, and then drag this to wherever you want to place it. So you can see we have a little divider line down there now. Now, let’s add our button for this first slider. So click on the “Add to Text” button and then find the “Button” option and click on that. What you can do here is choose the type of button that you want. So we’re gonna use the Outline options, so click on that. You can click “Apply and you should see the button right here. If you don’t see the options right here, you can always click on the “wheel” to go to the options. I just wanna change the text right here. So I’ll type in “LEARN MORE.” You can change whether you want to capitalize all letters or you don’t right here. And then for the color, I wanna change the color to “White” right here. So you can just choose whatever you want. So you have all your different color options. And then I’m gonna come down to the bottom and I wanna link this to the About page that we’re gonna make a little bit later. So if you wanna link this right now, you can just type in the same URL that I’m gonna type in. So “http://www.”your website name, so I’ll type in “flatsometheme.com/about”. So just type in your website name and then put “/about” and what that’s gonna do is link this to the About page so that your visitors can click on this and then they’ll go to another page, okay? Once you’re ready, go ahead and click on “Apply”. Now, we have our first slider image right here and we’re gonna add another one really quickly together. But before we do that, let’s click on the “Update” button to save everything. Once everything is saved, now we have our first banner. So we wanna add a second banner to our slider. So we can collapse this and just click on “Add to Slider” and we wanna go through the same steps again. And then we can add whatever text that we want to our new banner. So click on “Add banner” and you should see this section right here. Again, we’re gonna go with the blank option right here. The first thing that we can do is just click on this “Banner” section so that we get the banner options. We can go in here again and just change the height to “700px”. And then I wanna add a background image. So if you want a slider image, you can click on “Select media” but if you just wanna use a background color, you can just click in here and then choose the color that you want. So I’m gonna click on “Select media” and I should get the Media Library right here. If you wanna use the demo images, find the second slider image. So it should be saved as “slider 2” or something like that. If you need these sizes that I used for all of my images, they are over here. Again, just as a reminder, some of these images
might not be exactly the same as you see in this video because I do have to pay for a copyright for a lot of these images, okay? But I will have placeholders or something similar for you to use. But it shouldn’t really matter because you will be creating your own ecommerce website so you should substitute all your images with your own images as you go through creating your site. So once you’re ready, check the box and click “Use this image.” You should see the image appear right here. I don’t think we have to do
anything else over here, so we can just go back. Now, in this section right here, we have our text box so we can put our first headline. So if you see on the demo website, it says, “All your favorites and then delivered to your door. So let’s go in here and just double-click this. And then we can just paste in all your favorites right here. If we want, we can change this to Heading 4 just to change the font size. And then again, you can go into these options to format your text however you want. Once you’re
ready, come back to the main section. For the second banner, we’re gonna add a divider, so click on “Add to Text Box” and then just click on the “Divider.” That’s gonna add it right there. And then, we can add some more text. So again, you can always just click on the “+” button right here and we wanna add the Text option right here. We can just go with the Paragraph option right here. So we’ll go in to the Text Editor and I’ll delete this demo text. I’ll just paste in “Deliver To Your Door” which is what I have on the demo website. For delivered, I’m gonna change it to Heading 1 and then in the font sizes, I’m gonna change this to 130% just to make the font a little larger. And then if you wanna change the font for this subtext right here,
you can do that. I’ll leave that as Heading 3 right here. Once you’re ready, click “Okay.”
And then we can just go back right here. Now what we wanna do is add another divider.
So you can duplicate this or click “Add to Text” and then just click on the “Divider.” It should get added right over here. The last thing that we’re gonna do for this banner or image slider is add another button. So I’ll just click on the “Button” option right here. I wanna use the simple option because I like the background color in this one. So I’ll click on “Apply” right here, and it should bring me to the Button option and I can just type in “BROWSE PRODUCTS” right here. I don’t need to change any of the formatting. I like how this looks, but if you wanna change the color, you can do that right here. At the bottom over here, if you wanna link this button to the Shop page that we’re gonna create a little bit later, then what you wanna do is type in the URL right here. You can always type this in a little bit later if you want also. So I’m just gonna type in “https” and S is for anyone who has an SSL certificate. So if you don’t have an SSL certificate, just type in “http://www.flatsometheme.com. So put in your own web address. We’re gonna create our own custom
store page. So what I’m gonna do is type in “Products” right here, but the default store page is just gonna be Store. So you can type in whatever you want, but we’re gonna create a custom page
so I wanna put Products right here. Once you’re ready, we can just save everything. So click “Apply.” Now, we can just click on the “Update” button right here. Once everything is saved, now what we’re gonna do is create this section right here. So we wanna create a new section, so I’m gonna collapse the slider and then click on “Add to Content.” I wanna add a text box ,so click on “Text” and then just click “Apply.” If we scroll down down here, you should see it. So I’m gonna click on “Open Text Editor” and I wanna delete the sample text. I just wanna paste in the text from the demo website, and we can format this text by centering it and then changing it to 120%. If you wanna change the color, you can go into this option right here and just select the color that you want. I wanna give this some more spacing because everything looks pretty close together right now. So I’m just gonna come here and just add a line and then just click, “Okay” right here. So you can see we have our text right here and that looks pretty good. So I’m
gonna click “Back.” Now what we’re gonna do is add a row for our different buttons. So click on the “Add to Content’ button and then click on the “Row” element. We’re gonna use the “3 Columns” option, so just click on that and we can just close out of this. So now you should see the 3 columns right here and we can add a banner into each of these to have different images for our buttons. So what we’re
gonna do is just go back right here. In each of these, I’m gonna open up a column and then then click “Add to Column”. What l wanna do is come down and find the “Banner” option and click on that. We’re gonna use the Blank option because we’re gonna put a text box in here. So we can close this. I wanna go into the Banner options so if you need to, you can click on the wheel right here and go into the options. We wanna change the height for this banner. So what I’m gonna do is just delete this and type in “160px”. You can see that the banner gets resized right here. What we can also do is just link this button to a certain page. So if you wanna do that right now, we’re gonna link this button to a random page that we’re gonna create called “Why Macaroons.” So I’ll just type in the URL right here, and you can do the same if you want. Just make sure that you put in your own domain name. At the end over here, after the slash, I’ll type in “why-macaroons.” So I’ll just go through this really quickly. You can see that it says, “https://www.yourwebsitename.com/why-macarons.” You can always go in here and update
these links a little bit later also, okay? So the other thing that I wanna do is actually add the background image, and we should do that right now. So in the background section in the banner, click on the “Select Media” button. Once you get the Media Library, I’m just gonna select this option right here or this image and then click on “Use Image.” You should see the image show up right here. If you want, you can drag this little blue dot to center the image with whatever part of the image that you want. You can
also type in the position right here. The last thing that I wanna do for the banner is come
to the Hover section and I wanna select “Zoom Fade.” So when someone hovers over this, it’s
gonna have the animation like that, okay? So the last thing that we can do is just edit this text by double clicking on this, and then we’ll go in here and we’ll type in “WHY MACARONS?” with a question mark. And then I’ll just change this to Heading 2 to make it larger font. If you want, you can change the font color or anything like that. But I’m pretty happy with this, so I’ll just click “Okay”. And then we’ll go back right here. Now what we’re gonna do is add the other two banners to these two sections right here. So if you want, you can pause the video and just follow the same steps that we did for this section or I can show you how to do it again really quickly. So I’ll click on “Add Elements” and then we’ll just go in here and we’ll add a banner. We can just close this and now, we have our Banner options. I’m gonna go in here and change this to “160px’ and then we’ll click to add a background image. I’ll just select this one right here. You should see the image show up right here and you can always reposition this if you want. We’ll leave it just where it is right now. And then for the hover again, I’ll use the Zoom Fade and then I wanna link this to another page. So I’ll type in the URL “https://www.thewebsitename.” So go ahead and type in your own. For this page, we’ll gonna have it go to the About page.
So just type in “/about” right here. The last thing that we’re gonna do is just change the text right here. So I’ll go and double-click this and I’ll type in “MEET THE TEAM.” I’m gonna change this to Heading 2. That looks pretty good, so I’m pretty happy with that. So we’ll just click “Okay” right here. And then we’ll just go back right here. So I’ll show you how to do it one more time just because we are linking these two pages that we haven’t created yet. So we’ll click and add another banner. You can always just bypass this and fast forward if you want if you think we’re going too slow. So we’ll go in here and change this to “160”. And then we’ll add our background image. I’ll go in here and select this image right here and click “Use image.” Again, you can drag this around to re-center this. And then down here in the hover, we’ll select “Zoom Fade”. We’re gonna link this to another page down here.
So go ahead and type in “https://www.flatsometheme.com/products” and this is gonna link to the shopping page that we have. So the last thing that we have to do is just double-click on the text, and we can just type in some text right here. So I’ll type in “Shop” and change this to Heading 2. And then we should be good to go. So click “Okay” and then just click “Back” right here. Now, what we wanna do is add a little space between this section and our next section. So we can do that by clicking on “Add to Content”. Once we get this little pop up, I wanna find the Gap option. So click on this element right here and then you can change the amount of spacing that you have, but I like 30px. It just gives a little bit of room right here. So that’s pretty good. So we’ll just click “Back” right here. Now what we wanna do is we wanna add this Title section with the title in the center like this. So to do that, we’re gonna go in and add a new section. So click “Add to Content”. What we wanna find is the Title option. So it should be down here. So go ahead and click on that. You should see the title show up right here, and you should have your Title options right here. So what we wanna do is just go in and change the style to the center option so that it has the title in the middle. And then you have the border lines on the side. And then we can go in and change our title right here. I’ll just type in “Featured Products.” If you wanna change the font size, you can do that right here or the color. But we’re gonna leave everything else as is. So let’s click “Apply” right here. Let’s click on the “Update” button just to save everything. Once everything is updated, now what we wanna do is add a section for our featured products. You can see on the Home page right here that we’re gonna have eight different featured products that show up in this section. So we don’t have any products yet because we haven’t learned how to create them. But we can create this section and it will populate and show up once we create some featured products. So let’s add this into our Home page right now by clicking on the “Add to Content” button. What we wanna do is go all the way down to the bottom over here to the Shop section and we wanna add the Products element. So click on that. What we can do here is select the “Featured Products” options. So click on that and then click on “Apply”. Once you see the Featured Product options right here, all I wanna do is go into the Style tab and click on the “Normal” option. You can see right here that you do have the option of having a certain number of columns for your products, and we wanna leave this as “4” if you want the same as the demo website. There’s pretty
much nothing else that we have to change. We have “8” right here for the number of products, and then we’re just gonna order these by whenever they were created, and we’re gonna show
the featured products right here, okay? So once you’re ready, go ahead and click “Apply” and then click “Update”. Again, this section is gonna be blank right now, even though we do have the products widget because we haven’t created any products yet. So after you create some products and you select them as featured products, they will show up on the Home page. So don’t freak out if you
don’t see anything right now, okay? So the last thing that we’re gonna do for the Home page is add another section right here for some blog posts. So we’re gonna add a title and then our Post section right here. And then we’ll be done creating our Home page for the ecommerce website. So let’s go back and the first thing that we’re gonna do is add a little spacing underneath the Product section. So let’s click “Add to Content.” You should see the Product option show up right here. I just wanna go into the Style tab and select “Normal”. And then if you wanna change the number of columns or products that show on the same row at one time, you can have more columns or less. We’re gonna leave this as “4” right here. And then for the number of products, we’re gonna have “8” total. So we don’t need to change anything there. And then if you wanna order your products in a different order, you can go in here and select the way that you wanna do that. We’ll leave this as “Normal” and we’re gonna show all the featured products. So we’ll just select “Featured” right here. But if you wanna show all your products, you can just select “All”. But we do have the option of selecting certain price as featured products. So that’s what we’re gonna show, okay? So once you’re ready, go ahead and click “Apply” right here and let’s click “Update” just to save everything. Once everything is saved, now we have the Product section down here for our featured products. But again, nothing is gonna show up because we don’t have any products created yet. But once you create some products and you select them as featured products, they’re gonna show up on the Home page. So don’t freak out if you don’t see anything right now. It’s normal. So we will go and learn how to create products in just a little bit, but right now all we’re gonna do is create our last section for the Home page which is the Blog section. So again, we’re gonna have a title and then some blog post right here. So let’s go back to the ecommerce website that we’re learning how to make and let’s add another title section down here. So let’s click on “Add to Content.” What we wanna do is just come down and find that title widget. So it’s right down here. So I’ll just click “Title” and I wanna go into the Style and select the “Center” option. And then we can just change the title right here. So we’ll delete this and just type in “Delicious Ideas”. Once you’re ready, we can just click on the “Apply” button right here. If you want, we can just update this. And then we’re gonna add the Blog Post section right underneath. So click on “Add to Content”. What we wanna find is the “Blog posts” widget. So click on that. We’re just gonna go with the Normal option. So just click “Apply.” You should see the options right here. We don’t really need to change too much. We’re just gonna have three columns to show three blog posts or the most recent once. And then down here in the Posts section, we’re gonna change the number to “3” blog posts right here and then for the Title Size, I’m gonna go in here and change this to “Large” and you’ll see that the font doesn’t really change here but it’s gonna make a small little difference. And then we can just go down here and just look at these other options really quickly. I think the only thing that I’m gonna do is just make sure that the text is centered, and I wanna make sure that I have the comments turned on. So right here where it says, “Comments” I wanna make sure that these are “Visible” so if anyone leaves a comment, it will show the number of comments that we have, and I’m gonna hide everything else. So we’re gonna leave everything else as default. So you can customize this however you want. But once you’re ready, go ahead and click “Apply” right here and then click “Update”. If we need to, since we don’t have any real blog post right now, after we create them and we see this section populated, if anything looks a little funky or weird, we can always come back to this page and edit whatever things that we need to do, okay? So again, click “Update” just to save everything. Now we have just created the Home page for our ecommerce website. Now, we can actually close out of this if you want so we can go and check out the page. Once you exit out of the Page Builder, you should be brought to your Home page right here and you can see that we have our page all set up. Down here, we have our Row section and then we have a Featured Product section and our Blog Posts section. So these two sections might not really have anything because we haven’t created any products and we don’t have any blog post other than the
default one which we can delete a little bit later, okay? So really quickly, I wanna show you a few other things that I did when I looked over this page before I recorded this section. So I’m gonna go back to the page builder really quickly. Really quickly on the page builder, I wanna go to the Slider options and just show you at the bottom over here in the Auto Slide section that you can turn on and off the Pause On Hover. So if you have your mouse over the slider image and this is on, it’s not gonna switch to the other images automatically. But if you turn this off, then the slider ’s going to switch to the other images every five seconds or whatever you put in over here. So I turned this off and that’s something that I did on my own. So if you wanna do that, go ahead and
do that and click “Apply” and then click “Update”. And then the other thing that I did was I went to the Blog Posts options, and in the Title section, I changed this to “X-Large.” If I scroll down here, you can see that it just makes the font a little larger right here and then for the font for the Text, I changed that to “Medium.” So if you wanna change that, go ahead and do that. But if you like how everything looks, then you don’t need to change anything. But if you do make any changes, just click on the “Update” button right here
and then you can just close out of this, okay? So this is the Home page that we just created and we’re gonna come back here a little bit later to create our footer and our header menu and then we can always customize anything else whenever we need to. So right now, we are good to go. If you’re
ready, we can move on to the next step. The next thing that we’re gonna learn how to do is create this About page right here. So if you like what you see and you wanna learn how to create this template and then you can go in and customize that however you want. Let’s go back to the ecommerce website that we’re learning how to make. We can just hover over “New” right here and let’s create a new page. Once you’re on the Add New page, all we’re gonna do is just type in our page title right here. So I’ll type in “About”. And then down in the Page Attributes, I wanna select the “Page-Full Width” option. You’ll notice that the permalink shows up right here. If you put in a page title, then the
default permalink is gonna have the same name as the page title. If you ever want to edit this, you can just come in here and just type in whatever you want, and then click “Okay” and that’s gonna be your new URL after you click on the “Publish” button or the “Update” button, okay? So once you change the template to the page full width, let’s click on the “Publish” button to create this page. Once the page is created, we can go to the UX Builder tab to open up the page builder. Once we’re on the page builder, we’re not gonna use any of these templates; we’re gonna build this from scratch. So let’s click on the “+” button right here. We wanna add a banner. So we’re gonna use a banner for our page title, so go ahead and click on that. We’ll just go with the Blank option right here. So I’ll come down to the bottom and click “Apply”. What we’re gonna do is just change the size right here. So I’m gonna change this to “300px” so it makes it a little smaller. And then if you wanna change any of this stuff, you can. So we’ll just change the background image. So I’ll click on “Select Media.” Once the Media Library shows up, I’m gonna select this image right here for all of my different page titles. So I’ll click “Use image”. Now, what I wanna do after we have our image inserted is just double-click on the text box so we get this little pop up and then I can just type in the page title which I’ll put as “Our Story”. I’ll change this to Heading 1. And then I think I go in here and change to a “105%”. So that’s gonna give you this font size right here. Once you’re ready, go ahead and click on “Okay” and then we can just click on “Back” right here. I’ll add a divider. So I’ll just come in here and click on this. And then if you want, we can add some social media buttons. So click “Add to Text.” And then just come down to the “Share Icons” and click on that. If you wanna show this text box using an animation so when it uploads, it flips in or something like that, what you can do is go to the Text Box right here and then click on the “Options” tab. And then down here in the Animate
drop down, what you can do is select the animation that you want. So I’m gonna use “Flip in X” and that’s just gonna make this stuff filp in on the X axis as it loads. So you’ll see that when we upload or
show this page a little bit later. So again, I’ll click “Update” right here. Now we have our first section. So now we can add the section right below this. So we can collapse this banner and click “Add to Content”. What we wanna do is add a new “Section” right here so click on this. And then, we can use the default options so we can just go down to the bottom and click “Apply.” All I wanna do here is in the Class, because this is a full width page template, I wanna type in “container” right here. What that’s gonna do is make this into a container so that you have a gap on each of the right and left-hand side for formatting issues, okay? If you wanted to, you can add a background color or image but we don’t need to do that here.
So I’ll just click “Apply” and click “Update”. Now, what we’re gonna do is add a text box to this section so just go in here and then click on the “Text” option. We’ll just go with the paragraph option right here. So click “Apply” and then, we’ll open up the text editor and I’ll just go in here and paste in the same text as the demo website. I’ll change the font to “110%” right here, and just change the color to this color. I’ll center this to make it look pretty nice. Once you’re ready, go ahead and click “Okay” right here. Let’s just save everything by clicking on the “Update” button. Once everything is updated, now we’re gonna add a little title section right here for the About section. So I’ll click on “Add to Section,” and then find the Title element which should be at the bottom over here and click on that. And then we can just go in here and we wanna center this and then I’ll change the title to “A FAMILY OWNED BUSINESS”. So you can
type in whatever you want and I’ll leave this as H3. I’ll leave the color as this but if you want, you can always go in here and change this if you want. So I’m happy with this so I’ll just click
“Apply” and then click “Update”. Now, we’re gonna add the Content section right here for the About section. So let’s click ‘Add to Section”. We’re just gonna add a “Text” box so go ahead and click on that and then just use the Paragraph option and click “Apply.” And then we can open up the text editor and delete this text and just type in your About section right here and you can format this however you want. So all I’m gonna do is just highlight everything and just center this. If you don’t see all of these buttons, just click on this button that says “Toolbar Toggle” and you’ll see all of these so that you can format the text colors and everything like that. And then once you’re ready, click “Okay” and just click “Back” right here. We can update this just to save everything. Once we do that, we wanna add another title section for the Meet The Team section. So again, we’re gonna stay in this section, so just click on “Add to Section” and just scroll down and find the title element down here and click on that. And then we’ll change the style to “Center” again and we can just delete the demo text and just type in “MEET THE TEAM”. I like this formatting and I don’t need to add any gaps or anything like that so I’m pretty happy with that. So I’ll click “Okay” and then click “Update”. Once everything is updated, now what we’re gonna do is add some rows over here for the Employee section for the Meet The Team. So go ahead and click on “Add to Section” and then click on the “Row” element. I wanna have four employees for this first row. So I’ll click on the four column option and then just click “Apply” and you should see the columns right here. What we’re gonna do is add some Team Member elements into each of these. So we can hover over this and just click on the “+” button. I want you to come down and find the Team Employee or Team Member. So click on that. You should see the image show up right here. And then if you wanna change the name, go ahead and do that right here. You can change the title of this employee right here. You can also link this button or this section to another page if you put in a URL right here, but I’m gonna leave that blank and all I wanna do is come down to the social media icons. If you wanna have some buttons show up right here, what you wanna do is type in the URLs for these different social media pages right here. You can make them so that they go to this employee’s pages, if you want. So you wanna type in those and then the buttons will show up right here. And then if you wanna put in a little description for your employee, you can hover over the text box right here and just double-click this. You should get this popup and you can just paste in or type in your description right here for this employee. And then you can format it if you want. And then once you’re ready, go ahead and click on the “Okay” button. And then just click “Back” right here. So that’s how you create the team member. What I’m gonna do is just hover over this team member and make a copy of it a few times and drag it into these other elements right here. But if you want to, you can just pause the video and then create the additional team members and then once you’re ready, push “Play”. So right now all I’m doing is just making a copy of all these. So you can see I have four team members right here and I can just go into these and edit them if I wanted. And then to drag them to these other sections, all I have to do is just hover over it and then just move it into these other columns right here. You can see that they populate on the page right here, okay? So once you’re ready, go ahead and pause the video. Create this section and then push “Play”. What we’re gonna do to round out this page is create this value section. So I’m gonna show you how to create this section right here, okay?
So I’ll see you in just a few minutes. Alright. Welcome back! So if you paused the video, you should have some additional employees right here. If you didn’t pause the video, we’re just gonna move on to the next section right below. So we wanna add a title section down here so we can just click on the “+” button right here, and we wanna go into the Content section and find the title element and click on that. We’re just gonna go in here and center this and then we’ll type in “Values” right here and then just click “Apply” and click “Update” to save everything. And then what we’re gonna do is
add two rows at the bottom over here. So for the first row, we’ll click “Add to Section” and we’ll just click on “Row”. We wanna do two columns right here. So go ahead and close this. So we have the first two columns. And then what we’re gonna do is go and add the second row right now just so that you have everything because I’m just gonna show you how to create the icon box once. And then you can pause the video and add the other sections over here just like the Employee section. So you should have four different columns on two different rows right here. We don’t need to change anything with the Row option, so we can just hover over one of these elements and click on the “+” button. We’ll get this pop up and we wanna find the Icon element. So find the “Icon Box” and go ahead and click on that. Once you see the Icon Box right here, if you wanna add an icon, go ahead and click on “Select Media”. On the demo images, you should see some icons right here. So you can just select whichever one that you want. If you wanna upload your own, you can always just click on “Upload Files” and then upload your own images. Once you’re ready, click on the blue button down here. You should see the icon show up right here and what you can do is resize this icon to whatever size that you want. So I’ll just put it at “44px”. I wanna center this so I’ll change the icon position right here so it puts it in the center.
That’s pretty much all we have to do. We’re not gonna do anything else but if you wanna edit this text right here, just go ahead and double-click on this Text box. You should see this pop up right here. What you can do is just put in the text right here. So this is the value section for my demo website. So you can see, I just put in a value called, “Quality” right here. So I’ll just center this. If you wanna format any of this stuff, you can. I like how this looks right here. So I’ll just leave this as is. So one you type in your value or whatever description section, go ahead and click “Okay” and then just go back right here and
click on the “Update” button to save everything. Pretty much, that’s all you have to do to create
this icon section for this section right here. So you’re gonna do this a few other times for these other boxes. So if you want, you can pause the video and do that right now. What I’m gonna do is just quickly pause the video and create these other sections and pretty much, we’re gonna be done with the About page. So go ahead and pause the video, and create these sections and then push “Play” once you’re ready. We’ll review this page together, and then we’ll move on to the next page that we’re gonna learn how to create, okay? See you in just a few minutes. Alright. Welcome back! So if you paused the video, now you should have some additional icon boxes here. You can see in this section right here that I do have some additional icon boxes in all of my different columns. So we have the icons and then the values right here. So if you’re ready, just click on the “Update” button to save everything. Now, once everything is saved, we can close out of this. We should be brought to the About page right here. So you can see we have the URL up here and we have everything that we just created down here. So if this is what you see, then we are good to go. Now, what we can do is move on to the next step. Now, what we’re gonna learn how to make is
this page right here. So this is just another page. It doesn’t really have to be on your WordPress
website, but if you wanna learn how to make this, I’m gonna show you how.
So you should know how to make this. Now, what we’re gonna do is learn how to make is this page right here. So it should be pretty easy because you already know how to create page titles and different sections with text, but I just want to create this page just for the demo ecommerce website. So I’m
gonna show you have to make it really quickly. So if you wanna create that page, let’s go back to our WordPress website and hover over “New” and click on “Page.” Once you’re on the Add New page, go ahead and type in your page title right here. So I just typed in “Why Macarons”. And then for the template, I wanna choose the “Full Width” option. So go ahead and select that. And then once
you’re ready, click on the “Publish” button. Once the page is published, let’s go to our Flatsome
Page Builder, so click on this tab right here. Once you’re on the new template for the new page,
all we’re gonna do is click “Add to Content” and then we’re gonna add a “Banner.” So find that
and click on that. We’ll go with the Blank banner. and I’ll just close out of this. I should be in the Banner options right here and I wanna change the height to 300. So I’ll just type in “300px”. And then, we can add
the banner image that we wanna use. So click on “Select Media”. And then if you wanna use the demo image, just use this image right here and click “Use this image”. You should see the image show up right here, and we can just double-click on the Text and change the page title right here. So I’ll type in “Why Macarons” and I believe this is 110% but I’m not gonna format this because it looks pretty good just by pasting it in from the demo WordPress website. And it does have Heading 1 right there. So I’ll click “Okay” right there and we’ll go back. And then, we can just put in a little divider right underneath this. So we’ll come here and put that in. The steps should be pretty easy because we’ve already done a lot of this stuff a few times. So if I am going a little too fast, you can
always pause the video or rewind. The last thing that we’re gonna do for this title section is add some social media buttons. So click on “Add to Text” and then find the “Share Icons” right here and click on that. You should see the social media buttons show up or right here. You can format this if you need to. We’ll leave that as is. So we’re gonna come back to the main page here. Now, what we wanna do is add another section that we can create and put in our text and all that stuff. So I’m gonna click on the big “Add to Content” button and I wanna add a section right here just so that we can go and create this as a container so that it’s not full-width. So in the Section options, I wanna type in “Container” right here, and then that’s just gonna give us some gaps on the right and left-hand side. And then, we can
click on “Add Elements” and we wanna add our Title section really quickly. So I’ll just come down here and click on “Title.” We have this option so we’ll go in and click “Center”. And then I’m gonna go to the demo website and just copy this text right here just because I don’t wanna type it in. For the title, I’ll just delete this and paste that in. So you can see it says, “THAT’S EASY BECAUSE THEY’RE DELICIOUS!” Now, we’ll go back, and we wanna add a Text section now. So click on “Add to Section” and then find the “Text” element and click on that. And we’re just gonna go with the Paragraph option, so I’ll click “Apply”. And then we can open up the text editor and delete the dummy text and just paste in the text that we wanna put in to this page. I’ll highlight everything and just center this. If you wanna format the text to a different color, you can do that by just selecting whatever color that you want or font size or anything like that. So there’s one other thing before I actually forget. So if you wanna ever link any of these text to another page, you can just highlight the text that you wanna link to. And then you can click on this link button right here and then you can type in the URL right here. Or you can go to the Link options and you’ll show this little pop up. What you can do is select the page that you
wanna link to and then you have some additional options here, okay? So we’re not gonna do that for this but I did wanna just show you that you can do that and you can do a bunch of other stuff using
all of these other buttons. So you can also add images and everything like that. So I do have a video tutorial on how to use WordPress if this is your first time using WordPress, and that’s a beginner tutorial.
So I will link you to that in the video description, okay? So back on track now, we are done with the text section so I’m gonna go back. We have everything that we need. So let’s just click “Update” right here. You can see that we have our complete page. So this page was really easy to make and hopefully, you had no trouble whatsoever. If you’re ready, we can just close out of this and take a look at it. Now, you should be on the page that we just created. So you can see all of the content that we added right here. So using the Flatsome Page Builder is really easy to build out some custom pages for our online store. We’re gonna take a break from creating pages for just a little bit. Before we actually move on to the next step, I wanna ask you if you like this video and it’s very helpful to give it a big thumbs up and leave a comment in the comment section letting me know. Also, make sure to subscribe to the NYC Tech Club YouTube Channel because I do appreciate the support, okay? So now, we can move on to the next step. What we’re gonna do right now is start the process of creating our online store. So before we can create this custom online store page, we have to create some products. So the type of products that we’re gonna create are single variable products such as this, where you only have one option and no variables such as colors or different sizes. And then, we’re gonna learn how to create variable products like this where you have a price range and you can have as many different variables as you want, such as sizes or different colors or anything like that. But before we actually create any products, what I wanna do is go through our WooCommerce settings to set the currency and the shipping rates and everything like that. So if you wanna do that, waht we wanna do is go back to our ecommerce website, and I want you to hover over the website name and let’s go back to our dashboard. Once you’re back on the WordPress dashboard, we wanna come down to the WooCommerce tab and hover that and click on “Settings”. Once you’re on the Settings page, you should see all of these tabs here and you can go through them one by one to set your settings for your ecommerce website or what we can do is hover over “Help” and click on that and open this little section, and we can run the “Setup wizard” for WooCommerce. So let’s do that by clicking on this link right here, and then we can click on this button right here. Once you’re on this page, this is the Setup Wizard. So you can go through all these different steps
and we’ll go through them together. So the first thing that you wanna do is type in where your store’s gonna be based online. So I have the United States here and then I filled out my address right here. And then what you wanna do is choose the currency that you wanna sell in. So we’re using US dollars for this demo site. And then you can select whether or not you’re going to sell physical or digital products. So just select whatever you want and you can check this box if you want. And then once you’re ready, click “Let’s go!” Once you’re on the Payments tab, you can see there are some default payment options right here and there are some additional payment options that you can use a little bit later. So I will show you how you can get to those after we go through the setup wizard. So right now we have the Stripe and PayPal option, and then some offline payment options right here. These ones are all turned off right now but you can turn these on if you want. What I wanna do for my ecommerce website is I just wanna use PayPal. So I’m gonna turn off Stripe right here, and then you can put in the email address that you wanna use for PayPal right here. So I’ll leave that as this email address. Once you’re ready, go ahead and click on the “Continue”
button. Once you’re on the Shippings page, you can see there are different shipping zones right here. So you have your country that you’re located in and then all other locations other than your current country. So you can put in different shipping methods or different prices that you wanna charge for shipping over here. So you can select the “Flat Rate” or “Free Shipping” for these different shipping zones. So I’m gonna have a flat rate for both of these. So I’ll put in $5 for my default country and then for all other locations, I’ll put in $10 right here. I will cover shipping zones again in more details when we go through the WooCommerce Settings pages, but since we’re just going through the setup wizard right now, if you wanna use any of these methods right
here, then go ahead and select what you want. There is another option called “Live Rates” which gets the rates from different shipping carriers, if you wanna use United State Postal or UPS or FedEx or something like that. What you can do is click on this link right here, and it’s gonna open up this page right here. WooCommerce creates additional plugins that you can use to get the rates that you will have to charge your customers if you were to ship something based on these different carriers. So if you wanna use FedEx or any of these other companies, then you can just purchase these WooCommerce plugins and then install them and then you can get the actual rates that you have to charge your customers whenever they make a transaction. That’s gonna be based on the size and weight of your products. So as we go through making our products for our ecommerce website, I will show you where you can add the different weights and different sizes and everything so that you can get an accurate rate from the live rates option if you wanna use that. But again, we’ll cover shipping in a little bit more detail when we go to the Settings page but right now, since we’re just running the setup wizard, go ahead and choose whatever you want right here or you can turn these off. And then once you’re ready, go ahead and click on the “Continue” button. Before I click on the Continue button right here, I do wanna note that you can choose the measurement options right here for your weight and also the dimensions right here. So I’m gonna leave everything as the default, but if you need to go ahead and change or select whatever you want. And then once you’re ready, click on “Continue”. Once you come to this tab right here, I’m gonna turn off the MailChimp option but I wanna have the automated taxes just to make my life a little bit easier. So I’ll leave that checked. Once you’re ready, click on “Continue”. Now, all we have to do is activate our Jetpack. So if you want, go ahead and click on the “Continue with Jetpack button. You should be redirected to the Jetpack page. What you wanna do is create an account so that you can log in. So go ahead and type in your email address or whatever you see right here and then click on the “Continue” button. Once the Jetpack is connected, you are good to go. If you wanna subscribe to some newsletters or something like that, you can click on this button. We’re not gonna do that. We’re gonna come down to the bottom and we wanna go and review our settings and then go through the WooCommerce settings in a little bit more detail before we start creating our products. So go ahead and click on this button right here that says, “Review Settings”. How to Use WooCommerce for Beginners on the NYC Tech Club YouTube Channel. So you can check that out. I will link you to it in the video description. We do go into more details about how to use WooCommerce in that video. So I’ll go over as much as I can in this video tutorial but we can only cover so much, because this is a tutorial on how to build a WooCommerce website. So I will go And once you’re on the Products tab, before we move on, I do wanna note that I do have a video tutorial on How to Use WooCommerce for Beginners on the NYC Tech Club YouTube Channel. So I will link you to that and you can check that out to go into more
details on how to use WooCommerce, alright? So once you’re on the Products tab, there are some
links up here. I’ll let you explore the inventory and downloadable products tab on your own. We’re gonna stay on the General tab right here and what I wanna do is just show you a few things. So once you go through the setup wizard, the WooCommerce plugin is gonna install some default pages for you. So by default, there is gonna be a page called, “Shop”. If you wanna create another page, then you can set it as the Shop page. The Shop page has a default layout. What we’re gonna do is create a custom page that looks like this, but if you wanna use the Shop page that WooCommerce puts in by default, you can use that also. So I’ll show you what that looks like in just a little bit when we go over the step of creating your Shop page. So everything here looks pretty good. If you wanna change the measurements for the weight and the dimensions, you can do that right here. Again, make sure that you click on “Save Changes” if you do make any changes, okay? So let’s go to the Tax tab once you’re ready. Once you’re on the Text tab, we don’t really do anything here because we enabled the automated taxes and we have everything that we need. But if you do make any changes, make sure that you click on the “Save Changes” button. So there are some additional links here but again, you don’t need to go through them since we enabled the automated taxes. So we’re just gonna move on to the Shipping tab. Once you’re on the Shippings tab, you can see that we have the zones that we saw in the Setup Wizard right here. If you ever wanna edit the zones, you can just hover over them and click on “Edit” and then you can change the shipping method or the price that you’re charging for these different zones. You can also add some additional zones if you click on this button right here. We’re not gonna go through these links in this video tutorial but in the WooCommerce Tutorial for Beginners, we do go through these so you can go and check that out. Again, I will
have a link to that video in the video description. But what I can show you is if you want the live rates option, we can do is click on the “Extensions” link right here. That’s gonna open up this page right here. If you go to the Shippings tab, it’s gonna open up this page where you can download some of these plugins if you purchase them and then you can pull the rates that they were charged for your products or whatever your shipping based on what these carriers are gonna charge. So there’s everything from UPS, FedEx, to all these other international companies. So you can explore this page on your own. Again, we do go through this stuff in more detail in our WooCommerce Tutorial for Beginners. So I’ll let you do that on your own, but I do wanna note that you can use live rates instead of the flat rate or free shipping options that you see right here, okay? So let’s go to the Payments tab once you’re ready. Once you’re on the Payments tab, you can see there are some default options right here. I just wanna turn on this PayPal option, and I also wanna make sure that the PayPal checkout is enabled. What we can do is go through the setup options over here to integrate PayPal with our ecommerce website. But before we do that, I also wanna note that you can add some additional payment methods by again, clicking on the
“Extensions” link and you’ll go to this page right here. We’re on the Payments tab now and you can see there are some additional payment methods that you can use if you download the plugins for these. So they might cause additional money. I’m not too sure but you can just click on the ones that you wanna use and download them. Again, install these plugins and then you can use these different payment options for your ecommerce website. So I’ll let you explore that on your own and again, we do cover additional payment options in our WooCommerce Tutorial for Beginners. So for this demo website that I’m creating, I’m just gonna use PayPal and PayPal Checkout. So for PayPal, I wanna go through the Set up options. So once you enable this, if you wanna use PayPal, click on the Setup option. Once you come to the PayPal Setup page, you wanna make sure that this is enabled right here and then you wanna put in your PayPal email address right here. And then if you come down to receiver email, you wanna put in the email address so that you can get a notification whenever you get a transaction. If you wanna hover over all of these other sections with a question mark, then you can see this little popup to see what these sections are about. But we can leave this stuff blank. All I wanna do is just come down to the bottom to the API credentials. What you wanna do is put this information in if you wanna be able to process refunds via PayPal. So if you wanna do that, you wanna click on this link right here and then go and login to PayPal. What you wanna do is come to the API access section and you wanna click on this link to get the API credentials. You’re gonna
be redirected to the API credentials page and what you wanna do is come down to the API integration section and then click on “Manage API credentials.” That’s where you can go and get the information that you need for a username, password and signature. So you’re gonna have to go into PayPal and generate that and then you can copy and paste that information into these sections right here. I can’t show you my username, password and signature because they’re distinct and unique. So I have to use them for my own ecommerce website. So once you put this in, all you have to do is click “Save changes” right here and then you’re good to go. So go ahead and do that on your own. And then once you’re ready, I want you to go back to the Payments tab. And then what we’re gonna do is just come down to the PayPal Checkout and make sure that that’s enabled and then click “Manage” right here. Once you come to the PayPal Checkout page, there shouldn’t be anything that you need to do because we did everything in the setup wizard. But if you want, you can update the PayPal email address right here, and you change your website name and insert your logo. So if you want, you can pause the video and go through this page right here. If you do make any changes, make sure that you click on the “Save Changes” button. But we don’t need to do anything here so we can just move on to the next step. But again, if you wanna integrate some additional payment options, make sure that you click on the “Extensions” link and then go to the Payments tab and then you can just download whatever payment plugins that you want to integrate into your ecommerce website, okay? So once you’re ready, let’s move on to the Accounts & Privacy tab. Once you come to this page, there’s really nothing to do. We’re gonna leave everything as the default. But in the Privacy Policy section, once you create a Privacy page, you can go into this drop down and select that page so that when you have the Registration Privacy Policy and Checkout Privacy Policy show up on this respective pages, you’re gonna have a link to that page over here. So if you wanna update this text, you can do that. If you do make any changes, make sure that you click on the “Save Changes” button. But again, we’re gonna leave everything as the default right now. If we do create a Privacy Policy page together, we can come back in here and select that page together, okay? So once you’re ready, let’s go to the Emails tab. On the Email tab, you can see that you have a bunch of different types of transactions. For the first three, an email is gonna be sent to this email address to notify you. So if you wanna update your email address, just click on the “Manage” button right here and then you can update your email. And then for these other transactions, an email’s gonna be sent to
your customer. So if you wanna update these, you can click on these buttons right here. And then down here is where you can update the sender information. So whenever a customer gets an email, it’s gonna come from this name right here and from this email address. So if you’re going to create an email address using your website domain, then you can update this after you create that email address. Again, we will have a link in the video description to How to Create an Email Address Using Your Own Website
Domain for free. So you can check that out. If you do make any changes, click on the “Save Changes” button here. But we’re gonna leave everything as is. So the last tab that we have to go to is the Advanced tab. Once you come to the Advanced tab, this is where you can see that there are some default pages selected for you. Again, once you run the WooCommerce Setup Wizard, you should have these pages created for you and they should already be selected
So if you have this, then you’re good to go. You do need to make a Terms & Conditions page a little bit later and then you can just go in here and select that page so that it is set to the Terms & Conditions page. Other than that, pretty much everything is set up for you so you don’t need to do anything. But again, if you do many changes, make sure that you click on that “Save Changes” button. We don’t need
to go through these other links. So this is pretty much the WooCommerce settings. Again, if we do create a Terms & Conditions page together, I will remind you to go in here and select the page. But these are the things that you can do on your own since you know how to create pages and all that stuff. So if you’re ready, let’s move on to the next step. Now, what we’re gonna do is learn how to create the different types of products for our ecommerce website. So the first type of product that we’re gonna learn how to make is called a simple product. What that means is you’re gonna create a product with no variables and no price variations. So there’s only one option here and you can purchase as many of these as you want. So you can see this is what the Product page looks like for a simple product. So if you wanna learn how to create a simple product, what you wanna do is go back to your ecommerce website and then
hover over New and click on “Product”. Once you’re on the Add New Product page, we’re just gonna fill out the information on this page to create our new product. So the first thing that we’re gonna do is just type in the product name right here. So I’ll type in “Butter Orange”. And then this section is where you’re gonna type in the long description and then at the bottom over here is the short description, and then this section is your product data. So we’re gonna go through all of this. But really quickly, let me just show you where the long description is on the demo ecommerce website. So at the top over here, this is what you call the short description and then down here in the description section, this is where you can put in a longer description. On the ecommerce website, it might be a little confusing because you see this section for the long description and then at the bottom over here, you have the short description. But that’s just how they set things up. So what we can do is just go to the demo website. I’ll just come up here and I’m gonna highlight the short description right here and just copy that and paste it in just to save some time. So again, this is the short description that we want to put it right here.
If you wanna add any images or anything, just put your mouse wherever you wanna add
the image. And then click on “Add Media” and then you can upload your
own images and all that stuff. So now, what we can do is just put in the long description and then we’ll put in the price and all that stuff. It doesn’t really matter what order you go in but I just wanna put in the description stuff right now just to get it out of the way, and then we can talk about how to add the information for the simple product. So this is the long description and I’ll just paste it in right here. Once you’re ready, we can come down to the Product data section and since we’re creating a simple product in this drop down, you wanna make sure that you select simple product. If this is a virtual product, you can check this box and you can see that the shipping tab disappears. And then if this is a downloadable product, you’ll get this section right here to upload the files. But this is gonna be a real product since it’s a macaron so I will leave this unchecked. What I can do here is just type in the price. If I want, I can put in a sale price and you can also schedule the sale by clicking on this link right here and then you can put in
the dates right here if you want. So once we have our price, now we can just go through these tabs. I’ll go through them with you but we’re not gonna actually add everything into each of these tabs. We’re just gonna go into certainly one of these. But I might as well just show you what each of these are really quickly. So in the Inventory tab, this is where you can add the SKU number and you can manage your stock and say whether or not this is in stock or out of stock. And then for the shipping tab, if you’re using the live rates option or if you would just wanna put in the weight and the dimensions, you can do that right here. You can also select the shipping class if you have shipping classes but we didn’t set any up in our WooCommerce settings. So we’re just gonna use the flat rate or the free shipping option that we set up during the setup wizard. And then we can go to the Link Products tab. What you can do here, if you have some additional products created, is put in the product names or the product IDs to upsell
or cross sell these products on the Product page. But we’re not gonna do that for this tutorial. So we can just go to the Attributes tab. This is where you can add some variables and everything like that. So we’re gonna do some stuff with Attributes tab when we create variable products but we don’t need to do anything right now for a simple product. So we can just go to the Advanced tab. On the Advanced tab, this is where you can put in the option of enabling reviews or if you have a note for the customer, you can put that in right here. But we don’t need to do anything. We just wanna make sure that this box is selected so that when someone
buys this product, they can also review it. So once you’re ready, we can go to the Extra tab. This is just a tab with additional customizations for the Product page. So you can go in here and
see all the different options that you have. If you want a Custom Bubble, you can just go in here and enable it, and then you can put in the title. Maybe it says, “New” or “On Sale” or “Discontinued” or something like that. And then you have some additional options here. We don’t really do anything here
but it is a cool little feature, so it’s really up to you. Now what we can do is just jump over to the Product Image section and this is where you wanna add your product image. So we can just click on “Set product image” and we’re gonna go to our Media Library. I’m just gonna select this image right here and click on the blue button. You should see the image show up right here and then if you wanna add some alternative images, you can come down to the Product gallery and click on this. And then what you can do is just click and add or update or upload as many different images as you want. So we’ll just click and add this one and maybe, we’ll add this one also. So we have two checkmarks and
we can just click “Add to gallery”. Now, you should see the two images right here and you can always remove these by clicking on the “X” over here. And then if you want, you can put in product categories which is gonna help sort your different products and also this helps with showing recommended products in the Product page. So if you put in product tags and categories that are similar to other products, then in the Product page down here in related products, those products
are going to show up over here, okay? So what we can do is just go ahead and add some new category names, so click on “Add new category”. We can just type in “Cotton” right here and push “Enter” and you’ll see that the category name shows up right here. And then we can type in something like “Cream Filled” and really whatever you want. You can always edit these categories by clicking on the “Categories” link over here and you can delete them or anything like that. So I’ll just add those and maybe, I’ll type in “Macarons” right here and I’ll type in “Cream Filled”. So again, the category
names and the product tags are gonna help with the related products that populate on the Product page. So you wanna be smart about what you put in if you put in anything, but you can always just leave it as “Uncategorized” also. If you want this product to show up on the Home page, remember we’re gonna have a Featured Products section. So what you can do is right here where it says, “Catalog visibility,” if you click this link, you can check this box right here that says, “This is a featured product”. If you check this, then it gonna show up on the Home page since we have a featured product section. So if you don’t check this box, then this product isn’t gonna show up on the Home page and only on the Shop page or
the custom page that we create, okay? So I’ll click “Okay” here and I’ll make it a featured product. Once yo’reu ready to create this product, all we have to do is click the “Publish” button. Once the product is published, we can go and check it out by clicking on “View product”. Once you come to the Product page, you should see this and it looks a little different than the demo ecommerce website. So I wanna go into my settings and I wanna change a few things. I wanna change the link colors that you
see on this page to this color right here, and then I wanna remove the PayPal buttons
because I don’t think they look that good. So if you wanna do that, first we can go and remove the PayPal buttons by going to our dashboard and then clicking on the Settings option under WooCommerce. And then if you come to the Payments tab to remove the PayPal buttons, I want you to come to the PayPal Checkout option and then click on the “Manage” button. Once you come to this page, I just want you to scroll down to the Button Settings and I want you to uncheck the Smart Payment Buttons option and then you can uncheck the “Checkout on cart page” and “Checkout on Single Product.” That’s just gonna remove the buttons on those pages. So you’re still gonna be able to use PayPal. If you wanna disable PayPal credit, you can do that by unchecking this box also. So
that’s all we have to do to remove the PayPal buttons from the pages. So we can click on “Save Changes’ right here. Once the settings are saved, now that I wanna do to change the product page layout and some
of the link colors is I want you to hover over Flatsome and click on “Theme Options”. You’re gonna come back to the customized page that you see right here with all of these tabs. To change link colors, we can go into the Style tab and then go to the Colors tab and just come down to the link section right here. What I wanna do is put in the color code that you see for the widget link colors into this one right here. So I’m gonna go into this one and just copy this color code and then go into the link colors right here and just paste that in. So you can see the color changes right there. And then if you wanna change the hover
color, you can do that right here also. So you can do whatever you want, but I wanna change the link colors right here so that you can see they change right here and then also down here in the Categories and Tag section, okay? So once we do that, we can go back and I wanna go back to the main page and go to the Shop tab. And then I wanna go into the Product page tab and I just wanna change the layout to the “Left Sidebar” option. Once this refreshes over here, you can see that we’re gonna have a sidebar that we can customize in just a little bit, and then we have our section down here. So this looks a lot better, and I’m gonna click on the “Publish” button just to save all of my changes. Once everything is saved, we can go back to the Product page right here and now we can just refresh this. Once the Product page loads, this is what you should see now. So at the bottom over here, we’re gonna have a Related Product section that will populate as you create some additional products with similar categories and product tags. We can go in and customize our sidebar in just a little bit. So if all you’re creating are simple products for the ecommerce website that you’re learning how to make, go ahead and pause the video and create as many different simple products as you want. And then push “Play” once you’re ready, and I’m gonna show you how to create some variable products. Otherwise, if you’re ready,
we can just move on to the next step. Now, what we’re gonna do is learn how to create some variable products for our ecommerce website. So you can see right here the Product page looks very similar except that you have different sizes right here that you can choose from. So you can see if I choose “12 oz” it’s gonna be 699. And then if I wanted to, I can create a different variable that has a different price. You can have as many different variables as you want. So if you want sizes and colors, you can combine them. So I’ll show you how to do that in this part of this video tutorial. So if you wanna learn how to create some variable products, let’s go and do that right now. So again, if you wanted to you can pause the video and create some simple products. But if you wanna learn how to create variable products, let’s just go and create a new product by hovering over New and click on “Product.” Once you’re on the Add
Product page, you’re gonna do the same steps as the simple product. So you’re gonna put in a product title right here and then your long description right here. And then at the bottom, you can put in your short description and then a product image and any alternative images if you want. You can also add some product tags and product categories so that when you have related products, they’re gonna populate on the Product page. So once you do that, you can also click on the “Edit” button right here and make this a featured product to show up in the Featured Product section if you want. We’re not gonna do that for this product but just remember that you wanna do that if you want the product to show up on the Home page since that’s what we did for our custom Home page. So to create a variable product, what you really have to do is just focus on the product data section. What you wanna do is go into this dropdown and select the variable product option and you can see that this tab changes a little bit. So we’ll go through all these tabs and I’ll show you how to add the variable, and then the price and all that stuff. So we don’t really need to do anything for the General tab. For the Inventory tab, if you wanna add an SKU number or manage your stock, you can do that on your own. And then for Shipping, you can put in the weight and the dimensions if you want. We’ve already set the shipping rates in the WooCommerce settings so we don’t really need to do anything here. For Linked Products, we don’t really cover this but I do cover it in my tutorial on How to Use WooCommerce. So you can check that out or read up on this on your own. For variable products, what you really wanna do is go to the Attributes tab and in this dropdown right here, you wanna make sure that you select the “Custom product attribute”. To create your first variable, you wanna click “Add” right here. Once you see this section right here, what you wanna do is type in the name for the variable. So we’ll do size for this variable and then you’re gonna type in the values right here. You wanna read the instructions so that you know how to sort these values or separate them. You wanna use a line and this line is gonna be “Shift” and the “/” sign. So you don’t wanna use a comma. What we can do is just type in some values here. So you can see I put in the line right here to break this up and we’ll just put in three different sizes. So we’ll do 8oz, 1lb and 10lb. Once you’re ready, what you wanna do is make sure that you check both of these boxes. So “Visible on the product page” and also “Used for variations”. And then once you’re ready, go ahead and click on “Save Attributes”. Once that’s saved, you can always go back in here and change the values or the variable name and all that stuff. If you wanna add some additional variables, you can just go back in here and click “Add” and then you’ll add another variable over here also. So if you wanted size and color or something like that, you can add as many different variables as you want. Just make sure that you click on “Save attributes” and check those two boxes that you see right here whenever you go in here, okay? So once you’re ready, what I want you to do is click on the “Variations” tab. Once you’re on the Variations tab right here, you’re gonna see this dropdown and we just wanna make sure that we select “Add variation” right here and then click “Go”. Once you see this little section right here, you can expand this and you’ll see all the details for this variable right here. So you can put in the price or the sale price and everything like that. What you can do is select the different variable options right here. So you can do just for “8oz” and then put in a price right here. And then if you click “Go,” you can add another one of these lines and then you can go in and select “1lb” and put in a different price. So I’ll show you how to do that in a second variable product that we create together. But right now, all I’m gonna do is just create a basic variable product where we have one price for all the different sizes that we have for this variable. So I’ll just come in here and just type in “15.99” for the price and that’s all I do. So I’ll just click “Save changes” right here. Once that’s saved, if you want you can go into the Advanced tab and make sure that the reviews are enabled. And then if you wanna go to the extra tab right here, you can always go in here and
then just customize whatever you want. The last thing that you have to do is just publish this product once you’re ready. Once the product is published, let’s go and check it out really quickly. Once the Product page loads, don’t worry about the sidebar right here. We can always customized this a little bit later and we can remove the uncategorized category also. But right now you can see on this side that we have our size variable. So we can just go in here and select whatever size that we want and we can add as many as we want to our shopping cart. So this is how you create a very basic variable product. But what I wanna do is show you how you can create a variable product with different price ranges based on the different sizes, and also how you can add multiple variables. So if you wanna do that, I’m gonna show you how to do that really quickly. So let’s go and create a new variable. So let’s click on “Add New”. Once you’re back on the Add New Product, I already added the new product title and then I put in the description right here and the short description down here. I put in my image and I put in some category names and product tags right here. Again, you wanna put this in so that when the Related Product section shows up, you’re gonna have products similar to this one. So it’s gonna be based on the product categories and the product tags. Just as a reminder, if you wanna make this a featured product, you wanna go in here and check this box right here. So what we’re gonna do is come back to the Product data section and again, we’re creating a variable product with more than one variable this time. We’ll make prices based on the values that we select. So we’re gonna go in here and select “Variable product”. We’re gonna skip all this stuff and just come down and create our variables. So I’m gonna go to the Attributes tab. Once I come to this tab, I’ll click and add my first variable. Right here, I’ll put in the first variable. So I’ll just type in “size” and then I’ll put in “8oz” and then I’ll put the space, “1lb” and “10lb”. And then I’ll click on this box right here to say “Use for variations” because you wanna make sure that you do that, and then click “Save attributes”. Once that’s saved, if you ever wanna go back in here, you can just click and expand this section right here. You’re gonna see the values and you can always go in and edit this stuff, okay? So I wanna add another variable because we wanna have two variables for this product. So I’m gonna click “Add” again. This is all you have to do to add as many different variables as you want. So for this variable, I’ll call it “Roast”. And then, we’ll just put in “Light” and we’ll put in “Dark”. And then, I wanna check this box again that says, “Use for variations” and click “Save attributes”. Once that’s saved, now we can go to the Variations tab. Once you’re on this tab, you should see two options right here. So I’m gonna show you the easy way first and then the more complicated way after that. So if I just click on “Add variation” and click “Go” right here, and you’re gonna see this section right here and you should see all of your size variables right here and then all of your roast variables right here. For this example, if I wanna make a price for the light roast and then a different price for the dark roast, what I have to do is I have to have two rows of these so that I can select the light roast in this row and then I can have another row where I select the dark roast. So what I wanna do is just add another variation. You can see right here that we have another dropdown and we can just select the roast that we want. So I’ll do light here and dark here just to make it in order. If I wanna put a certain price for the light rose, I can just go in here and click and expand this, and I should see this entire section. And then we can just type in “$6.99” for the light roast and then for the dark roast, if I collapse this I can go into this one that has the dark roast selected and then I can put in “$10.99”. And then I’ll collapses this one. So you can see that your visitor can select any size and then if they select the light roast, they’re gonna get one price and then if they select any size in the dark rose, they’re gonna get another price. So if you wanna save this, all you have to do is click “Save changes”. Once everything is saved, you just wanna go to the Advanced tab and make sure that the reviews are enabled. We’re gonna come back to this section, and I’m gonna show you how to use the create variations from all attributes after I show
you what the page looks like right now. So I just wanna publish this really quickly. Once the product is published, let’s go and check it out by clicking on “View product”. Once you’re on the Product page, don’t worry about the sidebar right now. We can always go in and customize this a little bit later. But you can notice on the right-hand side that this is a price range right here for this product because we have multiple variables and based on the values that we select, we’re gonna get one price you can see right here and then if we select another value, we’re gonna have another price. So this is how you can create a variable product with multiple variables and different prices. If you want, you can always just have multiple variables with one price. All you have to do is just have that one row of variations instead of two. So I just wanna show you how to use the other way of creating variations. So I’m gonna go back to the Edit Product page. Once I’m back on the Edit Product page, I’m gonna come back down to the Variations and just open up this tab. I’m gonna remove everything really quickly and then just show you how to use the second dropdown option. Once everything is removed, if you remember in this dropdown, when we created our first values and prices, we used “Add variation”. Now what I wanna do because we have multiple variables is use the “Create variations from all attributes” just to show you what happens when we click “Go” right here. So let me just choose this option and click “Okay” right here. Once everything loads, now what you can see is that you have all of your different size values right here and then you have all of your different values for the second variable right here. So if you wanted to have a certain price for this combination and then this combination and so forth, you can have all of your combinations right here of the different values for all of your different variables and then you can just go into each of these and put in your prices and your other information right here, okay? So this is a little bit more of a complicated way but the way that we did it with just adding the variations is perfectly fine also. So it’s really up to you what you wanna do based on the ecommerce website that you’re learning how to make & build, but this is just another option using the create variation from all attributes, okay? So if you’re confused at all with the variations and all that stuff, go ahead and just rewind this section, re-watch it and I broke it down into two
simple ways of creating variations I broke it down into two simple ways of creating variables and different prices and all that stuff, okay? So I’m not gonna click on the “Update” button right here because we’re just gonna leave the product as is with the different prices and all that stuff. Again, this is just a demo website. So if you want, what you can do right now is pause the video and create some additional variable products if you want. Or what I can do is I can show you how you can create variables that you can use as a shortcut in this section so that you don’t have to go into the Attributes tab each time and create new variables if you’re gonna be using the size variables over and over again or color variables or anything like that. So let me just show you how to do that really quickly before you actually pause the video to create some variable products. So what you’re gonna do is underneath Products over here, click on “Attributes.” Once you’re on the Attributes page, this is where you can go to create variables and values that you can use over and over again. It just saves a little bit of time so you don’t have to retype the values and variables each time you create a new product. So I’ll just show you really quickly. So I’m gonna create a size variable, and then I’ll type in “Slug” for the size right here. So you can order your variable values however you want, but we’re gonna go with the custom ordering and just click on “Add attributes”. You should see the new size variable right here and you can always edit the name by clicking on this link. Or what you can do is just come over here were it says “Configure terms”. This is where you can put in the different values for this variable. So I’ll click on “Configure terms”. What you can do here is type in all the values for these variables. So we can type in “Small” and we can type in “Small” right here and click “Add new size”. And then what we can do is just type in “Medium” right here and type in “Medium” for the slug and click “Add new size”. You’ll see them get added over here. And then we can just type in “Large” really quickly and also click on the button right here. You’ll see that the order looks like this. If you wanna rearrange this, so maybe you wanna make small at the top and large at the bottom, you can put these in the order when you type them or what you can do is just click and drag them around. Now you should have the size variable with your different values right here. So now, look at what
happens when I go and create a variable product with this variable. So I’m gonna hover over Products and click on “Add New” just to show you really quickly. Once you’re on the Add New Product page, pretend that I filled out all this information and I’m just gonna come down to the Product data section, and I wanna create a variable product. So I just have to come down to the Attributes tab. Before, when we created a variable product, we have to use this option and click “Add”. But now that we created a variable and we stored it in this dropdown, you should see that variable and you can just select it and click “Add” right here. Now, you should see the variable show up right here, and instead of typing in all the values, all you have to do because you stored the values already is click on this button and you’ll see the values show up right here. You can always remove any of these or add as many as you want. So this just saves a lot of time because if you have to type in this stuff each time, it does add up if you create a bunch of different variables. So again, just remember to click “Use for variations” and click “Save attributes”. And then, all you wanna do is just go to the variations tab and you can just go in here and click on “Add variation” and just go in here and just expand this. And then just go through the steps of creating the price and all that stuff. So really, the Attributes link right here to create variables just save you a lot of time, especially if you’re gonna use variables over and over again, okay? So really, I just want to show you how to do that. So if you need to, go ahead and create a bunch of variables and the values and save those, so when you create variable products you’re just gonna save a lot of time. So what we’ve done so far is we learned how to create simple products and variable products and we learned how to store variables. So if you want, you can pause the video and create as many different simple and variable products as you want. I’m gonna do the same so that we can fill out the Store page when we go and create it. Once you’re ready, push “Play”. And then, what we’re gonna do is learn how to customize our sidebar to look something like this or however you want. And then we’re gonna go in and we’re gonna create our Custom Store page. So what I’m gonna do is pause the video also and create some simple and variable products. Once you’re ready, go ahead and push “Play” and we’ll move on to the next step. So I’ll see you in just a little bit. Alright. Welcome back! So if you paused this video to create some single products and variable products, you should have a product list that looks something like this now. So if you’re ready, what I wanna do now on the Product page is show you how you can create or customize the sidebar that you see right here. Before we actually go through that, I do wanna note that I did change the Product page layout again. So if you want this layout where you have the description and the related products show up on the right-hand side over here and you have some space underneath for the sidebar over here, you wanna go back to your Customize page and go into the Product page and just select the “Left Sidebar For Height” option and then click “Save”. So it’s just a little different than the one that we selected a little earlier, but I do wanna just tell you that I did change it, just to let you know for your own website, okay? So once you’re ready, let’s go and learn how to customize our sidebar. So if you wanna do that, go back to the ecommerce website that you’re learning how to make and we wanna hover over Appearance and click on “Widgets”. Once you’re on the Widgets page, this is where you can go to edit your sidebar for all of your different pages. We’re gonna focus on the Products Sidebar right here but there is the Shop Sidebar. So if you’re using the default shopping page and you want a sidebar, you can go in here and customize the sidebar however you want. But we’re creating a custom Shop page so
we don’t need to touch this one. So let’s focus on the Products Side bar and what you can do for the sidebar for the product page is go into your available widgets right here and then just find any widget that you wanna add and then click on that. And then select the “Product Sidebar” and then click “Add Widget” and you’ll see that the widget gets added to your product sidebar. And then if you go in here and edit anything, you wanna click on the “Save” button. Or what you can do is always just remove this
by clicking on the “Delete” link right here. So the widgets that I added for my sidebar are the Product Categories widget. So you can see once I add this, I customize it with these options right here. So if you wanna add this one, go ahead and do that and then just select these options and click “Save.” Or select whatever you want. And then the other widget that I added is
the “Recently Viewed Products widget. I changed the number of products to show to “5” right here. So if you add this one and you change anything, again click “Save” right here. So what you can do is pause this video and add whatever types of widgets that you want into your products sidebar, and there are a bunch of them here for all of your different products and everything like that. So do that, pause the video and then customize your sidebar. Once you’re ready, we’re gonna move on to the next step which is showing you how you can format and customize your category links and names for the Product page, okay? So once you’re ready, push “Play”. Otherwise, we’re just gonna move on right now and what we’re gonna do is show you how to customize the category names for your products. So if you wanna do that, we’re gonna go back to the ecommerce website that we’re learning how to make. We wanna hover over Products and we wanna go to the Categories link and click on that. Once you’re on the Product Categories page, if you wanna remove the uncategorized name, what you wanna do is hover over another product category name and then make that one as your default. And then you can hover over the uncategorized
one and you’ll be able to delete that right here. So you can see I can just click “Delete”
and that’s gonna make that disappear. Now, you should have another default category name. So I have Macarons right here. And then you can see that we have this little dash mark. So what that means is that I have a parent category, which is Coffee, and then underneath that I have some subcategories. So if you wanna make any of these a subcategory of a parent category name, just click on the one that you wanna make a subcategory and then you can go and edit it. And then once you’re on the Edit category name for this category, if you wanna make it a subcategory of Coffee or any other category name,
just go into this dropdown and select the parent category name. So now, Coffee is gonna be the parent of this category name. Once you make any changes, just come down and click on the “Update” button right here just to save everything. So you can do that with all of your different category names so that you have parents and sub-parents for your different categories. So I have the category names right here and then for Macarons, I have different flavors as subcategories, okay? So if you need to, go ahead and pause the video and edit and customize your product categories. And then once you’re ready, push “Play” and we’re gonna move on to the next step. Now what we’re gonna do is learn how to create a custom Shop page that looks just like this. So if you wanna learn how to separate your products into different sections, I’m gonna show you how in this video tutorial by showing you how to create this custom Shop page. You can just use the default Shop page which is already created for you, and you can see that it looks just like this. So if you just have a bunch of different products that you wanna put on a page, you can just use the default Shop page also. So the layouts are a little different but if you wanna learn how to create be custom Shop page with a custom URL, let’s go and do that right now. So we’re gonna go back to our ecommerce website that we’re learning
how to make. We’re just gonna hover over New and click on “Page”. Once you’re on the Add New page, what we’re gonna do is create our Shop page but before I do that, I do wanna just go to the Home page and just show you since we created our products a little earlier, you should see this Featured Product section show up now if you selected some of your products to be featured products. So make sure that you select those and come to your Home page and just check to make sure that this section populates, okay? So I’m gonna close out of this, and I’m gonna go back to the Add New page, and we need to put in a page title. I like to type in “Products” right here. We can’t type in Shop because that’s gonna create a custom URL with the shop URL for WooCommerce and that’s gonna mess up our website. So type in something like “Products”. We can leave this as the default template. So once you’re ready, go ahead and click on “Publish”. Once the page is published, let’s go and turn on our page builder. The first thing that we’re gonna do is add a page title to our custom page. So let’s go in here and just find the title widget. And then, we can go into the Style and just center this, and then we can change the title to “French Macarons” and we’re just gonna add
a bunch of different products right here. So there are a bunch of different ways that you can customize your Shop page. So if you wanted to add different product categories and then link people to those category pages, you can do that. But since I just created enough products for this page right here, and you can see that I have about what? I think this is like 24 different products, then
it’s all gonna match up evenly like this. But if you don’t have an even number of products, then you can always just customized the Product page however you want, okay? So now that we have our title right here, I’m gonna into the content section and I wanna come down to the bottom to the Shop section and I wanna add the “Custom Products” widget. So click on that. You should see this section show up right here. So your product should populate and then you should have the options right here. What you can do is select the number of products that you want to show up and then you can have the number of columns that you want right here. So you can see that I changed this to “6” right here. Now we have six columns per row,
and you can see that it just adds all of your different products here. But if you want, instead of just adding all of your different products in any random order, since this is the Custom widget, what you can do is go into this dropdown right here and it should show you all of your different products that you created. What you can do is just find the name of the products that you wanna add and then just select these in reverse order and you’ll see that they’d start showing up in your products list over here. So this is all you have to do to create this section for your products on the Shop page. So what I’m gonna do is just pause this video and create all of the 12 different products that I wanna show up in this section for these two rows. And then we’ll push “Play” and then we’ll do the same for the other sections in this Custom Shop page, okay? So go ahead and pause the video and do the same. Add this little widget and then just find the products that you wanna add and then just select the ones that you want, and then they’ll populate right over here in reverse order, alright? So I’ll see you in just a few minutes. Alright. Welcome back! So I paused the video and I added my 12 different products right here. So you can see in the Custom section over here that I selected all of my different products and again, they are in reverse order. So the last one that you select is gonna be the first item over here. So what I wanna do for this Shop page is I wanna duplicate these sections again a few different times just to showcase some additional products. Later on we will go and add a navigation menu with different category links and everything so that your customers can go to
different pages that have different products. Again, you can always go to Add to Content and add whatever you want. So there are a bunch of a different widgets here and you should know how to use them now. You can always just click on them and then customize them however you want. But if you wanna follow along, what we’re gonna do is just add a new title and we’ll go in here and we’ll just Center this. And then we’ll go in here and we’ll delete this and type in “Handmade Desserts”. And then, we’re gonna go in to Add to Content. And again, I’m just gonna go down and select the “Products-Custom” widget, so click on that. Once you see this section right here, with the power of video editing, I did change the number of products to 6 and then the number of columns to 6 right here. And then I just selected the items that I want to show up in this section right here. So go ahead and pause the video and do that on your own or add whatever you want and then click on the “Apply” button and then click on “Update” just to save everything. Really quickly, because we’ve already gone through the steps two times now, I’m just gonna add another section with the title and the product section really quickly. So I’ll just go back in here, and again you can always add as much as you want or different things. You can customize this however you want. You don’t have to follow along exactly the same. The goal of this video is really just to give you the power and the tools so that you can
make whatever layout that you want. So you can see right here, I put in “Roasted Coffee” for this title, and then we’ll just add another custom products widget really quickly for the coffees. So I’ll come down to the bottom and just click on this one right here. You can see once this section shows up, again I change the number of products to four. And this time around, I have four columns and then I just selected the coffee products to show up right here. But you can customize this however you want with as many different products as you want and the number of columns that you want or you can always just go back and you can choose any of these widgets down here in the Shop section or anything else and just link these to any pages that you want, okay? So what I want you to do is go ahead and pause the video because I’ve already created my Shop page just like this. And then go ahead and customize yours however you want. And then once you’re ready, we are good to go. All I want you to do is click on the “Update” button right here to save everything and then we can move on to the next step. So what I’m gonna do is just close out of this and then I’m gonna move on to the next step. But if you need to, go ahead and pause the video and customize the layout for your Custom Shop page however you want, okay? I’ll see you in just a little bit. If you’re still watching this video and you closed out of your page builder, this is what you should see now for your Custom Shop page and this is the URL for this Shop page. So we will link it in the navigation menu with some category links a little bit later. But right now,
what we’re gonna do is move on to the next step. What we’re gonna do is show you how to create the Blog Post page. So you can see right here that these are the blog post on the demo ecommerce website. What we’re gonna do is learn how to create some blog post just like this. And then we’ll create the Blog page which should be already formatted for us but we’ll just double check. So if you wanna learn how to create some blog post, let’s go to the e-commerce website that we’re learning how to make and then hover over New and click on “Post”. Once you’re on the Add New Post page, creating a blog post is really easy. So I already filled everything out and I’ll just walk you through what I did. So the first thing that you wanna do is put in the blog title right here and then you can come down here and type out your blog post and you have all these buttons right here to format everything. If you don’t see this second row, just click on this button right here that says, “Toolbar Toggle” and you’ll unhide the second row. You can just type in whatever you want. If you wanna have a featured image like this on the demo ecommerce website where you have a big image like that, what you wanna do is just insert your featured image right here. So you can just click on this section and then you’ll go into your Media Library and find the image that you wanna use. If you wanna upload your own image, click on “Upload Files” and then click on “Select Files” and then just go and find the image that you wanna upload. Since we’re using the demo images, this is one of the blog post images, and then you can just click on “Set featured image” and you should see the image show up right here. And then if you wanna add a category name, you can do that and you can add the sharing buttons which show up on the bottom of blog post down here if you want. And then all you have to do is just come up here and click on the
“Publish” button to publish your blog post. Once the post is published, I can go and check it out. Once the blog post loads, this is what you should see. So we have our featured image, a comment section and then a sidebar right here which you can customize in the widgets page on the dashboard. So I’ll show you how to do that in just a few minutes but if you want, you can pause the video and create some additional blog post. I’m gonna create three in total for this demo ecommerce website. I’m gonna do that right now so I’m gonna pause the video also. So if you want, pause the video, hover over New, click on “Post” and then create some blog post and then I’ll show you how to customize the sidebar for your blog post page and then we can move on to the to next step, okay? So I will see you in just a few minutes. Alright. Welcome back! So if you paused this video to create some additional blog post, then if you go to the Blog Post page which is yourwebsitename.com/blog, you should see this layout right here which is the same layout as the demo ecommerce website. So if you do see this, then we are good to go and we can move on to the next step. Now, what we’re gonna do is show you how to customize the sidebar for the blog post pages and the main blog page. We did cover this a little earlier so we’ll go over it really quickly. So we’re gonna go back to the Widgets page. So you can hover over
your website name and just click on “Widgets”. Once you’re on the Widgets page, you should be familiar with this page because earlier we customized the Product sidebar and if you’re using the default Shop page, you can customize the Shop Sidebar right here. But for the blog post, what we wanna do is edit the sidebar right here. So again, all you have to do is just drag or click on any of these widgets and then click on “Sidebar” and click “Add Widget” and you’ll see them get added over here. So these are the widgets that I have right now on my sidebar. So if you want the same one, you can just add them. What I want you to do is just pause the video, go through these available widgets and then just add whichever ones that you
want to your sidebar for your blog posts pages. And then just save everything if you do make any changes to these widgets. And then once you’re ready, push “Play” and we’ll move on to the next step. Really quickly, I do wanna note that if you do have the Comments widgets or anything like that, you can always edit your comments over here or you can check them out if you click on this tab right here. Again, we cover everything in our tutorial on How to Use WordPress for Beginners. So there is a link to that in the video description so you can always just check that out on your own. So again, pause the video, edit the sidebar
and customize that however you want. And then once you’re ready, push “Play”
and we’ll move on to the next step. Now what we’re gonna do is learn how to create the Frequently Asked Questions page for our ecommerce website. So you can see right here on the demo that we’re just gonna add a little accordion right here with some questions and answers, and you can expand these sections. So if you wanna learn how to do this, let’s go to the online store that we’re learning how to make and let’s create a new page. Once we’re on the Add New page, the first thing that I’m gonna do is just type in the page title right here. I wanna change the template to the “Default (Center title) because we’re gonna use this title right here for the page. But I wanna change the permalink and you don’t have to do this, just to “faq”. So I’m gonna click “Okay” right here. You can see that that just changes that permalink and once you’re ready, all we have to do is click on the “Publish” button. Once the page
is published, let’s go and turn on the builder. Once you’re on the Flatsome Page Builder, the first thing that we’re gonna do is just add a section right here and we’ll use the default option. So we’ll just click “Apply.” And then I wanna change this to the “container” class, so type that in and then come down to the layout section. For formatting, I just wanna change this to “20px” and then click “Apply” right here. And we can click “Update” just to save everything. And then we can add a section. So let’s go over here and click on the Text widget. And then we’ll just use the “Paragraph” option. What we’re doing right now is we’re just adding the text right here. So we’ll just go into the Text Editor. I’ll just delete this and paste in my text from the demo website, and then I’m gonna highlight this text and just change it to another color. If you wanna link some text to your email address, all you have to do is click on the link button right here and then just type in Mailto: and then your email address. And then you can just click and add that link. And then that’s gonna link that text to your email, okay? So once you’re ready, go ahead and click “Okay”. Now, what we can do is just go back right here. We wanna add another section, so come down and find the Accordion. This is how you’re gonna add your questions and answers. So we don’t need to put a title here because we have our headline. So just click “Back” and you should see the Accordion right here. What you wanna do is expand this, and you should see some panels right here. You can always add additional panels, but this is how you’re gonna add your first question. So you can go in and double-click this. You can type in your question right here. So I’ll just type in “What does it cost for shipping with the Macaron Shop?” And then we can go back. What you wanna do is go into each of these panels and expand them and then click to add a textbox. So we’ll click on “Add to this panel” and we’ll find the textbox right here. And then we’ll use the Paragraph option so we’ll click “Apply”. And then we’ll just open up the Text Editor. All we have to do is just type in our answer right here and then just click, “Okay”. And then we can go back right here. So you can see that we have our question right here and then, if we open this up, we have a text box with our answer right here. So creating questions and answers using the accordion is really easy. So if you want, you can pause the video and add some additional questions and answers. If you need to, you can always add some additional panels for more questions. If you ever wanna remove any of these, just click on the one that you wanna remove and then click on the “wheel” and then just click “Delete”
right here. And then that’s gonna delete it. So what I’m gonna do is just click and save this really quickly. I’ll probably add one more question just for this demo website. But if you want, go ahead and pause the video and then add as many different questions and answers as you want. And then once you’re ready, push “Play” and then we’ll move on to the next step. Now, you should be back on the Frequently Asked Questions page and if you inserted some more questions, you should see them right here. So that’s how you create the Frequently Asked Questions page and if you’re ready, we can move on to the next step. Now, what we’re gonna do is learn how to create this Contact Us page. So if you wanna learn how to create this page, let’s go back to the online store that we’re making with WordPress, hover over New and click to create a new page. Once we’re back on the New Page, let’s go ahead and type in “Contact” right here and then change the template to the “Full-Width Page” option. Once it lets you, go ahead and click on the “Publish” button. Once the page is published, let’s turn on the Flatsome Page Builder. Once you’re on the Page Builder, let’s add a new section. So just click on this and we’ll use the “Default” option and then click “Apply”. We don’t need to change anything here, so we can leave everything as is. What I wanna do is just add to the section. So I’m gonna add the “Map” widget really quickly. So go ahead and find that and click on that. You should see this section show up. What I wanna do is just change the height to 400px and that’s just a personal preference. What you wanna do for the pinpoint for where your map location is is you wanna put in the latitude and longitude. So I have this tab a bit for Google Maps. What you can do is type in your address. Once you do, you should see the pinpoint right here. What you wanna do is right click this and then click on “What’s here?” You’ll see that the longitude and latitude show up right here. What you wanna do is copy and paste that into these two sections right here. And then once you do, the map will show up. So the map’s only gonna show up on your actual web page. It’s not gonna show up in this page builder.
So don’t worry if you see this message right here or it just looks like a white screen, okay? So after you put in the latitude and longitude, if you wanna put in the actual address right here in text, you can just double-click this and then you can type in the text right here. So I’ll just put in my address and click “Okay.” And then I’ll go back right here. The last thing that we’re gonna do is add some columns on the bottom for some additional information for our store. So I wanna click on “Add to Section” and I wanna add a new “Row” and I wanna select the two column options so click on that. And then we can just close out of this. What I wanna do is I wanna add to this row on the left-hand side. So I’ll just click on the “+” button right here and then I’ll find the Text widget and click on that. We’ll just go with the Paragraph option right here and then I’ll open up the Text Editor and just delete this text. And then I’ll just type in my store information right here. You can just pause the video, if you need to, to fill this out and then you can format it however you want. And then once you’re ready, just click “Okay” right here. Now, you can see I have all of my information right here. The last thing that I wanna do is add a contact form on the right-hand side. So I’m gonna click on the “+” button right here and then I’ll go in here and I’ll find the “Form (CF7)” and click on that. You’ll see this section show up right here. In this dropdown, you should have some contact form options. If you select “Contact Form” that should be the default option. So you’ll see this section show up right here. So go ahead and just select this one or you can always go in and customize your contact form however you want, and I do have some text in the text tutorial with some different options. So if you want to have a subject line or something like that. So I’ll show you how to do that in just a few minutes because we are done with this Contact Form page, and I do wanna show you where you can go in case someone does contact you with this form. So let’s just click on the “Apply” button right here and just click “Update” just to save everything really quickly because we are done with this page now. Again, don’t worry if you don’t see the map right now because it will load on your actual page. So once you’re ready, let’s just close out of this. Now, you should be on the Contact Us page, and you can see that it has everything that we inserted and the map actually shows up. So really quickly, I just wanna show you how you can customize your contact forms if you want. So you can see on the demo website that we have everything that you saw on the page that we just created, but also has a subject line. So if you want that, what you can do is go to your WordPress dashboard and there is a link on the left-hand side to Contacts, and you can create a new form. You would just go in here and type in a new title and then come to the “Form” tab and then you can paste in this text that you see right here. I will have it in the text tutorial. If you do create a new form and you paste in this text, you’re gonna have the subject line for your contact form also, okay? Whenever a customer shoots you a message, you will get them into your email inbox associated with this WordPress website. So if you ever wanna update that, just go to your Settings and then click on “General”. That’s where you can update your email address, okay? So what we’re gonna do now is just really, really quickly show you how you can add some additional pages such as the Privacy Policy page and Terms & Conditions page since these are both are really important for an online store. So these are gonna be very basic and really easy to make. So I’m gonna do them really quickly but that’s gonna be the next step.
So what we’re gonna do is just hover over New and click on “Page”. Now, what we’re gonna do is create the Privacy Policy page which you need for your WooCommerce website. So what we’re gonna do is just create a page. I already did this because it’s really easy. So just type in the title right here and then all you have to do, you don’t even have to turn on the page builder. You can just take out your Privacy Policy right here in this text box. So you can see I formatted everything right here. I’m using the template option, the Default Template with the Center Title”. So if you need to, you can pause the video and create your Privacy Policy page. And then the other page that I created was the Terms & Conditions page. Again, this is a really easier page to make. You’re just gonna type in the title and type out your text right here. Again, the template that I used for both of these pages is the Center-titled Default Template page. So if you need to, you can pause the video and create these two pages. This is what they look like after you make them. So go ahead and pause the video if you want. And then what I want you to do is push “Play”. And then we’re gonna come to the WooCommerce settings once you’re ready, and we’re gonna set the Privacy Policy page. So if you want, we’re just gonna continue on right now. Otherwise, you can pause the video on your own. So after you create the Privacy Policy page, what I want you to do is come to the WooCommerce tab and click on “Settings,” and then come to the Accounts & Privacy tab. You’re gonna come down to the Privacy policy section and just go in here. All you’re gonna do is just select the Privacy Policy page in this dropdown. So once you do that, it’s gonna set this page for your settings for whenever someone purchases anything or anything like that. So once you set that page, you just click on “Save Changes” and then you’re good to go. Once everything is saved, we are good to go and we can move on to the last step in this video tutorial on how to use WooCommerce. So if you need to play catch-up, go ahead and pause the video and create those pages from the last step. Otherwise, we’re just gonna move on. Now, what we’re gonna do is learn how to create our navigation menu right at the top and also at the bottom of the page down here in the footer. So if you wanna learn how to create your header and footer menus for your ecommerce website, keep watching
because we’re gonna do that right now. So back on the ecommerce website that we’re learning how to make, we have to go to our menus. So we’re gonna hover over “Appearance” and click on “Menus”. Once you’re on the Menus page, what we can do is create a new menu. So let’s create the header menu first. So type in “Header” and then click on “Create Menu”. Once the header is created, come down to where it says, “Display Location” and check the boxes next to main navigation and the mobile device because the header menu is gonna be for our main navigation. And then come to where it says, “Pages” and click on “View all” and you should see a list of all the pages that we created right here. What you can do is just check the boxes next to the pages that you wanna have a link to in your main navigation. So I’m gonna go in here and just check these boxes and then click on “Add to menu”. You should see the items show up right here. So what you can do is just drag this around to put them in whatever order that you want, and it’s gonna go from left to right. I’m just gonna move these to a different order. And then if you wanna rename any of these links, what you can do is just click and expand and just change the Navigation Menu or the Navigation Label right here. So that’s what I’m gonna do really quickly. So I’ll just change some of these to different names. You can do the same if you want or you can leave everything as is. For the Products page, remember this is the Custom Shop page. So instead of Products, I’m gonna put in “Shop” right there. If you want, you can just save this really quickly. Once the menu is saved, now what I wanna do is just quickly show you how you can have some submenu items like this. What I already did was I opened up a few different tabs with the URLs to different category pages. So if you need to, you can go to your Shop page and click on the links over here to open up the pages so that you have different URLs. So I have the Macarons category and then I have the subcategory for Chocolate and same with Cotton and then also Coffee and so forth. So let me just show you how you can add some submenu items really quickly underneath the Shop menu item. So what we’re gonna do is create some custom links. So if you go over here and expand the section, what you can do is just type in the URL right here. So I’m gonna get the Macarons submenu URL right here, and I’ll paste that in right here. And then for the link, I’ll just type in Macarons. And then I’ll click “Add to menu.” You should see the menu item right here. If I drag this and I put it underneath Shop and I indent it, you can see that it’s a submenu item. So now what I wanna do is have the child categories of Macarons right underneath this. So I’m gonna show you really quickly, I’ll just get the “Chocolate” one right here. And then we’ll copy that and then we’ll paste in that URL right here and we’ll type in “Chocolate” right here and click “Add to menu”. Now, I can just drag this over here and I wanna indent it again, so I’ll just do this. Let me just show you what this is gonna look like really quickly. So I’m gonna save this. Once that’s saved, I’m gonna go to a new home page. So I’ll hover this and just click on “Visit site” and open up a new tab. Now, you can see that we have the navigation menu at the top. If I hover over this, you can see that we have some items right here. So that’s how you create some subcategories. What I’m gonna do is just go back to the Menu page. You can see right here that I added some additional category links underneath the Shop. So we have the Macarons and then the subcategories. And then I have another parent category that is a link underneath Shop, so it’s indented. So it’s Coffee and then I have the other items right here, okay? So if you want, you can pause
the video to create the rest of your header menu. Once you’re ready, just make sure that you click on the “Save” button right here. And then we’re gonna go and create the footer menu once you’re ready.
So if you want, we can just do that right now. So we’re gonna click on “Create a new menu”. Now, what we’re gonna do is just type in “Footer” right here for our Footer menu and click on the “Blue” button. Again, what you’re gonna do is come down here and check the box next to Footer Menu. Now, you can just select the items that you want to show up in the footer menu. So I’m gonna select these ones right here and click “Add to menu”. Once the items show up, if you want to rearrange these, you can or you can rename them and then just click on the “Save menu” item once you’re ready. Now, we should have our footer menu right here. The last menu that we’re gonna create is the top bar menu that you see up here. So we don’t have a Wishlist page right now and we don’t have a Shipping & Returns page, but you can always make that on your own. So what I wanna do first is just create the Wishlist page and then we can
create the top bar header menu. And then, we’re pretty much
done with this video tutorial. So I’m gonna go to the Flatsome Theme page that we’re making right now and I wanna go and create a new page. But before I do that, I’m gonna go to the Dashboard. Once you’re on the WordPress dashboard, we’re gonna create a Wishlist page really quickly. So hover over Pages and click on “Add New”. All we have to do is just type in the page title right here. So we’ll type in “Wishlist”. And then what I want you to do is paste in some short code to integrate the Wishlist page with the Wishlist plugin that we installed earlier in this video tutorial. So you can see the text right here or what you can do is go to the text tutorial on How to Create an Ecommerce Website with the Flatsome Theme in WordPress, and right here on whatever step that we’re on to create a wish list page, just copy this text right here and then just paste it in right here. And once you’re ready,
just click on the “Publish” button. Once the page is published, that’s all we have to do to integrate our Wishlist page for our ecommerce website. So now, we wanna go back to the Menus page and create a top bar menu. Once you come back to the Menus page, just to save some time, I already created the top bar since you should know how to create the Header menus already. So if you want, you can click on “Create a new menu” and then name this the “Top Bar” menu. What you wanna do in the Display locations is check the “Top Bar Menu” and then add whatever you want to the top bar menu right here. What I did was I added the Create Account page, the Wishlist page, and then I created another page called “Shipping & Returns” and just added that right here. So if you want, you can pause the video and create your top bar right now. And then once you’re ready, click on the “Save menu” button and then you are good to go. Once the top bar is created, then we are good to go. So again, if you need to you can pause the video and create your top bar and then push “Play” once you’re ready. Otherwise, if you are done then we have just completed our tutorial on How to Create an Ecommerce Website with the Flatsome Theme. So really quickly, I wanna go and check out the website by clicking on “Visit Site”. Once your ecommerce website loads, this is what you should see. So we should have our top bar navigation up here and then at the bottom of the page, we should have our footer navigation down here. So there’s only one more thing that I wanna talk about and that’s the sign up for the e-newsletter link over here. If I click on this, I get this popup with the sign up form. If you wanna customize the sign up form, what you wanna do is click on the “Customize” link and it’ll bring you back to the Theme Options page and you can just go to the Header. And then double-click on the “Newsletter” widget and you’re gonna open this up and you can customize your sign-up form however you want, including adding a background image and changing the height. Just make sure that you click on the “Save” button once you’re done. What I’m also gonna do is show you how to integrate MailChimp with your newsletter. So whenever a visitor signs up for your newsletter, you can save their email addresses and then you can email them a newsletter or any promotional email whenever you want. So if you want that video tutorial on How to Integrate MailChimp with your WordPress Website, make sure that you subscribe to the NYC Tech Club YouTube Channel because that video will be up, and I will link
you to that video in the video description whenever I get that done, okay? So pretty much, we are done building out our ecommerce website with the Flatsome Theme and WordPress, but what we wanna do is make sure that we go and publish our ecommerce website. So let me just show you
how to do that really quickly by going back to the WordPress dashboard. Once you’re back on the WordPress dashboard, what you wanna do is click on the “Publish” link right here just to make your website public for everyone to view. So make sure that you click on the link so that everyone can go and access your WordPress website and then you are done building out your ecommerce website with the Flatsome
Theme and WordPress. So let me be the first to say, “Congratulations on learning how to create your own ecommerce website with the Flatsome theme and WordPress!” I hope you enjoyed this video tutorial. If you did, make sure to give it a big thumbs up and make sure to subscribe, because we’re always coming out with new videos just like this. We will have some additional add on videos on how to use the Flatsome theme and also videos on how to create a successful ecommerce website with WordPress. So make sure that you watch out for those videos on the NYC Tech Club YouTube Channel. Again, I wanna say, “Congratulations!” If you have any questions or comments, leave them in the Comment section below. Otherwise, congrats again! I’ll see you in the next video. [Music]

28 Comments

  • NYC TECH CLUB

    Please like this video. It took 3 weeks to create and edit from 16 hours of raw footage. Please show some LOVE!

    We will be creating supplemental videos for the Flatsome theme for the following: Integrating google API with Flatsome Maps and Integrating Mailchimp.

    *PLEASE MAKE SURE TO SUBSCRIBE AND TURN ON NOTIFICATIONS*

  • withaminutetogo

    Hey Jameson – literally just finished your Shopkeeper vid last night. I look forward to learning about what this one has. Really appreciate your videos.

  • Golam Mostak

    Please make an website using the generatepress theme and associate it in both amazon affiliate and google adsense programme…..We would love to see how a website is made which is good for both of the programmes at a time….It will be really helpful….please consider it…..Thank you….

  • Lites

    Hi NYC… Can test creating website using Divi.. – https://www.elegantthemes.com/gallery/divi/

    This is the newest ads for creating a website and she mention wordpress… can you please enligthen us with this?

    Thanks!

  • Cancel Cancer Africa

    Great work.Our charity has been using your tutorials for over two years now. Thank you for saving us so much money. If I was to make a suggestion, maybe try to give us the exact times each steps are in the video. This way we can go straight to it. Either way you are doing a fantastic job.

  • ximena betancourt

    love the video thanks!! ive watched it about 100 times. 🙂 i do have a question tho at 1:22:13 you say to add a container in the class section.. well i did and its not doing anything. I do have the updated version of Flatsome 3.8 could this be the issue? its driving me nuts!! 🙁

  • Mr Hoang

    bài viết này Hay! mình cũng đang áp dụng cho . Great video, Darrel! Will you please do one http://bit.ly/2TNURjv ing ACF with Flatsome?

  • K B

    Thank you so much for this video tutorial. I will be able to update not only my website but maybe even process order for websites for others – I've been getting tons of request but didn't have the time or skill to fully design/code sites from scratch

  • TAGS Productions

    This video is misleading! You title how to create the ecommerce website for free and the first thing we do is pay $60 for the theme! 🙁 🙁

    You have to do better man.

  • Naveed-Ur-Rehman Chughtai

    Nice tutorial, I am using Flatsome Theme 3.8.3, I am having a problem with the Logo as its shown very small, the default Flatsome logo is shown properly but my logo is not shown properly. I have tried almost all the sizes and also I have done changing the padding size but no luck. Could you please guide me? my site is https://test.tossdeal.com

Leave a Reply

Your email address will not be published. Required fields are marked *