Transcripts
1. Welcome!: What's up, everyone? My name is Darrell. And in this video, I'm gonna show you all how to create this professional. A beautiful e commerce website, step by step. And you need to know a thing about coding or have any problem experience whatsoever. Everything is the Tories going to quick, simple and easy. Now, if you guys have always wanted to learn how to create your own e commerce website for the very first time and you're kind of tired of the runaround, then this tutorial is for you. Because by the end of this video, you're gonna be able to create your own e commerce website from scratch and you're gonna become a wordpress experts. Now, as you can see, this website is super clean. It's professional, and your visitors are gonna be really happy about coming to such a great looking website with really modern designs. That's also really easy to navigate. Now, if you look at this website, it will look very similar to big online retail stores like Victoria's Secrets, Tilly's and also pack Son. Now we took direct inspiration from these companies and applied it to our own shop So you guys can be searching that year Shop is gonna look really professional and really amazing. Now it really inspires me to make these videos because I've actually had people created their own online store and it started to make thousands of dollars Watching my tutorials so again really inspires me to make these videos because of people like that. And if you guys are really serious and you really want to build a clean and professional website that will make you a ton of money, then keep watching guys, cause right now about to give you a quick tour of this website and show you what we're gonna building in this e commerce tutorial. So this is the website that we were making today, and right here, you guys can add in your own image. You guys can also change this color to whatever color you guys want here we can add in our favorite social media icons such as Facebook, instagram or Twitter. Here, you can go ahead and add in our logo. Now, if you guys don't have a logo, don't worry about it. I will give you a website where you guys get a ruli clean logo. Now Here you guys can go ahead and add it as money buttons as you want and you can link them to any part of your website. In fact, in this tutorial, you guys will be actually given a list of templates to help you guys with design and inspiration. Because let's be honest. You know, creating a website from scratch can be a little hard, but with this template library right here, you guys can simply grab a template and add it to your website to get some really good ideas and inspiration for your website. Now, with most other themes, they don't really have this. So this will make making your website very simple and very fast. So going back here, let's go ahead and scroll down. So here we have a banner section and you guys can categorize your items. So, for example, right here we have women's products, we have men's products and we have shoes. So if you guys are selling multiple items such as like a big store, you guys can categories your items right here. That'll make it really easy for your visitors to navigates. And right here we have a list of our products now guys, this is a really clean set up. In fact, you guys can actually list your products on sale. People can wish list it. People can also do a quick preview of it to see if this items for them or not. Here we have a list of products. People can kind of scroll through the images right here. You can give a quick description of the product and also show people the category of the products here. People can go ahead and add this to the carts. And again, you can always change the color of at two cards or this right here. So you don't have to use these same exact colors. You guys can use any color that you guys want. So, for example, right here and click on add two carts. And now the products here are added to the carts on our websites. And this is great because visitors can actually click on this click on check outs and have a very quick check out process that will make you guys a ton of money. So let's go and go back to the front page right here. I'm a go ahead and scroll down. So the next section is product categories. So again, this is just some or engagement and encouragement for your visitors to purchase products. So here we have women's products, we have men's products, and we have accessories. Now, also, in this tutorial, I will give you guys access to a large library of images to help you guys get started. Because I know creating a Web site from scratch with no images can be a little tough. So I'll go ahead and give you guys some demo content. Next, we have sign up for newsletter, So this section right here will enable your visitors to sign up to your newsletter so you can start kind of gathering emails and even start your own email campaign. So it's really simple. Someone here going to simply type in their email, click on sign up and then there you go. They are now stored in your database, and you can go ahead. Send them coupons and advertisements for your websites, and again, it's a really clean contact form. It's really simple, and you can be sure that people will sign up for your newsletter on your websites. Next, we have instagram everyone out there loves instagram. So I'm gonna show you how you could import and live Instagram feed on your websites. So here we have these pictures of these girls, you know, it's cute, it's sexy, it's, you know, it's encouraging and it basically, you know, kind of represents what your site is about. So I'm gonna show you how you can have a live feed of instagram on your websites to help people kind of be encouraged to buy your products. Right here we have a blawg section. So if you guys want to incorporate a block on your website, this theme makes a super clean blawg. So here we can kind of create articles that will encourage our visitors to buy products. So, for example, right here we have what's hot in summer. Now some of clicks on its they can go ahead and read the article you guys can see right here. It's a super clean article, really easy to navigate. And right here people go ahead and share it. They can also comment on its and all sorts of really fun stuff. So right here is Go ahead, go and go back and right here we have our footer So this is a really clean footer. It looks just like Victoria's secrets, in fact, so here we have the about US section. We have recent reviews where people can leave reviews of your products. We have a newsletter sign up, and we also have our instagram feed right here at the bottom and below that. So we have a list of paying benefits people can actually use to pay us on our websites. So right here, this little blue button right here, I'm going to click this and scroll all the way back up. And next I'm going to show you guys are shop page. Now, this is the shop that will be making today, and right here you can add in any kind of image he wants. You can also change this text to whatever text you would like, and you can even add an overlay color of any color you'd like. Now this right here is a slider, so people can actually slide through this to see any kind of promotions or any kind of sales you want to add for your e commerce website. That's going on right here. We have a list of our products now right here. I have a list of 12 products and you can have as many products as you want for your shop page. So if you have 100 products, you can add 100 products. If you have 50 you could head in 50. However many products that you have now, if I hover over the products right here, you're going to see a second image come up. So I'm gonna show you how you can incorporate this for your e commerce websites. Now also right here we have this quick little banner letting people know our products are on sale. And also any new products that you have, it's going to displayed right here on your shop page. Your visitors can also click on this little add to wish list so they can, you know, kind of come back next time to see that product. You know, if they want to buy it later or not. Now also, we can click on this quick view preview, so here they can kind of, you know, navigate our site very simple, very easy. And again, they can go ahead and set a quantity amount and add it to the carts. Now, right here we have the option of sorting by popularity, by average rating or by newness or from prices from low to high on the left side. Right here we have a widget box right here. So this is where all the widgets are, where we can add different various features for our e commerce websites. So, for example, right here people can search for certain products they can filter by price. So if you have visitors that are on a budget, they can filter by price right here and also right here. We have recent reviews, and we have recently reviewed products recently view products and then also we have product categories. So let's say, for example, your visitors only want to see women's products. They can click on women's, and all the products for women's are gonna be displayed on your page, making it very easy to navigate and very simple. Now, I also want to talk about what kind of products that we're making today in this e commerce tutorial. So the first product will be making today is a simple product. So let me give you an example. Now. This is a simple product so you'll be able to add description for your product right here. You can add in as many images as you want for your simple products, such as angles or various other things. You want to talk about our show? It's going down here. We have a wish list section where people can actually browser wish list here. It also shows people what kind of category it's in, and your visitors can actually share this product to any of their favorite social media websites to tell their friends. Hey, I found this really cool shirt. Go ahead and check it out. It's on this website I found also right here. This could actually zoom in on the product to give people a better perspective of the image . And again right here, people concerts through its and check it out. Now it's going down here. We have some more product description where you can add in. You know a little bit more about your product in detail. You can also see the reviews people have left your product. You'll be able to enable this or to say, Well, this depending on what you want for your e commerce websites and right here We have related products. So let's say, for example, he wants to show people products that are related to this product. I'm going to show you how you can incorporate this on your website as well. Now scrolling back up right here. So this is a simple product. There are no variables for it. It just offers the add to cart option. Now also, I'm gonna show you what a variable product is. So let's say you have products that you want to sell that have different variables such as size, color or something else. So right here you guys can see we can select a medium shirt that's blue, and people can check directly on your website. Also, if you have, like a different variable color, you can basically display it right there. Also, you can actually add videos to your products. So right here. If I hover over this video section and click on video, a box will public right here and you can actually display a YouTube video. Or you can link them to any other link that you want to show them what your product is more about in detail. So I was pretty cool So it's going down here again. We have the same thing. We have our wish lists. We have social media icons. We have a quick description of its and it's very simple to navigate guys. So let's go out and scroll back up. Now. Another really cool thing I want to show you all is the quick by feature. So let's say, for example, your visitors are on your website and they want to purchase a product they can actually skip. Check out and buy the product immediately and pay you right away. So right here. If I click on this by now, right here, you can see this little pop up right here that will basically tell people click on pay and it will pay instantly, making check out very fast and very convenient for your visitors. Now, I'm actually gonna purchase something right now to show you all that this is a live e commerce website and anyone can come to this website and purchase our product. So here I'm click on Add to cart. Right here. We have this really cool user friendly interface. I'm gonna click on, we'll cook on view the cart first. We can see our check out and also right here, I'm gonna show you how you can decorate your check out page. There's various ways you could make it look. So if you want to achieve a certain look, I'm gonna show you how you can add That's on your website. Here we have shipping and tax. I'll talk all about shipping in tax in this tutorial as well. And here we can actually add in a coupon code for websites we can give any kind of discount we want. We can give any dollar amount discount we want as well. So here I go to proceed to check out. And right here your visitors can put all their information such as like their town, their zip code, their phone and their email address. They can pay with PayPal or credit card, and it can check out directly on your websites. Also, right here, people can actually signed up for the newsletter, and you can also have the option to shift to a different address. But I don't want that right now and then also right here. People can actually leave notes about it, saying, Hey, you know, I need this by a certain day or whatever they want to talk about. So right here I'm entering my secret credit card number and I'm going to go ahead and place the order. Now your visitors are going to see the same exact check out process. So it's very simple and easy to navigate. And right now the order was complete and you have just made money. So congratulations. So this right here is an automated process which makes check out really fast for both you and also your visitors. You will also receive an email that looks just like this right here, where it will let you know of a new customer. Order has been purchased on your website. Now your customer will also receive the same email notifying them and giving them a purchaser seat as well. So here we have a new customer order and we can change this color to any color you like. And you can also add in the logo to let you know that it's from your store and also them to let them know where they purchased it from a swell. So here we have the product that was purchased. We have a fashion sweater two was purchased and he made $200. And right here we have the billing address and also the shipping address. So, for example, if the customer wants it shipped to a certain address, it will display right here in your email. So we get guys. It's a really professional website that's really easy to navigate, And I also want to show you that your customers will also have their own personal portal. So right here, I'm going to my account and go to my dashboard. So this is the portal that your customers will have, and here they can look at their orders or download their address, their wish list, and they can also update their payment methods. So here they can go ahead and go explore through these tabs. So, for example, here we have the orders. We have the downloads. We have the addresses, account details, etcetera, pain of methods. And you can also add in really cool things in their portal like advertisements or just recent promotions. So here says, Take the time to join our Facebook group, you can go ahead and add an icon. I'll show you how to link your personal Facebook group or your your fan page or whatever you want to link them and below that. So we have an advertisement for newest products, and it's a really cool, you know, hip way to display your products. So here we have this little cool slider. So again your customers will have their own personal accounts on your e commerce websites. Next I want talk about are shot page. So let's say, for example, you want to talk about your company, you know, just like let them know how you got started or you know where you're from. Etcetera will show you how you can design your own about us page. So let your customers know about you and your website as well. So here I just added, in some texts and in this cool image with the social media icons as well. And below that, we have our footer again, and over here we have our blog's section. So again, I talked about the blogger earlier. You can actually design a specific block page where people can actually share this to their favorite various social media networks such as Facebook, Twitter, Google plus Arlington, and here you can go ahead and see the articles and you can read about it. You can also leave a comments about it as well. Lastly, we have our contact us page. So, for example, if your customer has an inquiry about your product and kind of just wants to know a little bit more about your product in detail, I'm gonna show you how you can create this beautiful contact form where they could put their name, their email, their subject send you a message and it will go directly to your inbox in your email. So if you're finally ready to learn how to create e commerce websites and you really want to start selling products online, then keep watching ice gustatory ally guarantee you. By the end of today you will have a fully functional e commerce website that you can manage and control. That also looks professional and amazing. So let's go in now. Yes,
2. What Theme We Will Use?: Hey, guys. So for this tutorial, we're gonna be using the number one rated Will Commerce theme for WordPress. Now there is a link, and the resource is to this theme, but this is a premium theme. Now, guys that don't want tutorials. I only used the best. So this right here is the highest rated, the best selling who commerce name for WordPress. So if anyone tells you otherwise, it's not true. So Ah, you guys can look for yourself, you guys, and click on the link. It will take you to this theme. You guys can also do your research by going to like and bottle market and then going over to e commerce and just go, Teoh, I'm sorry. Go popular items and then go to e commerce and you're gonna see the flat. Something is number one with the most sales and the best reviews. And it's actually cheaper than a lot of these other ones, like shopkeeper. So you guys can be sure when you wash this tutorial that you're gonna be using the best of the best. You know how much the totals, guys, I like to use the best because let's be honest, If you're selling something, you don't want to restrict yourself her Limit yourself by using a theme that's not really suitable. So the flats on theme is rated one because I've used it and I know it's the best. And I only want the best for my viewers and my audience So you guys can go ahead and, like, kind of like, you know, just browse around your research on it and see the reviews. And right here they have, ah, 3859 positive reviews with a 4.81 average rating. So again, you guys can be certain that you are going to be using a premium theme for your shop. So you're gonna get the best of the best. Okay, so I just want to make that clear, because a lot of people might wants to get a free theme. This tutorial. We are not using a free thing because I find that people that use free themes always come back to me and want something better once they actually start to make money. And I hate putting people in that position where they're kind of like, you know, making money and now they have to switch themes in the middle of it, and it can be very frustrating. So again, I highly recommend for everyone out there if you're using another theme to use the flat something because, um, it's a amazing piece of technology and the developers are truly gifted. Okay, So I'm just letting that let you guys know you're going to purchase this theme for the tutorial. OK, it's only 59 bucks and guys, it's totally worth it. Okay, so you guys can learn more about it. There is a link in. The resource is you guys can check it out. Okay, so let's go ahead and go on to the next section. I'll see you there.
3. HOSTING AND THEME: so I'm gonna make this very simple. The first thing we're going to do is get our domain and hosting, and my link will actually provide you all with a 60% discount off your hosting. So, for example, your e commerce website dot com. After that, we're going to install WordPress. Next, we're going to purchase and install the number one rated e commerce being, which is called the Platte. Some theme. And then we're going to design our e commerce website, and it is gonna be fun and easy. Now there is a link and description of this video. It will take you to a page that looks just like this right here. Now, this is cyclone dot com. And the reason why I choose cyclone dot com is because I actually tested them against nine other competitors and these guys came out as number one for the most reliable and also the fastest hosting. And I personally use this servers on my website darrell wilson dot com. So I know they're reputable and they're really, really good. So we have three plans right here. We have the start up. We have the grow big and the go geek. Now, in all my tutorials, I would recommend to grow big because with the grow big, you actually get unlimited domains hosted rather than just a single domain so that it's a pretty it's a pretty big difference. So generally you'd probably want to go with the grow big campaign. So I hear about the con order. Now, go ahead and type in your domain. So you know your e commerce website or whatever you want to put someone put, um, you know, just e commerce to tora dot com and then right here and have this checked because, of course, I want to register this domain and right here, click on. Proceed. Now, if it's not available, it'll give you, like, a little science. And, hey, it's not available if it is available, it'll just speaking to this page right here, which says Congratulations. So right here. This is where you're gonna put in your account information. So of course you're gonna put your email. We're gonna put your password, confirm your password and your social security number. I'm just kidding. Don't give your social. I'm just joking right here. Your your state. And then right here. Whatever your from you'd fallen information in. You can pay with credit card and you can put in all your you know, delicious information right here. Now we do have other services that I do want to talk about. So as your purchasing this plan, you might want to consider some of these. So first, I would recommend the 12 months because of told months you actually gets the $24 fee waived . And remember, guys, you always have a 30 day money back guarantee. You know, all these companies are very genuine, and they really know that they can win your business because it's a very good service and I can talk to them. It's a very good service. So I recommend 12 months that'll give enough time to the side of its for you or not. And right here we have extra services. So we have domain registration, which we sign up for domain privacy. So this will protect your personal information when someone tries to who is you on certain domains? Now, I recommend the service guys because if you don't get this, you're gonna get people who are gonna be calling you like and then just you're gonna get spam email from people claiming to be from, you know, hosting services. They're going to try to sell you stuff, and it's just a nightmare. So just get the domain privacy and also the site ground site scanner. I would definitely get this because for 20 bucks a year, you can get someone that will check your website every single day and notify you if there's any malicious or any Trojans or any. You know, malicious viruses have been injected in your website, so I personally recommend it's. But you don't have to get it. It's strictly up to you. And when you're done with, that's you know, you can check those and then, you know, read to your terms of service. I'm sure everyone that's watch this a tour or always reads through all of these, But you know, it's it's there. So it's, you know, it's it's there. So ah, and then after you're done with natural, click on pay. Now, now, I'm gonna go ahead and meet you guys on the next page, and we're gonna go into the customer portal because I personally use this service. So I'm gonna guide you on where to go from there. All right, so this is the site ground dashboard. So this is basically where all the magic happens and congratulations on your new step in this tutorial. So if you guys want to go ahead and browse around here, you guys go like, add services. You guys can do like referral deals. If you want to tell a friend you can check out your billing information here. You can also leave support tickets and you can also call them and also email them as well. So they have a really good support team and this is the account section, so you can see right here I have cloud hosting with Cyclone on my websites dare wilson dot com And you guys, I would never recommend a product. I didn't use every single product that I recommend. I have used it or I'm currently using it. You know, I'm not. Those people are like, Oh, yeah, I go by that And then, of course, like they don't have it. But they just tell you to buy it and every product that I have I've tested it. I know it's very good. So this is your dashboard again you guys can always, you know, add domains in here, whatever you want. But let's go ahead now and install WordPress. So right here we go to my accounts, and these right here you're hosting plans. So right here, I must select manage account, and it's gonna be different for you. Obviously, it's gonna be like a different name. And right here we go to go to see panel. Now also, if you guys have trouble and something just doesn't work out, you can always call them and they can do everything for you, which is really cool of site ground. But I'm gonna show you how to do. It's really quick. So it'll be really fast. So right here, click on WordPress and then scrolling down, scrolling down right here and click on install now. All right, so right here. Choose protocol https. Of course, because we have free S sl's here on site ground. You know, unlike other hosting, we have to pay for it. You get a free SSL with site ground. So I have tons of domains, and I'm gonna go ahead and select the domain that I'm using for the sartorial. So it's gonna be narrative stuff. You flats, um dot com. Okay. And right here. Make sure there is nothing there, Guys. Okay, um, you know, for reseller hosting and put something there. But for most of us, make sure there is nothing there for the site name. Just put, like, e commerce website or something. You can always change this later in the theme customizer, which will learn more bouts, commerce tutorial and site description. I'm gonna put my dog Cadillac. Okay, so, admin. Use your name right here. Make sure you put a legitimate user name and remember to write this down. So, for example, I'm Senopati whack. And then right here, just go ahead and do, like a quick password, something You know where you can, you know, whatever. Whatever password you use, you know, you can do it. I'm just gonna put something like, um, I don't know, put Patty wack one and then right here, go ahead and put in your email address. Not this one. Put in, put in another email address. So, like your email address, I'm gonna put, like, PC order pc hoarder at gmail dot com. And right here you can choose a language and I think we've had the debate before, But apparently it's not Mandarin. It's Chinese. So I think for Clement up of you viewers emailed me because I've always debated Chinese with Mandarin. But apparently Chinese, I guess, is the correct pronunciation. Not Mandarin. These right here. You don't really need to select these. These are just plug ins will learn more about plugging a little bit later. Um, choose a theme. No. And we're right. Here we go to install you. Ready? All right. In salt. So right now we're basically installing WordPress onto our do mean, which basically allows us to create our websites with, like, a dragon drop builder, like, you know, copying and pasting text. No coding. Hope Yates be nothing in WordPress is by far the number one most popular platform on the Internet. You know, it controls actually 1/3 of the Internet, which is a very, very large amount. So right here, I'm a click on this right here. So your your domain dash WP admin click right there. All right. And this is the dashboard. So basically, this is we are inside the website now. No, if you want to see how your website really looks right here. You click on visit site up here, and this is the website. It is using a really old bad thing that we're not going to use. So this is one of the themes they have, but we're gonna actually gonna use a theme that's designed for e commerce. So really quickly. Let me just kind of show you guys around really quick. So you guys understand everything? I'm gonna go ahead and close. He's so right here. This one of my clothes. I don't really need all this. A lot of this is just like spam or whatever. We don't really need it. So right here, under our settings, I'm a go to general. And this is where you can always change your email address here. You know, you can put your general settings like you talked about e commerce tutorial. Right here. We have paddy wack screwing down here. You can change the time and all this good stuff. If you want to change your basic settings, you are more than welcome to do that. Now, one more thing, I'm gonna go Teoh godowns to permanence next. So under the settings, when you got to go to Perma links Now, right here. I want you guys to click on Post me now to explain why we do this. So in s e o you know the world of SDO you want your website like w you know your website dot com dash shop, right? Not to zero a zero to have a boss. So we want to make sure that is on our post name because this is the correct Perma link, and this is basically good for s CEO. And it'll help. You're certain your website get inducted by search engines like Google, Yahoo and being all right, so right here we go to save changes. And lastly, one lasting right here under users, click on all users and you're gonna find your name right there. So click on edit. Now, if you want to like, kind of, you know, customized this stuff, you are more than welcome to do that. I think we're go for midnight. I think tonight's good. And if you ever want to change your password in the future, you're gonna do actually right here. So right here. Generate password. Go ahead and copy this. And then I'm gonna go ahead and say, Okay, I want to go ahead and use his password. I want to click on update the profile. So if you want to change your password in the future, that is exactly where you do it. Okay, That was pretty self explanatory. Pretty easy. So, again, this is just like the basic dashboard of WordPress. It's pretty simple. Like, here's your poster pages and all the stuff. We're gonna go through everything, guys. So you guys were gonna be able to see this screen and know exactly what to do. You guys are gonna be professionals. Okay? So the next we're gonna do you guys is we are going to purchase the flat something now. There is also a link and description of this video. It will take you to a page to purchase the flat something. So this is the page will be brought to now. This is the flat. Some theme. And it is the number one best selling who Commerce for WordPress. Now, the reason why it's number one is not just because it has, like five star reviews everywhere. It's because it allows you to really customize your shop, and it focuses more on e commerce. Ah, lot of the WordPress themes that I've used in the past and that I have kind of tinkered around with a lot of, um, you know, they're capable of using bull commerce, but they're not designed for it. So this is specifically designed for commerce and e commerce. So it really help you out with your online store. And there are tons of just great things about this page builder that I'm going to show you all like It has a lot of templates. It's drag and drop. You just simply just drag stuff in, and it's really simple to use. So I personally have this on my website that I'm using and use it for a lot of client websites. So right here, you have to click on by now or at the carts. Now, I have already purchased this same theme, so I'm gonna go ahead and log into my account, and then I'm gonna get basically show you guys where you guys can download it. So I sent it to my account right here, and I'll go to my downloads. So right here we go ahead and scroll down right here and This is the theme that you're going to purchase the flats, a multipurpose, responsive will commerce theme. So right here, just click on download and right here you guys can actually look at your purchase code. But for right now, just click on install or press file only now, if you guys need your code right here, you can go ahead and download it, and then you can go ahead and open it and take a look at your code that you can actually use to register it so you'll get updates and support for your WordPress theme. And I think, by default to get like, I think, six months or a year of support for your theme. And if you want extended music, don't extend. Now it's only like things like 20 bucks for another, like six months. It's really, really well prized, though it's a very good deal. So right here I go back to my domain up here and right here under appearance, I'm click on themes. Now we're going to upload that specific theme. So right here, click on add new upload theme. Choose the file and I'm simply going to go ahead and select D flat something right here. So flats, Um, and click on open click on Install now. So now what we're doing is we are installing the theme on to our web sites. All right, so the flat some theme has finished Uploading right here. Click on Activate. And this is really cool. So right now you'll be brought to ah, a wizard. And this basically, like, helps you with your WordPress theme and also with settings. So right here is Hakan. Let's go right here. This is where you're gonna enter your purchase code. So just like we talked about earlier where you had that little file you've downloaded with your purchase code on it, you can go ahead and copy and paste it and put it right here. For now. I'm gonna go ahead and skip this step because this is a test domain. So right here, skip this step and then right here we have the option to do a flat some child theme. Now, if you're not a developer, you don't need to worry about this. So most of you don't really needs to mess around with this unless you are developer and you're making websites for certain people. So for now, I'm gonna click on Skip This Step plug in. So we have some plug ins that it's actually asking us to install. No, we're not actually going to install all these plug ins, so we're not gonna install half of these. The ones that we really want to install is contact Form seven and maybe the wish list. One right here. So right here. I'm gonna go ahead and click on Skip this step because these plug ins actually are a little outdated and don't work properly. And I know that because I've used and tested them, and I'll give you actually a better plug in to install than some of these ones. So these basically give you the ability to have a social log in, so you'll be able to do that on your website. I'm sure you've seen social logging on a bunch of different websites right here. Says installed demo content do not do this. This is a total waste of time. So right here, Click on Skip this step there, basically gonna give you a bunch of demos with empty blocks everywhere, and they're gonna import all this like just stuff on your site, and it's just it just takes up all the space and you're not gonna even need it because, I mean, it's just it's not needed. We're gonna do this all by scratch. You guys know how to do instead of relying on any of this demo content, they don't give you the images, so it's really not even worth it. So here we're gonna upload your logo and we'll talk more about logos a little bit later and also right here is asking us for a preset. Do not do nothing, because we're actually going to do this by herself. Sorry. Here, click on Skip this Step and right here it's asking us for help and support. So if you guys want to, you know, look over this, you guys are more than welcome to. But for those of you who just want to get this done, just click on, agree and continue. And while we are all done and right here, it's saying you conjoined their Facebook group if you want. You know, I don't use Facebook too much, I think I don't know. I think I'm getting tired of social media right here. You click on visit your new websites. All right, so this is what you'll be brought to, and it doesn't look good at all. It doesn't. But not to worry. It's gonna look really, really good, and it's gonna look amazing. Now before we continue. Let's go ahead and take a look at our progress. So we've already got our domain hosting done. Congratulations. After that, we installed WordPress. After that, we have purchased and installed the flat something, and now we're gonna go ahead and create our amazing e commerce websites. So let's go ahead and go back to the tutorial and you're about to this page. So let's go ahead now and get started. Let's go ahead now and actually install some plug ins and some pages. And let's start learning how to use
4. HOME PAGE PART 1: let's start learning how to use WordPress. So in this section, we learn how to create some pages. I'm also gonna show you how you can create a menu. And then I want to show you how we can design the website. So first, let's go ahead and make some pages. So to do that, we go over here to plus new and click on page. Alternatively, you can do it to your dashboard. So right here on our pages, you go to add new, and we're gonna go and make some pages are here. So this is gonna be our home page and click on Publish. Now, I do want to note something. If you guys like that full with style. Kind of like I have it right here, you would change your pages should be temporary here to full with. If you guys kind of want that box look like you've seen in some of their demos, you guys can leave it as default templates. So right here, I'm click on full with and make sure click on update. All right. And then right here again, I'm gonna go to add new and then go to about so we're making our about us page, and then here, same thing for the template. And lastly, we're gonna create our contact us page. Now, the other pages, such as the shot paid and everything else they're gonna be automatically created for us when we activate the will commerce plug in, which is basically the plug in that gives us the ability to sell online. So here I'll do contact us and then right here for with Oh, yeah, I just saw a black man Thursday. It was pretty good. I give it like a 70. I have an 80% black Panther, 80% good movie anyways, so right here we have the pages. Now we need to make this basically need to assign it to a menu. So if you go to our website right here and go to visit sides, we don't have a menu right here, so we don't have, like, the home, the about etcetera. So it's going to create a menu for it. It's right here under dashboard. Go down to appearance and go to menus and just go ahead and give your menu name. So I always do Menu one man you want because could see I do it quite often. I menu one and then right here we have our pages. Now, if you want to see all the pages click on view, all so here we have home about us. Contact us, and we have another home page just going at him both. I'm gonna explain why there's two story here at the menu. Now, by default, um, Wordpress creates a home page with a custom link so we don't want a custom link. Custom link is something where you can basically put in a title like here, like, you know, our soundcloud or something. And then you put in like, your soundcloud address right here. You know, you can put in anything, so you're basically just creating a menu item and a link to anywhere you want, but I don't want to do that. But that's basically what a custom link is. So right here you can like, you know, create them. But we'll talk more about that a little bit later. So right here, I'm gonna go ahead and say, All right. The 1st 1 I want to do home about us and cocked contact us and make us a main menu and click on save menu. So right here is basically we're all your menu settings are. So if you ever want to change something on your menu, this is generally we're going to do it. So, for example, let's say you want to have a drop down menu. So first, before I show you that I'm gonna go to visit sites and show you now that our menu now is activated so we have home about us and contact us. Now, if you want, like a drop down menu, I'm going to show you how to do that right here under the dashboard section. You just click on menus to make it. It's like a short cut section, and right here I want to take this in, drag its and have about us as a sub menu. If I click on save menu and go ahead and visit the site again, you're going to see that if I hover over its it's now going to have the about us. If I click on, it's gonna take us the about us page. Of course, there's nothing there, so that's basically why there's nothing available there, so I'm gonna go back and change that really quick, just giving you guys an example. They also have, like, post and categories and custom wings that you can add like, for example, you just click on add to menu and at it's pretty simple for your posts. When we talk about blog's, we'll talk more about that, how you can have it to your menu and also product categories. When we talk about product categories, I'll show you how to do that as well. So right here I would say No, I want this there and I'm going to click on this Eve menu, Okay? And then right here again, we could give it click on visit sites and then ball off home about us. Contact us. Now we need to assign our home page as our primary page. So when someone visits your websites, what page do you want them to go to? So right here under our customize section, you click on customize, and this is basically the theme customizers. So in Wordpress guys, every theme has a specific theme customizer with their different specific options and everyone specific setting. So depending on the theme that you use, every customizer is different. So for ours, right here we have home page settings and we want to display our home page as a static page . And we're going to select this home page as a home page. Pretty simple. Together with me. So far, Pretty self explanatory. That was the most complicated thing, because headache page. So now our site is gone because we have nothing for our home page. So we're gonna go ahead and create, you know, stuff on our home page. So right here, click on edit with you ex builder. All right, so now we're at our home page. So now we're designing our home page, and they have tons of templates you guys can use, but I personally wouldn't use any of these because a lot of the times, these modules are designed specifically for certain images. And I want you guys to kind of understand how this page bill, their works and kind of like, you know, learn it. So let's go to get started. So right here, under at the content. Now we have a bunch of different layouts right here. So they have different layouts. They have different content and they have, you know, a bunch of different widgets and modules you guys can use. So, for example, if you want to add a Google Maps, you click on Google Maps. You can add it right here. If you want to click on a search box, you can add it right here. You guys want to do like, you know, an icon box, etcetera. So they have a bunch of different little models that we can use. But I want to actually give you guys a quick preview of the flats, Um, studio, which is probably the most impressive thing about this WordPress theme. So right here, click on Flotsam Studio and guys, they have tons of previous find templates. So remember earlier how it kind of talked about I don't have to design everything from scratch and, you know, do everything like other WordPress themes this flat. Some studio is going to save you a ton of time because they have literally covered everything. So they basically have all of these demos and templates out here, and you don't have to specifically use theirs. But you can kind of get ideas and inspiration from a lot of their layouts. So I hear they have a full with layouts. They have. Ah, another one right here. Another one here. You guys can just click on imports and simply just go ahead and upload it to your website. Now, you guys can also click on preview right here, and I'll give you an example of what your website will look like. So if I click on preview gets concede now, this is all you know. Really, really amazing. So if you guys want to add something like that so you guys can mess around with that's but I'll go ahead and add in one. And that would basically show you guys how to get rid of. It's just in case you guys want to delete it. Which probably some of you are gonna have a lot of fun to a trial on air. Uh, you know, So let me give you an example. I'm thinking e commerce right here, and it's gonna simply select one. You guys don't have to follow me here. I'm just doing this just for told purposes. So I'm gonna go ahead and select something like, um, I will select something very simple like this right here. We'll do this one will import this one, all right. And I want to import the images as well, and I'm click on starts. So now it's basically importing that layout, all right? And right here we'll click on update. So update guys is like saving. So whenever you do something, make sure that you click on update and save your changes. So I want to see how this actually looks on our website right now. So clicking on this XP jury here, this is exactly how our website looks right now. So you guys can see it already looks amazing, you know? So it's it's pretty amazing. So the layouts are really simple, really fast and amazing. That's why Flats, um is probably the number one selling well commerce theme out there. But let's just say, for example, it's like, you know what? This isn't working for me, you know, I just don't like this right here on Reddit Page. I want click on Edit with you exploder and guys. The US pillar is what we use to basically design the website with so right here and click on this gear icon and say, You know what? I liked it. It was cool. But I'm just gonna go and click on clear right here and say, You know what's Let's try something else and that will basically get rid of the entire page . And right here you can apply an update. Remember, don't forget to click on Update guys because of you guys do not do that. It won't save. Okay, but let's just go ahead and kind of learn how to use the page roller itself. So I've shown you basically a little bit about their fought some studio. But let's just say you want to go ahead and, you know, adding some like a slider or something else. Let's go ahead and get started. So right here, look, look on Slider and we here. We have different options for the slider, so we have, like, you know, drag a ble or background color, etcetera. But what I want to do right here is add some slides. So right here I'm clicking on plus and I want to add in a banner. So now you can add in a banner and image a logo, etcetera. But right here with a gun banner. All right, so this is basically our banner within the slider. Okay, so remember the slider setting just controls the actual slider settings. That banner is like the actual appearance of everything. So the better is basically your fighter. So I hear you guys can kind of select different sort of presets. And guys, these guys have done an amazing job at doing this because, you know, I've been doing web design for a while, and the fact is, they have this whole in line template of library stuff is just so incredibly amazing. So let's go ahead and take a look. I'm gonna say, you know, what's I think this right here is pretty cool. I like this one right here. I'm a click on apply. No, guys. There is a link and description for demo images. So if you guys choose to use the demo images, you guys can use those to follow along. If not, don't worry. I'm gonna give you a few websites where you guys could actually get some free images for your website. So here we have, like, different options right here, right here. We control the heights. So if you want, like a fool with you can do a full with and alternatively you guys kind of change how this looks by just dragging it like that. You guys can also click on their presets of their heights. Okay, so here, I'm gonna do something like I'm gonna leave it as like, a regular, or I was gonna do 16 16.9 16 when I was good. And then right here we have the admin label. So basically, the Ivan label guys is just titling it. So I'm gonna put girl right here because I'm not a girl picture. So if I'm editing later, I kind of want to know what I'm editing. So I'm gonna put in girl, we have the higher here, the slide effect. So the side effect is basically the animation while the images there, you can't see it right now, but I'm going to go ahead and just type of like, zoom out and it's gonna look like this right now. But once I had the background image and I exit out, you guys are going to see what it's actually doing. So right here and click on image, and I'm going to click on upload files and I'm gonna go ahead and upload my files now and you guys are more than welcomes to upload those see or hear image for editorial, and I'm gonna go and upload these. Now there's some Web sites I want you guys to go to, so splashes great. He hasn't goto splash dot com and times seem like night sky or something. They have tons of amazing high resolution images you guys can use. Also, pixels is really good. I'll put all these websites guys in the description of this video because I know it's kind of hard to, you know, find free images. And this side is also amazing for images. And I think the actual image I used is here somewhere. I put girl, Where is she? Where is she? She's hiding. See? It was like, uh oh, there it is. See this one right here? That's the one I used. Also, you guys can use free pick. Free pick is also a very good websites. This site is alternately more for, like, mock ups and stuff, but they have some really cool stuff you guys can use. And we'll talk more about, um, like editing images when we talk about logos and stuff. But this is another one that you guys can use as well picks obey another one. And, um yeah, I think those were really good. So I'll leave some websites for you guys in the description of this video to help you guys out. But I want to go ahead and say, you know what? I want to go ahead and grab this one right here and click on used this image. All right, so I have this girl now. We can't really see her. We can see the text too well. And the great part about this theme is that we can add in and overly so right here. We have size, color and overly. Now, I don't want to put a color because I'm adding a background image so the color really won't apply the size I always want. Leave it as original. Whenever I make it bigger or like the smaller, it kind of comes out a little pixelated. And it doesn't work out for me. So I want to do original now, right here under overlay. I'm a click on this blue section right here and right here I'm gonna take this and slightly bring it to the left and it's going to kind of create that overlay right there. So now you can see the image looks great and also the, you know that we can see the text right here. So it's not fully white. We can kind of see it. So that's why the overlay is is amazing. And you can change the color of it, you know, to anything that you want, you know, whatever whatever kind of color he wants to use. But I just kind of want to use that same blue color. Sorry. Here again. Come out and say we drag it down right there. Okay. And another really cool thing. Guys, let's just say you don't like these positions now. You can always do something like, you know, we'll talk about margin padding. You can just click on this little gear icon and kind of just move it around to however you want. So, um, you know, the in my editing is just amazing. You know, this is a so cool. Yes can do this because with other themes, you have to manually type in the padding and type in where you want it with the padding in the margin. But here you just drag it to everyone It, you know, as long as it's within this square. So that's pretty pretty amazing. So let's go ahead and go down right here. We talked about position, so the position is basically where you want to put it, such as the this section right here. We can kind of say what I want to emphasize the image. You know what? I want to emphasize it more so we can kind of like put it there. But I just want to leave it as something like standard. So for the position, I'm just gonna go ahead and leave that blank, because I like where it is. But that's what the position is. And also, however, so if you hover over, it's what you wanted to do. So right here you can see the hover option. It's blurring. There will do something else like grow or glow. That's cool, huh? So she's glowing aus glowing, and then we have, like, an overlay. You can add an overlay color to it. So you see now, with the blues coming in and ah, you know, you can add an overlay and other stuff, so these are pretty self explanatory guys like blur faded and glow. It's just really what she wants. So I'm just gonna say, you know what? I'm gonna do? None. I don't want anything else. I want to keep it saying you can also add a parallax effect to this. So the parallax effect, that's what it does, is at CEO. It kind of creates an illusion that the the images sitting still. And, you know, we're kind of like following you guys can add a parallax effect to your website. Now, you guys can't see it really well right now, because we don't have any more content at the bottom right here. But we'll go ahead and add in content just a second. And also a really cool feature I want to talk about is the FX. So here I go and say, You know what? I don't want a parallax. No Parallax. So the effects we can have it snow, we can have it confetti. And this is a great idea if you're, like, doing like a sales page or something. I mean, this right here is beautiful. This is a perfect professional landing page now probably generates you a ton of money because people come here and say, Oh, my gosh, this girl's happy. There's this stuff. I don't know what it is. I want to go and buy it. You know, that's kind of how it works in the world of Web design. And then you can have sliding glass. You guys gonna have sparkle you guys and also do some light rain. But this is terrible. I wouldn't do this. This already. It's making my eyes bleed. I don't like that. But the confetti is great. Everything else is good. So we're human, you know, effect really quickly. I'm gonna talk to you a little bit about border now. The borders I usually don't like. But just for general purposes, I'm explain what they are. So, for example, let's say we have, um this this ad and some border right here. So we're gonna add 20. What would see it? Maybe one in 10 Waddington. 10 10 10 and then 10. So you guys can see your way here. We have this kind of border around our image. Now the only thing I kind of like that we can do is right here in your style, kind of
5. HOME PAGE PART 2: Now we have these little rivets and then we can have dotted. So essentially you can kind of, you know, decorate its with the border. And I kind of like that look, because it looks pretty cool. Now the margin is something Where where does it start from? So right here. So you don't put 50. So now, basically it starting from 50 pixels. So 50 pixels. It's going to start right here. And we know we can do the same thing right here and right here and right here. So basically, it's basically saying I wanted to start from a certain position. So I want to start from 50 pixels from the top from the left, from the bottom or from the right margin. And patting guys can be a little complicated, but a better example of it would be when we actually use modules. But this is just a reference of how you guys can use it. And also, guys, remember this theme you can left click on it and just drag it. You know, you could just simply drag it instead, OK, But for right now, I want to say I don't want any margin so right here, click on X and also for the border. I'm gonna click on X as well, because I don't want any borders, although that looks pretty cool. And again, you guys can always change the radius of it. And you guys can also change the color of it as well. So right here you want to add a specific color, you get some go and do that right there. So that is basically a quick run down of borders and how to use borders. And the great part is, guys, is that these settings are basically universal. So if you learn how to use it for one module, you basically learn how to use for all the models in the WordPress theme. So when you learn one section, you kind of master the rest of the WordPress theme, which is pretty cool. So here we click on X and say, I'm done now. Video backgrounds. I do not recommend video backgrounds whatsoever. One of the main reasons why is because video backgrounds do not play well on IOS devices. So what that means is, if someone comes to website via mobile, which 50% of most seizures do now, your videos fighter will not play. They might be brought to a gray screen that looks really ugly. And they can't, you know, see what you're talking about. And they could potentially leave your website so I don't recommend video backgrounds whatsoever. Another reason why is because sometime the video backgrounds don't play well, Like, for example, you put it on your sites, and then people will come to your site on a computer, and sometimes it might not work because of their browser or compatibility issues. And there's just tons of problems with video background. So I don't recommend your backgrounds, guys, and I know many of the beginners love video backgrounds, but just don't use them. They're really not good, however, a torrent of E. If you really want to use them, you can go ahead and grab like a YouTube video or upload an MP four and everything else I might have ah, full tutorial on video backgrounds in another video and that link, maybe description of this video. But for right now I'm going to skip the video section because I really don't recommend them . I don't think you should be using them, because again, I've been WordPress for a while, and they can cause a ton of problems. So I'll have a second tutorial just for video backgrounds a little bit later, and we'll talk about that in another section. So basically, guys, we have covered the banner section. So right here, click on Apply. Now, let's just say you want to add in a second slider. So here, that's a slider. And right here, click on the banner. So now what we're gonna do guises, rocks, gonna create a second banner. So again, we can click on any one of these right here and, you know, mess around with ease and take a look. So these are pretty cool. So let's see here. I'll go ahead and grab Instant. It looks like this right here on No, use a block. One like That's okay. And then we hear what we can apply. And again, we're here. We have the same exact options guys. So alternately, it's the same exact thing, so you can go ahead and mess around with ease. Now, you do want to make sure that the height is similar to your 1st 1 because click up here right here. We can go to the 2nd 1 And if they are different sizes, it's gonna come out a little differently. So I think right here we said it to 16.9. So on the 2nd 1 right here, click on this gear icon, go to options and that will basically give us the ability to edit this section. So right here, 16.9, right and visibility on. Leave it on. We will talk about visibility with me, talk about mobile optimization. So for right now, we're gonna skip this. But later in the Tora, we're talking about mobile optimization, and I'll be a little bit more transparent about visibility and reasons why you might want to use it. So right here, slide effect, we can do like, zoom in and again, you guys can't see that because of the there's no image. But I'm gonna go ahead and put zoom and fast and with select an image right here. I'm going toe lack something. Looks like this right here. So I described here, all right, and then we hear we can add in like a ah background. So for size, we're gonna do like a original large etcetera, but always leave it on original guys. It looks much better. And then right here we can set like an overlay color, so we want to keep it consistent. Remember guys in Web design? Uh, it's everything, you know, content, position, colors. It's everything people really byproducts based off your content, positioning and images. It's pretty funny. It's really how the human brain works. And also, let's say you want to move this around. We can take this and just kind of move it wherever you want, because, you know, it's just it's amazing. This is the same amazing right here. So I'm gonna put it right here, all right? It's going right there. All right, scroll down here, guys. Same options. Now it's going to click on apply and updates, and let's go ahead and take a look at our slider. So you click on X. You can see how it's kind of zooming in because we added as human effects and right here, click on this and now it's zooming out. So the 1st 1 was zooming, zooming in. This one is sorry, assuming out of this one is zooming in, so I hope you guys can understand what that's what those options are. So let's say you want to edit this again again right here at it with you. Ex builder. If you guys don't like those human options which I think they can get a little knowing, you can go ahead and go to options right here and just take them off. All right, so now it's it's coming out good and also the size again. Put it as original because if you put as large, it comes out very pixelated. That's why it kind of looked a little strange. OK, now let's just say you want to go ahead in time, the slider really quick. So over here in the slider, click on options. So the options section for the slider guys is basically controlling how the slider works. So, like, this is basically the overall setting for the slider. And of course we have, like, focused. We have shadow. So another really cool thing guys is like when you have focused right here, you can kind of like if someone is someone scrolls through here. It looked like that, which is really cool, really beautiful. So that's really amazing going back over here again. Options. So here there's different saying settings you guys can use free school. Dragonball, like you want to drag a ble if you want to drag about people come, I like, kind of click on it and drag it wherever they want clicking back here again. Cider options. You guys click on the actual slider, it's going to actually bring you back to the banner section, but this section right here is controlling whatever is inside the slider. Okay? And again, guys, these are pretty self explanatory. So right here, we have navigation. Of course, we could have it, like offer on position you have inside. You can have it outside the size The arrows. The arrows are basically these little things right here. Um, you wanted to be like a simple or you want to be, like a reveal, really? Go over it like that's or you can have it as is just circle, which is that section like that? I mean, that's pretty good, right? And you can change it to, like, dark or lights, or you can have bullets. So right here in the bottom section. If we close this out, they'll be bullets right here. And people can navigate your slider with bullets. But, you know, it's just, you know, if you want to have that, you can also have an auto slide. So, for example, let's say you want to have this slide automatically. You can set the time Marie here. So 6000 m s equals six seconds. So if you wanted to cite automatically, you can put something like three seconds, and then it would slide every three seconds. So that's basically what the auto sliders and again auto slide will. It'll just go through all of your your slides automatically without people having to touch it or navigate it and no pause on hover. So that means if they hover over its it won't. It will not do an auto slide. If they go away from its, then it will auto slide. Okay, so that's a quick rundown of this section. So you guys understand the section. It's pretty self explanatory. Like I said, you know, there's, you know, the Dragonball option, the free school infinitive as well. Again. You guys contains the margin of this as well, but I think zero is pretty good. So we don't want to basically push the slider anywhere else we want the state right there. So here, I'm gonna go and say, OK, so was fine. Anyway, so sideline weaken, do, like, left you do rights. Because, remember, we want to choose which we want the slider Teoh look like basically come from. That's exactly if you have this style set, though. So this corresponds to the slider line, and then right here, you guys can do shadow, which is pretty cool. So, for example, right here he said like that. Okay. And, um, I hopefully by now you guys understand how this kind of works. So right here we have the slider. And remember any any banner within the slider that's over editing. Okay, so I want to go ahead and make this full screen. I don't wanna have to, uh, do it like that, but that's a beautiful style. So if you guys want to do that to you guys can. So right here, I'm gonna go Teoh my style and just go to default and click on applying and click on update . So we basically created the slider. Now let's go and say maybe want to add in a link, like for your slider, right So right here you see the button, you just hover over butts and click on it. And these are other settings that you guys can change right here. So we're here to guess, Could go ahead and, you know, do like the letter case. You guys can give it a class. So, for example, like button for men, you can taste the color to, like, these are like quick sections. You guys can, you know, you guys can change the color, but what you want. But these are like quick sections, you know, like alert success. Why, etcetera? The outline you guys can change The outline here is well, the size large, larger or just normal. And then you guys can animate its, you know, like it'll basically Adami. Once the slider appears, it can animates. Here you can take the radius so you could make it a bit more circular. The deaf guy's contains the depth of it. It's going down here deaf hover as well. So all of these options guys, you guys can kind of understand what they are just by messing around with it. So this is like a box shadow. Basically, it's the same exact thing. Icahn, If you want an icon, you guys can add a Nikon. See, now there's an icon you guessing at icon you can add a vision to the right or to the left. So here I would say no icon. But they have tons of cool icons. And you know, you guys can miss run with that. And then again here, you guys can like, you know, just if you guys want you guys can put it over here, he s some kind of drag and drop it. I don't recommend it, though. I do like their default settings, and we'll talk more about the dragon drop feature a little bit later in the next section. So, basically, also, if you guys wants to link this somewhere, you guys can put it to, like, you know, some, like, forever link you want. Now, I'm actually going to talk more about this a little bit later because we're gonna link our product categories on this section. I know I keep saying that a lot that we're gonna do it later, but there's a lot to cover, and I just really want to make sure you guys understand how this thing works before we, you know, Go on to the next section. So right here, click on apply, and then click on update. So basically, right here we added a, um you know, we did some features. We added a link. So now if someone clicks on this button, it will take them to that specific link. Okay, But let's go ahead now and move on to the next section. We're gonna go ahead and create the next section, which is this section right here. So we're gonna add in this section right here. So let's go ahead and do that. So let's just say you want to keep designing your web site right here. There's just plus icon gun. Plus, now we can add in a row we can add in, you know, whatever you know would just that we want right here, But I kind of want to add in something like I want to add in another template right here. Sorry. Here. I'm gonna go ahead and click on the plus and then go to Fox, um, studio and I want to go ahead and find the category section. So right here, I'm gonna go to categories and then I'm gonna go ahead, select one of the ones that I used for the demo, which is this one right here. And click on imports and then click on Start. All right, so I guess and see that we have this specific section right here. So this is great for a category. So let's say, for example, that you guys want to go ahead and add in product categories, which we're gonna talk about just the bits. This is basically a great way to enable categories. And again, you guys can always change the position of this to wherever you want. Such is that right there? So we basically credit this section, But let's say, for example, you kind of want to start using the actual you know, the actual modules instead of relying on the flotsam studio. So we have page title. We have all these other difference things right here that we can use now I want to use one , and I'm going to use this for probably the remainder of the actual, um tutorial, which is the title ones right here. Click on title. And now we have a title down here, so I'm going to give this a name right here. So I'm gonna put like, our categories. And then here we have, like, a Nikon or different settings. Now I want to go ahead and, you know, actually modify this myself instead of using the templates. Because, you know, if you want to modify the website, you don't want to rely just on the templates. Right? So right here, I'm gonna say, All right, we have the style. I want it in the center. And this kind of creates eight division. It's basically introducing the next section of our area with this header right here. So right here we have color. You guys can go and change the color of its. But again, I just want to leave it to something like black, So just just go next. I think that's Ah OK kind of color. What? You guys think they looks good, icon. I don't want a Nikon right here. You can change the width of it. So again, you guys should just simply drag. It's some of the nats you guys wants to have, like, a custom with like that. But I don't want to seem to believe it. Blink, margin and patting. I'll talk about this in just a second the size So right here. I want to increase the size of little bits to make it something. Looks like that right there will use 100. It was like 150 from now on, 150 C. 101 more time. 15 I'll just go and do that. It's being weird. It does that sometimes. Welcome to Wordpress. Or do you want 55? And I don't want to link this anywhere, So I want to actually kind of drag and drop this Auriemma click on Apply Now. There's a few ways you guys can do this. We can take this right here and simply left, Click on it and drag it above our section like that. Or we can do it like this, right here like that. Either way, so you guys can use this section or you guys can use this section. So I want to go ahead and take this and put it up there. Now we have too much space right here. Now we have a gap, and there's a gap right here, because when we enter to this template. There's a model for a gap. So I want to take that out to put it like we'll put zero. So now we have Ah, this section here. Now, let's just say, for example, you just kind of wanna, you know, reduce it a little bit more, you know? So we're here under my title. We have the margin top, and we have the margin bottom. So we can actually kind of messed around the margins here to kind of get it to where we want. Remember, we talked about margins earlier. Well, this is a great way to use margins. And again, you guys can kind of find out where you guys want. It's I'll put it around some around their looks. Good. Right. So this is a great section, guys. So right here, you can see that we have our categories and is introducing the next section right here, which looks really professional, looks really, really good. So again, this'll is a great example of how you guys can use this thes little dividers to kind of introduce the next section of your websites to your visitors. So you click on, apply and click on update now Let's just say, for example, really quickly before we talk about products that you want to actually do this yourself. You don't want to use templates. Well, I'm gonna go ahead and show you how to use the page bowler without using the template section. So right here I'm clicking on Plus and I want to select a three column road. Now. They also have grid. They have all these other things that we can use, but I want to first put a row in here. So we have a row and you guys can choose different rose. So you guys can see right here we have. Oops. Let me go back there. Go back to options. Actually, we're going to leave this really quickly just because that I miss collected. Sorry. So here I go ahead and take this off to delete that and a human click on at the contents and go to row again. So we have the road right here. So we have a Let's go back here, OK, One more time. One more time at the content and then the road. OK, so we have these different sections and what I'm just basically trying to tell you guys is that you can have different column rose if you choose again. I really recommend using their template section because it's amazing. So if you want a three column road that's full with, you, guys can use the full of section. Do you guys want a three camera like this? You guys can use the three column roll right there, so I'm gonna go type in three columns, which we already have right here and
6. HOME PAGE PART 3: we have right here. And then let's go ahead and add in something to these columns. Right here. So right here, I'm click on this section and I want to enter in. We can enter in a versatile entering a banner. All right, so we have a banner right here. Me? Go ahead and click down. You can see it. So we have this section and again, you guys can move this to any party that you guys wants. But right here, I'm gonna change. Is something like 450. I want to, you know, just a little bit shorter. Yes. Can always manually type it in as well to make it easier for you guys to see. And then for the image of the gone select media. And I'm not going to use that same image that I use that the demo gave us. So right here we have the image. The image sizing is 1000 by 667 So here we're gonna use this image. Now we have this image pretty cool. So here we can have, like, the color of the overlay, etcetera. No, we I don't want to, like, kind of use the banner anymore because, you know, we've already set the banner, but I want to actually modify the stuff inside the banner. So I hear you click on back now. Right here. If I want to check out what's inside the banner, click on this little icon and it's gonna choose the text box. So in the text box, we have text. So right here, I'm a click on this icon right here and go to options. So this is basically controlling the text box, guys. So we're basically controlling now, like the actual box itself. So not the text, but the box itself. Sorry here, because look, something like Circle Square. And then, you know, you guys can do light or dark. We can change the width of its We can scale it, But I kind of like it fitting like that. It looks professional. We can change the margin and padding. So if you guys want to change the position of the of this bubble, you can do that right here. You can also add padding to it. So we talked about patting before. Yes. Can kind of just mess around these two kind of, you know, just check it out. You know, uh, these air Just like they're pretty self explanatory guys. It's just how you want it to look in it because there's so many options that you guys can, you know, messed around with, like, fate and left. So again, that's how we would set up this section. All right, so then again, we can line it to the center or wherever you want, but I want to just go in and say, You know what? I want a I kind of want a square. Oh, yeah, Square like that's. And now I'm gonna go over here and then we can actually click the text box, and then here we can actually modify the text. So if I click on the year icon protection goto options now, we're actually modifying the text itself right here. So if you guys want to mess around with this, you guys can added more text. It looks like that right there. Okay. So basically, just kind of explaining to you how that works with the module now. So you want to add in a but in here, So here, and click on this and find the button module. So now we added a button, and right here we can change different styles of buttons. You guys can kind of see how the buttons look right. Click on. Apply now, a different option for the buttons so you guys can do lower case. Small case. You know, you guys can change the color, the style the size. We'll talk more about the font a little bit later. We're gonna talk about that when we introduce plug ins. But I'm just giving you guys an idea of how you guys can mess around with this. The butts and you guys choose Teoh, you know, change all the settings again. Guys, these options are pretty self explanatory. So I don't want to get too much into every single button or every single module, because again, a lot of these modules have the same exact settings as each other, and they're also pretty self explanatory, you know? Oh, so hopefully by now, you guys are kind of understanding how this works so again here, I want to move this down. Believe it like that. So the text box have become the textbooks again, and I kind of want to make this a little bit bigger. So for the width right here, we kind of increase the with maybe scale it differently. Like that's something like that right there. And then maybe right here, we can, you know, put it to the center. Now, this is safe. For example, you guys don't want to do all this work again, you know, because this could be a lot, right? So let's go ahead and duplicate this instead of actually having to manually created all over again. So for the banner section right here under the gear icon, I want to actually duplicate this section. So here we have the banner. Now I'm gonna actually cleft click on this and drag it over here to our other section right here. So I'm gonna click on this, drag it right to the add elements, all right? Pretty easy. And then do that again. So I'm gonna click on the the banner section here again, and I want, actually duplicate it so you guys can do it right here and again. You guys can also do it right here. So again, you guys can see the battery here, and then we hear it's there again. So click on duplicates and then Well, there you go. And then we can simply take this and drag it up here and there you go. So that is a very quick way and simple weights to kind of make things yourself. You guys can always just click on the plus icon right here at in a row and then simply go ahead and add in whatever modules that you guys want in those rows and columns. And since you guys know kind of how to use, like the other settings and stuff, it's pretty self explanatory is pretty simple. But we're going to practice a little bit more later when we talk about the about us page in Contact us page. But for right now, I want to go ahead and forget all this. We're gonna go ahead now and create some products. So I'm gonna go ahead and just delete this whole section. So to delete it right here I have this right here is controlling these three columns when I click on that and click on delete so I don't want that no more. I just like this section right here. I think that is perfectly cool. So it's going now and update this and we'll talk a little bit more about designing our site a little bit later when we talk about the about us and the Contact us page. But that was a quick warmup, guys on how you guys can decorate you.
7. CREATING PRODUCTS: guys on how you guys can decorate your websites the first time to show you all how to create products for e commerce websites. Then I'm sure you will have a great product categories. And lastly, I'm gonna show you what you customize your shop, your account and your check out page. Now, this will probably the most difficult part of this tutorial. So if you have a favorite beer or drink, now is the time. So it's going now and create some products. So to do that, we're going to install the world Commerce plug in. Sorry. Here. I'm gonna go to my dashboard and go to plug ins and go to add new right here. We're gonna type in commerce again. We'll Commerce is probably the most popular platform, you know. Originally, when we're pressed first came out, it was intended only for a blogging platform. And the popularity kind of grew and people said, you know what? We can do a lot more with this platform. So right here under will commerce Click on Install now and click on Activate and you guys were out to a page that looks just like this right here. No guys in the future of this might change, but I just want to kind of help you guys understand. Um, you know, the basic settings. So we're gonna go through this set up, wizard. So where is your store base? That well, I'm gonna put mines in California and go ahead and put your dress someone put like, um, I'll use my dummy dress I've always used before. And then right here we have what currency? So put your currency. I am United States. So I'm going to use the US dollar. Are you gonna sell physical or just digital products? Well, I might sell both, so I'm gonna go and leave Both right now and then right here. I'm go to Let's go payments. So here we have stripe and we have paypal. Now, if you guys uses my recommended hosting such as site ground dot com, you guys can you strike because it comes with a free SSL. Congratulations. But if you guys use something like host gator, you're going to go ahead and pay for your SSL or any other hosting company. Usually makes you pay for it. So we will actually go ahead and create a stripe account a little later. You guys can always click on creative Tribe, account for me, and then do it yourself. But we are going to use stripe and PayPal because I want your visitors to have access to check out directly on your websites and also have the option to go through PayPal as well. So we're gonna go ahead and use both and then also we have oflife and payments, which was like, there's, like, the weird stuff, you know, like you can take check on cash on delivery and all this other stuff. But let's be honest, you know, like, who the hell is gonna do that? I was crazy, you know, like, uh maybe we'll pay you later. No, I'm not going to do that. So we hear me go to continue. So here we have shipping. And guys, the great part about well, commerce is that they just introduced live shipping raids. So what that means is, you guys can actually have your site linked up to USPS to automatically pull the correct shipping rates. And not to worry. Guys, I will talk about how you can set your own custom shipping rates in case you want to make a little money or you want to give your visitors a discount on shipping. So right here we have the way units. So you know, how heavy are your products? Are you guys selling fridges? You're selling fridges. You might want to do pounds. If you're selling some, my clothes might want to Two ounces And also dimension units. You know, United States we use like inches and yards, but for, like, other countries, they use like they're on the metric system, so they use like, centimeters and meters. But here is gonna go and say You know what? I just want to go ahead and click on. Continue. I do want to use the live rates. So here it's going to automatically installed jetpack and commerce services for us. So click on. Continue. So right here we have the automated taxes. So for those of you who are in the U. S. A. Congratulations, we can get automated taxes. I think this works for parts of Europe. I'm not 100% sure, but we will be using this. And I will also show you if you're not in United States, how you guys can actually set up your taxes no matter where you are. So I know how it's to set the taxes for specific rates. I'm a pro. I know everything. So I actually wants to actually set up jetpack. So here we go to continue with jetpack. And this is for people who want automated taxes. You don't have to do this, but I'm going to show you all the methods for taxes, just in case. So you guys will need to have a wordpress dot com account. So we hear clicking, continue. You guys can always go ahead and make your own. All right, so this is like my, uh, you know it. So it's free to make a wordpress dot com account, guys. So it's It's pretty simple. So right now it's authorizing my connection. And again, guys, don't worry. If you guys don't have a WORDPRESS account, I will show you how to set up your taxes regardless. But I also want to show people how they can actually set up their taxes automatically. So we've done everything, Guys, Congratulations. The next thing we're gonna do is we're gonna create our first products. Is that exciting? I hope it is. so right here. Click on, Create a product. So again, I have demo images in my file. If you guys choose to use those, you guys are more than welcome to All right, so let's go ahead and get started. So now we're making products. So what are you guys really selling? You know, I don't know what you're selling, but whatever you're selling, this is where we're gonna create the products, all right? And I want to go ahead and just dismiss this. You know, we don't We don't need that. We really don't need that. And we have all these notices up here. I just want to dismiss all these these air Really annoying. They're just trying to, like, you know, warn you of stuff. They're actually being helpful by reminding you of things. Like, you know, this isn't connected or that's connected, but we don't really need to do that. All right, So I'm just gonna go and close all these just because I don't want them. Alright, closing those and dismiss this. Okay, so you're out to a page. It looks just like this right here. And guys in the future, if you ever want make products. You go to your products and go to add new product. So if I click on a new product, it's gonna be me to this page again right here. Okay. My website is running a little slow because my internet connection is not the best, so anyways, so it's going to make a new product. So right here, I'm going to seem like woman shirt. Woman's a woman's shirt. Now we're here. This is called the long tail description. Now, really quickly. I'm going ahead and go to my demo website and basically show you what I'm talking about. So I'm gonna make it very easy for you guys to understand. So woman shirt. Okay, so this section right here, this is called the long tail description. This is gonna show up right here on the bottom. Now I know it's kind of weird. That's the top part. It's like in verse, but that's just the way it works. So this part right here, you'll probably talk about stuff like, you know, um, made with cotton. This is like the technical details you can say Now you don't have to put this. This is just if you choose to have it. So here I have the product description. Then we hear we added some. You know, some Texan Fonz, if you guys want to add in like a big header. Sorry. Here. Like a product description. We're going. Highlight this and add this as a header. So heading is just like a title. It just emphasised everything. And then we hear it. But, like, thing is made in trying a whatever you want to put. And then here there's other options. Like you guys can align it to the center to the left. You get out is in quotations. You guys use Microsoft word these air like the same things, Like bold italicize. But I don't get too much this because this is pretty. This is pretty self explanatory. You can change the font sizes, the color, everything else. You guys can do all this right here. So you're just gonna have fun changing all these settings. But for most of you, you know, you might not care about that too much. You just want to like Lister products. So I'm gonna go ahead and just paste this in. All right? Now it's going down here. We have product data so simple. Grouped, external and variable refers. Going to do a simple product. So how much does your product cost? How much money you wanna make? Well, one of the $200 is your product on sale? If it is, you can put a sale. It's $400 now. Now, How long is this sale gonna last? Well, I want to schedule. It's too. I'm gonna do February 20th to the 28th. So this is on sale. Is this taxable? Most likely, Yes. Tax class. We will talk about this a little bit later. When we talk about tax costs is you may or may not need this. Small people don't use tax classes, but just for the purposes, I will talk about that a little later. Next. Let's go to inventory. Do you guys have a scoop? So if you guys are a store, you guys get your skin number here. Do you want to manage stock? So basically, what this does is it's going to tell people how many you have left. So, for example, going to say you know what's I got 10 left. That's all We got 10 left. That's all we got here. Back orders. Do you want to allow back orders? So what that means is, if you weren't out of the product, if you have no more Do you want to give people the ability to still purchase the product? If you have no more If you do, you could gone allow. If you don't, you cook on a low sold individually never check this box. This is very rare circumstances. This is basically saying if you have this checked and someone wants to buy this product, they can only buy it by itself. Now, in very rare circumstances, you use this box. But for 99% of you, you would not check this box shipping. So how much does this way? Well, it weighs about ah, out of 16 ounces. Was it a mention of the length? Well, you know, it's, um, 10 10 inches. Then for the with we have, you know, nine inches and then for the heights. I'm gonna do 15 inches shipping class. We're gonna talk about that a little later, but for again, for most of you might not need to use that linked products. So what is a cross sell and what is an up sell? So enough. So, guys, is something that you recommend when someone's actually looking at the product. Have you guys ever been amazon dot com and click on an item and it recommends you different items. That is what we call is an up sell a cross Ellis something that's you recommend at checkouts. So when someone is checking out, you know, it's gonna recommend whatever items you put here. So once we make some products will add some upsets and cross cells. But personally, I don't recommend Upsell. I'm sorry, Cross sells. The reason why I don't recommend cross cells is because if somebody is already out the door to check out, you know, authorities, someone says, you know, I'm gonna buy this product already. I'm gonna buy it. I'm going to check out why confused them even more by recommending more items. I don't even think Amazon does that. I think Amazon will recommend accessories for the products, but not other products. So I am all for up cells. Cross cells can be a little gamble. You could make money, you could lose money. That's my personal opinion about cross cells attributes. Don't worry about this. We'll talk about this. We talk about variable products. Advanced Purchase knows. So if someone buys something what you wanted to say, Thanks, bro. Here we go. Thanks, bro. So they get a purchase. No saint things broke. If they buy this product menu order, this could be a little outdated because a lot of the themes such as flats um, we can actually position certain categories. But if you want to change the specific ordering for each specific product, you can do that here by saying like minus one or minus two. And basically, let's say, for example, have minus nine for something. This product is going to show up first and the next item minus four, minus three minus two. So it's basically numerically numbering the items in your shop, which can be very tedious and not useful. I don't recommend many orders because you can always category something to say, like our feature items, you know, men's items, etcetera. So I don't really recommend menu order. It's basically the order you list products, but again, you know you can use that extra so extra is theme options just for flats. Um, but let's just go ahead and create the product first before we talk about extra. So I'm gonna skip extra, and we'll talk about it in the next section when we talk about another product. So product image you guys need to give your product and image. So what you want people to see when they first look at your product? Well, we got this girl here. She's sexy. Seven. A good time. So at her. Okay, so we have her right there. Now, what other pictures do you have of this girl or a product? Sorry. Here, click on gallery images and I must select this one right here. All right. And then we'll add in one more. Okay, so we have to gallery images scrolling down here. Now, this is probably the most important part. Guys, this part right here controls this part. So right here, I'm going to copy and paste this and paste that right there. Pace it right. There we go. So I just basically added a dash and then, you know, typed in something and again, these are the same options as the other ones. So you guys can go ahead and add in whatever options you know, you guys want. You guys can add in a small image right here by clicking on add media and adding something else. But again, that's kind of worthless because we already added product images and product galleries. So, you know, I don't really find a use for, you know, adding media a contact form for a product, you know, maybe for, like, an inquiry seem like that. But generally, multiple sites don't have this like, I've never seen that, actually. And then right here we have sharing buttons. Make sure to do that because you never know someone share product. So we basically made the product. But let's just say we want to go in and it's, um, tags. So right here, I'm gonna add in like, woman's shirt. And then, um I don't know. Ah, woman shirts like these air basically telling people what your product is, So if someone sees your tags and click on it, it will take them to related products. So woman shirts, um, well, do like, um, sexy shirt. All right. And this section right here is probably the most important ones. So I had a new category. So this section is just for woman's products Woman's. And I might add that to the category guys. This is very importance because categories are the best and only way to categories or items with newcomers. So if you want, have, like a men's woman and accessories categories, is why you add categories. So let's click on publish. That's going to see this product now. And people can actually buy this like immediately. Like when you when you set your stripe options and your PayPal options, they can come through website and buy this right away. So it's not like we're really far from the store. The store is actually very close. Sorry here clicked on view products. And there you go. So we have these sale icom we have woman shirts and we have, you know, in stock. And then right here we have the images. So then they're gonna like, you know, take a look at it, look at it and kind of ticket outs. Pretty cool. And then I hear you know, we can zoom in. Yeah, zoom in every want it. So this is a great way for your customers to kind of, you know, look around right here. We can add in reviews. And also we can set something later where people can actually set reviews that have only purchased the product. So if you have a bunch of trolls out there who are just, like, hate your sights, don't worry. You can protect it by having people who have only purchase your product make reviews. So we made the product. Now, before I go on any further, I want to show you how to edit this page. That's the great part about flats. Um, is that you can actually edit this page, you know, by default guys, other themes. You cannot change anything on this page whatsoever, so right?
8. CUSTOMIZING SHOP PAGES: on view products. And there you go. So we have these sale ICOM We have woman shirts and we have, you know, in stock. And then right here we have the images. So then they're gonna, like, you know, take a look at it, look at it and kind of ticket outs. Pretty cool. And then I hear you know, we can zoom in. Yeah, zoom in, however you want it. So this is a great way for your customers to kind of, you know, look around right here. We can add in reviews, and also we can set something later where people can actually set reviews that have only purchased the product. So if you have a bunch of trolls out there who are just, like, hate your sights, don't worry. You can protect it by having people who have only British your product, um, make reviews. So we made the product. Now, before I go on any further, I want to show you how to edit this page. That's the great part about flats. Um, is that you can actually edit this page, you know, by default guys, other themes. You cannot change anything on this page whatsoever. so right here. Click on. Customize. So we have different settings over here. We have heading style. But my boss over here with a gun shop product page and we have different options, guys, So you can have, like, a left sidebar, no sidebar. We'll talk about side of our guys, talk about widgets and stuff like that. But for right now, we're not gonna use those because we don't have any widgets. But right here we have different things, like, you know, product header. We can add in a color header or a title headed right here. Now, let's just say, for example, that you want to, like, you know, make this like a little difference. You guys can go ahead and do that. So there's tons of options right here, guys, where you guys can add a lot of stuff. So, you know, you guys can have a transparent header next, and pretty navigation. You guys can take that out. So the transparent header. Now it's dot transparent here, going down here. We have the product image style. You can have it like that or you can have it like this where the images are at the bottom cool, huh? And then right here we have different light boxes, like the flats on lightbox, the light boxes basically the style of when it opens. So when you click on it and that little light box opens up, it's just different styles you guys can use to navigate it. Also product image, hover, zoom. So if someone actually hovers over the products, it's going to create this little section right here where it zooms in. So you can choose to have that. If not, you guys can go ahead and take that right there. Product summary product, title divider. So we can add a product type of the fighter, or you can go ahead and add it in, or you go ahead and take it out. And also you guys can like to text alignments. So, you know, center and then right here we up to the right and then to the left, all right, and then form style. You know, we can change it to default or we change it to flat as well for the form style as well. Um, you know, you guys can show categories. You guys can show the social icons product in line tabs. So right here, this is control. This section right here, right here. Let's go ahead and change these up. See, we can do product tabs a line. So right here, you can see the tabs were moving around and we do the left. And of course, guys, you know this. These are you know, I would say you don't really need to have these butts. You know, if you want to get customizable, you can do that. I like pills The best. I think pills is cool. See how it's like that now, Or you can just do it like line tabs. Some like that, you know, But it's a great way to decorate your shop. And, you know, I'm sure there's a lot of useful ways you guys can use to decorate this stuff right here. So here we have, like, open car here, products and up sells. Now, you guys don't have to have this because we can set this in the theme options or you can you know, Adam here it's really have to accustom me a custom. A similar you guys won't need because most of you aren't developers. So if you guys want to go ahead and, you know, add in some, like gnats. You guys are more than welcome to. I think a lot of these options guys are just amazing, you know, especially like with the probably better and stuff like that. You guys can change it, Teoh, whatever option that you guys want. And then again, you guys can go ahead and mess around these headings because, you know, it's za school toe dimensional settings. You know what kind of changes with their title divider, Etcetera. Okay, so it basically shown you guys a little bit about how to decorate the product page and everything else and like the product, head and stuff like that. So I'm gonna go ahead and add in the I want the menu back. I don't want it to be transparent, so I'm gonna go ahead and take out the transparency, because that looks kind of ugly. Okay. And then right here we go back, and then we have category page as well. So, um, we talked more about category pages. We'll talk more about this. Like for the header. I think the header actually is better to actually change. So right here for the header took on uncheck. It'll give it this blue section. I think that's much better than the image itself. So this is actually a category, guys. So this section right here controls the category page. So the other options that we were using was, if you have no categories. Then again, you guys can always change like the list on everything. But this will talk about a little bit later when we talk about the actual category page itself. Okay, so this is the actual product page. And here, you know, this is the header for the categories. We're gonna show the title and stuff like that. So let's go ahead and make another product, and then we'll talk more about category pages in just a bit. So we just kind of customized the product page. Okay, so let's go ahead and go to plus new and go to product. So it's going now and make another product. We just made one and scored. Make one more. We're gonna do like woman sexy shirt. Woman's are we? Do we do that woman's clothes? Woman's closed for for cool at on a woman's clothes? What does? It was close and then we hear. I'll go ahead and take this description again, and then I hear hoping it right here. It's going down here. I'm gonna go ahead out of the price. And you guys don't need to follow me here because I'm just simply going I'm just basically making product categories. So I'm gonna go ahead and just, you know, rush through this really quick just to give you guys example of the category page itself because you might want to customize. That's so here is gonna go ahead and paste this in There we go pacing it's and then set a imagery here. So here we'll go ahead and select this girl right here and then I'll go ahead and select an image. Think that's and then this is Woman's. And I think I'm all ready to go. Zuma, go ahead and go to publish now. All right, it is publishing all right, so it's going to click on view product and again right here. We have the same product. You know, when people can always like you can kind of browse through, take out the next one, which is pretty cool. That's another great part about this team. Guys and a lot of things don't have these options, so this is really amazing. So we basically created a category for women. So without going into the next product, I kind of want to show you all how you can actually customize your category page itself. So I'm gonna go ahead and go to our menu, and I'm gonna go ahead and really quickly and show you how to add categories to your menu. It's really simple. So over here you go to menus. And now we have more options right here. So we have product categories, and we have women's. That's on the menu, All right. And we have a woman's right there. All right. Also, if you guys go to the other two were got we got, well, commerce and points. You guys can do like the orders, downloads, account details, lost password, etcetera for your customers. But for most of you were not going to go and do that. Also here for pages. I want you guys to actually click on view all and add the shop in the cart, the check out if you know we're gonna do my accounts and yeah, my account and shop and click on Add to Menu. So we basically created these pages because when we activated, will commerce automatically created those pages for us? So we need to do all the hard work. So right here, I'm gonna go ahead and just kind of categories, ease to wherever I want and goes to right here, saving you Now a good strategy, guys, is to take your category and drag. It's under your shop like that, and that's how most websites have it. So let's go ahead now and take a look at our site. All right, so we have the home be about and we have the shop, and right here we have women's never click on Woman's. It's going to show us all of the categories for women's. So every product I made for the woman section is going to appear right here, which is really cool. This section right here, guys, we talked about widgets. Don't worry about that. We're gonna talk about that when we talk about plug ins, because there's a lot of different plug ins and things you might want to add to your store . But for right now, I'm just going to show you if you guys decide to customize this section? You can do that. So right here I go to customize and go to category page. Okay, so let's go ahead and scroll down here and we have list style so we can actually change how this specifically works. So let's go ahead. And actually, you know, let's go back here. I'm gonna give you guys a better preview of this by going to our woman section. Sorry. Here. I'm gonna click on Customized now. Okay, that's what I want. See? So now we can visibly see the category page. That was a little weird. So over here we have our shop and we have our category page So you guys can add a sidebar or you guys can, you know, not a sidebar. But I really want to show you guys. Is this section right here where you guys can click on this and kind of change how it looks like that also, you guys can have a messy, great effect. So basically, this theme will equalize the images for you. However, if these are all different image sizes, it can kind of create that grid effect. Look. So that's basically what I kind of wanted to show you guys about this and again right here . We have the products so you can skin like, um, if you wanna look like that's that's another style that you guys can use here, you guys can click on equalized the HEIGHT column, and then you guys can actually change the HEIGHT column, depending on how you guys want this toe. Look, so you know, that's pretty cool. So going back down here, how many products do you want per page? Well, I want 12 products products per row. You guys can have to. You guys can have one. You guys can have three. You guys gonna have a lot. So it just depends on how you want to customize it. Also for the header. Again, we talked about that. It's gonna show up right here. Okay, So you guys gonna have fun. You guys can show the title whatever you guys want to do, and then we hear products Perot for mobile users. So just for mobile users, you guess consent a specific amount of products to show, and then right here we can add a background to it. Or you can add a title background color so you guys can go ahead and change the title background color as well. Some that you guys wants right here. You're not changing the background color for this section, okay? And then, you know, you guys can go ahead and go through some of these, you know, set featured images, background or whatever, but I really wouldn't add a picture. Guys, it's it's not. It's not ideal, and it could come up really weird. And then right here, you guys can change like the category box. So, for example, guys, another thing we talk about is your prices. So let's say, for example, you want to change this pricing to make it look like this or like this. You see how the prices are now lining differently. That's the great part about this theme, guys. You guys can change how the specifically looks and then right here we have the product box style, so we can't see this yet because we don't have any other categories. So once you make different categories, you guys will be able to understand that a little bit more. Here we can add in a drop shadow. You got shoes out of drop shadows and I guess can see that there is a shadow around our products, which looks pretty cool. Then, right here, like a drop shadow hover. So with the hover means if someone hovers over its, it's going to create a different box shadow. So again, guys, this is amazing. It's an amazing theme, and there's just so much you guys can do with it. So add to cart button. Right now, we have no add to cart button. So if you guys want to admit to carpets in on the picture, you guys can do that. So right here we have this really cool add to cart. Someone clicks on its it will make this little pop up and then they can add it to the cart . And here you guys can see the practice inside the card. So that's really, really cool. Here again, we have ah, different style. I like this style. I think this is the best because it has the product. It looks really nice, you know, And yet the car is really convenient. You just click on it and as it to the cart really fast, so it doesn't take you to another page. It doesn't take you anywhere else. It just does everything right there. So it's pretty incredible. Here we can show the ratings. Let's be honest. Let's just say someone gives you or some bad ratings and you don't want it to show up. Well, you can just say, you know, when we were not gonna hide those, we're gonna show we're gonna hide the ratings. But we don't have any rings yet to our products, so it's not gonna show up. But once we add some ratings, it will show up on our product. Ah, show short description. If you guys want to show a short description, you guys can have it like that. Now, this is on Lee Good. In conjunction with the other style of product that we talked about, which is this one right here. Now, this would be ideal. Now it doesn't look right here because we have to change the actual image, height and stuff. But if you're gonna run this list style, you might want to add a short description of it, so that looks really bad. But, you know, you guys can change that by adding more column or more products to the road. So I'm gonna go ahead and go. Teoh changes back to this right here and then we hear school down and they keep talking about what we're talking about. So right here at the car, but in show categories, disable quick, you. So if you don't want people to have the quick view option, which is this right here, you guys can actually disable that. But I think that's really cool because it's super clean. Do you know? It's It's It looks great, you know, looks amazing. And then we have the cut of the sales bubble. So we're here. It's circle. Now it's square. And now it's kind of, you know, it's it's kind of falling off the page, but, you know, that kind of counters a look right there. It looks really cool. And then here, instead of saying sale, you can say like, super hot, super hot. Wait, wait, wait. There we go. Super hot. And also guys, instead of having once you guys put stuff on sale instead of having like the actual like like the sale thing, you guys can actually add, like, a percentage and settle the sale. Icahn. So how much was this off? Like how much is it off? Well, instead of having a sale, you can live. I'm sorry. You can put a percentage right there, so that's really, really cool. So that's basically guys. A quick rundown of how you guys can fully modify your product category pages. So if you guys don't understand it fully right now, don't worry about it. Because, um, you know, we're gonna go ahead and keep talking about products and also show you guys how you guys can add an image right here with this section called Blocks. So we'll talk about blocks a little bit later in this tutorial. So it's going and click on X. So we have our product category page, which is pretty cool. So we've only done one product. We've done a simple product. Let's go ahead now and create a variable product. So you guys don't know what a variable product is. If I go to my shop page right here, this is my my other one, my demo website. Here we have different variables. So I here I have small and I can just blue or red, and we can change the price of this guy's we can change, You know, weaken basically changes to any which way you want. You can add one variable. You can have two variables, so let's just say you have only one color. You can add as many variables as you want, so size color men or women. You know, whatever you want to add, you can add it in as many variables as you want. So let's go ahead and keep going. So we did our product page, which is really, really cool, and we'll talk more about the product page. Ah, little bit later in this tutorial, so right, here we go.
9. VARIABLE PRODUCT : All right, so we're not We're gonna create a variable products. Sorry. Here. I'm do men shirt. And I will go ahead and just simply take this stuff right here. Just, you know, just copy and paste this stuff, you know? Okay, so right now, under a product data, I want to select a variable product. Okay? And right here again, same options, guys. So nothing has really changed here. Nothing has changed whatsoever. So the shipping, everything else everything is the same. So the only thing we need to do now is at some attributes and some variations. So right here it says before you get out of variation, you need to add some attributes on the attributes tab. So right here and click on attributes and click on add. So, basically what kind of a tribute you want? Well, I want size or one color. Sorry. Here. Size. So what kind of size? Well, we have small now, the sign above the inter sign. So usually it's like that you must hold shift and then press the button or the good dash. So it's the key above the enter sign. OK, so hold shift. Impressive. So we have small, medium and large. So we're creating just one attribute right now. Oh, I saw that wrong. Sorry. Here, I'm cook on used for all variations and go to save attributes. So right now we only have size. Okay, so I'm gonna go ahead and first just do one, just to make sure you guys understand how just to do. Ah, just one. Okay. Maybe you guys only want one. I'm not really sure, But if you guys don't want to show you how to do one and two because 123 or four or five I'm sorry. You guys have to do it by yourself. But who uses, you know, that many attributes. So here, under variations, we're gonna click on crave orations from all attributes. Include gun go and they're warning using. Are you sure you want to do this? Just say yes. Never look at warning signs. Just always. Pretty. Yes. You know what most people do that it is. So okay, so it's a it's creating our attributes. All right, so three variations have been added, so we have small, medium and large. So first I want to select a product image right here. It's almost like Todd. Uh, well, it's like this over here, okay? And then we'll go ahead and set a, uh, we'll add in a product gallery image for that right there as well. So here, Ethicon product, gallery image and click on this one. Right here. All right, so right here in our small look on this arrow right here. Put the image. So we're using this one right here. Now, how much does this cost for the small? Well, the smallest 1999. And again, Guys, this is the same options as the single product. So a sales price? Is it in stock? How much does it weigh? Shipping clasp like? Well, later, This regulator and description talk about the same thing. So if they buy what you want to say, it's a good deal. Good deal. All right. So we basically made the small one. Now click on this and go to large. I'm sorry. Medium. Upload an image sale 99 9 No, guys, you must put the price. If you do not put the price, the product will not be able to be purchased. So if it ever is missing, you know why you probably missed the price somewhere. So I hear upload an image like this. And then again, I'm gonna go ahead and put the actual price right here. Okay? And then again, you know, we're going to click on save changes. Now. I'm gonna head Addison dummy contents right here. So I'm just gonna simply grab this and put this as our short tail description. Right? And I think we're all ready to go now. Really quickly. I want to set this to men's because we're making products just for the men. Now, Now, Really quickly. Guys under variations, it says default form values. So by default, where do you want it to be at by default? Medium, small or large? That So that means when someone actually views the product and they see, um, the product, what size does it wanted to be on default? Well, I'm gonna put on medium for now and right here and click on publish. All right. Is being a little weird. Published? Yeah, the little WordPress guys, Sometimes things happen. That's kind of weird. So right here, and click on view product. All right, so now we have the products, and we have size small medium and large. Okay, so that's pretty simple to understand. So again it's it's all the same. Prices 1999 Doesn't matter what we put it up. So let's say you want to add a second variation, which is something like color, right? Maybe you want to add size and color or something else, so let's go ahead and go to edit the product. No, guys, I'll be very honest. Varel products are probably the most confusing product you'll ever work with. Every product you guys have seen, like group products, single products, Philly products. It's very self explanatory. So if this is a little confusing for you, don't worry about it. Just because I know that it can be very it can. It can be very confusing when you're first learning how to use these stores for, like, variations. So really quickly, guys, I'm gonna go ahead, go to attributes, and I want to go ahead and remove this. We're gonna start over from scratch so right here and click on add Let's do it again. So size and then oops, I spilled their own. It's a small medium in large, used for all variations. Save attributes now we're gonna go ahead and add in another one we're gonna add in color. So we hear color. So we have striped blue and then was at it read. And then right here, I'll do use for variations and go to save attributes. All right, Now, under variations again, I want to go ahead and remove all these because we're gonna go ahead and add in some more. So I'm gonna go ahead and just get rid of all these three right here. All right, that's going a little slow. Remove. And this move this last one. All right, now right here. Crave orations from all attributes and go to go. And it's saying you're sure you want to do this. Just put us guys just but yes, All right. So now it's basically adding in our tributes to our variations. So it's gonna basically give us a few options this time. So is gonna give us nine options now. So right here we have small striped small blue and small red medium striped medium blue, medium red, large striped, large blue, large red. So you guys will have to go ahead and put an image and price for each of these, so I know that could be a little annoying, but if you guys have, like, 5000 variation items, I feel bad for you. That's a lot of work. So right here, upload an image and, um yeah, it does this sometimes. Guys, you know, when people tell me like a you know, it doesn't work well on your website or, you know, sometimes you get no errors. I do get air sometimes. So here I have that one. 1999 Close it small blue. And then I'll use this runner here. Of course. You know, this is just for the purposes, you know, So these items don't really, really quarterly. Correlated, correlate. So we have a small red right there. And then again, 1989. All right, so we basically made it for these two items or these three. So the next thing you have to do, guys make it for the rest. So I'm gonna go ahead and do that really quickly. You asking? Just kind of Watch me Medium blue. 1999. Yeah. A lot of people like when I make sites for them. They have really large websites with a lot of products. I'm just like, man, like a lot. A lot of products. It's really hard. But you're someone, like, just like 20 items. It's it's easy. But if some people have, like, thousands of items, I was kind of like man like, that's a lot of work, you know, like, tiresome guy to do it for, you know, large blue. Did I put a price here? I put a price for this one right here. I think I'm gonna missed it. Yep. Guys, remember, you must put a price. It is a required. Okay, so it's not gonna work if you don't have no price. Sorry. Here, I'll do Large red. Okay. So large. Red. And in 1989 and go to save changes. So we added in all the variations, guys, uh, go ahead now and take a look at our duration product. So here we go to update and go to view product. So we have the size. I remember meeting by default. Small strength, small blue and small red. And someone can just click on at the carts. And Paul, I think that's a really clean style. Like it just looks so clean. Like it's it's, it's user friendly. It's easy. And then from here, they can click on, view the cart, take a look at their stuff. They can add more here they can, unless we can actually decorate this specific Section two. But before we do, that's before we get ahead of ourselves. Let's keep with the products in the front page and we'll get there. We'll get there, you know? We're all gonna have fun. It's it. We're working, We're working. We're making progress. So we basically made a simple and a variable product. So hopefully by now you guys know how do you make products? And it's pretty simple, pretty easy. So let's go back to our home page here and let's finish the rest of the home page on our website. So let's go ahead and go to my demo websites and right here, You guess and see, we have these specific products and then we have products latest products on sale. So the next we're gonna do guys is we're gonna actually put in categories on our front page . So I'm gonna go ahead and make one more product right here. I'm gonna make a, um, you want to follow me here. I'm gonna go ahead, make a woman's product. Just so we have three products. So you guys can kind of understand how this works. Someone shirts, and then I hear is gonna put, like, Demo. They're here. Put 1989 and then I hear all the women's said product image. Go ahead and select a image. Okay. Does that sometimes there goes. Okay. Existing word. All right, so then I'm gonna go and select another image. So I selected this one and this one, and I'll just go ahead and select this one. Now I'll just It's like the same image. Then we're here. I'll do like art and some short description. You have to follow me here. I'm just gathering some demo content just to make it look clean. You know, all rights and then woman's and then click on publish
10. ADDITIONAL CUSTOMIZATIONS FOR SHOP: And now I want to go ahead and add it in the categories right there. So let's go ahead and turn on the builder. So at it with you, expect her to our front page. And I'm sure you know how you can actually add products to your pages. Okay, So I'm glad and scroll down right here, and I'm lazy, you know, I don't want to recreate another section right here, So I'm just gonna go ahead and duplicate this section and, you know, just change the title of it. So here we go to duplicates. And I can actually just click on this again and just drag it down right here. Now, the reason why it's off the page right there is because I have marginal where they remember . Remember, we had our margin. So I'm gonna go ahead and take out that margin. Okay, So right here, I'm gonna put women's products because we're making a product category section for women. So we're here. I wanna put woman's products now right here. Mythical on plus, And I'm go to products. So it's going down here. I'm go to products cause we're entering products. No, guys, this next section if you really gotta pay attention because, um, the great part about this theme is that this theme conduce, imagery sizing it can do image clarification. It can do a lot with your images and ah ah, lot of themes don't offer that. So I really want you guys to kind of pay attention here to kind of really fully understand how we can edit this and make sure your images fit because half the time guys images can be a total pain in the butt. Trust me, it just could be a total pain. So right here on my click on apply and click on update. All right, so we have these four images now, I kind of want to make our screen right here a little bit more full with. So let's go ahead and go to the theme customizer. Really quickly. Sorry. Here we go. To customize now right here under layouts. I want to select under this site, content with I want to go ahead and put 1400 because I want him basically make our page a little bit bigger. So it is full with, but I actually wants to, you know, basically make it a little bit longer. So now you can see our categories are getting a little bit longer. And then we have woman's products right here. But don't worry, we're gonna change this really quick. Now, if you guys want to add a description in you guys with the death of a theme customizer But let's just first continue with putting woman's products there. So I'm gonna go and edit to you explore again and guys that this ever happens, we're just crashes like this. Just refresh it. It'll it'll work. It will go back to normal. There we go. So going back over here. So I hear under products, click on Options. Now I want actually go down and I first want to go ahead and filter this by category. So right here under posts or we have category. I want to select women's because I want to only select women's now. I did add some products like I posited and said some products, but I want you guys to kind of see how this works. Maybe you guys don't have five reject products, right? But I want to kind of show you guys, you know how how this works. So I basically put in products right there. And there's different ways you guys can kind of style it. So there's, like, Normal. There's overlay where you would like to go over it. There's overlay right there and then there's also all these other ones. But first, you know, if you guys look at this right here, it kind of looks the images kind of look a little like cut off. It doesn't really look correct. So I would put this under normal right here a normal guy and scroll down right here to the image section. So I just passed it. We have image now, the great part about this theme, guys, that we can fully edit the images to make them look correct. So the first thing I want to do is for the size I want to go and put Original. So these are the original images that I uploaded, and you can see it looks crisp. It looks really, really clean and looks really good, right? And also, I want us like the height. So right here, up with half. So this is liking half now. I'm selecting 100%. Now. I'm selecting 200%. So now I'm selecting 4.3. So this theme has a full image re sizing module built inside of it to make it really, really simple for utes to picture images. And again, we can kind of just, like, scale it a little bit to get the exact height that you guys want. So I hear up with something like 1 55 or we'll put something like, you know, 100 125. You know, you guys can kind of understand how that works and then also for the with, we can select the with right here. And then we can also select the radius as well to kind of give it that look right there. That's circular look, which is really, really cool. So I basically added these in, but I want to add in maybe more images, right? I don't wanna have to add in, you know, just four. So I want to add in a little bit more. So to do that, I'm a go back over here to our columns and add in five columns. So now we have five images right here and now for the type of here you guys can do like different styles. So again, the layout, they have a lot of really cool. And you guys can select like Roe missionary. And then also we have grid, which it basically creates. This little kind of like look right here. So there's different ways you guys can really customize your shop. And then right here, you guys can choose, like the grid height you guys can go through, like the grid high and each specific type of layouts to kind of achieve what Look you want for your e commerce websites, but for the style right here for the lay out, I'm just gonna go in select like a slider. All right, So we have our images right here, and I want five columns. And then, of course, we can add in some definite here, you know, we can get some emphasis of the product and then deaf hover. Someone hovers over it. And of course, we can add in like, a animation, so it'll slide into the left like that. So it looks really clean and our product look really, really good. And all this stuff right here can kind of control, like, you know, left right, medium sized, etcetera, small, large. You know, you kind of like, you know, fix the tax and you guys give make the text fade in and out. So let's really, really cool. You know, you guys can do all sorts of different suffer hover or you guys gonna add in some background color to whatever you wants to really customize your shop. But, you know, I don't want to kind of go through all of the basic settings. You can kind of understand. Um, you know, the post auto slide of the slider settings, you know, fade in tow, left, etcetera. So this is a quick rundown guys of how you guys can add these specific products to your page and make him look really, really good. And also, if you guys want to add in the description of the products, you would do that through the theme customizer. So, for example, this is say you want your products to show up Now, this evening were sometimes. So I'm gonna go ahead and do that and go to customize. So sometimes you know that the builder gets a little backed up, just got a kind of messed around with it and fix it So screwing down right here. Now, you guys don't have to follow me, but I just want to show you something. So I want to basically add in, like the product description. So for the product description, I believe I'm gonna go ahead and do that through the is through the shop. And then I think it's the product page. I think their product page will actually apply. It's to our images that are not even in the product itself. So let's see if I can do this right here. Leave is I don't memorize every theme in particular, you know? So if I if I don't memorize it, you know, don't don't be bad at me, but, ah, that's here. Right here. So we have I think it is right here. Okay, So right here we can actually click this, and this will actually show the short description. So ah, lot of these other ones in the theme customizer can't control. It's like for example, we can choose to have, like, the at Saqqara here. You guys can't see it's But if you guys click on publish and then close the page is going to show. Remember, I'm marrying the add to cart right here, and I'm also adding this short description for the products. So when I close this page and open it, it's going to show the short description. And it's also going to change the way it looks right here. So right here. Now we have adds a car right here, and we have the description of the product right there. So it kind of correlates each other and it looks really cool, really clean. Now there's others different styles you guys can use for your product categories. So you know, this is just one of the methods, guys. There's tons of other methods. So, for example, this is say, you guys wants to have a flip book. You guys can actually have like, a foot book on your site instead of having that default setting right here. So right here become, plus scroll down and go to you know there's a flip book product list, but I'm going to flip book and then here, you know, people can actually just scroll through your products to see how it looks like they're so there's different styles and methods on how you guys can display your products on your shop . And again I'll click on plus and just simply do this one right here. Ah, product list. And then, you know, we can do, like, on sale or featured products. Or best point, it goes by category guys, so you can see right there. But it would go by your presets for your categories. So I'm gonna go ahead and just delete that one section, because it just does not look good. That does not look good. Okay, so that is an example, guys of how you guys can add in different styles of products to your page. This was by far, guys, the biggest section because the theme has a lot of ability to do a lot for your products. So I hope that was not too hard to understand. And again, you guys can always change the styles right here and everything else. Okay, so I'm gonna go ahead and delete the section once. Here. Here, someone go and delete it. All right, I'm going updates. Okay. And let's go and take a quick look at our shop. So right here you can see our products. And if someone clicks on the product, they will be brought to the product. And again, they can always, like, check it out and everything else. So that is basically that's how we do that's no. I want to go ahead and keep talking about the products in the shop and all the things that we can do for it. So I want to actually talk about these shop and also talk about the product. Extra features. So when I first created the, um, first create a simple product right here, we talked about extra. So the extra future right here, guys, it actually gives the ability to add a different stuff for your products. So here, we're gonna put, like, a hot sale custom tap title like Amazing. Now a product video. So I'm gonna actually show you guys how you guys can add videos for your products if you decide to have that. So I hear you do ah, models walking and just simply just I'm just gonna go ahead and take this and I'm gonna copy this right here. All right, so we got this video right here. Now I'm going to go ahead and post this right here now. We also have a light box, so I believe that is defaults. Now these right here are for blocks. So we're gonna talk about blocks in just a little bit. But you guys can also add content above your actual products itself. So right here, but something like howdy and then, you know, great deal. Now, I'm just putting this here just to show you where these are going to show up on the product page. So right here and click on update and I'll click on it, view the products. So now you guys can see we have How do you up there and then right here, we're going to go ahead and see. Great deal. Now, the reason why it looks like that is because it's actually meant for blocks, and we're gonna talk about blocks in just a little bit. But right here, if I click on this the video, it's gonna actually show that YouTube video. So, for example, let's say you have products that you want to kind of display, you know, as actual video. You can actually do that with this WordPress theme. So it's it's pretty cool. And then this right here, this this blaming or those anorexic girls talking about, like, modeling or whatever, but she needs to gain weight. She way too skinny. So right here I go to edit the product, and I'm going to actually take out that section right there. But that was basically the extra section. OK, so now that we've talked about products and I've shown you how to display products and everything, I want to talk about how you guys can basically changed your your shop page and all of the everything has a deal with with shopping and products and all that stuff. I'm gonna go ahead and show you guys how you guys can customize all of those pages to make them look how you want them to look. So first, let's go ahead and go to our shop page. So this is our shop page right here, and I want to go ahead and click on Customize. Okay, So this is our shop page. Now I want to add some widgets to this. I want to add some things like you guys have seen over here on our other shop page. I want to add in some, like a product filter by price. I want to enter in some other really cool stuff right here. So over here under the, um, under the shop sidebar, we're gonna add a widget, and I'm gonna go ahead and add in a search by price. So, guys, widgets are just basically little things that you can have on the sidebar and also have on the footer of your website as well. So let's go ahead and go to let's just do this search product search. And also over here, we have a filter by price and recent reviews. So I'm gonna go ahead and just do search by product search products. All right? And next I'm gonna do filter by price. Maybe you got some key people on your website. You know, they're not cheap, but, you know, they're on a budget, you know? So I'm gonna show you how to do that. I filter by price, and people can go ahead and filter this, and it will basically filter it by price so people can kind of, you know, if they're hurting for money, you know, we can help them out. You know what? We don't want to exclude anybody out of our shop, right? So fielded by price out another widgets and you guys get the idea Now there are tons of widgets you guys can add. We can add in categories. So right here we have, you know, like the women's. I'm sorry we have to add product categories. That's for our blawg. So at a widget. And then we hear will type in products, product categories. So this right here we have men's, then we have women's. And then we have, of course, on categories because we have to actually delete that one, because by default, WordPress creates one. And don't worry, I'll show you guys how to actually create or delete that. So I'm a click on publish now just to make sure it's safe. And let's go ahead and add in some other products. Sorry. Here, we'll do like, um, I know we're gonna do of filtered by price rating up sells product categories, product buy ratings. So right here It would be a list of like, you know, top rated products you guys can add, and, uh, you know, you guys get the idea. It just helps people to navigate your website. So basically you guys can see it looks very similar. Now I do want to show you guys something. I do want to show you how you guys can kind of, you know, um, change your actual shop page and be a little bit more customizable. So right here we have our shop page right here on our theme customizer. We have our shop and we have our shop page. So the category page is theatrical page where all your products were at the product pages. There's the page where your product resides. So first, let me just show you guys how you guys can customize your shop page. So click on category and right here we're gonna dio It's good. Scroll down. You guys could put the sidebar on the left side or on the right side. And there's different ways you guys can kind of, like, messed around their images right here. I like this fact that you guys can equalize the image height because, you know, emphasizing guys is probably one of the most annoying things about WordPress. You guys can change the image high right here to make it look. However you want it. So I'm leaving on 100. You guys convinced the products per page. You guys can also list the product Perot. So if you want No. Four parts per row, you guys can do that. Also, you guys can go ahead and change the outlook for Tablet Mobile. Now, The reason why this product right here is slightly off is because the title is too long. So men's amazing shirt. So the option is basically saying We're going to, you know, equalize the image height, which is correct. However, since the title is so long, it's actually bumping down a little bit. So that's basically why it has that feature it there. So, um yeah, so next we're gonna go to our header. So here we have our home have and then again, you guys can kind of understand how this works. These options are pretty simple categories, so if you want to display specific categories on your page, you guys can also do that through the will commerce settings. We'll talk more about that a little bit later. But for example, this is say, you want a list only categories like men's, women's and accessories on your shop, and if someone clicks on it, then they'll go to the that product category. We can do that as well. So I'll talk more about that when we talk about the commerce settings, because that would be under calmer settings. And of course, right here we can go ahead and change these settings. You guys understand these, probably by now. So now let's talk about the actual product page itself. Something clicked on a product, and right now I will go to product page. So this is right now controlling the actual product page itself so we can actually customize e specific product page. So, for instance, we can, you know, change the image size to make it look like that's We can change the navigation up here to whatever we want. We can, you know, go ahead and go through all these and making recovery wants. You guys can do like a flat, some white box instead and again the light boxes. When someone clicks on it, it opens up that is a light box, so that's basically what it means when someone says a custom lightbox and then this product title divider. We could align this to the center or to the right or to the left, or however you want to do it? Um, you guys can show categories you guys can showed social icons, etcetera. Um, all these options right here are pretty self explanatory guys. So we talked about up cells so up cells would appear in the sidebar if you chose to have a sidebar, remember, up cells are price that you recommend and said of the current product your viewing. So I basically showing you guys how to kind of customize your product age, your category page and the account page or no, nothing cabbage yet, but I want to introduce you all to blocks. So what blocks are is blocks basically allows you to basically build this page. It makes you so you guys can add stuff to it. Now, by default. You cannot do this with any other WordPress theme. But fox, um, you can. So let me just give you an example of what blocks are so here. I'm going to click on publish Quick on X. Now, you guys have to follow me. You guys can kind of sit back and relax and just hang outs, and I'm gonna show you all but blocks are
11. BLOCKS AND PRODUCT CATEGORIES: but blocks are so over here under blocks wouldn't go to add new. And right here I'm gonna do shop title, and I'm going to enable the UX builder hope stay and then publish this. All right. And I'm going to enable the ux builder. So here I'm add some content. I'm going to insert a good answer. Will do. Ah, I don't know. We'll do. Ah, let's go. Fought some studio. You know, I'm really lazy here. We'll just do like a banner. It will add in something like, um, let's see here features all the new arrivals. That's perfect. So we have Ah, I can feel your banner. All right, so over here. Well, there's something like, uh, call to action. Do arrivals. Here we go. Import all go and import this. All right. So this is the section that I currently have. And of course, we can go ahead and edit it here. The height is a little bit too long. Maybe I want a little bit shorter. Some, like, do someone like 300 or something and then this section these buttons right here. I don't really want these buttons because we already have product categories. on our page on the widget section, remember? So I'm gonna go and delete these. I don't want any buttons. We can always add buttons, but I'm choosing not to, because I don't want to distract our customers. When? There on our shop. I just want this new arrival section, okay? And click on X. Um, really quickly. So I basically made the page. Now I want to take this short code. Remember how we talked about the header section and that footer section when we had products? And they look kind of weird. Well, now we're gonna actually gonna use that and utilize it for our shop page. So I'm gonna go ahead and go to our site now. So now we've made our block. I'm go to shop. Anima go to customize. All right, so where I'm a go to my shop right here. I'm a go to the category page, and right here I want to go ahead and pace that short code in there now and now it looks like that. So that looks much better than what it looked like before. So if you guys want to add this or something else onto your shop age, you would do it through the block section. So I know this section is a little a lot to absorb guys with the products and everything, but I just want to make sure that you guys kind of understand, um, you know how it works out and everything else. So that is example of what block turn You guys, you guys cannot blocks anywhere, So there's tons of places where you guys cannot block. So right here we added another block, actually below that. But you know, that's stupid because actually will delete your products, So don't do that. So here we click on publish. So now that you guys know what blocks are, we can actually add blocks on our account page are check out page on all of the pages that you're normally couldn't customise with who commerce, So let's go ahead and decorate it. So I've shown you guys how to basically customize the shop page and again, if you go to your product section and go to edit product, you can add those blocks even on the specific products. So over here, under extra under the custom tab section right here, it says short codes are allowed so you can go ahead and enter it there. You guys can also do it through the theme customizer. So right here we go to product page. Okay, Product page. And I believe you can go ahead and enter the short code. Also on our product page. Um, you know, I'm not really sure if we can or cannot. Ah, yeah. You know, I don't think we can, but then again, um, I don't think you would really want to, because that would be crazy. Adding a specific block for each specific product. Um, I think that would be a lot of work. I thought you could, though. I really thought you could I You know, I guys, I don't use this theme all the time, so I use a lot of themes. So anyways, I'm gonna go and just save this right here. Yeah, we can't you know. That's so said Okay, I think we can hear. So I think we can under the U. S. Polar. So let me actually show you one more time. Uh, we can actually edit this with Aux builder now. I believe with the US pillar guys, you guys can actually add content below it. So you guys can't add content above its But you guys can add content right here. And then maybe you want to click on this and then we have the block section, or you can add in whatever you want and customize. It's just like a regular page. So right here, when we have the block, I can go ahead and select the block and then make it appear right there. But again, it's only gonna peer into in the bottom description of this section. So sorry about that. I thought you good, but I'm gonna go ahead and just leave this. But again, you know, I don't think people out there who really wants to decorate each specific part of the shop because that would be crazy. Adding a custom page for each product would be a lot. All right, sorry. Here and click on exit. So we have shown you how it's two categories, those specific sections. So the shot page, the actual product page. Now, let's just say you want to go to check out view the cart. Now, this section right here, we can also edit this section as well. So right here under the the Edit with you ex builder. We can click on edit with you ex polar, and we can actually go ahead and customize the specific section as well. So right here we have, like, the card section. So we're here. We can add content and then made you want to go ahead, Adam, Like something else. And this is great guys where you can enter like something like coupons in. So this specific section, you'd want to advertise those coupons and not to worry, because we're gonna talk all about the calmer settings and coupons. Ah, little bit later in this tutorial, So I'm gonna go ahead and just import something really quickly just to make sure you got to understand how this works. So I'm gonna go ahead and take this and drag it up here. And Abu Ala, we have this section right here, a lower court. Now that of course, that is way too big, so we could always reduce this size to make it look a little bit smaller. And then maybe right here, we can advertise some coupons to make it look really, really cool. So you guys can kind of understand how you guys can customize this section right here to make it look really, really cool. So again, you know, also the WC cart. Do not delete that. If you do delete that, guys, this section right here is gonna be history. It's gonna disappear. And I know you guys don't want that. Okay? So don't do that. That's a no, no, don't do that. Okay. So basically, we can customize the car page right now. Let's just say your customers make you know they have an account, right? So we want to be able to customize are my account shop and guys. It's the same exact way. So my account and right here at it with us builder and then right here we can go ahead and put some stuff in. Now by default, guys, do not get rid of that because these are the short codes that commerce needs for all this stuff to generate. But we can always customize their portal. So this right here is a portal, guys, and I think a great thing to do here is to add in your Facebook group or to add in future sales or to add in products that they might be interested in. So, for example, add contents. We'll just simply, like, maybe like a a countdown for sale. And then here you can probably put like a countdown to a sale. Now, I'm not gonna go ahead and go through these options. I think you guys can kind of read this and kind of get the idea of its and then maybe right here. You want to add in something like social icons to your to your shop, and then right here, you can just put in, like, you know, I was gonna put in the number science. This will make the Ike icons appear. Okay, so then maybe click on, apply and Update. Now, the reason why I'm showing you this guy's because other themes cannot do this. So the fact that this team can do this is nothing short of amazing. So by default, guys, when use other themes, you can't decorate any of this, but with fought some you can. So I just want to introduce you all to this and show you all that you can edit all this stuff. So if you guys house to customize your account page So if I go to view the carts. Oh, let me go ahead and close this building really quick. Okay, So I hear I'm a go to view the cart. And now that I've found you guys how to decorate this section, let's go ahead and go to proceed to check out. Now, there are various forms that you guys can use to decorate the check out page. You guys can also edit this page as well. So right here you guys can go ahead and enter something else in here, like right here. Plus fought some studio. And then maybe right here, you want to add in like a thank you banner or just something to kind of encouraged, you know? Ah, future sale. So not a countdown. Don't put a countdown, because that would be like they're gonna come like they're not gonna buy anything. They're gonna want to come back when they get a better deal, you know? Want to put a countdown? You don't want to put a coupon, you know, You know, you don't want to put anything that advertises cheaper prices because that's just going to make people want to leave. It could be Ah, see right here can do something like, um, I don't know. Maybe you could You guys even put in products you guys can add in member product categories onto the page or something, or whatever you want. I'll just do something really quick to see you guys can see it, so I just do. My Christmas is coming. Maybe you can actually link them to a specific part of your next sale. So right here, I'm to go ahead and click on options. And I'm gonna reduce the height of this banner cause it's way too big, OK, and then click on. Apply now for this shop section right here. This button, maybe you can link them to a section where only they will have access to, which is pretty cool. You know, you can link them to, like, something else to write. Here, you put like are tee https, and then we'll do like a new window. Click on apply click on update. So what I just did is basically if someone clicks on this, they're gonna go to whatever part you want them to go to. So, you know, that's kind of a quick understanding of how you can link them to different parts of your website. Now, if you guys don't know how to link them to different parts of your websites, I'm gonna show you right now even though is pretty simple. So right here. Let's just say this. Go to the woman section. We're just gonna go ahead and copy this link, Go back to the condo, go back to your check out whatever. So check out and then we're just going to insert that link. So this is where you get the links. So wherever you want to link them, it's just like, you know, putting the Lincoln and, you know, right here. So I'll just go ahead and paste this right there and apply and then done. So when someone clicks on that link that we brought to the woman shop and again, you can link them to any part of your website. Guys, you could link them to anywhere. So it's just really using your imagination at this points to kind of making, you know, making it so you know, you navigate your customers and tell them where to go. Okay, so again, this team is amazing. Weaken decorate this page. But there's also one other feature that we can do So right here under car and check out Lay out. There are different layouts for the check out page, so you don't have to use that. Um, there's, like another way, like a simple new and then simple focused. Now, that is clean. That is really super clean. The fact that we can add it like this right here. So I think that's really cool. Car sidebar content. You guys can add in some more content right here. Floating field labels, that is new floating field labels. Well, they have all sorts of options, guys. You know, you guys can look out here, so, uh, I like the focus one. I think this right here is a super clean, super simple check out form. I would recommend it, So I'm gonna go ahead and close. That's now the last thing I want to do before we talk about the products or before you go on to the next part of the section is on in the beginning. This tutorial I showed you guys how to do the section right here. So I just want to basically quickly show you guys how you guys can display categories on your page. Instead of having single products so really quickly and go to my dashboard, we're gonna go to our product section and click on categories. So here we have an categories men and women so really quickly and edit this and just do accessories just just for show purposes only have to, you know, categories. But I'm just gonna go ahead and just show you guys how this works, okay? No, I want to add an image for this. So right here, I'm gonna add in an image. I must like that. Or maybe the glasses and then click on update. Okay. Back to categories for men's. You don't have to follow me here. I'm just kind of giving you guys an idea of how how to add first off images to your product categories and then how to display categories as well. So I hear women's go and just select an upload image. It's like that one. Someone someone sexy on a lot in Ah, uh, sweetie pictures. All right. Well, I don't that one. And and on update, there we go. So let's go back to our sites and you guys have done an amazing job by now. If you guys are still with me. Congratulations. The next thing we're gonna do is show you guys how to insert product categories. So it's going down here. I don't cook on this plus and just go to product categories. So here we have product categories. Let's go ahead and scroll down right there. Sorry. Here we have men's women's, and then we're gonna go ahead and do something else like, uh, like default Normal. Now, the reason why the accessories doesn't show up actually is because we didn't add any products for that category. So I'm just gonna go ahead and just put in, like, two columns. Now, it does look a little strange, but again remember how we talked about the image sizing? You guys can basically edit this to make it look however you want, like, you guys can make a little bit more fixated like that. And then you guys continues like the radius like to make a little bit more circular, etcetera. So that's basically how you guys can do categories for your specific products. So again, you know, we wouldn't do this before, so I'm not gonna go through it again. Um, but that's how you guys display product categories. And if someone clicks on this, that could be brought to that page where your categories reside. So let me just show you quickly. I'm a click on this and then take them to the woman products. Okay, so I hope you guys understand how that works. Um, it's pretty simple, Pretty self explanatory. And again, you know, there's our shop page. Okay, so this whole section recovered, guys, was everything about products decorating your products, shop page, widgets, blocks, product categories. This was probably the hardest part of this tutorial. Everything else is pretty simple. But now that you guys understand how to upload products, how you guys can fully customize, it's the next action we're gonna do is we're actually going to finish the home page after fish the home page. We're gonna do the about and contact us, and then we're gonna go ahead and talk about the theme customizer and commerce settings
12. PLUGINS AND MISC: is probably the most important section. OK, so in this section we're gonna start using more widgets. I'm gonna introduce you all more to being customizer, and we're also going to use some or plug ins. All right, so let's go and get started. So let's keep going. And right now, we're gonna go ahead and finish the home page right here. So I'm gonna go ahead and click on this right here. Now I'm gonna show you how you can add an email subscription for your website. We will need a plug in for it. All right. So, uh, that kind of froze a little bit. It's weird, but it's OK. It does that sometimes. So it's going on here. I'm gonna go ahead and delete the product categories because I don't really want it. And I want to adding content and a flat some studio. So I want to go ahead and add in something like like a sign up form. And there's a bunch of them we can add in. I'm gonna go and added in this one right here. Now we can always make this ourself guys, but personally, the theme has kind of designed it around itself, you know? Why would we do everything complicated when we can just simply go ahead and use more their templates, click on it, edit it, or even just change the text position where who wanted? You know, this this way is so much easier. So I highly recommend to use a template system more than the actual page. Buller cause the page bowler again. You can always make it yourself. But why would you if they've made thousands of templates for you? You know, So right here, the this is a short code. Now we will need to actually install a plug in. Let's go and do that. I'm gonna go and close this. So if it ever does that, guys, where it resets, just do this right here. Just go to your domain, and it should work. Fine. All right, so let's go ahead and install a plug in that will allow us to add e mails. So right here, plug ins, add new. So in short, guys, plug ins are basically APS for your website. Just like there's APS for your iPhone or something. Plug ins air basically added features for your website. So, for example, this one right here helps with Seo. This one right here will commerce, which is what we use. Help sell. There's very There's somebody pockets out, guys. There's literally 50,000 of them. So there's tons of them. Like this one right here. Will, um, limit your logging on your WordPress website. So someone trying to hack on it able basically lock your wordpress website. This one's for security. This right here helps with cashing. This right here is with the analytics on so one and so forth. Now, the one that we need right here is called contact form seven. So right here and click on install now and go to active AIDS. All right, so we basically activated contact form seven. Now we're here and click on settings, and we have a contact form by default. So I'm gonna go and click on, add new. We're gonna add a new contact form. Doesn't he called? Sign up and right here. I'm going on safe just to say that just to make sure everything's OK. So right here is a simple contact form. This is a newsletter, and this is a newsletter form vertical. Now, this is what we want right here. So I'm gonna go ahead and copy all this. I know it's code. It looks a little complicated, but it's really not and under form right here. I'm gonna go ahead and just lied all this and paste that right there and right here and click on save. Okay, So I basically made a sign up form from Contact form seven. So let's go ahead and inserted on our websites. So right here, I'm gonna click on any with you. Ex builder, Animal guide and scroll down right here. And right here. I'm a click on this right here. Left click. Now here, which is form for the form I want to select. Sign up. So this will basically creates our our contact form for us. So it does look a little distorted right here, so we can kind of move this around to make it look a little bit more cleaner. Some like that. And then we hear, click on apply and an update. All right, so now if someone signs up to this, it's going to actually go to the email that we want registered for it. So if you guys go back to your contact form. You guys air you? I'm sorry, The plug ins. So we go to my dashboard. I'm ago. Teoh, plug ins, installed plug ins and go to settings from a contact form seven under the sign up section. We actually can list an email of where we want these emails to go. So right here under mail. You can see that too. It would go to this address. So whenever they sign up, it's going to send them a notification saying, Hey, you know, you actually got ah subscriber. And then from there, you guys can use a subscription service like mail Chimp to build an email list. Now, I do have a full tutorial on male chimp in description of this video. But in this tutorial, I'm not gonna go over email marketing or signing up for email subscription because that is , that will take a lot of time, guys. Another wants to get off topic and start talking about email, marketing and stuff. So that were There is basically how you guys add a contact form. I'm sorry, email form on your website, and he has contested. So let's go out and test that really quickly. Just to make sure it's working. So we're going my Gmail and I will go back to this Web sites and go ahead and type in a new email. So ah, memory here, click on. Sign up. Today I see this Former here. Thank you for your message. It has been sent. So if we go ahead and go to the email, which is the one I currently have right here, he see how it's the email is right here. And then again, the email that we subscribe for is right there. So that is a way people continue their emails and you can build a subscription list. OK, so let's go ahead and keep on going. We're gonna go ahead and keep pushing to the end of the section right here. And guys, if you guys were here, congratulations. We are doing really, really well. So the next next thing we're gonna do is we're gonna do the, um, the instagram and then our block section and then our footer section. So right here, I'm gonna go ahead and click on Plus, our first we got to edit the aux builder. Of course. Animal. Refresh it. So it does do that sometimes just let you guys know it. It does get a little weird. So it's going down to the bottom. I'm gonna click on this plus icon and we're now going Teoh keep making sections. Now, I can always just, you know, duplicate that other section that I have with the with the title, which is kind of what I want to do. And then I will go ahead and take this and drag it down woman's products. And right here I'm gonna put Instagram instagram and then right here we click on plus and then we're gonna go ahead and add in a would you actually know we're gonna do We're gonna go ahead and add in a We can add on instagram feed right here, or we can use a plug in. But I'll just go and use the instagram feed because it's it's more simpler. So right here, you guys can already see that it starting to come up. So right here we have ah, in the instagram feed. Oops! Smoking options again. So there's different ways you guys can style this, but the you know, with the type of the slider you guys can select a column, amount of images, etcetera. And it's just a really beautiful instagram model. These guys have added There are a lot of plug ins that do the same feature that are usually a pro features like you gotta pay, like, 50 bucks, etcetera. So here, you guys can go ahead and add in all of the, um, you know, the settings right here, such as columns and all these guys are the same exact option. So I'm not gonna go ahead and go through these. You guys kind of understand how this works. You're gonna go ahead and put in your user name right there. So I use a user name from another WordPress theme. See, right here. If I could go ahead and got before you guys again so you would link your instagram right? They're not not mine, not anyone else's. You would put your so your user name right there. It would just display your feet right here and again. You guys can use it to kind of customize it and make it look however you want. Let's go ahead and load this US builder on my other website right here. I'm gonna go ahead and go ahead and do options, and then suddenly grab this. Go ahead and take this right here. And I'm going to go ahead and paste. This is this is not a wordpress theme. And then, you know, we can edit it like, you know, columns, maybe four columns. It looks like that, you know, something cute. Really cute. And then again, you know, we can, you know, go to the settings, maybe just eight images. Okay, so I click on apply and click on update. All right, so the next section guys is the block section, so it's keep going. We're doing really good. So right here, this instagram title. I'm gonna go ahead and just copy this again. Click on back and I want to go ahead and just take this and drag it down. And this is going to introduce the next section, which is our block section. And then you want to add in some margin to the top like that? Okay. Sorry. Here. If you can apply, Click Update and guys Ah, blogged post work the same way as pages. So just like we made a page, let me go and click on this. Go back the same way we made a page is the same way we make a post
13. BLOG SETUP AND WIDGET: so right here under plus new I'm a go to post and then right here we just put in, like, you know, 10 things about 10 best vacation spots. Vacation. I can't even spell vacation spots. And then here we'll go ahead and scroll down, and we can set a featured image for it, and we'll put this. Ah, are I don't know, we'll do something like this right here. I don't put that one right there. And then right here, you can go and putting your content. And you can also use the US builder to create a custom post. So just like you made a page, you could do the same exact thing for your post, Which is pretty amazing because a lot of WordPress themes do not allow you to do that. So right here on our categories again and you can make it category. So, for example, let's say you want to list specific categories on the front page. You can do that right there, but I don't want to really make a full block post. Guys, I don't really want to go through all that, so I'm just gonna go ahead and probably just steal the other content I have over here and just simply just, you know, take that content right there and just use that content instead of, you know, making everything all over again. I actually just used a block post from my website joe wilson dot com. So go ahead and go down here and click on this. And there is my block posts. So we take this right here. Copy it now. Right here, guys. I just added some images, and I did this bay basically using the U. S. Builder. So if you guys want to, you know, get more customizable. You guys can always use the US builder instead default. It'll look like this right here. You guys going to publish it? Let me give you guys an example of how this looks, all right, and I'm gonna go ahead and view the post, and there you go. So this is the actual post. We have the featured image. We have our content, people can share it. People can comments and all sorts of stuff. And again, guys also, just like we did the shop page. We can add widgets on our block page, and we're gonna talk more about that when we talk about the footer. And that's the last section we're gonna talk about. Like widgets and footers and plug ins, etcetera. So, you guys, you're definitely getting there. So also, if you guys want to edit this with the U. S. Builder, you guys can do that as well. I like the templates. I think the templates are great that you guys can just kind of at a temple here, but get really simple and then just, you know, make a full post really quickly. So my builders being a little glitchy. So there you go. So right here, you guys can just added like, ah, template, you know, like a log or something. And this is great for, you know, whatever you want to do. So, uh, you know, you guys can get the idea I'll just imported just to give you guys an idea of how you guys can mess around with the blawg and use aux builder. So here, you know, Now we can see that we have this blawg and yeah, you guys get it yet? Still, we understand, right? Hopefully by now, you guys kind of get how that works. but I don't really want to go ahead and use that. So we're gonna go ahead and lead all this stuff. I just like the actual the default stuff. I think too much on the block page can be very distracting. Go ahead and leave this. And I just want the text. So just like it was before, But again, you can always use the US builder to go above and beyond and add images and all sorts of cool stuff. Okay, so let's go ahead and keep going. I might go to Exit Builder. So what does that guy's just go ahead and delete all that and go to our domain? I know it does that weird glitchy stuff sometimes, But you know what you gonna do so screwing down here, we ever instagram and we have a blawg. So we made a block post. Now we need to actually incorporate it on our website. So right here, go ahead and scroll down. And right here under the at two contents, we're gonna go ahead and add and add in the blog's section. So we need to add in the block post right here. So I go and just dio see my go ahead and scroll down right here. Our desktop And right here is our block post. We're going to show up and again. You guys can decorate it with columns, everything else. But all your block posts are going to show up there, and it looks really, really clean. So it looks really good. And that's basically how you guys enter Block post. Now, of course, I can always enter in Mawr like the demo, but I think by now you guys understand how that works. I just basically made three block posts and all my bunk post will show up right here. Okay, so that's pretty self explanatory. All right, so the next section we're going to do the fun stuff. We're gonna do the footer section, and we're also going to do the widgets in the sidebar. And guys, we are nearing to the end of the sartorial. So you guys are here so far? Congratulations. Because after we talked about this, the last thing we talk about is designing and then calmer settings, and you're gonna be all set and ready to co with your e commerce website. So let's go ahead and do the footer section now. So right here. I'm a go to update, like on clothes now. Right here are our customers section. So in order to decorate the footer, we will need to go to the theme customizer. So right here. Yes. And see, we have footer and I'm going to scroll down and custom foot or block. Remember how we made blocks earlier for the shop title and everything else You guys could do the same exact being right here for the footers. You can actually make a custom footer. So, for example, you can kind of, like, designed it to look like this. So maybe a text module, text module, text module, text model, etcetera. Or you guys can use the actual default settings for the theme which we're going to use. We're not gonna make a custom footer in this tutorial, but you can. So I'm just basically telling you that, you know, you can make one in a block and then added to the bottom, but let's go ahead now and go to foot. Area one. So right here we have four columns and I want to edit the footer widgets. So we have footer one and foot or two. So this thing comes with two footers. I think you should only use one of them. However, you are more than welcome to use a few of them. And if you guys go to the flat some let me give you a quick example of what I'm talking about. So the flat some demo I'm gonna show you exactly what the footer one is and a foot or two, just in case you guys decide to to use it. So let's see right here. I'm gonna go to my demos really quick and give you an example. Let's find Let's go hunting. Uh, classic shop. All right. Okay, so this section right here is footer area one where you can add best selling products. You can add arbitrary text. You can add featured or top rated products. This right here is section over to where you can add tags, your blawg information about a social icons and a sign up form. Now it's strictly up to you if you want to have a foot or this big. Personally, I believe this footer is a little bit too large. You know, most footers are pretty small and this comes off is a little bit too spammy. But then again, whatever works for you and your store, you are more than welcome to do so. For foot Area one, we can add a widget, and I'm gonna enter the arbitrary text. And then right here, you can do something about us. And then right here, you go ahead and talk about yourself. So I'm just gonna go ahead and maybe grab some dummy text really quick and simply go ahead and just paste that right there and then you're gonna see all that text come up right there . So this is the foot Area one. Now, I don't really want to decorate foot area one because I'm just giving you an example of what foot area one and foot area to is. So I'm gonna go ahead and just say OK, I'm gonna leave this and I only wanna have one footer, and I want to just use it for the arbitrary text. I'm sorry, the bottom footer, which is the gray area. So here, I'm gonna do about us and paste it in there like that. All right. Next I'm gonna add a widgets, and maybe you want to add in some products. So here we and our products we can add approx by rating. So when customers right your products go there or get out of product categories, which is we have accessory, mens and womans. And then, you know you can type in product categories and ill show up there eso you know it's up to you. Bye bye Now, you guys kind of understand the idea of it's so product categories and people can select it . Taking this click on, add a widgets. We will do contact info and map. We can do that as well. Sorry. Here we can enter like a contact information and map right there. So that's pretty cool going over. We can actually show them out. I think will need a Google A p I key for that because I do have another tutorial on Google Maps to display its. So I'm not gonna really go through it here, but it's very, very simple. It's really, really easy, but I will be putting that for another tutorial. Put that in the description as well. Just because I don't want to go to Google, a P I and all that stuff. It's annoying. So anyways, um, let's go ahead and add and something else. Well, I didn't Well, commerce products, So products, we will do some just basic products. And right here we have a list of products that will show, but I only want four to show. All right, so there are some products, and lastly, I probably want to add something like a instagram widget right here at the bottom. So right here, click on Publish. Now, in order to get that, we need to install a plug in. So remember how we used plug ins for various reasons. So we're gonna use a plug in now for an instagram widget. And guys, there are so many. I'm sorry. Uh, you're in salt plug ins and there are so many widgets for a bunch of different things. I'm sorry. Goto bludgeons. I go to add new. There we go. So here we're going to Instagram Instagram and there's, you know, plug ins for it. There's plug ins for virtually everything. Now the one I want is WP instagram widgets. So this one time I click on install now and go to activate and this is basically going to create a widgets so I can use this for parts of my blog's or parts of my footer. So let's go ahead and go to customize now. So now that we have the actual plug in installed, it will give us the ability to have that on our bottom page. Right here. So, um, I go to click on footer widget to now right here at a widgets, and simply find the instagram would, you know. So, instagram there it goes, and I'm gonna go ahead and put the actual just the random thing that I grab. So here there is the pictures, and if they click on it, it will take them directly to the at Instagram. So we're hearing, but Instagram working with him, like, follow us or any other various things that you need. Okay, so here, click on, publish and connects. So I basically gone over widgets, guys, also on your blog's page, you can actually add widgets. So I click on this block page right here. You guys can see I have widgets right here. So you guys can also edit this with the UX builder and you guys can also edit the actual posts in the theme customizer. So there's a lot of ways you guys can edit The blog's so right here on the blawg blawg layouts you guys can use it to, like, you know, very various different ways. You guys can decorate the blawg layouts as well. So I'm not gonna go too much into the block, guys, because it is it is a whole other ball park. Like this spring, for example, was a single post. So if I do like you no single post to the left, it's gonna show up to the lefts. No sidebar, etcetera. So the single the single block post will actually control the specific blawg post itself. Okay, You guys want to decorate the actual blawg layout? You guys can actually add the blog's section to the menu. So let's do that really quickly. Just so you guys understand how to do that? So I'm gonna click back right here. You don't have to follow me here. I just wanna make sure that you understand how to add certain parts to your menu. So right here we go to view all all right, see, right here really goes to our posts and right here we have our block posts. So you guys can simply go ahead and add in your block post, or you can make a page for a blawg, and then you can actually add the blawg module instead. So let me just give you a quick demonstration of both to make sure you understand how to do this. So right here, add to menu. You could always make, like, log category or some like that. So you guys can see now we have 10 best vacation spots. And if I go to visit sides, you're going to see test 10 best vacation spots, and if I click on it, it's gonna take them directly to that blawg. Alternatively, you guys can make a page for it. Sorry. Here, we could do a page, and you seem like block. Look on full with templates and publish. Now, again, you guys don't have to follow me here because this section right here is totally optional. So you don't have to do that. But I'm just basically explaining the overview how you do this. So right here at the contents. And then right here we have the, um Can Adam, like a row or whatever. But I want I want to find the block module. So that's all I really want is block posts and then right here. Yes, and see we have the block post so we can make a specific page for it. And then with the theme Customizer we can actually design. It's and we can also design right here to you know, there's two ways you know how for the product section we have, like the the ah, you can add it through here. And then we can also edit it through the theme customizer. So there's various ways on how you can edit your block post, and it's basically guys the same exact settings all over again. It's just with blawg posts, so Block Posts act very similar to products. So here we click on apply click on Update a 1,000,000 right here. Click on X. All right, so we have a blocked page. Now let's just say you want to go ahead and add this to your menu. So again, guys, same exact thing appearance and menus and you guys can also do the same thing for your posts. So if you guys just want to have like a category like 10 best vacation spots on it. You can do that. Or you could just go ahead and, you know, adding the entire block section. So right here, blawg. And drag that up here, click on save menu. And now let's go ahead and click on Visit site to visit site Blawg. And while these were all your blood posts are gonna show up now, I do want to change us a little bit. Maybe I can add in like, an image here just to make it a little bit more customizable. Just make a little bit more better, you know, because by default, guys, you always get a default block post and you also get default pages as well. So something like this right here where we can ask me in some like this right here. Let me more. A little bit more, Niedere. You know, it's a little ugly rights and again, guys, Same exact thing is products. So you can add post categories. You can attacks your post. Ah, block posts work the same exact way as products. So right here you guys can see we have a really clean section right here and again you can go to customize and you can fully customize your blog's section your layout everything with , you know, through the being customizers. Well, so you guys can add a sidebar. No sidebar, etcetera. So I'm gonna go too far, guys into block posts, because again, it is, um, you know, it is a whole new ball park, but yeah, this is basically where you guys can customize everything to make everything like, however you guys wanted to look So there's a lot of ways you guys can customize this. And again, this is for the single post. So when you click on it, it will actually, um, it's going to basically, um, the single poses for the actual section like this right here. Okay. And also, you guys will need to assign a blawg page. So we're here under home page and settings under posts. You'll need just like this to Blawg. And if you click on publish, go back to you here to Blawg. And now you guys can see that the actual themes settings are working cause before they weren't working. So that's because we have to assign it first. So sorry if I was a little too quick there. I just kind of I don't want to spend too much time on the block section. But I also want to show you how you can customize it. So again, you know the blawg layout, you will need to set it as a um you guys will needs to assign it to a page, But there's tons different ways. You guys can design the blood guys, and I know I'm going a little quickly over the block module, but the customization you guys can do to this is incredible. It's it's amazing. And there's just so much stuff you guys can do with the Blawg, and I can talk about it for another hour. But I'm choosing not to just because now we're focusing more on e commerce and I dont wants to talk more about blog's and, you know, because we can talk about, you know, categories and all of the horses stuff. But it's it's Yeah, you guys get it. You guys get it. Congratulations. You guys graduated. All right, so, uh, we've basically done that. We've done the block section. We've done the footer now, one really big section I want to talk about is the header section right here so we can fully customize the header section and also get a logo. Now if you guys do need the logos
14. HEADER SECTION: Now, if you guys do need a logo, there is a link in the description of this video to fiver dot com and fiber dot com Guys is a great resource where you just get a logo for really, really cheap. So right here I'll type of logo services. And then right here, this guy will make you logo for, like, five bucks. It's really good. And I got my logo from them. So again, the stuff they provide is really cool. Actually, I know it sounds like kind of scam you, but it's actually really cool. So let's go ahead and click on Customize. And now, in this section, guys, we're gonna talk all about the theme customizer and also the flat some customizer. So right here we have our header section and we have different presets, guys. So I want to click on presets and kind of get you guys a little bit more familiar with this . So right here, click on this one. Negus er header looked like that. I don't think on this next one. Now you're gonna see it looked like this. So basically the logo's in the center. We have some a search icon a main menu and then we have our secondary menu, our account in our cart. We can also do something like this, or we can do something like this. And we can kind of, you know, keep messing around. We can also see how it looks on mobile and tablet as well. So it's fully optimized for the for the phone and tablet. But we'll talk about mobile optimization a live it later. This theme by default is actually very mobile. Responsive. I have used other things that really aren't. But I got to be honest. This theme is pretty good. Out of the box. So right here are other presets you guys can use. All right? I think the one I used with him like this right here. So we have, like, a sign up form and join and all this other stuff. So Oh, are you click on this right here. Click on by. And guys, the idea behind this, like, for example, this header right here is that we can actually link them to different parts of your shop. So you guys want to link them to, like, a specific area of your shop? That's how we can do it. So, for example, right here we have but in one and button to now I know right here looks little different. But, for example, right here you can just go ahead and take this. Drag it and it'll delete it. And right here under. But in one, you can actually say bye now and then right here. You can link them to your shop. Remember how early we talked about how you can link them to different parts of your website ? That is exactly what this section is right here. So I'm gonna go ahead and go to my presets again. And let's just say, for example, you want to just, you know, customize this yourself. You don't want the presets, which I think you should, because they're amazing. But you're more than welcome to do anything you want. So let's say, for example, right here, uh, under the eighth CMO one. I don't want that there. Instead, I want to add in a search form, so I'm gonna go ahead and drag and drop a search form. Now you guys can see a search form shows up right here. So this first row right here is the blue section. This middle section right here is this section. Now, if you guys want to add 1/3 section, you guys can just simply go ahead and do like a check out butts in or a newsletter right here and then a navigation icon. So that's basically how that kind of works. Okay, so I'm just kind of give you guys a quick understanding of the header section. You guys can totally build your own. You're more than welcome to. But again, you know, if you want to add buttons, you can add a button here. You can add a button here. HTML guys, don't be scared by that. It's just text. So right here, you can see that add anything here or remove it. So, for example, right here we have HTML three right here in the middle. Now, if I want, like, for example, this one right here, if I want to change anything, I can simply just go ahead and take this right here and put like, um, check her, use Darryl for coupon, and now you guys can see that that right there is a custom form. And then, of course, right here you guys can just go ahead and copy and paste this and for example, a seem all three, which is right here. We just go ahead and use that right there. So now you guys can see it's sewing up right there and then right here you can type in something else, and then you can mix and match. You can put this their or their etcetera. Now, I had the recommend guys to use the presets because these guys actually do a very good job with the presets. And I don't say that too much because I want people to customize its height themselves. But, I mean, they have just 12345678 so many different styles. So I like this one right here. I think this one I hear is very ideal because it just encourages engagement, encourages people to buy, and alternately, I just think it's it's really, really good. So here we have sign up and join, which is basically the same thing. Now your customers will need to go to the account page in order to make an account. So I'm gonna show you guys really quickly on how to do that. So I'm gonna go ahead and open up a new tab. And again, you don't have to follow me here. This is strictly optional, but we need the account link to basically bring people to that page. So right here on the pages, all pages, we're gonna find the account section, which is right here. Click on view. That's fine. And I want to go to my account right here, so copy, and I'll sign up right here. We're gonna link them to my accounts. Now, if they do not have an account, guys, if they do not have one, it will actually link them to a registration form. So, for example, we're gonna go to my demo website right here, and I'm gonna give you a quick demonstration on how this works. So I go ahead and log out. So I logged out on my website right here. Now I'm gonna go to my website right here and right here. I'm gonna go ahead and put in the my account section. So basically, if you're not logged in, you're going to be basically be brought to a registration form. So let's go and do that. So I'm gonna go click on back right here. Just give you guys an example of how this works. So right here, I'm click on Sign up. Now, if you look at the bottom of my screen, it says my dash account. So by clicking on sign up right here that we brought to this page right here. It's a very beautiful contact form. And right here you guys can decorate it just like we did earlier. So your users will see the same thing on the my account section now really quickly. I have a full editorial guys on social log in, and I highly recommend it because right here someone could just click on, log in with Facebook, just like you see all those other websites have, and it can basically create an account for them via Facebook. So, for example, if I click on this right here, it's locking them in with Facebook. And if you got to see the speed of that, that is pretty fast. So basically it already created the account. Everything's done and they have an account now VF to Facebook. So I have a full tutorial on that as well. It's all about five minutes long. The reason why it is not added in this tutorial is because I wanted to put on YouTube because other people might be looking for it. And also you have to create a Facebook app. So also really quickly. You guys want to change the color of these buttons right here, just like how I have it right here? Yes, and see color. So right now I'm on the button section. So here I'm a click on secondary. And then you can add success or alert or whatever color you want. And then right here, you can change like the outline you can shade. It's you know, whatever you want to do, you can mix and match and get customizable. Now you can get here by clicking on the button. One section. It will take you to that section as well. So, guys, there's a lot of different ways you guys can customize your header right here. So I think I did something like the secondary and then the other one right here. I just did like primary like that to make it a little bit more, you know, make a little bit more user friendly. It's a very user friendly interface right there. And so now that I'm showing you guys how to do that, let's talk about the actual theme customizer and all of the settings. So I kind of show you guys how to use the actual, like, you know, the header, how you guys can customize it yourself. Now, the reason why it's not showing up at the top right there is because we have to actually enable the top bar. So right here in the top are gonna click on Enable the top are and you guys can control the height of its you guys continue the color, the background, the navigation style. It is fully customizable, and you guys gonna have tons of fun going through all of these settings. So first, let's talk about the presets. We did the presets. Let's talk about logo and site. So here's where you can change thesis ICT identity. You guys can display the logo below. You guys can change the local position. However, that's really not necessary because remember, right here we can already change it as well. So remember, Ah, lot of these options can kind of conflict each other, and this is where you're going to upload your logo and, ah, you know, you can upload a logo here, a light version, a different style. You can add the local container with you can, you know, kind of change it to however you want etcetera. Local patting a site icon Now aside, icon guys is also called a fabric on you. Look at these top pages right here. You see this picture of this camera of this YouTube thing of the fiber logo? This is basically what you want for your website when someone visits it. So right here is just a blank page, but we can go ahead and select a quick image right here, and it should be around 5 12 by 5 12 You guys can actually use fiber. You guys need imagery, sizing or something. But it's just like this guy here. And then you guys can see right here how this guy's face is showing. So this is probably where you want to add in your logo or something and, you know, make it a bit more decorative. I'm just using this as a you know, a demo. Just to show you guys that that's basically you know, how that works. But okay, so next section top are Of course, we go over that header main. You guys can change like the with of everything the style You guys continue like the height of everything as well. And remember if sometimes it doesn't work because the theme the theme customizer, can override certain settings. So it doesn't work. It's probably somewhere in the themes customizer that you have a different setting somewhere that's basically conflict ing it. Header bottom. So right here you can change the header bottom. But this is disabled. So if I want to enable it, we can have something on the header bottom right here. And now we can control, like the height that everything. So basically, how we do that? The height right here. Navigation, etcetera. So this right here controls the section right here. And I can we can change the font, you know, make it bigger, etcetera. OK, remember, you must have the head of bottom right here to kind of, um you know, decorate and make a little bit bigger, so I don't really want it, though I think that that's kind of ugly. You know, I don't think that we really need it. So I'm gonna go ahead and take that out and delete the bottom header. All right? And sometimes guys, you know, I changed how high it didn't work. It's because you need to actually publish it and then view the page. Some of the settings when you're working on it, um, require, like you to publish clothes and then go look at the site and then it will show up sometimes . Just depends on you know how it happens right here. Mobile header height. You guys can get an example of how this looks on mobile, and we can also change the icon. So, you guys, I mean, it's just so incredible. We can change all these settings right here and right here You guys can do like cantor elements. You guys can decide which one comes first or seconds by kind of like just, you know, dragging and dropping it. So right here, when they click on this menu, it's going to basically show up how you want it to show up right there. But I would leave it by default. You know, you can always make a separate custom in you, but what's the point. You know it's not really necessary going back here. Sticky header. You guys can add a sticky header to this if you guys want. I personally don't really think that you really need is to get her too much. It's, you know, it's it's really it's really up to you If you want to add a sticky header, you got like a top are sticky on scroll. So the secular guys, when you scroll down, you start. You see things of this together will show up as a secondary menu. Okay, going back down here, drop down style. So this might be needed. Now, when you actually click on something and it has a drop down menu like we talked about before, you can actually decorate the background of that drop down menu. So BCBG as an example. So right here we have shop and we have this section. So if you want to go ahead and decorate this, I can go ahead and change the actual drop down menu color. So the drop down style guys fully controls the drop down section of when someone hovers over your menu. Okay, so you guys can go ahead and go through this. You know, I'm not gonna really go through the's settings because this is just, you know, repetitive nous. You know, the radius. Make it circular. Whatever. You guys understand the point, but sins this will actually correspond to these buttons right here. Any buttons that you put in your header will corresponds to the header section your account section. You can actually make your account section a lit bit more customizable. I don't have the my account section here added. So I'm gonna have to go ahead and add it in right here. So we're good at it. Right there. So now I've added the my account section. Now, if I click on these right here now, it's going to correspond to the account. So that's basically how you would customize the count. You must use the account module in order for that to work. All right, now, cart right here. So this will have to control how the cart icon looks. So it here, if I go to cart and adding you can now basically display the cart and you can always change the way it looks and, you know, see how that works. Maybe adding it up to here might be a little bit more, you know, it looks a bit more nicer and it displays your products really nicely. So it's It's a really good feature. Eso you guys basically get a quick
15. THEME CUSTOMIZER OPTIONS: to something like red And again, If it doesn't work for you guys, it would basically just have to save it and then just close it and take it out. You can also change the color for the review stars and also for the new bubble. So all that's we can change Go over here and click on Publish. Going back over here again. You guys can change the topography of something. So, for example, right here we contained topography of, um, like the headers. So, for example, we have the header section like that control of the H one section. So wherever you guys set, like an h one h two h three h four or so See right here. Oh, it says this will change the font for it. So right here you can see the fun has changed because this is an H one section. Now, if you want to change just the base text section, we could do something like this sexually this, funds or whatever. And you know, you guys can kind of get the idea of how that works. You guys can also change the size. But again, remember, this is a universal setting so this will actually change it for mostly all of them. So I recommends to be very, um you know, cautious when you do that, so changes to something a little bit more regular base color or baseball. I don't know. We'll do. I think of good ones like, um Ah, Lato later on. Roboto are pretty good. You know, I like later in a bottle for most of them just because they're really clean Lato Roboto. And before we had to use Google fonts. But now we actually have this embedded in the theme which makes it a lot easier. And you guys can kind of go through these and kind of check these out, like, you know, if you want upper case or whatever, but again, remember, this is universal, so this will change it to all of the settings and navigation. This is going to basically control the navigation menu up here as well. And again, you can always change. It's like, you know, bold, italicized or ultra super lights or whatever you guys want. So, um, I'm not gonna go through all these Dino. He gets kinda gets kind of get it. And again if it doesn't change. Make sure to actually save it's and then Teoh. Yes. So save its. Publish it and then go ahead and check it again if it doesn't work, OK, All right. So that is all about topography again. It's a very important parts because many people would probably want to go ahead and change how all this looks on their websites. So headlines again guess can see this is all changed. So it looks really you know, it looks really ugly as it really ugly fun. Okay, so you guys get the idea. You guys get the point. All right, Publish. Gonna go back Custom CSS If you are not a developer, don't worry about it. Image lightbox. You guys can change the background color of the light box. So, for example, when someone clicks on the image and that pops up with your product, you can change the background color forward, right? They're pretty cool. So we basically did all the options. Guys, we've done the layout. We've done the shop, the pages, the menus. This is basically the menu up here is just a different way. How you can assign more than one menu. Many of us won't assigned for that one menu. Ah, sharing social icons. You guys choose to have social icons because you can use the short code. But quite frankly, I don't really think that's ever needed because there's also modules for this kind of stuff . But if you guys want to have these social icons, you can use this short code and it will display thes specific social icons and you guys can come to decorate it, etcetera. So if you guys choose to like if you guys want to add social icons anywhere, you just need to add this short code share anywhere, and then here you can just display the type of icons. Okay, so remember, short code is like this little thing right here, so that's a short code. You just paste that to any section where you want to display social icons. Who commerce. We have a store notice right here. This is more for the world commerce settings, but ah, you know, you guys can also access it in the theme customizer. So we have this little store noticed, and this will display at the bottom of your websites when someone comes to your website. But I don't want it enabled. So, yeah, product category logs you guys can, you know, show you guys can show either categories. You guys can show product and categories, or you can just show products or whatever you want to do. Remember how earlier I talked about how you can just show categories, and that's in the the womb? Calmer settings. So basically, when someone comes to your shop page, you can have it like this right here where you have, like men's or women's, and if someone clicks on that category, it will take them to a list of all of those products. So it's just another way how you guys can design your shop if you want. Just categories. You could do categories, but I think the best one to do is probably products, because it's one less button to click. You know what I mean? It's like you just click on it and you go there. So that's what I personally recommend product images. You guys can always go ahead and change the images. However, this team has custom emphasizing, so you won't need to really even bother with that. All right, going back over here, we have additional CSS, which is, you know, developer stuff. And then we're set the theme options which were set everything back to normal view. So that's a quick rundown guys of the theme options. Pretty self explanatory. Pretty simple. Really quickly. I want to go ahead and talk more about the design of the site, and then we're gonna talk about mobile optimization, and then we're gonna talk about the calmer settings and then congratulations, guys. You guys are gonna be on your way to creating an e commerce websites. Alright, guys. So in this small section right here, I actually want to show you guys how I added the wish list section, So Oh.
16. ADDING A WISHLIST OPTION: here. I actually want to show you guys how I added the wish list section. So on your products, right here, there's this little heart right here that says add to wish list. Now, this is simply done with a plug in. So if you guys want to add this to your website and I'm gonna show you how to do that really quickly and again, people can go and click on add to wish list, and then they can browse their wish list, and then it can actually display all of the wish list products in their account right here . So it's another really cool way to kind of, ah, encourage engagements on your e commerce websites. And, you know, it's just good to have in general, you know, why not? So I'm gonna go to my website right here, and I'm going to quickly go ahead and install this plug in some of my dashboard plug ins and go to add new and right here simply type in wish list. So again, remember, plug ins are just added features for your websites. Like little things like, you know, compare and wish list. They have this wish list plug in. They just have so many plug ins for WordPress. But the one we're going to use is this one right here. Why? I th will commerce wish lists and click on install now. All right, click on activate. And the great part is, this will integrates with your account. So right here they have, like, a premium version. Now, you guys do not have to install it so I can click on dismiss. But remember, that's how most of these developers make money because they offer the plug in for free. But they also want to make money to so they offer, like, a premium version of stuff. So right here, under the y, I th will commerce wish list, click on settings And here are some basic settings for this plug in. Now, you guys don't have to, you know, change all this. You guys can you know, you guys continued if you want, But you know, most of this stuff is pretty standard. I mean, you can change like the product added text at the car. But why would you do that? You know, just just keep everything basic. They have some other things. Like if you want to share it on Facebook, etcetera. All right, here. My wishes on e commerce tutorial. I recommend leaving this because this will actually get ability for the customer to share their wish list on social media. So I'm gonna click on save changes and guys, that is basically it's hope. Now let's go ahead and view our products. And of course, right here. Now we see you have the wish list and they can add it to the wish list. And if they click it again, it's actually going to take them to their account where they can actually browse the wish list. So it'll bring them some like that. Then right here. They have some social icons there at the bottom. So this was just a small quick tutorial on how to add the wish list. Also, I had to talk about the theme customizer. Now, flats, um, does have a theme customizer on advancing customizer. Many of the stuff in here it's really not needed for I would say 95% of you all. But for those of you who want to do custom CSS if you're a developer, this is where we're gonna enter its Ah, site loader. This will basically ah enable of sight loader. I don't really recommend It's because site ground is really fast anyways would only need it . Ah, site search. You want to enable live search for your products, etcetera. So these guys are pretty self explanatory, like the u. S. Polar. I don't know why anyone leave that unchecked. You know, that basically takes off the flotsam studio. So they do have some other options right here. Many of them are not necessary. And I don't recommend most of these, except for the Google AP eyes. But we'll talk more about the Google Ap eyes in a different tutorial on my YouTube channel . So for this specific e commerce in total not gonna talk about it, but again, setting it up takes about five minutes. You just need to create ah Gmail account at an A p I key. And it's all set up. Okay. And again, if you guys need the set up wizard, the set up wizard is right here, and this will basically run the set of wizard all over again in case you guys wants, like, the child theme or the plug is installed, etcetera But again, most of you don't need the child, teen. And most of you shouldn't use those plug ins because they're just not ideal. Okay, so I'm gonna go ahead and go back to the editorial, which wanted out of this quick section on the flats, um, section and also the wish list. Many people actually watch my tutorials or kind of like, man, I didn't really think I could do this. I thought I had to do coding. A lot of people were much older, like 60 60 plus, you know, So you know, if you guys, we're this far. Congratulations. So next, let's go ahead and make our about us page really quickly. And I'm gonna do this because I kind of want to show you guys how mobile optimization works as well.
17. CREATING ABOUT US AND CONTACT US: mobile optimization works as well. Okay, guys, in this section, we're gonna create the about us page after Nats, we're gonna create the contact of state and contact form, and then we're gonna focus on mobile optimization. Make sure your site is fully mobile optimized. So all you have to do now is just kind of sit back, relax and, you know, just let me word. Let the pro do it. All right? I'm gonna go ahead and show you guys how to basically make it quick about us. Page. So right here, go ahead and do something like a slider. Alright. Right here. I'm adequate banner, and then I'm going to just basically put in one of these because there's really no right or wrong way to do this. So there's tons of different ways how you guys can just kind of make something yourself. So over here, I'm just going to go ahead and leave this button, and I want actually add in a background image here. So here, I'm gonna add in a background, and there's gonna simply select something really quickly. We'll enter inside me like, uh, this right here, and I want to have a quick, overly. See here, Uh, let's do this This color here or let's add this color, then I'll go ahead and reduce the transparency. Now here, go ahead and just delete this and I want to add in a title. So you hear about something like about about us. I'll make this bigger, and then we'll go ahead and reduce the size of this banner because the height of its just a little bit too big. So we'll make it a little bit smaller. Just something to introduce the next section or something. So then here, I'll go ahead and add in a quick template, or we can use something from we can always use stuff guys from other other templates, and they kind of just mix and match stuff. So, for example, is to say, I want to go ahead and import this section, all right? It is importing, but I don't want this headline right here. So right here. I can click on this right here. I can change its or I can go back over here. And so we just delete this right here because I just don't want it. And then the vital right here, same thing and then right here, I guess you can say this looks good. We can always change whatever you want. Right here. Um, you know, it's pretty pretty simple. I want to add in another section right here, and I'll go ahead and, um, we'll probably just leave that right here. I want to click on this and Adam A flats in studio for the about US section right here. I'm just going to select something like this right here and import it. All right? It is important. Easy, These guys to make a website like this is just, like, so easy. Like the about us Page is already done, and all they need to do now is just click on open text editor and just simply change whatever text I want right there. So I was being a little glitchy there. So you're here, So right here, will to change it like this change like about are about our company, and then here we know we can add something in. But, you know, I just think this is really simple, you know, it's it's a quick about us page will need to do anything with it now. The main reason why I made this was because I wanted to show you how mobile optimization works. So right here we have desktop now. Right here. We have tablet. So this is what looks like on a tablet. This is what looks like on a phone right here. Now, if you guys want to make any changes to its, you'll need to basically make the changes to it, and then you can, you know, see how it looks on your phone. So, for example, we have this section right here. We have this banner. No, guys we talked about visited Lee earlier. Remember how he brought it up? We don't really need this section for mobile. I mean, do we really need this picture to show for mobile? No, we don't. So right here I want to do hidden for mobile because I'm sorry. Only for desktop. So that means that you guys can see it disappeared because on mobile devices, it's not gonna show it because we don't really need that image to show up. So that's an example of You know how you can use the visit Jodi section to kind of get rid of stuff you don't really want, you know, And let's just say, for instance, we want this section to be a little bit bigger. So right here, under the size, we could make it a little bit bigger or smaller. So maybe small like that. And then, um you know, for this banner section, I'm gonna go ahead and reduce the height even more like that. So this is what it's gonna look like on our mobile device, and it's fully optimized. I think it looks good. Let's see how it looks like on a tablet now. So I'm click on tablet, and right now you can see that this kind of looks weird because this column right here is is not displaying anything at all. So maybe we need to go ahead and change is calm. So right here, I'm gonna go on Lee for desktop as well. So I'm gonna go ahead and just hide that. I don't think that looks good for this banner section. We can probably get rid of this to you guys for visibility. So for this right here, we'll just do only for desktop as well. You know, we don't We don't have to have it. We can always make a new section right here. Such as Harold. Go ahead and added in a new section, being even more customizable. So maybe you want to go ahead and add in something like this. Right here. Team sliders. This is where you can display like your team or something, etcetera. Now, for this section right here, this looks really good. Now I want just display this just for the tablet on Lee. So right here only for tablet. So right here this section right here is displaying for mobile. This section right here is displaying it for the tablets. And then this section like this is displaying it for the computer. So the mobile optimization guys is amazing. So if you guys want to have a fully different site just from mobile users, you can do that. So that's a good example of mobile optimization. We'll check out our other home page once we're done with our contact section. So right here I'm gonna add in a quick contact section, go ahead and edit with the aux builder, and then right here we do the same thing. In fact, we can actually just use one there templates. So my here under at the contents. I'm go to Flotsam Studio and go to contact, and they have various contact forms that we can use. So they have, like, something like this Really simple, really easy. You can also go to their full pages right here. And so we just go ahead and browse around. And since they have such a large amount of templates and resource is, I would highly recommend to use their templates because, let's be honest, these guys are probably designers or better decided than you are. And you kind of want to borrow their work. You know it. This is really nice. I want to use it. So I'm gonna go ahead and just go to our one of you going to do the see what we can do here . Well, there's something like a quick banner right here. Maybe right here, we'll go ahead and just import this section. We'll use this header only. So I just want to use that header. I don't want to use this other stuff and I'll delete the buttons. So right here this banner, I'll go ahead and delete its and I'll go ahead and also and delete these buttons right here because I don't really need these buttons on a contact us page. And then here I'll just added something like, contact us and then we can added some dummy text below that click on. OK, then right here, we'll click on the flotsam CEO again and maybe just add in something like a call to action or not called action. Well, I don't something like am contact former here where we can go ahead and just simply we'll add in something like Looks like this right here. This one looks really nice and you guys can always add in like a content in between. It's so right here. The contact form is not found because we need to actually select the contact form. So there you go. We have selected the contact form. This section right here is some padding that we don't really need. So we can either extend this row on the column or we could just go ahead and delete it as well. It's up to you. I think that's we should probably just see we can do here. We can actually increase this the full and then also increase this banner right here. to fool us. Well, to kind of give it that full extension. Look, so we'll do this last one right here. You know, I think about it. It's not that nice of a contact form. So maybe you want to go ahead and redo this one. You know, I I I'm not satisfied with this. I don't think it looks, uh, great. So I'm gonna go and just delete this whole section right here, and then we'll try it again. We'll add in another contact form and ah, see right here. Yes, can tell I am not on a script, you know. I know wordpress so well. That's I don't really needs Teoh. Use a script. I have seen other you tubers for you scripts. But personally, I don't need it because I think it's very simple to understand. So he will do contact form one and maybe in the middle, you guys want to add, like, some content, you know? So, under the thoughts of studio under the about, they do have some, like, just like demo content. You can add some like this right here. This is totally doable right here. So maybe like about us and then simply adding your content right there and then we'll click on update. Now, is this optimized for mobile? Let's quickly check it. It is updating and see if you can check it really quick. So for mobile or for tablet looks just about fine. And also take a look at mobile right here. So again, guys, the visibility, you know, some sex and just aren't needed. You know this section right here. We probably don't need this text right here. This text right here is probably just, you know, not necessary. So we just kind of like that for mobile users. But when you guys were editing your website, you kind of need to go throughout the entire website and optimize it for mobile guys. Cause Google actually penalize you now if you don't have it fully optimized for mobile because they recognize that there are more mobile users than there are desktop users. So let's go ahead and check out our home page. We never checked on our home page, and I guarantee you there's probably at least one thing that needs to be changed here. So tablet it's going take a look. And that's why I love their templates there. Templates are already fully optimized, so it's really cool. So there is probably one thing we need to change here, which is the spacing right here with our with our our former here for a text box so we can add in some spend some padding right here. Let's see here, change it up a little bit. Maybe added some negative like that. There you go. That's a bit better. All right. So we added some negative margin. I'm updated, and I think it looks good for mobile guy. So it's a fully responsive website. It looks great. Now, lastly, check out. Looks like on a mobile phone. So huge sale. We can probably reduce the size of this. We don't need it to be Ah, that large so we can reduce the size of that. Okay, seeing else we got products look great. Sign a form. Looks great. Instagram looks great. And then right here, you probably just need to reduce the size of this guy. Says something just a little bit smaller. You know, we can add it like, you know, like, ah, smaller heading or something to kind of make it a bit smaller and then we can also position the text to a certain other position we want it to be. So maybe something like that's maybe make it a little bit smaller. All right, maybe some like that. You know something? You know, you guys get the point, you know, just kind of kind of think around with it, make sure it's optimized for mobile. So now when people come to your site, they're just going to see a huge sale up to 70% off. And, um, I think that's fully optimized right there. So again, I think this site looks great. So, guys, you know, we've basically created the entire website. Now, the last thing we need to do is I just want to make sure that contact forms working. So contact us. I'm going ahead and put in my email right here. Best website ever. Click on sent. Now, if it doesn't send directly to your inbox. Guys, just check the email of the settings of where you put where the emails going to. So right here I'm gonna refresh. And there you go. Howdy. Awesome. Congratulations. So the contact form is fully working, guys. So again, you guys are amazing for making this far By now. You guys know how to upload products. You guys know how to do all of the technical stuff. Now we're gonna go ahead and move to the next setting. We're gonna talk about the will commerce options, which is the very last settings. Guys, this is the stuff so easy, so
18. WOOCOMMERCE SETTINGS 1: pat yourself on the back. All right, guys. The last and final section in the comer setting verse, we're gonna do a little bit more of the general calmer settings. Then we're gonna talk about taxes, shipping. We're also gonna talk about check out methods. And lastly, we're gonna talk about coupons, so I'll see you all there. So let's go ahead and go to our calmer settings. And I'm gonna go ahead and just close all these because we're done. We're done with all this stuff. So next is go ahead and go to will commerce and go to settings. So right here, you're gonna put in your store dress you're gonna put what countries are you selling to know? Guys, I also have a full commerce editorial that's an hour and 1/2 long, so I'm going to quickly go over basically like the essentials. But if you want to get very, very advanced, such as, like a discounted shipping and stuff like that, I have a full tutorial on it. So it isn't and 1/2 long, but it's everything you need. So after you watch it, you'll be like good, But for most of us, will just go and go to his option. So right here, You know, what countries are you selling to? You can actually restrict the countries that you want to sell it to you. So, for example, sell to all countries, except for maybe who's the bad guy today? Bam Marshall Islands. Marshall Islands were not selling to you Shipping locations shipped to all countries you want to sell to. You can leave that they're geo locate highly recommend, enable taxes and taxes glowingly. That's and that's basically our general settings right there. Pretty simple, Not too hard products. So right here we have our products on our shop page and a lot of the settings guys, when we first entered with Wu commerce, these air basically everything all over again. So if you want to go ahead and change stuff, you can change it again here. And this stuff is pretty simple to understand. Like enabling product reviews. Reviews can be left by only verified owners, which I recommend because you don't want people to buy stuff on your site or I'm sorry, people not device stuff on your side that's getting reviews, right? That would make no sense. So let's go and talk about something else little bit more complicated, like tax, so taxes. It can be a little complicated, guys. Now there is a tutorial on my commerce, a Toro you guys can watch. But for those of you who want to just kind of learn about what taxes are, how they work, let's just go out and do that. I'm gonna set a tax rate now. So, for example, we have the United States, the United States, and let's say we're selling in California. So California, the tax rate there is around nine points or we'll just put 8.25 I'm not really sure of the taxi in California now is shipping taxable. If shipping is taxable, you're gonna leave that checked. Can you tax for the shipping and the products together? If you can, you're gonna put compound. And again, you can always read what it is right here as well. And then right here, you click on save changes. Now what is reduced rates will reduce rate is basically saying, Are there certain areas that have a reduced rate tax, probably within that state or city. So, for example, not every county in California has a sales tax of around 8.25 and there's also zero sales tax. So what? This is guys. It's basically categories for taxes. So, like, just like we did men's, women's and accessories, this is the same exact thing. So standard rates, reduced rates and zero rates. Now you got some good attack options on. If you guys are selling in a specific state like California or Arizona, you're gonna be charging sales tax based off where you're from. However, in certain states it is recommended that you charge sales tax based off where people are buying from, so that can be a little complicated. So that's really why I recommend doing the automated taxes for your for your commerce websites. Okay, so here we have Ah, do wanna based tax were they are shipping from or their billing address? Probably. They're shipping address, right? That makes most sense. All right, here display prices in the tax or I'm sorry in the shop, excluding tax or including tax. Let's do excluding. You know, we don't need to tell them the tax rate because it just makes our prices a little higher, right? We don't need to do that display prices during car and check out. No, I'm just going to say no, we'll just excluding tax. They can always look at the tax as they're checking out on the last page. It's going up over here. Click on safe so you guys can go ahead and go to your standard rates and set up specific tax rates for specific places. Or you guys can go ahead and use automated taxes, which I highly recommend. If you guys don't know if you are subject to origin based or the origin base or think state based, I have a article you can read from Tax Star that will basically tell you what kind of tax you should be charging for your products. And if you guys are selling digital products, especially in California, there is no sales tax. However, some states have sales tax for digital products, so well, I cannot sit there and recommend I can't go through every states I will leave. Resource is for you guys, so just simply go ahead and look for your states. I think right here. Yes, you just said we do a quick one on tax char. So Jack Star sales tax. No, this is if you choose not to have if you choose not to have automated Ah, automated sales tax. So right here, for example. Let's say you're in Nevada. Their sales tax rate is 6.85%. Another state Montana would be zero sales tax. That's pretty crazy. You know, we in California right here have 7.25 I think it's raised like 9% or some like that. You didn't update or some like that. So you guys can use tax Star as a resource for helping you guys understand tax see by origin based. And then another thing I wanna show is origin based, first destination based. So depending on your state's, you're gonna charge sales tax either where you are based out of like here. So I would be charging the same rate no matter where I go or no matter worry, charge. However, if I'm from these states right here, I'm gonna be charging sales tax based off where they are purchasing the product from, So it's pretty simple. Just go through this and you'll get it. And also just just to the automated shipping guys make your life way easier. So that's a quick rundown of taxes. Um, it's very dynamic. There's a lot of ways you can go with it. And I highly recommend reading those articles about taxes. OK, Shipping. All right. So you must have shipping set. Guys, if you don't have shipping sets, it's not gonna work. So right here we have United States and then click on edit. So by default, it's it's actually doing the automated shipping. So this right here is all automated. We don't need to do anything else. Everything is done for us. Now, let's just say you don't want it automated. All right? So I'm gonna go ahead and delete automated shipping because maybe some of you don't want automated shipping rates, which is crazy because it make your life easier. But I'm going to just basically at a shipping zone and show you how to do it from scratch. Sorry. Here u s A. And I wanted to United States united sometimes even someone's leading stuff on my web site . Oh, cool is nice. All right, so United States right here, close that. Okay. All right. So right here. I want to add a shipping method. Now what kind of shipping. Do I want to charge? I can charge a flat rate. I can charge free shipping or controls local pickup. Now, we can use this in combination. So, for example, someone who spends less than $50 give them free shipping. I'm sorry. Yeah. Is that right? Yeah. So let me just give you an example. Fire eight. All right, So what's the flat rate? How much you want to charge for shipping? I want to charge 10 bucks for shipping, no matter what. Now there is other things that we can do that. Ah, like you could do quantity and fee and cost. And you can charge per per item. You can be a little bit more. Um, you could be let it more in control. However, that tutorial guys is a description of this video because I'm not going to go really, really for in depth on a dynamic shipping costs because I have a tutorial on it already for you guys. Because I love you guys so much. So here the cost. Right. Here's 10 bucks. So now I'm basically saying cost is $10 to ship. That's it. And let's just say I want to add in another shipping method. So let's go ahead and say OK at a shipping method, and I want to provide free shipping, and I want to provide free shipping for certain people. So free shipping requires what a valid shipping coupon which we'll talk about in just a second. A minimum order amounts a minimum order amounts or a coupon or both. Well, im gonna say under $50 they'll get free shipping or a minimum order of $50 they will get free shipping. So that is pretty self explanatory. So shipping options and shipping classes were not actually gonna cover this, because again, I have a full tutorial on shipping classes and packages and shipping labels and all that other stuff in the description of this video, and I will really help you guys out, okay? But for those of you who are just using basic shipping, that's all you need is a flat rate and free shipping. That's really all you need, guys, you guys can sell something else, or I'm sorry. Change it to whatever you want, but most of us 80% of us we're just going to use a flat rate of free. So let's go on now and test our store. Let's see if our store is actually working. So here, my goats to view the cart. And by now, our taxes and our shipping should be working. So it's going down here. We have our flat rate shipping of $10 but since they spent more than 50 bucks, they can qualify for free shipping. And right here you can see the taxes are calculated. And if they go to proceed to check out, they consider you were about to this page right here where they can go ahead and check out and placed the order. Now we need to set some payment processors so we don't have paper all set up and we don't have stripes set up. And hopefully you guys using my recommended hosting. So then you guys can have a simple and automated check out process for your customers. So here are my goats to my dashboard. Who Commerce and settings. And here we go to our check out and I want to go and click on Pay, pal. And I'm going to enable PayPal. Now. Guys, PayPal is a free service. It's ah It's super simple to use, so I highly recommend it. So here's PayPal and you guys can click on get started. And you guys can just, you know, sign up and you guys can use a personal account or a business count either one you guys can use. You guys can use the free service right here, like the papal standard, which doesn't charge you anything at all, which I recommend. And once you're done going through the process of setting up your PayPal account and all that stuff, all you need to do is just simply take your PayPal email address and simply pace it right here and make sure PayPal standard is enabled. And every time someone purchases your products, it will go directly to your PayPal account. And you can withdraw any time you want and have a fully automated business. So here I'm a go to save changes. Next we're gonna go to stripe and stripe is the number one recommended service. I highly recommend you guys you stripe, so let's go ahead now and go to stripe really quick. So I'm gonna go to Google and go to strike. Pinstripe has lower fees than pay power. So right here, click on straight and go to my dashboard. So you will need to make an account with stripe. It's free. It's very easy. And once you guys were here, I'm basically let you guys know what to do. So you guys can go ahead and with your profile now you guys will need a bank account because what they do is they basically send over payments from this right here to your, um to your bank account automatically. And you guys can always change it. You guys could make it go to your bank out daily. You can basically make it however you want it to make. And it's really, really simple. But I want to show you how you can get money from your websites to stripe. So right here we have a P eyes and I want to go ahead and view test data. So you see this key right here? Publishable key. I want to take this and I want to put it right here where it says publishable. He now over here. I want to go ahead and take this key right here. This is ah, fake accounts. It's not a real one. It's just my, uh you know, it's my secret demo. You know, my demo account. So here. I'm gonna take this and copy it and simply go ahead and pace that right there. And I want to go ahead and click on the save changes. So let's see if this works. So let's go ahead and go to our website, and I'm actually gonna buy two grand worth of items right now. So this is the words getting crazy. So here, I'm gonna go and say OK, now you guys see we have the buy now. Option Now, if you have paper, I'm sorry. Stripe enabled. People can actually click on it and go directly to your website and check out immediately. And they can do that for any single product that you can always disable that in the stripes settings as well, if you'd like, but I think that looks pretty cool. But anyways, I'm gonna go to proceed to check outs and then right here we have stripe. Now. Right here. I'm gonna just put it in my secret credit card. There we go. Is secrets. And then 123
19. WOOCOMMERCE SETTINGS 2: the to three. So everything looks good right here. We have our own school and put our first name, last thing, everything else. So we have our demo information right here. And then, uh, we need enter this old and I love again. All right? And then right here. We went through this in and then went to three. Now, when your customers are ready to check out, we're gonna go click on place order. Now, Right now, the credit card is processing, so we're just waiting for it to process. All right. That the, uh uh uh. So there you go. Congratulations. We have successfully checked out with straight and you made money. That's it. That's how easy it is. And over here, if we go to our events, you can see that it was logged in. So it's successful. Payment was made for $2268.76 and it'll show up right here in your account. So right here today, 2000 Volvo Baba. And of course, you guys want to go to your profile and make sure that your big account is enabled because they will need a fake account information. So you guys can just go ahead and, you know, just contact stripe guys and just say, Hey, what I need to do to get the money out And it's pretty simple, You know, the balance right here. And I gotta tell you, like it's all automated. So, like, right here, you can expect your payment February 20 seconds. Super easy to set up, guys. So if you want to make this live, you're going to click on this right here. Now, under a P I The testing is gone. So right now, if you click on all this stuff right here, you go back to your settings. It's going to be live. So let me give you an example of how to do that. Just to make sure you understand how that works. Commerce settings, See your settings. And then right here we have. I'm sorry. Check out and we have a stripe. So right here, we're gonna uncheck that. And now this is live publishable key. So right here, you can see this is publishable key and the secret key. You're just going to do the same exact thing. Copy and paste it and simply put it right there, and also we have in light credit forms. So it's just a nicer wait to, um, decorate the form for stripe. And then if you decide to get rid of those buttons, you can take off the the button payment requests and also, like, you know, charge capture merely whatever I know you probably that on, actually, that's that makes more sense. But right here, if you don't want those buy now buttons you can disable, that's and those will disappear as well. So let's go ahead and check our email to see if our purchase actually went through. So I'm gonna go to my email really quick, and ah, right here. You can see that it says a new customer order. So it here a new customer order and then right here we have our C as well, and this will go to the customer. So thank you for your order. And this is gonna go to your customer. So, lastly, guys, let's just make sure that we know how to decorate those e mails. So we done checkouts. Let's go to accounts right here and again. Guys, this is like, you know, your account page generally This is for themes that don't really offer much. But since our theme offers a lot, we don't need to really mess with this, because this is just, like, Perma leaks and stuff. So right here is go to emails and we can always decorate the emails. So right here, where it says from name, you can go ahead and put your shop name right there from the address. You're gonna put your shop address header image. So where do you get this from? If you want to display a logo on your on your site, you need to go to your media and go to a library. Now, you're gonna go ahead and select an image and probably your logo. So usually, you know, you probably got it from fiber dot com or ever. So I'm just gonna go ahead and add in a quick logo right here. I'm gonna go ahead and see if I can find something really good. Really, really quick. Maybe something on my down, my downloads or something. See if I can find something here. All right. I'm just gonna go. I'm just gonna use this right here. The money sign, you know, money It's all about money. Everything is all about money, you know? So this is a very large image guy, so this is not the best idea to to use. Um Let me see if I can find something a little bit smaller and find a little bit smaller. Image will use this one right here. Okay, so let's just pretend this is your logo. You're gonna go ahead and copy this. You're all right here. Okay. Now, if you want to know sizing for logos, I would say for 50 by 4 50 or 500 by 500. Either way, it's good. So we'll commerce and go to settings now are here under emails. Going to go ahead and pace that right there now, foot or texts. You can put whatever foot attacks like, you know, thanks for the purchase and in the site title right here will display. I want to change the base color to something else a little bit more. You know better. You know, I was a really ugly color by default dot com color, body color and text color. Now, if you want to see a preview of it, I'm gonna click on Save changes, and we can actually see a preview of it right here. So there's the image, Of course. Way too big. And then there's that temple. And then right here, e commerce tutorial. Thanks for your purchase. Okay, So if you guys are looking for a specific actually know what? Let's do something really quick. This is due. This is grabbed by local from the Internet. Carol will send logo and then images. That's me right there. I'm sure we can find my logo on here somewhere. There it is. So five told by 5 12 you know, it can be a little big, you know, But I think that will work. Sorry. Here. I'm going. It'd Teoh save image as actually. No, we'll go to link address since moving and find it. Era There we go. All right. So I'm going on a couple of this really quick just to give you guys a better example of that. So right here, I'm gonna go and go to my media and add new and simply just go ahead and add in my logo. So 5 12 It's like, you know, I think the flat some logo like something a little bit more. Skinnier is probably just a little better. You hear it into my downloads, They pass it. See here. Other artists. There we go. We got it. We got it. We're in luck. Okay? So, clicking on media again, we can find my logo and then click on copy back to commerce and settings and simply add that logo in. So here is to go to emails, and then we're gonna go and put that right there, all right? And then we can save it, and then we can preview it so people can see how it looks on an email. A little too big, maybe some little bit smaller guys. But you guys get the point, you know? So you might want to reduce the size of its the actually calmer. I'm sorry. The logo that from flats and with a really good size, things like 300 buy something if you guys do get thief lot. Some theme, of course. You guys have it. You guys can look at the logo size or just asked someone. Hey, you know what size I use the logo and they can actually run it through there. And you guys can kind of get it. So, guys, I think that's basically the entire tutorial. I think I covered basically everything. So hopefully by now you guys can have your e commerce website running. The last thing I want to talk about before that you go is coupons, which is really, really, really simple. So if you guys want to learn how to make coupons, it's almost like, foolproof. So right here. Coupon plus new coupon. I'm gonna put Patty, and this gives 50% off so we can have a percentage discounts off the cart. A fixed card discount such as a dollar amounts or a fixed product discount off a specific product. But generally you might want, like some like 10% off right coupon amounts. We'll just do like 10% will do 50 right? Let's get aggressive here. Does this give free shipping? If it does click on that? If not, don't press anything. When does this expire? Well, I'm gonna say you don't have a week to uses. And guys, this is great for email campaigns. Whatever it's, it's great. Ah, usage restrictions. So minimum. Spend how much they have to spend for this coupon toe work. I'm gonna say 50 bucks. What's the maximum? Well, there is no maximum. You guess It's been as much as you want. Check this box. If this cannot be used in conjunction with other coupons, so can this stack with other coupons I don't want this is sac with other coupons, so I'm gonna put check. Does this also apply for on sale items? Well, I'm gonna say this does not apply for on sale items here. You can go ahead and list a specific product. So, like, um, you could put like a woman's specific shirt. Now, this is if you selected or if you want a specific product. And you can also exclude products from your sale the same thing with categories. You can include categories, or you can exclude categories from your sale. Mosley is usage limits. Uses limit per coupon. So how many times can this coupon be used? Well, let me say 100 limit usage to ex items. So how many specific times can a coupon be used for a specific item? I'm gonna leave that blank because I'm not really selecting items and uses limit per user. So how many times can a specific person use that coupon. I'm gonna say only twice and go to update. All right, so before that, you go. Let's go ahead now and test this out. You know, let's go and have some fun here. I'm gonna go to shop, and that's going out. And, ah, we're gonna add in this. We're going out in this and this and, um yeah, I have to select something like that. Okay, that's a cart, all right? And I'm a go to view the cart. Okay, so we have our own look coupon. Look at that. So So ours was Patty. So right here in type in P a T. T. Why? And apply the coupon. Now, this should give me 50% off all my items. So right now, the total is $20.89. Click on apply coupon and Paula. Now we have $130.45 and they clean pecan, proceed to check outs, and then here they can go ahead and purchase all of their products right here. So congratulations, guys. By now, you guys know everything that I know on how to basically create an e commerce websites So give yourself a big guys made it. You guys have a favorite beer. Now is the time to buy it because you guys now know how it's too build e commerce websites . You know, more than most people out there, a lot of people out there think that this stuff is super complicated and it's really not. Guys. This stuff was super easy. We had a lot of fun, you know? And now you guys owe me beer. So my favorite beer is Mondello all right? And if you guys were buying champagne, it is core Bill. I know I like. I like the cheap stuff keeps off really good. So again, guys, I hope that was really helpful of you guys. Need any help? Just refer back to these sections of this video. You guys need help linking categories or product categories or anything. Feel free to let me know in the comments. Just let me know if you guys need help more than welcome to help anybody out there. This that's pretty simple and pretty easy to understand. OK, so make sure you like this video. Make sure to share its and I will see you all later. Congratulations,
Darrel Wilson, Wordpress Designer, Digital Marketer
