The Complete WooCommerce Elementor Tutorial - Build a Full E-Commerce Store | Alexander Oni | Skillshare

The Complete WooCommerce Elementor Tutorial - Build a Full E-Commerce Store

Alexander Oni, Web Developer & Cyber Security Expert

The Complete WooCommerce Elementor Tutorial - Build a Full E-Commerce Store

Alexander Oni, Web Developer & Cyber Security Expert

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
41 Lessons (4h 20m)
    • 1. WooCommerce Elementor Skillshare Promo

    • 2. Introduction to Domains and Web Hosting

    • 3. Buying Hosting and Domain Names

    • 4. Installing WordPress Quickly

    • 5. Installing WordPress Locally with Local

    • 6. Adding SSL

    • 7. Creating a Web Mail Account

    • 8. Installing WooCommerce

    • 9. WooCommerce Settings

    • 10. Shipping Zones

    • 11. Shipping Classes

    • 12. Populating Content

    • 13. Creating a Simple Product

    • 14. Creating Variable Products

    • 15. Creating a Grouped Product

    • 16. Upsells and Crosssells

    • 17. Assignment

    • 18. Setting up Paypal

    • 19. Setting up Stripe

    • 20. Testing Payments

    • 21. Creating Coupons

    • 22. Elementor and Hello Theme

    • 23. Setting up our Product Categories and Menus

    • 24. Adding the Global Header

    • 25. Adding the Global Footer

    • 26. Adding the Global Single Product Template

    • 27. Building the Home Page Part 1

    • 28. Building the Home Page Part 2

    • 29. Adding our Mailing List

    • 30. Quick Design Changes

    • 31. Creating the Search Results Page

    • 32. Designing the 404 Error Page

    • 33. Customizing the Archive Page

    • 34. Design Work Arounds

    • 35. Responsive Design

    • 36. Designing Popups

    • 37. Order Tracking

    • 38. Managing Refunds

    • 39. Managing Gift Cards

    • 40. Additional Extensions

    • 41. WooCommerce Elementor Skillshare Conclusion

11 students are watching this class
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Welcome to the WooCommerce Elementor masterclass where you are going to learn how to build a fully functional e-commerce store. The website we shall be building together will be a fashion store that sells clothing for both men and women. 

I am going to show you exactly how to do the following:

  • Install and setup WooCommerce
  • Create different kinds of products
  • Set up shipping options
  • Handle coupons and refunds
  • Manage customer accounts
  • Integrate social media
  • Create a sign up box to capture email addresses
  • and much more

I will also show you how to use the Elementor page builder plugin to build your website and pages.

By the end of this course, you would have built for yourself a stunning e-commerce store.

Meet Your Teacher

Teacher Profile Image

Alexander Oni

Web Developer & Cyber Security Expert


My passion is teaching people through online courses in a fun and entertaining manner.  I have been teaching online for about 3 years now and during this period, I have created over 25 different courses on different platforms including my own personal platform - The Web Monkey Academy.

What would you like to learn?

Would you like to learn how to build and manage your WordPress website? Would you like to learn advanced skills that will make you a true WordPress developer? Would you like to learn how you can establish a successful career as a web developer? Would you like to learn the basics of information and cyber security?

 If you want to do any of these things, just enroll in the course. I'm always improving my courses so that they stay up to dat... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. WooCommerce Elementor Skillshare Promo: Well, hello and welcome to this very special masterclass on sculpture where I'll be showing you how to build an e commerce store using both the Walkmans plug in and also the elemental page bill. That momentum is Alex and a pleasure to have you here. So what can you expect if you decide to take this course? Well, I will be showing you how to build a store that looks exactly like this. The story is called the Cool Stop and is basically an e commerce store that sells men's clothes and women's clothes. So I'm gonna be showing you how you can create different kinds of products. As you can see, right now, we have hoodies. We have shoes, jeans, jewelry. We also have bags as well for the ladies. So I'm gonna be showing you Hey, concrete, different kinds of products and also how you can categorize them into both male and female . So, as an example, if you went over to the shopping tab right here, you can see that we have different kinds of products. I will be showing you how you can Kuwait simple products, valuable parts, as well as an example in here you can see we have the hoodie, but we also have different colors. We have the gray color. We have the why in Kahlo, the black hole up salvation You hey, can create all these different kinds of products. And of course, I'll be showing you taken at different kinds of functionality so that your customers can choose shipping options. They can buy different kinds of products that can compare them. They can add them to the wish lists and so on. And, of course, I'll be showing you how you can enable a functional tests. That's your customers can create accounts on your site so that they can track their shipments. They can Lucas for we funds by new products and so on and, of course, will be adding some additional functionality, such as add in a newsletter so you can capture your customers email addresses, and maybe I send them announcements later in the future. But your new products and, of course, how you can add social media links as well. So all in all, you're gonna learn everything that you need to build a fully functional ICO much store on the Internet, and again, we'll be using the water must plugging because it's arguably the best. A plug in for e commerce for what press? And, of course, the elemental page pull the plug in, which is also, in my humble opinion, the best page build up looking for work press. So if you're excited about learning how to build your very own e commerce store and role in the course today on helplessly on the inside. 2. Introduction to Domains and Web Hosting: All right, So it is very special section we're talking about web hosting in domains and working with WordPress locally on your computer. Now if you're already familiar with this topics and you don't need a web hosting. You already know how to install WordPress locally on our computer. By all means you can skip this entire section, move on to the next section. Don't waste your time here. However, if you're brand new to web development, web hosting domain names, then this session is going to be for you. In order to take this course, you need to be able to walk with WordPress. Now, this could mean either walking locally on your computer or you actually go the live world where you buy yourself a domain name. You get to sell some web hosting, and then you walk with WordPress live on the Internet. Now there's pros and cons to both sides. The major process working locally on your computer as well. It's completely free. You don't have to pay any amount of money. And then second, you don't need internet access so you can walk on your website anytime. It doesn't matter where you are. The major downsides though, is that you're not going to get the experience of working with an actual web host. So you're not going to know exactly how they protect your website from hackers and malware. You may not be able to do certain things like maybe install SSL certificates and so much more. There are basically things that you need to be live on the internet before you can actually do them. So your work and experience with working with what does locally on your computer will be limited. Now on the flip side, the major pros of walking that live on the Internet is that, well, you're going to get all the experience. Your website is going to be live on the Internet. Plus, if you want somebody else, like say for example, me, take a look at your website is going to be very, very easy. You just have to share the link to your, to your domain. And I'll take a look and it's going to be as easy as that. The major downside though, is that it costs money to buy yourself a domain name and also get yourself are some web hosting. But without being said, if you want own personal recommendation, I would always recommend that the live route, get yourself some hosting, get yourself a domain name. I just personally prefer that. But regardless, if you want to go the local route or you want to go with the live route. I have sped no efforts and introducing you to as many options as possible. Let me first of all talk about the live route. Now when it comes to web host, because you need a hosting company to host your website live on the Internet. I have two main options for your site ground and then cloud ways. These are two web hosting companies that actually personally host with our b would say gone since 2012, I joined Cloud ways are 20, 20. Now the major difference between both of them as that Saigon offers you something known as shared hosting. And then they also offered you offer your Cloud host. Now cloud hosting is superior to shed host. And because we've shared hosting, your website is basically sharing resources with Aldabra. Upsides are across the world. But with Cloud hosting is just going to be your own website. Having a particular amount of resources specifically used by your website, you're upset isn't going to share those resources with other websites. So basically cloud hosting is more superior. With that being said, though Saigon offers you both shed horse and, and cloud hosting, cloud was offers you only cloud hosting. They don't offer you shared hosting. So as a result, with side ground, you can get slightly cheaper alternatives. Like if you go to web hosting, for example, on safe ground. These are the prices, okay, So it starts from $7 per month, 2 all the way to $15 per month depending on which plan you go with. And then with Cloud ways, it's going to be a bit more expensive, like I said, because they only offer cloud hosting. But honestly, in terms of Cloud horse in itself, there among the cheapest that you can find on the Internet. Adele plants that from $10 per month all the way to $80 per month depending on the amount of resources that you want you buy for your website. Now in the very next video, I'll walk you through briefly how you can by yourself, domain names and web hosting with both Cloud ways and sad gone. But let me also mention that I have written extensive articles on both side ground and Cloud ways. I have also made videos comparing both said gone and Cloud ways. Here is one right here set gonna versus club who is hosting, which is better. You can check out my YouTube channel, the Web Monkey. I'll recommend that you subscribe as well. So I've made videos comparing site ground and Cloud ways. I have also made extensive tutorials on how to walk in the back-end of both SiteGround and Cloud was this is the one for SiteGround. So I showed you how you can take advantage of the features they offer you like speed, security, or services and so on. Everything is covered in the video. I've also done the same for Cloud ways as well. I've made a full tutorial walking you through the entire back-end of cloud ways. So regardless of which one of the two you choose, I have you covered, I have all the necessary information for you. I have also written articles on my blog and then Mongolian or chronic and check it out where a comeback, a compare both of them. And also by my honesty views about both our web hosting companies in shorts, I can stick my reputation on both Cloud ways and setting up because I walk with them. And the good news here is that if you decide to go with Cloud ways, if you want to buy yourself some cloud hosting, you want to go with Cloud ways. They've actually partnered with them to provide you with a very special discount that you can get to an effect percent off. For the first three months, you simply use the coupon code, cloud 125. But you also have to use my link, which I'll provide in the resources attached to this video. If you can't find the link to let me know and I'll send you another one, but you have to use the link and then you use the coupon code cloud monitoring and 5 to get 25 percent off for the first three months. Now, that's for the livelihood. If only goal law called wanna walk with what is locally on your computer. I've also made extensive tutorials. You can check out my YouTube video titled How to install WordPress locally week samp sample is one way how you can walk with WordPress locally on your computer. But I've also made another video for our local by flywheel. I am so Local by flywheel the S, It's another way how you can work with WordPress locally on your computer. You will find the video. I think the next one is going to be the second one after the upcoming video basically. So I'm going to show you how you can install what is locally on your computer with fly will end. Personally between exam and fly will, fly will fable is a bit better because with flywheel, you can actually generate a live link for your website installed locally on your computer. So if you need somebody to take a look at your website, you can do so with flywheel. So I'll recommend you use fable of a exam. So again, you can check out the video I'll have is going to be further down. I'll walk you through how you can work with flay will help install WordPress locally on your computer. So with that being said, that's basically the introduction to web hosting and domain names. In the next video, I'm gonna show you how you can actually purchase web hosting, which say ground. And also with Cloud was and also how you can buy a domain name from a site called, named Chip. Thanks so much and I'll see you next class. 3. Buying Hosting and Domain Names: All righty. So like I said in the previous video, let me show you how you can buy assault web hosting and domain names with both our Cloud ways and side ground. Let's start off with SiteGround, and you can go to And then right here on the host and you will see web hosting. What hosts in WooCommerce hosting. It doesn't matter. They're all the exact same thing. I'm going to go with what race horse in and innovated. They have three main packages. Startup, grow big, and then go geek. Now, if you are non-personal recommendation, you wanna go with grow big because we'll grow big, you can actually install as many websites as you want on that single hosting account. With startup, you're limited to just one single website. So keep that in mind. Now with Colgate and grow big, obviously you see the differences. With Gauguin. You have access to more resources, more speed, more disk space, and so on. So it all depends on how much you can afford. And I'm going to go right here, click on Get plan. And then if you have a domain name that you've already bought from another website, you simply go with, I already have a domain and then you proceed from there. But let's just say, for example, you don't have a domain name. You want to get yourself a domain name. Well, you come in here right now and you type it out. So I'm just typing something ridiculous because I know no one in the world has this domain name right now. So I'm going to go ahead now click on Proceed. So Saigon will check to see if it's available. And of course it's available because no one in their right mind would buy such a domain name. So you simply fill out information right here, put out your email information. Now, very, very, very important. Let me show you something right here where you have the data center. Automatically, it will default to your physical location, but you want to make sure that it's actually accurate. Now it's sediment to Asia because I am actually in Asia right now. But depending on where you live, you have several options. You want to choose the datacenter that is closest to your physical location. So for example, if you were in India, the quizzes would be Singapore. Asia does the closest star to India, and so on. The reason why is because the closer you are to the datacenter, the more, the faster you'll be able to access your website. So simply choose the correct data center. And then of course you can go with 24 months, that a six month and so on. Right here. They do offer additional features like domain privacy and also the side-constraints. Can I in all honesty, you don't need them, okay, just just ignore those two and just buy your domain name and web hosting. And then you'll receive an email and then you can proceed from there. Of course, don't forget to check out my YouTube tutorial on how to access and use. All the features are Saigon offers you in the back end. Now with Cloud ways launched and I need to mention is our big cloud ways. You can have buy yourself a domain name. They only provide you with cloud hosting. Our speaking of cloud hosting, I nearly forgot with SiteGround. They do also offer you cloud hosting. Don't get me wrong. It's just that their own cloud hosting is a bit more expensive than that of cloud way. So if you're looking for a cheaper alternative, cloudless is your answer. And yes, they are actually quite good with their Cloud host and as well. So in Cloud ways, you're gonna go over to price in and you will see the different options that they have. Cloud-based themselves don't actually offer you the cloud service. They partner with other companies. So right here you have digital ocean lymph node vaulter, AWS, which is Amazon and then Google. And of course, Amazon and Google are the most expensive as you can see, I mean, with Google you can go as high as $225 per month, which is insane. Digital Ocean is by far the most popular. It's also what I use. So if you're gonna go with cloud hosting, our command Digital Ocean and innovator. You choose whichever one you can afford our document at the very least, go with the 22 dollars per month at the very least. And then you can click on Start free. They'll offer you three days free trial. But don't forget though, why here you have to fill out your name and all that. You have the link for God, a promo code when I click in there and then add your promo code cloud monk 25 to get unfavorite and represent off for the first three months. Don't forget to use my link inlet to take advantage of that promotion. And then I believe with Cloud wisdom, you'll have to verify your identity. So you may need to take a picture of your ID card. But as your line says to Java's line sensor, your passport, things like that, you send it to them and then within an hour or so they'll confirm your identity and then you get access to the host. And of course, like I said, don't forget to check out the YouTube tutorial where I walk you through how to use the Cloud ways back end. Now I know you said earlier that we can do is you cannot buy a domain name, the only offer you cloud hosting. So what's the alternative? You could buy your domain name fungicide ground, but a cheaper alternative would be named Or you can buy domain names for really, really inexpensive of hormones in here. So as an example in here, again, I'm going to type in something ridiculous. Hdf is Let's go ahead now search for that one. So of course named tuple check and verify that it does. It's available. So let's wait. So, let's wait, let's weightless weights. Okay, So you can see right now it is a Ford. It is available and it's only a dollar per year. So I'm gonna go ahead now, add down to the cart and then proceed to checkout. I buy the domain name and get my e-mail and I am in. Now, the question you will have here obviously is you bought yourself a domain name from named cheap. You've gotten yourself cloud hosting from Cloud ways. How you connect both of them, right? Well, it's very, very easy in the YouTube tutorial, I show you how to do so, but Cloud ways also have an actual document of ITA. Explain to you the entire process. You have to create something known as an a record on your named Chip account. They show you all the steps in here. It's right there. It's very, very, very easy. I guarantee you it's not going to take more than five minutes. You simply do whatever you do, what they tell you to do right here. And then the rest is history, as they say, you will easily propagate your domain name from them, shipped over to Cloud ways. Of course, if you run into any issues, if you run into any difficulty, you can contact how the ways their support is also very, very good and I guarantee you that they will be able to help you out. So if you have anymore questions about SiteGround, Cloud ways are named ship, of course do let me know. I'll do my best to answer your questions as soon as possible. So hopefully I've been able to give you enough guidance on how to get started with web hosting, domain names, southbound, cloud wars and so on. Thanks a lot fortune. And of course, I'll see you in the next class. 4. Installing WordPress Quickly: I'm making this video to quickly show you how you can install what press on the website on both side, ground and Cloud ways. Now, of course I covered both in my YouTube tutorials, but I think there's a lot faster for you. Or you can watch you to, to, to ask for more information like, you know, back home, security, ssl certificates and so on. But let me show you how you can quickly get to set up and running on these two platforms. Now, if you're with SiteGround, once you've logged in, you will see websites up here on your main menu. You click in there and then Revit, just click on new website. Up here, you click in there, choose your hosting plan. Let's continue. Now a writer, you have three options. You can go with the new domain where you'll have to buy a new domain name again and then proceed. Or you can go with your existing domain, click on select, and then choose your domain in that you bought from site ground. Or you can go with temporary domain where SiteGround will create a temporary domain for you. It's free. You can see right now it's good at this one for me. I'm going to click on Continue. And by the way, the process from this point on is the same for either the temporary domain or the existing domain options. Right here you're going to click on Start a New York City. Click on select right here to install an application and right-click and go with what quiz? Or if you're taking a WooCommerce course, you can go with what? Woocommerce as well. But our community, those qubit WordPress right here, you click on Select, and then you just set up your login details, you enter your images right here, your password. Click on Continue. And I should have entered an actual email address in here. My apologies or kilometers quickly fill that out. K. Click on Continue. And you don't need to add the sides, can I? You don't need them and just click on Finish. And there you go. So right now said God will create the site for you. Let's move on to Cloud was on. Let me show you how you can add your website. From here, from servers you want to go over to applications on your main menu up here. Okay, So from here you click on Add Application, the green button. Okay? And then from here you're going to choose your server that you have with them. You click on Add Application. And then from here what you're gonna do is you select the application. You want to go with WordPress version 5.6. It may be an updated version dependent on when you're watching this video, but currently it's 5.6. So 5.6 now you can name your website, so I'm just going to call my own test website just as an example. Test web site project. Just leave that as it is and then click on Add Application. And there you go. So psycho, I'm sorry, Cloud who is right now, is installing WordPress on the website. And so you can see right there, it'll take approximately two minutes. Are Saigon has already finished. So for me right now you can go to the Access WordPress admin. You click on the button right here, and it'll take you straight to the backend. So you might, you might see this one and telling you that, hey, this site is not secure. That's because you've not yet installed an SSL certificate, but it's fine. You can go ahead and proceed to the website. Okay. So you can you can ignore the LL1 in and there you go. So with segment specifically, they do have the STL wizard. You can just click on exits to exit the wizard and take you straight to the back end. And there you go. So from, from here right now you have what was installed on your website. You can then proceed with the course, are with Cloud ways. Let's see. Okay, it's gonna take about a minute and I'm just wait for this one to finish. Now once again, my YouTube tutorials on both side, ground and Cloud ways. We'll cover everything, everything they need to know from Kuwait. An e-mail accounts are insulin, SSL certificates taking backups are, and so on and so forth. Then go ahead and close this too. And there you go. So fortunately, congress has finished installing WordPress, so you're going to go back to your applications. And then right here you should see the name of your website. Right here you click on Test Website right there. Just click on the link. And then from here you will see now the application URL right here. You will have the button to launch your website. And there you go. So for me right now you can see Claudius has a soul bought press on this temporary domain. You can now simply from here, go ahead and access the backend WP dash admin. And there you go, you simply login, provide your username and your password, and you're good to go. So hopefully, this video has shown you how you can get Wordpress installed on your website with both sat down and Cloud as you have any questions, of course do let me know. I'm more than happy to answer them. Thanks for watching. I'll see you in the next class. 5. Installing WordPress Locally with Local: All right, it let me show you how you can install WordPress locally on your computer using local by flywheel. So you can go to local and it's free for the most part. So what you wanna do is you simply click on the download button up here. And then you can choose your platform whether you're working with a Mac, Windows, Linux, and so on. And walking with windows, I'm going to choose Windows. And then they can simply go ahead and provide my firstName, lastName, walk email, and then phone number and then get it now. So I've already done this before, so I don't need to do so again, just simply go ahead and provide a first-name, all these details. Then click on Get it now. And then you will get your download link to download local on your computer. And it says a consumer, it now I have already downloaded the local application. It's about 416 megabytes for the Windows PC. So I'm gonna go ahead now and install it by double-clicking on the file itself. And it may take a while for you to see this particular window popup. Just be patient, but it will pop up eventually. So right now you can install flywheel for anyone or just to you on a computer. I'm going to go with our only for me, so I'll click on Next, click on Install. And there you go. It's very, very, very straightforward. Let's just wait for a few more seconds for this to finish. It's a little bit larger. It's going to be about 1.5 gig once you've finished installing the application. And it will only get bigger and bigger with the more our local websites that you create on your computer. Because keep in mind that you will be storing all the files, the themes, the plugins, everything that make up your websites will be stored locally on your computer, so make sure that you have enough space in your hard drive. Okay. So this is taken a little bit longer than I expected. So what I'm gonna do is I'm going to pause the video and it seems to be picking up right now. Okay. Okay. So I knew it's usually doesn't usually take that long to install, But for some reason maybe because it knows I'm recording, it decides to take it bit more time. I don't know what I'm going to go ahead now and simply click on Finish and we can run our local as well. And I'm going to show you how you can now begin to create websites using local on your computer. So right now, I'm just come down here, you will see the local symbol right here, that's for local down there. So this is basically the main interface. And now we can create a new site by clicking on the green button right here. Let's go ahead create a new site. Allergists call this one. Blog are just as an example. Okay, This is going to be the name of our website. You do have the advanced options right here, but you can choose that local site domain, the local site path, and then whether you want to quit aside from blueprint, you don't need any of this other command, you just ignore them. Just go ahead and click on Continue. And anyway it here you have the preferred options or you have custom. This is where you can indicate the kind of database software you want to use and so on. Again, if you click on costume. Or you can choose your PHP version, your web server, your database. Unless you know what you're doing, I would recommend you simply go with the preferred option. Click on Continue. And now you can provide your username. I'm going to provide my Islam as Alex. And then the password, I'm going to provide a strong password all the same. And our WordPress email, I'll just go ahead and add my official e-mail vide here. One kilogram book com. And of course you also have advanced options where you can indicate if this is a sub-directory or a sub-domain. Where do they live? That's all those click on. No. Let's go ahead now and simply add our site. And right now, local is 18. The website locally on our computer. It's not going to take that long. So let's see. I'd say studying up the side services. And so you might get in all warning signs like this in Hey, you know, this program is trying to access your process or things like that. Just say yes. Okay. Make sure you Gwen permission. If you have a firewall that's also active on your computer, on your Mac or your PC. The firewall might also say, Hey, you know, this particular application is trying to access to files and make changes. It's safe, Don't worry, just go ahead and grant access to the application. So you can see right now it is downloading WordPress. It's now add in WordPress. So I'm gonna pause the video right now and simply resume on what person has installed and consumer hit now. Just as I said, I was going to pause the video. It quickly went went ahead to finish installing. So there you go. We have WordPress installed successfully on our blog or website. And then right here where you have your overview or you can make certain changes. So right now you have the same domain in here, blog of the local. You have the SSL, auto committed, go ahead and click on trust. So that's your browser, will trust your local upset too long. It's DPS. It may not always work, but in all honesty, it's not going to matter for the most part because you're still working with files locally on your PC. Alright? You don't need to change anything, any HIV or web server PHP version, the one-click admin, it's kinda disabled or recommend that you enable it. Let me show you what it does. So right now, right here, if I go to the Admin button right here, I want to access the backend of my site. You can see right now I have to provide a username and a password. But let me go back to fly. If I go ahead now and enable this for myself, who's the admin? And I say Alex, if I go ahead now and click on admin automatically right now, you will see that I have now been logged in. So this will depend on whether or not you're the only person who uses your computer, even if there are other people who are competent and you trust them. This is perfectly fine. You don't need to provide your username and your password because you're still working with files locally on your computer. So I'll highly recommend you go ahead and activate the one-click. Adamant is just, it just makes things so much more convenient in easier for you, okay? Right here you have your database, okay? And you've ever need to access the database for your website, you simply click on the Open. Add me now. Okay, I've clicked in there and right there you can see I have access to the actual database for my website. So if you ever need to access your database, this is how you would do so with local. And then you have utilities as well, which yeah, we don't need to walk with these. You also have tools where you can buy things like live links instantly load link check Athens like that. You also have the image Optimizer option that will allow you to optimize images are with local. But in all honesty, there are plugins that you can also use from what epistemically that can help you with this. Okay, Just a few more things to mention with you are the Connect button right here. This walk. Specifically if you're hosting our width WP Engine, you can easily transfer your files to WP Engine. You simply login with your oldest and then follow the prompts is very, very, very convenient. Unfortunately, it's only, there will be ending right now and that flow will, is partnered with hopefully in those future that will partner up with other very popular web hosting providers like an Cloud host and Alonso Cloud ways and siteground and so on. And then right here you have the add-ons again. You don't really need to walk with any of these. And then right here you have the GitHub button, and so on. Down here, of course you have the plus button to add a new site. If you want to optimize your account, you're going up good Two Pro or login to the hub if you want to. And then of course you have your menu buttons right here. You can add a new side. You can import a site as well. And you can also check for updates. Okay, let's go back to the blogger site and I wanna show you something very, very, very important. If you need to access the files that make up your website. I'm not talking about the database now. I'm talking about the actual files themselves. Right here underneath the name of your site, you will see this link, this arrow. You simply click in there. And this will take you to the folder containing local and all your files for your websites. And then from here you want to go to the app, open up public. And now right here you have access to the core files making up your WordPress websites. If you go to WP content, for example, right here, you will have access to your plugins, your themes folder, and so on. So if any, to access the files off your website locally, this is how you would do so. All right. If you more things, you can choose to stop at the website if you want to go on a break and resume later, is simply click on stop site right here. Now let me show you one not a very, very cool feature or with local writer, you can actually enable a live link for your site that will allow people to access it on the Internet. So right here where you have the live link, you can go ahead and I'll click on Enable. Okay? So what this does is that it's going to create a live link for your sign. I'm going to go ahead and click on Copy. And then I'm going to go back to my browser icon right here. And I'm going to paste and go. And right now you can see, I can now access my blog or website via the Internet. So if you ever need to access your site via the Internet, you can do so by creating a live link. But of course, keep in mind that you will need internet access in order to do so. Okay, I'm gonna go ahead now and stop everything. And if you want to delete your website or you've created, you simply re click right here on the name of your website. And then right here, you will have the Delete button. You can rename the button. So you can rename the side as well. You can clone the side, you can start the science, can open up the folder for your site as well, and so on and so forth. So that's pretty much how to install WordPress locally on your computer using local. Thank you for watching, and of course I will see you in the next class. 6. Adding SSL: Let's talk about some security and specifically how you can add something known as SSL to your website. Now you must be wondering, of course, what exactly is SSL? Let's take a look at my temper domain right here. I am using the Google Chrome browser Bob. Regardless of the browser you're using, you should see some sort of message up here where you have the Uriel and it for come. It's a is not secure. Never click on the button right there. It says. Your connection to this site. It's not secure. You should not enter any sensitive information on this side, for example, passwords or credit cards because it could be stolen by Attackers, Right? Okay, let's take a look at Amazon now. Instead of not secure, you can see this padlock right there, and if I click on it, it stays. Connection is secure your information, such as passwords, because it's privately and sent to this site. In other words, whenever you go to amazon dot com and you provide your critical details, that information is encrypted, meaning that if a hacker was somehow able to get their hands on your critical numbers, those numbers will be encrypted in such a way that the hacker would not be able to understand or really decrypt what those numbers are. Basically, In other words, your information is encrypted. It's secure, no one will be able to crack them. Unfortunately, on my site right here, if anyone came to this side right now and provided an email address or any kind of sensitive information, hackers will easily be able to steal that information. So this is where SSL comes into play. SSL basically is the protocol that encrypts all the information provided on your website. And it is extremely important because not only does it help to guarantee the safety off the information of your customers, your clients, but also such engines like Google would actually reward you if they see that. Okay, you're said is secure. Google and other search engines don't like sites that are not secure, so it's very, very important that you get as a sale on your side. So how exactly would you do this? Well again, let's go back to this side ground. Ah, see, panel. And now over here. But you have security gonna click in there and you have the SSL manager I'm gonna click on SSL manager and then I'm simply gonna choose the domain. In this case right now, it's going to be, of course, Alexander will seven. And then for the SSL, please go ahead and shoes. Let's encrypt. However, let's encrypt. While Kat means that Hey, if you create any sub domains from this main domain, those wants to will also have SS Also. In fact, it depends on you if you plan on creating sub domains from this main demand and, of course, used the encrypt wild card. But if you're saying hey, I'm not gonna create sub domains, I'm only going to use this one single domain. They could go with the Let's Encrypt. So just for the purposes of this video, choose, let's encrypt and that's it. I'm gonna go ahead and I'll click on get, and this may take a few seconds. It typically doesn't take too long, so let's just see all that fool like 10 seconds and if it hasn't finished in a post a video , but it should have completed in the next few seconds. OK, so it's Asia Request is being processed. Let's just wait for a few more seconds Come on, Come on, Come on, Come on. I really don't want to pause the video. Come on, Come on, come on. I'm just go ahead and close. Amazon. I'm not doing any shopping today. Uh, my Come on, come on, come on. All right. Maybe I might need Teoh pause the video, but it really doesn't usually take this long. I don't know buying. Maybe because it knows that we called in. Maybe I don't know. Oh, come on. Okay, I guess I'll just have to post the video and I'll resume once the process has up. But just as about the polls, the video it finished. Okay, so not it stays. Let's encrypt is now installed. Awesome. Now you could click on configure https. You can click in there, and this will take it to, like, a whole new tutorial where you can ensure that even though you're saying now is when it's a sell, your said actually loans the SSL. What I mean is that sometimes even though you've ended us a sell, your website may still not have recognized that fact as an example. Even though right now you can see it Say's over here. That the encrypt sort of get is active. If I go to my site, let's just refresh and see what happens Now you can see it's still saying not secure yet Still say not secure, not secure. So if you have this kind of situation, what you can do is you can go over to the very next have been here known as the H T T P s enforce. Basically, what this does is that it forces the website they even stole SSL on to run through. SSL is basically you laying down the hammer saying Hey, look what side I have installed SSL on you now run SSL basically right? So I'm going to go over here right now and simply turn it on right here. But you have STP and force. Let's go back to my site Let's refresh the page and now you can see that the status has changed. Now it's saying the connection is secure so you don't always have to do eight to DPS and force. Sometimes your domain will immediately accept SSL and start on an SSL. Other times it may not. So just in a situation where you're having this issue with SSL not not running civil. Come over to STP s and force and then turn on a T T. P s and four. So that's a full readiness itself. Thinking fortune, I will see you in the next class. 7. Creating a Web Mail Account: Oh, I want a final thing to mention before we continue Would be how to create a professional email account for your website. Obviously, if you're creating an e commerce store or your website is a business website, then you wanna have a riel business email address associated with you Account right. It's not gonna make sense for you to be using Gmail or Yahoo is just not gonna be professional. So how do you create a professional email accounts for your upset? Well, it's simple. We're gonna go over here to email in the back end. We're gonna click on accounts now, you cannot create a an email account with a temporary domain. So what I'll do here is I'm going to switch over to a real domain, which is the lone Imetal com, and not to create the account is very easy way I have the account name. I'm just gonna go ahead now and say, Ah, let's say Alex, Right, Alex, at the Loma dot com, I'm gonna go ahead now and add my password. Let's go ahead. Now click on create And there you go. We've easily created the email account. Now, how do you actually access your email account well over here. But you have actions. You can click on the three buttons right there and then you'll see Log into Web mail. You click on that, and this will take it like a whole new page and then automatically you have looked in. But there was a question, though. Do you now have to always look into sight ground and come over here before you can access your email account? Well, thankfully, no, you don't have to. However, there is a process will have to go through to make this And tapas is a lot easier. Here's the thing. Okay, I'm gonna go ahead now and simply Let's just quickly do this. I'm gonna go ahead now, grab. This year, they'll and I would just Let's go to loan them Atacama cape. This is my site. Now. Ideally, I could do something like this. I can just say ford slash and then Web mail, click enter. And then this You take me to the patriarch and actually look in. But how do we actually do this? Let's do this. Okay. I'm gonna go back to the American That's been open. I am going to grab everything right here. Wait. We have run. Cuba will grab everything over here. Let's copy this. Okay? Now, let's go back to you. The back end and I'm going to go over. It's where you have domain. And then on the domain, I'm going to go over to be directs. Okay? It's clicking there. Now what I'm gonna do is I have the domain selected along the metal calm. I'm gonna add four slash web mail, by the way, you can customize is like it. You can say email, email, account, whatever. It doesn't necessarily have to be Web mill, but I'm gonna use web 1,000,000 here. And then I'm going to paste or we copied right in here. Basically, I am telling, say, gonna hate whenever I access long no matter. Come four slash web mail. Take me to the email account is so seated with my website. Okay. Make sure this is such a prominent serial one going to go ahead now. Click on creates. And there you go. So now let's try this again. I'm gonna come in here for first a page and there you go. I have now automatically looked in as you can see, and I can actually look out from here. All I would need to be here is just to add my user name, my password, and I'm looked in. And there you go. It's as simple as that. And by the way, you can also use a different kind off email software. Basically, this is Round Cube. You can go back over here. Let's go back to accounts. And then over here, where you have actions where you have the three dots clicking there and you can go to the male configuration. Over here you have default Web mail. You can go with hoard, click and select right depth confirm. But then let's actually come back here and refresh. I'm not sure if Okay, this will still work. But you can come in here right now and change this one too. Heard, press, enter, and this will take. It is like a whole different eyes against right now, this is a different email software, and you can just log in using their impassive and so on. However, personally, though, I prefer using the Round Cube instead with the other hurts always come back in here and switch this back to the around Cuba in Cuba, I believe, is a lot better. It's a lot more easier to use. It was confirmed that and there you go. That's how to create a professional email account for your website. 8. Installing WooCommerce: all right, Now it is time to install will come us on our what press rep said. And if you don't know will come as well. It's quite possibly the best plugging you can use for building any kind of online store. So this is where we're gonna be using to build our store so I don't have to install the plug in and to do this, I'm gonna jump over here. I have my your fellow add ford slash WP desh admin. This is to look into the back. And of course, I've got my eyes on him Cool store and the peasant I used to install. What press? I'm gonna go ahead now and log in and OK, so to add will come ass plug in. I'm going to jump down to plug ins, click on add new, and then I'll just go ahead and add will come Us. Yeah, you go come out. So let's go ahead. Install now and let's go and activate the plug in. And OK, so this is the launch wizard full will commerce and in here you will have to fill in the necessary information. So where is your store based? Well my store is based in Vanuatu. You know what? I pride myself on being a world traveler. I've actually been to about 20 countries and I know drug or for pretty well. And I've never heard of a country called Vanuatu. This is pretty interesting. If you scroll down, you will see other countries like Wallis and Futuna. Well, listen, if you're watching this video and you're from Wallis and Fortuna or what? What's that one called? Or if you're from Vanuatu, Oliver. Comment. Okay, very, very much. Love to meet you and talk with you. Anyway, I'm gonna go ahead and choose the United States, and I'll just add an address in here. What? Committed to accept payments in U. S. Dollars? Of course. Whatever books do you plan to sell? I'm gonna sell physical products, Kate and all it will commis allowed tracking. Gonna click on. Let's go and all right, So what's next in here right now? You can begin to configure all payments, but what I'm gonna do right now is I'm going to turn these off for now. Don't worry. Let on all true exactly how you can configure all payment plans. Let's could continue and then shipping method is well again. I'm gonna turn all these off for now. Don't worry again. I will show you how you can create shipping methods for your products. I will check this as well. Let's hit. Continue. Now you may be watching about why am I turning all these off? Well, it's because I simply don't want you to get overwhelmed with how many features were installing and things like that. Don't worry. We'll take everything one step at a time. Same goes in here as well. I'm just gonna go ahead and turn all of this off. Let's hit. Continue, jetpack. Nope. We're not going to install jetpacks. L skip this step. All right. So in you, right now, you can add an email address where you can receive tips and products Form will come us out . Hello? Encourage that. You do so. So this will be my m alleges. I believe that as it is, and ah, that's pretty much what we've come to the end off the solution for common. So I'm just gonna go ahead and click on Visit Dashboard. And there you go. So you should see the Wu Commerce tab right? here and then all the available settings on the welcome us and then products as well. This will indicate that you have, in fact, installed woo commas correctly. So that's it. Germany. Vernon's video well will begin to conf Eagle Will Calmus. 9. WooCommerce Settings: well, come back. And it appears video was successfully installed. Woo commas on our website. Now what I'm gonna do is I'm gonna show you exactly how you can modify some of the settings , but then will come up. But before I do this, I'm just go ahead and close this message, asking me to install welcome us admin, and I'll just jump down here to welcome us. Go to set ins. Okay, So what do we have here? We have, general. So in here is where you can add the actual physical address for your store and in general options. Are you going to sell to all the countries, or are there specific countries you're only going to sell to? And then same refers to shipping as well. So in here you can choose which countries you would ship to which countries you would not. Ah, ship to default. Customer location. You have General Kate's shop base address and so on. I'll just recommended limit on jail located look easier that way. Now, the next to be options here depend primarily on you and your store, so you can enable tax rates and calculations if you want to. You can enable the use of coupon codes, which out Haley recommend, because every now and then you might want to launch like discount sales. And maybe if it's Easter, Christmas, black Friday sale, stuff like that. So you would need coupon codes for that. And then you can choose to calculate coupon coupon discounts. Sequential, which means if you have a customer who is looking enough to have more than one valid coupon , if it's going to be applied sequentially, the first couple will be applied to the full price, and then the second people will be applied to discount price and so on. Personally, I don't think they will be good for your business, so I would not recommend that you choose to Catholic coupon discounts. Sequential. In fact, keeping only one keeping could should be applied at a time. In my opinion, art and finally very currency options. All right, so United States dollar Ukrainian he lived near what have you So wherever your base you can choose your currency and then you can choose the current position and so on and so forth. Okay. Yeah. Now, products, shipping and payments will take a look at those a bit later. Let's go straight to accounts and privacy. Now, in here, you've got some really important options. First of all, by default, you've got the guest check out, and it stays. Allow customers to place orders without an account. So this would allow guest check checkouts, basically where someone could just coming place an order and then pay for the other. And that's that. You never get the details personally. Old recommend you do this because sometimes if you force cost must to create an account that might put them off. But again, Look, I'm not an expert in sales and markets, and so I guess you can play around with these options, right? And then you put a lower cost. Must look into an existing account. Doing check out? Yes. Allow costs. Must do so. Please allow customers to create an account. Do and check out. Absolutely. You want customers to build to create an account. This way you can get their email address and then you can later on in the future. Sent him emails advertising your latest products. Discount stores like that allow customers to create an account on the my account page. I don't think so because typically you want users who are looked in that these users already have an account to be able to access the my account page in the first place. So I will not check this box the next to I'll just leave those as they are. Account division requests Remove personal deter from orders on request. Yes, if a customer says, Hey, look, I'm done with you guys, I don't want you to have a personal data. Please diligence. It's up to its obligated that you actually are fulfilled their request. So, yes, we will remove personal data from others on request we move access to dollars on request as well, and then allow personal data to be removed in bulk from orders absolutely about privacy policy. I will strongly recommend that you create a privacy policy page that where you can tell your subscribers or customers walked your Boulis is are and whether or not they choose to accept it so you can create your page. And then this is exactly what you would choose the page. There'll be a science to your privacy page, so please do not forget to do. This is very, very important. All right. So my default, you've got some text provided, but welcome us for your I suppose administration and then check out. So if you needed to change anything in here, you have the option of doing so. And now over here we have the personal data retention. Very important. So first of all, we've got the retained in active accounts. What this means is, let's say, for example, a customer came in yesterday. They created an account that bought something, and then they never visit your site again. How long should do retain their account? Typically, I like to go with Warm year gave after one year, a customer hasn't returned to store. It's more than likely they'll never return. I'm just saying now, with 10 pending orders. So in this case, right now, maybe an order has been made, but they've not paid for it yet. So how long will it retain this typically outer commend three days. And the good thing is, you can actually target these kinds of customers. If you have, like mill champ or active campaign or something like that. You can target customers who have added items to their cart but haven't checked out yet. So this way you can give them three days to complete the orders or else it will be cancelled, then retained. Filled order. So in this typical scenario, maybe they tried to pay for the product and was declined. Maybe they have problems with that. They've been called the bank and so on. I'll go with one day, retained, canceled order. So maybe they made an order that canceled. I will go with one day as well, and then we tend complete completed orders. This will depend largely on whether or not you have a money back guarantee. So if you're gonna offer something like if it they back money currency. Although highly the command that you retain, the competent orders, let's say 3 to 1 our days after the order has made. So even if it happens between the first day that custom are paid for the product and then 30 days within which they can still with Tom the product, you'll have the order and all the details. So old. Hello. Recommend you use which tattoo 31. But hey, all this depends on your own personal choice. They don't know right along answers here, so please choose your options in here carefully. I'm gonna go ahead and save my changes. And let's jump down here to email. So an email will be sent to you all the customer any time they create a new account and in tentative, made an older things like that. So in here you can configure all the kinds of messages that will be sent to your customers when they perform are certain things. So, as an example, the 1st 3 right here is for you the admin service, IPI. And so whenever in new Order has been, please is an example. What kind of message do you get? You can click on manage. And then from here you can change the email address day to be sent to the subject the email head in, and then the email time You wanna go with HTML plain text. Now you will notice that in here you've got this tags. These are tags that provide certain kinds of information. So you've got site title that will be the title of your site, the order number, which of course, would be the order off. The number of other off the order has been made and so on. Let's go back. So in here let's school all the way down here. You've got the ones for the customers. So let's call down hits. Let's say new account. So what kind of message will they receive when they've created an account? Click on manage once again And then in here you can just customize this. Change the word in if you want to. Things like that. And then finally, perhaps even more important is down here where you have the foot to text. You can customize this. You can change the colors, add your head. Oh, image as well. Change the from name. So if it's something else you want to appear, you can simply come in here and edit. Now, question might have here is is there a way how we can actually modifying the body off the tens of messages that obviously the kinds of e mails of the sent and received And the answer is yes. In order to do this, you would need Teoh modify the templates. So you click in here right now. You can see right here. You've got the instructional right here. I would love to show you how to do this, but unfortunately it's beyond the scope off this particular course. So maybe in the future I might make a video on how you can are modifying these kinds of templates. Just let me know. So that's it for the e mails. Let's jump down, finally to advanced. You don't have to do much here except if you have in Terms and Conditions. Page, which is different from your carpet, is impulsive page. This is where you can choose the page. They'll be assigned to your terms and conditions and also by default. When you install and activate woke Hamas, the plug in it will create certain pages for you can see right now the court page check out my account. In fact, if you go over two pages right now, you will see the four default pages have been credit for. You are by who? Commerce. So that's it for the book sentence. Thank you for watching. Join me. The next class will will not take a look at Shippen 10. Shipping Zones: one major essential feature off any online store would be shipping now. Obviously, if you are selling virtual products like P D EFS audio files, MP threes, then you probably would not need shipping. But if you're selling physical products, whether it's electron, ICS, toys, books, clothes, shipping has to be in major park over your store. How else are you going to send it the items to your customers when they buy them? So we're going to do here is I'm gonna show you how you can configure all shipping primarily ship in zones. So let's go to welcome us. Go to settings. Let's come down here to ship in. All right. So by default he will have to add a shipping zone, which, and it's a geographic region where a certain set of shipping methods and rates apply. So in here right now, you've got examples you couldn't go with. The locals own us domestic zone, your abs owned and so on. Let's do this. I'm gonna click on add shipping zone now because my store is based in Maryland. What elders do here is I'll just say maybe lend local. All right, now, check this out. OK, the regions in here would be Maryland again. But then be sure that you choose Maryland United States all. Obviously, just make sure you choose in the actual city in the actual country that your store is in because, as you can see, right now, there are two different types of Maryland. You have Milan in Liberia, and then you have Maryland in the United States will be careful whenever you choose in your local region. Now, to make things even more precise, you can specify by ZIP codes. I don't know what state you're in, but some states can be very big. So like Texas or California. So if you wanted to specify by the zip code, just click on the link, waited that say's limited specific zip codes and then you can just type in the ZIP codes that would apply on the are Mylan local. But what I'm gonna do here is I'll just go with Maryland as it s so if you're in Maryland, anyone Maryland in your order on China on Adam, your shipping region would be our mail and United States. Okay, awesome. Next right now will be to add a shipping method so critically region. But then what? Shipping methods apply to this particular region. So let's click on add shipping method so any you've got the flat. Wait, you've got free shipping and you got local pick up. I'm gonna go straight to the local pickup because why not imagine if the customer lived down the street from here are stories they can always come by and pick up. What if paid full, we're gonna add an alert shipping method. And this would be free, Shippen. I'm gonna go ahead and do that. So just because customers who live well in the state of my store is I'm just given them this benefit. So, Hey, if it wasn't of male land and you buy things on my store, you can either come and pick them up or we can ship them to you for free again. This will depend heavily on your own choice as a store on our. So be careful whenever you choose this shipment methods. All right, so that's it. Full male and local. But I'm gonna do right now is to go back to the shipping zones. So I've got Maryland local, So next right now would be for the rest off the United States. So I'm gonna add shipping zone and his own name right There would be United States. Alright. And then, of course, the region's here would be United States. All right, so just choose United States shipping methods. I'm gonna go ahead now and add a flat. Wait, Let let's add that. And now we have a flat rate. I can click on edit right here. Second See right there is gonna be taxable or non taxable it. This depends on you. I'll go with non, and then the costs right here is going to be 99 tonight. So it doesn't matter when in that state you in. I'm gonna charge you $10 for shipping. You can change them of the title. By the way, I'll just changes to United States. Flat weight save changes. Awesome. Okay, let's go back to our shipping zones. So if taken care of Maryland local, then the United States, I'm gonna add 1/3 shipping zone. And this will be for Canada and Medical Mexico. Let's like the region's I'm gonna go with Canada, save in Canada, and you're in Mexico. You will get a defense Shippen's in because it's closer to the United States, these two countries across the United States and any other country in the world. So we're gonna go ahead now and add shipping method will go with a flat rate again. But this time I'm gonna make this $24.99 because it's a bit farther away from the rest of United States. So we'll go to the 4th 19 9 known Tex Able and then the Method title. We can call this Canada, Canada and Mexico Flint late. Let's save a changes And there you go. All right, So finally down here by default e skin. See, we have the locations not covered by all the zones. So this would apply to every other country or region that doesn't fall on the anyone of this three. You can, of course, add as many zones as you want. You can add an African zone Asia zone, UAB zone and so on. And then finally, for the rest of the countries that don't fall on the any of yours, and you can just come down here and add the shipping method. So click on the manage shipping methods right here add shipping method, flat weights. And of course, this will be the most expensive. Obviously. Are those cold? Is the international flood late? It's known Tex able, and we'll go with our How much? Who I haven't thought about this, uh, was going 39 99 Billa's, I guess. Safe changes. And there you go. So awesome. We've created four different shipping zones. We have mail and local. We have the United States. We have Canada and Mexico and then we have the rest off the world. Essentially awesome. Now, before I round this up specifically for male and local, you can see we have free shipping for them, which is great. But what if we wanted to offer free shipping to the rest of our customers within the United States? As long as they've purchased a certain amount off items, we can do this. All right, I'm going to go back to United States, click on edit, and then from here, I'm gonna add another shipping method. I'm gonna go with the free Shippen. Okay? Now I will go ahead and add it. The first ship in and now over here, you can say for shipping requires And now in here You've got the options. Maybe it's a valid for shipping coupon. A minimum order moment, minimum order amount or a coupon minimum order amounts and a coupon. I'm gonna make this very simple. Will go with a minimum order amount. And that amount must be ah 100 U. S. Dollars. So animal within the US if there by Adams Water $100 they will get free shipping. So I was gonna go ahead ad that so, Phil, free to create as many shipping zones as you want. You can add your flat ladies you can add for shipping and then determine. Okay, Well, if you and Africa and you buy items worth of $1000 you're going to get free shipping and so on. So take your time organizer shipping zones, add the shipping methods and then join me in the next class where I will now introduce you to shipping Colossus 11. Shipping Classes: welcome back. And the people's video is successfully created our shipping zones, and we also added shipping methods for those owns. But what I'm gonna do right here is to introduce you to the concept off shipping classes. La la one of those classes. And why do we need them? Let's go over to amazon dot com Now I tempting cups. Okay. And as you can see, right now, we have different kinds of cops, right? We have plus two cups. We have glass cups as well. Hughes, the thin right. Imagine you were selling cops on your store glass cops and plastic cups. And not the same. If you were going to ship a glass cup, it probably would be more expensive. That ship in a plastic cup. Why? Well, because glass cops are fragile. They break easily. Plastic cups. You can bang them on the floor. Old a long They're not gonna break. Go with a glass cup. You cannot do that. So we're gonna sheep. A glass cop. It might be more expensive to do so as opposed to ship in a plastic cup. So ideally, you want away how you can attach an extra price on extra fee when your ship in such delicate products. This is exactly where shipping classes come into play. It's not just about fragility. Okay, let's take Let's take a look at electronic sets An example. If you're gonna ship a laptop, it will be more expensive than shipping. Let's say ah, mouse or keyboard. Right. So there has to be a way how you can attach extra shipping costs based on how valuable a particular item is. This is exactly where ship in classes come into play. So let me show you how you can creature classes in here right now. You can see we've got the shipping classes. I'm gonna click right there. Now it stays. No shipping classes have been created. Okay, let's go ahead and add all shipping class shipping, class name. I'm gonna name this Delic aides who this log, what is going delicate as well. And now description. Okay, since my story is a clothing store, I was gonna go ahead and say, Ah, jewelry and let's say watches. So these are like, really expensive stuff. So Julian watches. Let's go ahead and save that shipping class and not from him going to go back to my shipping zones to apply. This particular shipping class will skip mill and local. For now, let's go straight to United States. Click on edit. We're going to go ahead now and edit the flat rate as well. And now you can see that because we've created are Delic eight shipping class. We now have a special section where we can now add shipping class costs for the delicate shipping class and then are items that do not have a shipping class associated with them. So very quickly, I will just come in here and add 9 19 9 because items that don't have a shipping cloths are essentially the same items that we originally intended to ship for for 9 99 right? So we don't need to add any cost in here anymore. However, over here, where you have the delicate shipping class cost find you can come in him and just say, 20 bucks, right? So any item that is a delicate will charge $20 for shipping. However, what if your customer ordered 56 items that are special or Delic eight. Would you just charge one single fee for all of them? I don't think so. Introducing advanced costs now in here. This is from the welcome US documentation. Excellent. Excellent accommodation, by the way. Now in here, you have examples of how you can charge based on the quantity based on the minimum fee and so on. So you can see we have two major examples in here. The 1st 1 here charges a based shipping cost and then an additional cost for every item in the cart. The second, which I feel is a bit more complicated, will charge a base shipping cost and then plus a percentage of the order total, which is at least a certain amount of money. I'm just gonna go ahead and grab the first option because I like it. It's very simple. Let's copy that. Come over here and paste this. So we're gonna charge $10 as a base shipping fee for every item that isn't delicate class and then $2 extra for every additional item that is under the delicate shipping class. Makes sense. I hope so. I'll just make some changes in here. We'll go with 20 bucks and then for dollars additional. And now finally, down here, you've got the calculation type. What happens if your customer bought items from more than one class? How would you apply, or how the calculated off of all shipping cost? You've got two options for class or order that class implements. You'll chuck shipping for its shipping class individually order your check shipping by simply choosing the most expensive shipping class. I like the first option, but hey, feel free to choose whatever options suits your needs. So that's it. I'm gonna go ahead now and save my changes. And we've successfully applied the shipping class off delicate to United States flat. Wait, let's go back to a shipping zones and I have a small queens for you. Now take a look at male invites mainland basically well, offering local pick up, which is fine for all kinds of items and then for shipping. Now are you willing to offer for shipping to all your customers within Mabel? And even if they purchased an item, that's Delic. Eight. I don't think so. You want to charge just a little bit extra for items that fall on the special class and then ship them to your customers. We then are you look origin. So my question here. Is this OK? How can you create a shipping system or a class where you can charge a certain amount of money for customers within your local regional order? Special items on the special classes and yet, at the same time, be able to offer for a ship in to your customers within your local region who order the Regula I temps Bam, bam, bam bam! It's actually not that complicated. So you compose the listen right here, think for a few minutes and try to solve this puzzle going once, going twice and now I'm gonna show you exactly how you conduce this. It's very, very simple. Let's go back to Maryland. Local click on edit and what I'm gonna do right here is I'm just gonna go ahead and delete free shipping. No more free shipping. But however, I'm gonna add a new shipping method, it's gonna be flat waits. Let's go ahead and add that. Let's go ahead now and any off luck rates and you go. So no shipping class cost Well, zero is gonna be free for them. But then the delicate shipping class costs. I'll just go ahead and paste what I copied initially, and we can reduce this, say, $5 then $2 additional for every extra item under the special class. And this is how you can create such a shipping system. Really? Kinship items that all regula for free to your customers within your local region and then charge extra if they paid for items that are delegate safe changes. And there you go. So take some time out. Now to properly craft the shipping zones. You're shipping classes and before, around this up, let's just take a look at shipping options. Not too much here. Calculations enable the shipping chocolates on the court page. Yes, our high shipping costs until I'm addresses. Entered. Yeah, why not? Ah, shipping destination. You can default to the cosmos shipping address, but an address It's up to you. Do not enable debug mode, please. You demanded It is like I just live this on check as it is. Okay, so that's it for the shipping classes. I hope you enjoy the hope. You learned a lot in this particular lesson. And I hope you ordered your plastic cups from Amazon. I'm just kidding. Thank you so much fortune. I will see you in the next class. 12. Populating Content: Okay, so now that we've got shipping all sort of doubt, it's time to start creating our products. And, ah, just to let you know, I already have all these images in my media library. These are images I got online for free. These are free images to use. Now, if you want to use this exact same images that I have used right here, I will provide you with a link in the description box onto the sources. Look for is a folder called Will Comus Images or something like that. You can extract what I can download the zip file, extract old images in sight, and then you can download images into your media library so you can have access to all these images. However, if you do have your own images, you're more than welcome to use yours. But moving forward, we're gonna start creating products, so it's essential that you have your images. So either way have images in your media library and German Avonex video available. Start creating our products 13. Creating a Simple Product: okay. It is now time to create our very first product. So let's do this together. I'm gonna jump down here to products, and I'm gonna click on add new on the very first birth I'm gonna create would be Ah, watch. Okay, so let's call this the cool watch. And now in here, I'm gonna add a description. And it's a It's a high end luxury wristwatch guaranteed to make you stand out lalai. Okay, so let's cool down here to the right. On the product categories, I'm gonna click on add new category and I'll cold his watches. All right, so we have a category for watches. Let's add that. And then over here on the put tags, uh, I'm gonna add watches as a tag men, because this particular product is for men and ah, luxury. So if anyone searches with the tags, watches, man, luxury, these particular attempt will pop out. So let's go down here. Put out image. I'm gonna go to my media library, and you can see right now I've got some images off my watch is I'm gonna go ahead and choose this one right here. Set that as a plucked image And over here you have the product gallery images. This is grateful, showcasing the exact same put but from different angles. So just go ahead and choose this one and then this one as well. It's not exactly the same watch, but you get the idea. Gonna add that to the gallery. Awesome. Okay, now, on the product data in here, you can see the different kinds of perks available over creating a simple product at this time. So stupid, simple product. No, the regular price. Well, let's go ahead and cold is 99 dollars. 99 cents actually, wait a minute. This is a high end luxury wristwatch, but they're going to sell that for 99 bucks. Let's go all the way to 1999 U. S. Dollars. That's right, button. So chip watches here. We sell on leave expensive luxury watches. Okay, so basically $2000 for this particular watch, let's go to adventurously. Now, in here, you can add the SK you, which is called the our stock keeping unit. So however you want to manage this, it's entirely up to you. I'm just gonna go ahead and type in cool watch. There will be the SK you. And now you can click this books where that you manage your stock, I'll check the box. So for men, right now, you can determine how Maney, you haven't quantity. So in here, I'll say we have our 10. Now, do you won't allow back orders or know what this means is allow customers to order the part even if your at off stock this is a high end parts. I'm not going allow back orders and then low stock threshold when the number of items in your stock which this particular value right here you will receive an email from a coma saying, Hey, this particular product is running low on stock. Maybe it's time to replenish it. So, too, is the default right here. But I'll go up to three in case so won't really have three cool watches and stock. We will get an email saying, Hey, look, you know, you were not off. Start to get some more cool watches. All right, now, over here. Sold individually. You can choose to allow this item to be bought in a single order only. So this is entirely up to you. I'll live that as it is in a jam down here to ship in. So the weights. Let's go ahead and call this. Ah, £1 maybe £1. Like and then let's see. Dimensions isn't There's no damage. I'm sorry. Ounces, right. Those that this ounces, not pounds. I'm sorry, actually. Don't know exactly how to measure ounces, so we'll just have three ounces. All right, You feel for the change that to match your particular kind off product, Not shipping class off course. We're gonna go with delicate because this is a high end luxury items. So we've got the wage. We've got the shipping class. Awesome. Now linked products will take a look at this a bit later and then attributes and advanced. I'm sorry, actually puts in particular, this will be used for variable put up. So we'll take a look at this later and then advance that you can add a pro chase note. So whenever anyone buys this particular product, that will receive a personalized note from you, So because it's something like, Ah, great choice. You are going to get the attention off the ladies, okay? And then you get enable reviews all disabled reviews. It's up to you. All right. Finally, you have the get more options. In here, you have extensions of all comers with which you can use to expand and includes the functionality of your site. Unfortunately, most of them are paid for. So I'm not really gonna go into this. We'll talk about a few extensions, are a bit later, okay? And then finally down here, you can add a short description of the product. So what I will do is out of grab this one right here. Copy that. Jump down here and paste. That's all right. Feel free to add your own descriptions. I will school back up and ah, that is that I'm gonna go ahead now and publish. So let's see, that's published. Cool. Now we can view the product. So let's go ahead. Hit view product. And there you go. The cool watch. 1900 ingenuous dollars. It's a high end luxury restored, Going to make you stand out 10 and stock Awesome. And you can see the description right there. The tags category. And then, of course, we have the images as well. You can click right there. And I'm not bad. Not bad at all. Now, obviously, I know the site looks really, really bad. Don't worry. We're gonna work on the design much later. But that's how to create a simple product with walk. Almost. Thank you for watching John Independence Video available. Now. Create a variable product. I will see you then. 14. Creating Variable Products: Okay, so the viewers lesson was successfully added our very first simple product, which was the cool watch. But now let's take a look at how we can add variable products. But what are available products? Let's jump over here to Calvin Klein. Now on the coven. Cleanse men's T shirts. You can see we have our different styles. We have to Cunek sweatshirt. We have different kinds of fits leave, land pattern, collar size and so on. These are basically variations off men's T shirts sold by Calvin Klein. So how exactly? Company add our own variations to our products. Pretty simple. And I'm gonna show you Let's go back to a back end. Let's jump down here to products click on Add New. Now we're gonna creates a new product which will be the hoodie. So called is the ninja, the ninja hoodie. And I'll just call this classic Hoody full guys. Okay, let's jump down here at a new category, which would be the hoodie. And you can agree at the tags as well. Who? These man? Ah, classic ninja. All right, cool. Now over here, where you have the perfect date. I'm gonna change this to valuable productor case clicking there. Now you can see we can add our SK use or just cold is the Nen hoodie has the SK You are managed stock again. I'll do the exact same things. Took a quantity. We have 100. Allow back orders. Yes, we can allow backers bubble notifying the customer. Ah, loose talk threshold will go with 12 in this case right now shipping. There is no shipping class because it's just a regula piece of clothes. Ah, the weights will live that as it is dimensions again. We live that as it is because we're going to create different sciences for these particular kinds of who these are. So let's go now to attributes. All right, now in here. This is where we could be begin to add the different kinds of attributes for this particular hoody. Now, before I do this, let me just jump over here to to put out the image So you can see actually what I'm trying to create here in my media library can see right now I do have the hoodie thing. This is the ninja who deep so you can see we've got two different types the one that's red and the one that's our great All right, I'm gonna choose the ones with as the main product image, so we'll set that and then I'll just go ahead and add some other public gallery images. So just choose this one. She's the great as well, and then choose the back of you for the red one. That's at that to the gallery. Awesome! Cool Now custom put attributes. Let's go ahead now and add the very 1st 1 And the 1st 1 here is going to be color. Okay, now, in here we can add the values for the color. And then we can separate use in this particular icon right there. So the very 1st 1 A is gonna be read. Let's add a symbol and then agree. So these are the two different values that we have for color. Make sure used for violations. Is checked to click in there, Save the attributes. Cool. Let's go ahead and add another one. And this one would be size obviously used for affiliations. And now we're gonna add small ah, medium and then large. But then, of course, you can add UAL extra small, extra large, extra, extra large, super extra large. It's up to you. We'll just go ahead and save my attributes. Awesome. So we now have to. Actually, it's for our hoodies. We have the colors, and then we have the size. Great. Now jump over to variations. And then over here, there you have the job down, click on, create Vivier shins from all attributes. Well, this is going to do is it's gonna create innovation for small and red, small and white, medium and weird medium and and, uh and great. I'm sorry and then launched and red, large and gray. That's exactly what the deviations are. So let's go ahead. Click on Go and then it will say Yes. Yes, yes. Click. OK, and now six variations have been added. Awesome. So now you can see red, small but medium at large Grace Margaret Mead. Um, great. Large. Pretty awesome. Now, for each individual item of aviation right in here, you have to drop down. You can click in there, and now you can add a particular image specific for this particular variation. You can add us, Qiyue. And then very importantly, over here you can add your variation price, and it is actually required. So I'll just go ahead and make this $9. 99 cents. Uh, wait. Here we can go with maybe five ounces dimensions and inches. I don't know. Let's go with 15. A 10 22 may be okay. And in shipping classic and you can set specific at classes for each variation. I'll just stick with the parents because it's a regula item description. You can just call this the small Red Ninja. Ah, hoodie for for guys. All right, so that's that for the small and red outlanders. Go ahead now and save my changes. Okay. And then finally, Linda's jump down here and add the short description. I'll just grab this one again because I'm lazy and they'll come down here and then paste. It's OK. So we've added price in full, only one kind of variation. So let's see what happens. Like I'm gonna go ahead now and publish this. Okay, Now, let's view the product and see what we have. Okay. Now, ninja hoodie. Awesome. Now, collar, you can see the after is an option which is just read for the color and then size, which is just small so they can only choose red and small because we added price and specifically for the small and red variation. So before all the variations can appear unit to set pricing for all of them. So what you need to do is to go back to edit products and I'll just do one very quickly. Let's go back to the deviations. Alright, so I've done a bit small. Let me do great and large is an example. Okay, so let's just quickly do this. Is Jim down here? Ah, great and large. Well, maybe we'll make this 10 99 because it slightly bigger weight in ounces will just go with three ounces. Ah, description. Again, I'll just call this gray lodge, uh, ninja hoodie for guys. What else do we need to add? I think that's pretty much it. Okay, let's go ahead. Save changes for the variation. Let's cold back up in here update and OK, now, let's go ahead and view the products. Okay. Now for the cola, you can see that we now have gray available And then for the size, we now have launch available because we credited variation specifically for great and large So that is, It was successfully are created. Our very first are variable product. So if you have any questions, as always do let me know. I'll try my very best to answer them. That's it. Thank you so much for watching. And I will see you next class. 15. Creating a Grouped Product: welcome back and in a previous video was successfully created off first variable product, which was the ninja hoodie. And now you can see that it is different from the other two items because it say's select options and not odd to caught. You may be wondering, Wait a minute. Where did the woo hoo he come from? Well, I just created this off screen, so this is a simple poor that I just created. It's similar to the Ninja hoodie, but now it's a regular classic hoodie with the twist for guys. It's a Level 99 you can pause the video, go ahead and create your own are, well, Hoody. If you're falling along now, why exactly did I create this new hoody? Well, I did so because I want to show you in you kind of product you can create, known as a group product. Now the question is under what circumstance would make sense to create grouped products? Well, now, in here, you can see we've got two different kinds of who needs. We have the ninja hoodie, and we have the wou d. But at the end of the day, their hoodies writer just different styles. So you may want to create a group floor docked around hoodies like this or other similar items or parts that you might be selling. So this could be toys. It could be bags, electron ICS. It all depends on the story you're building. So let me show you how you can group of these guys together. Let's go to the back end. And, as usual, I'm going to go down to products, click on at New. And now, for the put a name, I'm gonna call this very simply hoodie choose hoodie as the category and then it sags. I'll go with hoodie on, then men, okay. And then the image I'll just go ahead and choose any one of the images that we have for the hoodie. I'll choose this one right here. Said that. And then for the gallery, I'll go ahead and choose all the images for my hoodies. Let's choose this one. This one, this one, this one and that one. Let's go ahead. Ad that gallery. Awesome. Now description. Who? These four men Very, very, very simple. Down here again. Hootie's full men. Okay, now, over here, where you have put a data. I'm gonna switch this from simple to grouped. Tsk. You. Ah, who d I guess Now linked products click on link products are now over here. You can search for every product that feeds this particular kind off group. They're gonna click inside, and now I'm going to search for who. So that's the 1st 1 Ninja hoodie. And then who again? Hoodie. There you go. So let's simply go ahead now and we can publish this. So hit publish. And there you go. So now let's go ahead now and view the product. And there you go. So now you can see who this For men, you can see the range in price in 1990 11 99. And now you can see all the different kinds off products on the group. Put off hoodie. You can see we've got the the ninja hoodie my guys disrupts. It looks really bad. Don't worry. We're gonna fix the design producing, and then you can see we've got the wu hoodie as well. And in fact, if I view the store by coming here, let's go to cool store visits store. If I visit the store right now, let's scroll down just a bit now. In here, you can see we have the ninja hoodie. That's a select options. This is available. Product articles are for civil products, but then a group bullet will tell you view products so that this way, you know, you have several items on on this particular category. So using group put it is a great way to categorise similar items or put up on the one general categories. So this is where are creating good products will be very, very useful for your online store. So that's it. Germany Avonex video, where I will now introduce you to the concept off up cells and cross cells. 16. Upsells and Crosssells: well, come back. And as you can see right now, I have added two new items. First, we've got the cool place. Let's which you can see is a variable products. I actually created four different variations for the column. We have black, blue, brown and red, all having different are pricing. And then I have added the Crow Rolex watch, which is obviously a rip off of the regular Rolex watch. But you can see right now it is a watch fit for a king, and it's about $3000. So this is even more expensive then the cool watch. Now, why did I add these two items? Will, Yeah, I added them because I want to demonstrate to you the concept off up cells and cross cells . Now, let's use the cool watch. As an example, I'm gonna click on cool watch. I'm gonna go to edit products. And now down here, where you have linked products, I'm gonna click inside Now, in here you have up cells and cross sell. So what's the difference between this too? Well, these are primarily used for marketing purposes and advertising, basically and obsolete is essentially an item you would promote to your customer when he or she wants to buy another item. However, the OpSail is usually off better quality and may be more expensive than the item that currently looking at. So it's like a look at this, right? The obsolete, obviously here for the cool watch is going to be the crow Rolex, because now you can upgrade from a luxury watch to watch. That's fitful King. So I'm gonna add that. And now across cell usually is an item that will complemented the item that the custom are currently wants to buy. So in this case, for a watch right now, you could add maybe a pair of shades or in this case bracelets. All right, so the cross still here is gonna be the bracelets. So that's the cool bracelets. Also, just choose that now. The other difference between these two is where they will be shown. Basically, the Upsell will be shown right after just below the actual product page for the particular item the customers to buy, and then the cost that will be displayed at the check out pay. So let me just show you how these two would work. I'm gonna go ahead now and updates this too. So we have the collects for the our Upsell and then the bracelet as the Corso. Okay, that's view that product. Cool. Watch. Now, if I scroll down here on the product page, you can see we now have the Upsell. You may also like the collects watch. So this is exactly how the OpSail works in my school. Further down we have. But that's okay. Well, this isn't really what we're talking about. I'm gonna go ahead now and just add the cool watch to my cart, Okay? Right now, I'm gonna go ahead now and view the caught. And now if I school down here, you can see it. Say's You may be interested in the cool Blace. Let's So this is exactly how the op cells and cross cells walk up. Cells are meant to promote April that superior off better quality to the one that cause most by and then the cross cells are items that compli ment the item that the customer wants to buy. That's the difference. And of course, up cells will appear on the main product page while for sales will appear at the check out paid for that particular product. So that's how are the are up cells and Corso's work with comma. So be very, very smart. Whenever you add in the op cells and course cells for each one off your put, you can make a lot of money. But I've been very smart with how you are saying course cells and obstacles to your coin products. So that's it for cross cells and up. So thank you for watching. I will see you in the next class. 17. Assignment: before we move any further, it is time for a quick assignment. And what I want you to do right now is to create as many products as you possibly can. Who ate simple products Babel put up to put up. You have the images right here. If they use in mind, you have more than enough. And not just for guys. Because you can see for the latest we have genes. We have blouses. We have bags, purses, shoes. So, personally, I'm gonna go ahead now and I'm gonna create as many put us as I possibly can, because it is time to really populates are stole with as many products as possible. If you're using your images, please go ahead. Create as many as you can and enjoyment very next section where we will not begin to talk about payment gateways. I'll see you then. 18. Setting up Paypal: well, come back and is against. See, Right now I have done in the Senate I just gave you, which is to create new products. And, as you can see, an hour have about 18 of them, have got bracelets and got blouses, jeans, blazers, sweaters, shoes, bags, necklaces and so much more. So hopefully you have don't have the exact same thing. What I want to do this lesson is to show you how you can accept payment via up him and get with because it's not gonna make any sense if you have all these wonderful products to sell and your customers don't have a way off pain you. So let's jump over here to the back and go to woo commas, go to settings and then from cities, we're going to go all the way to payments. Okay, so do we have here already enabled Derek bank transfer. This would be ideal if you'll live in a country where online payments and exactly possible . So you could have customers pay into your bank account. So you're gonna turn is on, enable it jumbled ahead to sit up, will manage and an inhaled after agile account. Name your account number, bank them and old is good stuff. And then you can add your instruction so you could say something like once the customer has made the payments and the bank that they can get the one seed they then against scan the receipt and send it to you via email and then you can send them. Ah, the positive paid for. That's one way how this can work. You also have the option off getting check payments as well. And then you have cash on delivery. So a customer makes an order once the ordered or the item has been delivered to them, then they can pay in cash. That's one thing you could do a swell if you cannot accept payments on line. And then finally, we've got the pay power. So let me show you how you can set this up. Just click on set up. It is actually very easy now. Inhale Yona enable papal standard title. You can change the description. Add your PayPal email in here Now, obviously you do need to have a PayPal account. Okay? There's no way how you can accept payments via paypal if you don't have a PayPal account is very easy to quit. PayPal account. Now, over here, you've got the advanced options, and specifically you can enable something known as the PayPal sand box where you can test full payments. I don't spend time walking through how you can do this. It's actually easy. You'd go to a developer, the people that comb create some test accounts and then you can try to see if the payments go through. If you don't want to do the papal sandbox testing what you can do for actual real tested Ares once you've configured people completely, you can change the president of your items, make it ridiculously cheap and be like one sent two cents and then use an actual real debit card to pay for it and see if the payment goes through. That quite possibly one of the most reliable ways. How you can test if people actually walks on your site So any you've got the receiver, Our email. So that's admin at store that Kelowna income come from me can change this. You don't need to change anything in here. Everything is fine as it is. And finally, of course, you're gonna need your FBI credentials. We're gonna need your life. Appear user Name the passengers. Well, there is a link right here where you can get your paperwork within shells. You can just click on the link and ah, we'll be careful. This actually takes you away from your sites. Did not know that. So let's open that in a new tab so you can click on the link. Open it and in Hey, Dole. Sure exactly how you can get your MP I our signatures. It's it's relatively straightforward, So that's basically how you can configure all our pay Pau Jumping Defendants video. I'll show you how you can accept him and buyout stripe. 19. Setting up Stripe: welcome back and in the people's lesson was successfully set up PayPal on our side. Now, before I show you how to configure, will stripe, let's do some testing. Okay, Let's see if people actually works. Now I'm gonna drag in Firefox in here and you can see I'm locked out. It is the same site. Let's pretend I am a buyer Who wants to buy the cool blazer. So I'm gonna click on this and Ah, let's add Teoh caught. Let's view the carts. Let's ah, check out, Proceed to check out. Okay, Now, I already feel this information out before that's where you can see I've got my first name , last name, country and all that stuff. So the customer obviously would also do the simple at first name the last name address Town , country on all that. Now you will also notice that because we chose Buenos Aires as Richards, Argentina as a country, Rukum Azaz automatically applied the international flat weight off 39 99 cents. So the shipping actually works properly, which is good Now over here you can see papal. Alright, it'll say is pay via PayPal. You can pay with a credit card. If you don't have a PayPal account, I'm gonna click on. Proceed to PayPal. Now, let's see what happens. Ah, let's see. Uh, okay, I'm just quickly changed this to Australia, so we don't have to read spanish. Okay, so right now, you can see the papal is often the option for the customer to log in if they do have a people account. But if they don't have an account, they can simply pay with a credit card or debit card, as you can see, so the payment works properly. As you can see, the structure is there, and I'm very, very happy about that. Awesome. Okay, Lemon, just drag this away. Let's now go back to our woo commas. Let's jump down here to extensions. Now, exceptions are simply plug ins that can enhance the functionality off your site. That's what they're called extensions. So in here, you can see the different kinds off our categories of this extensions. You've got enhancements, which is mostly designed. You've got those of the free you've got from marketing payments and so on. I'm gonna click on payments. All right, Now, in here, you would notice that there are additional papal plug ins available. Quite a few of them, actually the one old were command. If were to go for any one of these would be the papal bull. You have to pay for it. So I think it's about $79. But the advantage of papal pro is the fact that customers would never have to leave your site to go to PayPal. In the lets you make their payment, they will just get on the check out page ad the critical information right there. And everything is done on your site. There will never be redirected to PayPal. So it make the check out process a lot smoother. A lot more professional out Heller committee. Do this. Once you start making some cells and you feel like, yes, my story is doing well. I can invest in so paid plug ins. I had a commanding go with the PayPal, our pool. All right, that's it for people cope. Let's now install strips. You can see I've got striped right here, So I'm gonna click on stripe. So this will take you to the woke a monster com page from here. Just simply go to download. Now it's free bite of it, which is awesome. No, I've been automatically locked in, which is good. But if you don't have an account with walkers dot com, you'll have to create an account with them. In fact, let me just try and log out so I can show you the actual process. Eso them just go back here. But power Go back to work. Cameras go to sit ins. Not certain extensions. Sorry. Extensions. Go to you. Payments good to Streib. Okay, so I'm looked at. All right, so this is exactly what you need to do. Click on download now. Okay. And then this will take you to the check out its lugging me and automatically even already looked out. Let me try and refresh this page. Ah, OK. All right. It's very, very simple. You wanted to have an account with what? Press dot com. Okay, so if you're not look that you'll take it to a page where you either have to create an account with what president come, or if you have an account with them, you will just simply log in. It's very, very straightforward. It's nothing to worry about. So once you looked in you will see this exact same kind of page. Just click on per chase, and then you will be provided the download link. So it's very, very easy. Don't be worried about this. OK, so that's it. It's confirmed. Now, I just need to click on download right here. Clinton download. And now I'm gonna go ahead now and simply installed this strike plug in on my website, much as you can see right now, it's called the woke Hamas Gateway stripe. I have installed it. Now I'm gonna go ahead and click on Activate the plug in. Awesome. Now I'm gonna go back to welcome us. Go to settings. And then, of course, I'll go to payments. And now you can see that we have all different kinds of stripe features available. Allah, the only one we're interested in is the actual main stripe itself. It is the one right here. So I'm going to click on enable first. And then let's go ahead now and hit. Set up now. Obviously again, you would need a stripe account. All right. It's very, very easy. Just go to strip dot com and get your account with them. You can see right now, this is my stripe account. And Ah, well, expert expected payout $0. So I'm a very, very poor fellow, but I would have a command. You get straight because the more payment get with you have the better for you. Remember that Not every customer will have access to PayPal. Not every Cosmo would want to use people to make their payments. So the more options you provide your clients to make payment, the better for you. Let's go back to Wu Comus. And there's a message here. We recently made changes to struggle may impact their principal check out. Ah, don't worry about that. Let's close this close. Okay? All right. So what do we have here? Enable dissemble strip and noble strip. Obviously tattle. Credit cards, triumph. You can change the description of you want to in here right now, you've got the test mode by default enabled. So you can either go with a testament if you want to, or you can simply just uncheck this and then you would need to add the life publishable key and the live secret key. Another force trip to actually work from your strip account. If you jump down here to our developers, and then you click on a P I keys right here. This is where you can get your publishable key and then your secret key so you can just grab this to ones. In fact, I'm just do this. I'm going to go ahead and grab my publishable key, let me paste that wait there and then I will get my secret key as well. Jump over here and paste that cape in here. You have the option of enabling the in line credit card form, which say's that Choose the style you want to show for credit card form, went and checked the credit card from will display separate credit card number, field experience it filled and see the CBC field. So this depends on your style, I guess. I mean, it's really actually opt out. I'll just leave this on checked as it is. And for the rest, there is nothing. You don't need to change anything in here. I'll just leave everything as it is. Let's go ahead now and save our changes. And ah, there you go. OK, so it is live. It is active. So now I'm going to go back and bring in Firefox. So from the papal page, let's go back to the actual check out page. Okay, so that's check out. Let's refresh this page and there you go. So now you can see that credit card strip is now available so the customer can choose to pay with stripe. And there you go. Now they can out the card number and expiry date, and then they called code, and then they can place their order. So papal walk strap works and, just like with PayPal out, recommend that if you're gonna accept payments with stripe, do the exact same thing for PayPal. Make sure that you can change what I change the price of one of your items to maybe two cents and then try pain for that particular item using strip and and see if you actually received the cash. That's one of the best ways how you can test for our striped payments. So that's it's for configuring stripe. Thank you so much for watching. And of course I will see the next class 20. Testing Payments: welcome back, and in the people's lesson, we successfully set up stripe. However, I forgot to mention add in the Web hook and point over here on the stripe. If you look at this, it's a Z. You must add the following Web hook and point. This will enable you to Reese identifications on the charge status. Eso There's something I forgot to mention the people's lesson. So let me demonstrate to you how you can actually add this'll is our endpoint. And it's important because you want to receive notifications whenever new payments have been made. So to do this, I'm gonna go ahead. I'm gonna grab this rebel right here. Let's copy that. And then I'm gonna go to my strap account. I'm going to jump down here to developers and then on the developers, you will see a P I I'm sorry. Out Web hooks gonna click on left hooks And now in here I'm gonna click on add and points And now I'll just go ahead and paste the u of l. I can change the version to the little latest FBI version Now in here are the events to send. What would you like to be notified about. There's quite a bunch of them from accounts to balance to. Capability is charged, so you can go in something like charge captured as an example. Let's go for down. You've got the charge off dated charge succeeded. You can add Don't as well you can go all the way down here. But you have your issuing transactions order created or the payment filled and so on. Do not overlong yourself with events to send because then he was simply get bombarded with lots of notifications. Keep in mind there. Welcome Us also keeps track off new sales orders and things like that. So if you clicked on orders, he has an example. Let's open this in you tab. So orders you will begin to see the difficulty of all those that have been made. If you clicked on reports as well, you get again different kinds of data on what products have been made about. Portfolios have been purchased by who and so do not over him yourself. It's too much off information in here, so I'll just add this three Events Square had known. Add the endpoint and there you go now, One more thing to quickly mention If you want test payments with stripe, it's quite easy. Let me show you how to do that. First of all, you would need to enable the test mode right here. And then you'll need a different set of keys, which would be the test publishable key and then the test secret key to get these two. Let's do this. Okay, I'm gonna go over here now, on the developers, you will see the view test data simply turned is on. And then from here, go to your A p I keys. And now you can see we have different keys, so I'm gonna grab now. The are publishable key, which is the test. Let me copy this. Go back in here, paste the key right there. Let's reveal the test ski token. I'm gonna grab this one cup. That's let's go over here. And they were gonna paste. And there you go. So let's go ahead now and save our changes. Okay, So when? Now in test mode. Now, what I'm gonna do is I'm gonna grab five Fox gonna bring that in here, pretend to be a customer. I'm gonna go ahead now and try to buy one of this products. We have the cool sweater. Okay, let's add that to the court. Let's view our cart. Que Let's proceed to check outs. Okay, so I still have the same old information that Jones and all that. Okay, let's go all the way down here. All right, we'll choose credit card stripe Now, you can see that because we've been able to test mode, we can now test payments in here. So let me grab these caught number. Just grab this. This number, like here, paste that, and then you'll need to choose any expiry date that's actually valid. Say, for example, I'm gonna go with December 2024 then the CBC 777 was an example. So let's go ahead now and place the order and let's see what happens. Okay, Order received. Awesome. Good. Let's go to stripe. Now, let's go ahead and the fresh. Ah, page, Let's go to home and let's see. Okay. Well, there you have it. Okay, We have the war. New customer. 36 of payments. That's the comm payments. Let's see if we can get the one. Okay. There you go. From cool store 189.97 U. S. Dollars, and the customer was Dick Jones eight for three at yahoo dot com, seventh of June 2019. So you can see right now that we're actually accepting payments via strip. It is testament, of course, but if it works in the test mode, it will walk when it's alive. So this is how you can test payments using strip and also how you can add your Web hook endpoint so they can receive notifications whenever anyone has made payments whenever payments field and so on. So that's it. Thank you for watching. I will see in the next class. 21. Creating Coupons: Let's look about every customer's favorite topic, and that is coupons. Now, as an online store owner, every once in a while, you might want to provide coupons for your customers to use so that you can encourage them to buy products on your stop. Now, with will commas, we do have the ability to quit coupons and manage them. So how would we create a coupon? It's pretty easy. Go to welcome us. Jump down here to you coupons. Let's click in there. All right, so right now you will see this message saying, Hey, quit your first coupon. Let's do this. We're gonna go ahead now. Quit out, Force coupon. And let's add the coupon code. I'm going to go with some time, okay? That's gonna be the keep on. All right, So we've got three major sections for the coupon data general restriction and then limits. So that set off with General. First of all, which kind off coupon is going to be? You've got the fix caught discount. You've got the percentage discount, and then you have the fixed product discount. Lots of this comes. What do this mean? Well, the percentage discount, the fact I'm just coming here and add 10. Just to make this easy for the Cuban a month so it presented discount off 10% simply means that this kind of temple will be applied to the court. For the customer specific example. They bought a jacket that's worth $200 if they use this coupon for 10% off, they will save are $20 at the end of pain. $180. That's what this particular discount men's now the fixed carte discount is the next one. What this implements is that there will be a total discount on the entire caught. So let's say, for example, the customers total called was $200. A fixed cut discount of $10 in this case simply means that they will end up pain. Ah, $190. They end up saving $10. That and finally, we do have the fixed product discount. What this implements is that the customer will receive a set amount off discount per item. So that's it. For example, the customer ended up having let's say, 32 shirts they were selling at $20 each. The total are caught amount of this one will be $60. However, because we isn't it fixed. Put a discount. The Cosmo will get $10 off for each two shirts, So basically, there's gonna be 10 times to which we should be $50. This council, the fix put a discount in most cases can be the most rewarding for our customers. So those are the three main types. Choose wisely. I'm gonna go ahead and choose the percentage discount for now. So we have 10% off, and then you have the option of creating the allow free shipping. However, for this to actually work, you need to enable the free shipping method. And then you would also need to require a valid free shipping coupon before you can use the free shipping are coupons. And then, of course, you can set your coupon expiry date. Very important. I'm gonna sit mine for Monday, 10th of June. All right, that's for General. Now you've got the use age restriction in this case right now, you might want to say that well, before a customer can use this particular coupon, they need to spend this minimum amount of money before they can use it So in this case right now, we can say you must spend at least $50 before you can use to keep on. And then you've got the opposite, the maximum spend. Now, I'll be honest with you. I found this to be a bit interesting because in my opinion, coupons are typically used to encourage consumers to buy or spend as much as they possibly can. But I'm guessing there might be a few instances where the coupons begin to cost the business money. So, e, I was trying to think of particular assistant avenues we have. This might apply, but I couldn't come up with any. And this goes right now. This will depend entirely on you and your own business if you feel like Well, once the customer has spent this particular amount and keep on using the coupon, I will begin to lose money. You can come in here and set a maximum special. It says something like, Okay, was the customer has spent ah $1000 there will not be able to use to keep on any more. Okay, you've got the individual use Onley, which our to recommend in this case right now, you can. Only the customer can only use this coupon by itself. They can't use other coupons with this. Keep on so I can check that. And then you can also exclude items that are on sale out. Also encouraged this. Why allow the customer to use a coupon when that item is already on sale? By the way, just to make sure I'm not taken anything for granted, let me show you how you can actually set items or products on sale. Let's just quickly shares. Let's take, for example, we have the ninja shoes. As an example, I'm gonna go to edit. So let's come down here. This is a variable product. Okay? I'm just choose a simple item. Okay? The Phoenix bag just goes to show you. So in here, right now, you will see the sale price section just on the ninth right here so I can come in right now and say, OK, it's on sale right now for for the 9 99 and you can also shed light. Okay. When should the price the cells start and mentioned it? And you can do so right here if you want to. By the way, just in case you wanted to live, Just quickly show you how you can do this for the valuable products. Let's go back to the chicken blouse to set the item on, so you need to go to the particular variation. So let's come in here. Let's choose the wide variation you click down here and then right here you will see this sale price. So that's exactly how you can add sale places for your simple and your available products. Okay, that's quickly jump back to our coupons. Let's scroll down here now you can restrict the coupon to walk on Lee with setting kinds off products. You can do the opposite. You can exclude certain products form been able to be used with the coupon in this case right now, if you left these two blank products annex export products, this Japan would walk on every single product in your store. So in this case, right now, you may want to exclude your most expensive items or products, but it's up to you. I'm just saying, and then you can do the same with categories. So that's if example you had a category full, especially specifically for men or for kids or for girls. You can exclude all those items from not being able to be used with the coupon by simply adding the categories right? If you wanted to. And then finally, we've got the allowed e mails. In this case right now, you can You can add very specific email addresses that can on Lee use the coupon. So anyone that doesn't have a particular intelligence will not be able to use this particular keep on. So this is great if you have certain customers that are really awesome, you love this customers. You can't decide to provide them with a very special coupon and then say, Well, only people like you who my cherished customers can use this coupon. In that case right now, you'll have to come in here and add the email address associated with their accounts on your website. So this is where are allowed. Emails can be ah, great feature to have an and finally we have the use age limits. Okay, Usage limit per coupon. How many times can your customers use this coupon before that coupon becomes invalid? So you could say something like, Well, there's 1000 coupons available. So once all your customers have used this coupon 1000 times, that's all together, not each Altogether. The coupon will no longer become valid. And and of course, you've got the limits usage to ex items. So it says Right now the maximum number of individual attempts is Cuba. Cuban can apply to win using for docked discounts. Remember that product discounts can be the most rewarding for the customer, but you might want to add a limit. So let's say, for example, once they've added more than seven items in their cart, that coupon will no longer be valid. This is where this could actually I'll be beneficial for you for adding our limit usages and finally, usage limit per user. How many times can you individual customers used this particular Cuban before it becomes invalid for them? And if you hovered over the question, my criteria, it say's it will use the building email for guests and user i d for logged in users. So this is where welcome us can't keep track off how many times a particular customer has used this coupon code. So you could say maybe three times once used to keep on three times. It no longer becomes valid, right? So let's go ahead now and hit. Publish the publisher of a first coupon. Who way? Now what I'm gonna do is, of course, I'm going to bring in my Firefox white here. Unless testes out, I'm going to refresh our page and okay, chica jeans. Let's add this to our caught and others try to use our coupon. Let's go to view the court. That's a play coupon code. Summertime. It's summertime, baby. All right. Played a coupon. Oh, the minimum spend for this coupon is $50. Actually forgot about that. Okay, well, awesome. Let's go ahead and add and other item, let's add the cool sweater. Gosh, I completely forget about the $50 minimum spent. OK? It should walk now because this is now almost $70. So let's go ahead and add some of time again. I put a keep on Yes, keep it Could applied and you can see right now the coupon was 77 bucks because we've applied keeper code off some times of the coupons. Absolutely walk. So that's it for the coupon codes. Thank you so much for watching, and I will see you in the next lesson. 22. Elementor and Hello Theme: Okay, So are you excited to get started with elemental? I know I am. So let me show you exactly how you can get this plugging on your website. The first thing you have to do is go to Elemental calm. You will see this green button here that say it's free download. So go ahead, download a free version. First install, activate a plug it and then you want to go to price in and then choose which particular one of these three packages you want to go with. Once you buy the package, you will be provided the download link for the pro version of elemental. Go ahead, download and still activate the plug in. Now, when you do that, you're plugging sections should look like this. You should see elemental Regula. And then you should also see the elemental pro. Now, you will also be provided with a license key for elemental pro to add that license. You want to go to Elemental over here and then you'll see lions sense down here, right? You should see a box asking you to put to add the license key and then you simply activate and you should be fine. So once all that is done, you're good to go. John Donne hit you settings on the elemental. All right. And then over here you should see your post types. Let's go ahead and choose products. Basically, what this means is we want elemental. We want to be able to use elemental to create and design our products as well. There are other things you can do in here, such as changing the default style, the wave at some integrations. Don't worry. We'll take a look at this a bit later. Just make sure that puts Boxer is checked and then let's go ahead now and save our changes . So awesome. We've got elemental installed video to go on a website. Next I'm going to do it now is to get a theme by default. I do have the 2019 theme available, but recently, if I guess is about a month ago, Back in May of 2019 are elemental introduced a new theme known as the Hello Theme. This is built by the developers develop mentor, so you're not going to get a better theme that works well with elemental, then this particular one. However, let me just stress that the Hello theme is a bare bones theme. What this means. What this means is that it provides you with very little customization features, So it's basically just a theme that's meant to compliment. Elemental element is going to be our main are plugging for building content for designing content. The Hello theme is just there to facilitate and make the process easier. Plus, it's also extremely fast. There hasn't been. It's because it's bare bones, which means it doesn't have a lot of code is just a very basic theme. So it's gonna look very, very quickly. And of course, it works well with elemental. So let's go ahead now and install the hello theme on the website. So let me do this. Let's go to add new And then from here, I'm just going to search for the hello theme and there you go. So let's go ahead and install. And of course, we're gonna go ahead and activates the theme. Okay, let's take a look at what we have and you consider him now that the site looks a little bit different right now, But that is all Kate. Cool. Let's do one more thin gonna go back to the back end. I'm gonna jump the hater appearance. Click on Customize. I came Now, over here, we have the site identity. I'm gonna go ahead now and add a logo. So let's go ahead. Select a logo and it's going to be this one right here called stuff. Fashion logo. Let's go ahead and select that one, and we'll just crop it. Make sure that everything appears school down. Let's also crop it from this side as well. We move any and wanted space, and I think this is good enough. Distracted a bit. Okay, let's go ahead and quit the image. And we're gonna go ahead now and publish that. Okay. Cool store fashion construed and ought. Okay, let's go ahead and view the website from the front page. And Okay, so that's it. We've got an element to installed. We have the hello theme installed as well, and we have a logo. So Jimmy, never next class will begin to add content to our website. 23. Setting up our Product Categories and Menus: Welcome back. Now it's time to go ahead and begin to add some content to our website. Now. Offscreen, I already added a few pages. So if I come down, hit the pages, click on all pages. Let me show you what I've created. I have published an about page a caveats page, a press page and also a terms and conditions page. So this is entirely up to you. You don't have to publish the exact same pages that I have, but I like you to take a minute to think about the pages that you want to publish if indeed you actually building Riel online store. So you called publisher about page. If you want to a contact us page views page, it's all up to you. One more pitch I'm gonna add right now will be the privacy and policy. But to do this, I'm going to come down here to settings, go to privacy. And if you didn't know this, what press now provides a template for building out a privacy policy page. So I'm just gonna go ahead now and click on create new page down here and ah, there you go. So we now have our privacy and policy page feel free to edit all this information in here If you wanted to do was gonna go ahead now and publish this page. So we now have several pages. Awesome. Okay, The next time I'm going to do it now is we're gonna jump down here to products. I'm going to go to categories. Okay, Now, in here, this is again entirely up to you. You can choose to create products or category specifically for men if you want. As a conservative, I have one here for men. I also have another one here for women. This way, if anyone clicks on like the men's category for products, they will be taken to put up specifically for men. It's entirely up to you, but I'm going to do it this way. So I've got my men's category. And then what I will do at this point right now is I'm going to go to each individual category that have chosen right here and choose specific categories to fall on the either men or women. So, as an example, check this Advocate bags. I'm gonna go bags with women, so I'm gonna click on edit right here. Okay. And then from here, I'm gonna assign the category to women, alright? And then down in here, where we have a thumbnail, I'm gonna go ahead now and add an image for the thumbnail and is gonna be this one right here. That's for the bags. So I'm gonna go ahead now and update that, Then we do one more. So let's see, What else do we have? A We have Ah, hoodie. I'm gonna make this for men. So click on edit. Let's jump down here A sign, a category here, two men. And then I will choose a thumb mill for this one, and it's going to be the wou d right here. Let's use that one and update that. So go ahead and do the exact same thing if you want to. This is entirely up to you. You can choose not to categorize your products on the man or woman. I just have them under their own separate categories, like Blau says, placeless jackets. And so once it's entirely up to you. And as you can see right now, I have added, ah hoodie jackets, shoes, sweaters to shoot and watches under men and then if it women have edit bags, blouses, bracelets, jeans and jewelry. Also note that the images are used to represent each category is in a ping format, which means there's a transparent white background. I just feel it looks better without way, but you're more than welcome to use J pegs if you wanted to. Let's get rid of this on category category. It's so annoying. So to do this will just make any one of these categories the default so will make a man in this case the default. So let's click on make default and then on categories. Now we have the option to delete it and bye bye. Okay, so cool. We've got our product categories all set up. Next, I'm gonna come down here to appearance. Click on menus. Now, what I like to do here is to Kuwait's two different menus. So, by default, we do have a main menu already protest in my accounts, check out cart and shop. But what I'm gonna do here is, first of all, we're gonna add put up categories now by default. What? This will not show you that put a category so to show them actually, we'll have to go to our screen options up here, and then you will see put up categories right here. So let's click that. Let's close the screen options. And now we have put a categories down here. So let's do this. Gonna open this up right now, and I'm gonna go ahead, click on view All let's do this. We'll go ahead now, an ad man first and that will just, like always, just like all of them and add to the menu. Okay, so I've got man, we've got women. Let's now make sure that the sub categories fall under the respective categories. So for hoodie right now, we'll drink this a bit to the right to this empty with jackets, shoes, sweaters, T shits and watches. Then for women, we have bags with blouses. Blace, Let's jeans and jewelry. Okay, not that at all. We can always we arrange this if you wanted to. You so as an example, being going shop at the very top. Let's go with men next, and then we can go with women and then we have my account check out and caught. We might still make some edits little into the main menu. But for now, this is okay. Let's go ahead and save our menu. And then I'm gonna create a second menu, which will be the footer menu of this time around. So let's go ahead. Named is the Footer menu. This will appear at the bottom of our website. Let's create that one. And then in here will add the privacy policy about KBR's pressed terms and conditions are pages less at those and let's move about to the very top of years and then press privacy, policy terms and conditions. Okay, let's go ahead and save that, and we are good to go. So that's it. We've done some good work in this particular video with added ah put categories we've also added are two menu. So Germany Vernon's video wellborn. I begin to build out our global templates 24. Adding the Global Header: welcome back. And as you can see right now, are site a stunning to look a lot better than what it was before. We have a very huge local right here we have on main menu. We have the products for men on their own page. We have the products for women on their own page as well. So not looking too bad. But of course we can improve. And we are going to improve this massively using elemental. Now what? I want to do this videos to show you how you can create something known as a global template with elemental. The obvious question right here is what is a global template? Well, I'm glad you asked. A global template is basically a book of code or content, which you can we use over and over again throughout your site. Now, if you look at our website currently, there is a global template already active, and it's the header right here. You see, regardless, off which page we go to, we're always gonna have the logo and then the main menu. So it doesn't matter if we are on the shop page on the check out page. We still have the exact same content. This right here is a global templates. So the two most common examples would be the header and then the food off a website. In this video, I'm going to show you how you can create the global header using Elemental. So let's do this. Let's jump to the back end now. Just under elemental, you will see templates. Let's go ahead and click on the theme buildup and then I'm gonna go ahead and create my very first templates. Let's choose the headache and see Elemental provide you with different template types. We're gonna go with the head out and then, of course, I'll name There's the global head. Ah, let's clear eight template um, pa a pum pum palm So in here you can see all the pretty fine temples which elemental providers for the header. They all have their own unique designs. So, as an example you have the metro, which is very simple. Basically, you have your logo right here and then you have your main menu and they're yours. I have a search button right there. I like this one, but there are other ones as well. You have this one right here where you have social media, Aikens. You have the local, you have the main menu, and then you have some contact information. I feel that this particular kind of exam would be perfect for business websites, but we're building in e commerce stores. I'm gonna go with simplicity. Okay, so let's do this. I'm gonna go ahead and simply choose the very for strong light here. We'll go ahead. Click on. Insert. Now, if you on new to elemental. This is like the first time you're working with elemental. Don't panic. Don't worry. It's very, very easy to use. Let me give you a very quick one through. So, over here to the left is where you have this nose. We call elements. They all have their own individual sections, like side basic pro and so on. So as an example, if I click on sites, these are the elements on the side elements. We can use them to this place, setting kinds of content so you can display your set logo using the said local element, you can display your page title and someone you go to our pro. You have access to slides price list flu boxes, media parasols, reviews and so on. That's basically how elemental walks you choose Which elements you want to walk with. You drop it in and then you begin to design. So because we've already used the global template for the head out, we do have our local right here. And then we of course, we have a menu. Now, like here we have a section that basically has two columns. The very first column here adds the logo. The second column right here adds the menu. So let's make some quick changes. First thing I'm gonna do right here, So I'm gonna click on the pain right here that stays at it and change this menu. So let's click on edit right there. I'm gonna change the menu right here from Fouda to the main menu. Okay, We're gonna work with the main menu. Awesome. And then over here, where you have one for the logo. Let's click on the pen right there. So in here we have the image size, which is full. Okay, Not bad at all. I don't think we need to change anything in here. What I would like to change, though, is gonna be the pack around Coehlo. I don't like black full all and stars that fell Whites was Do this. Okay, I'm gonna go ahead now and click on the edit section. Important right there. Okay. First I'm going to do, though, is the comment with you can see it's box to, which means you will have it padded. Basically. Okay, I will changes to fool with what this means is I would like the header of the content of the header to go as far wide as possible to the edges off screen. It's often easier to fool with and then But you have stunned when I click on style. And then Cole, you can see we have the classic chosen on the Nicolai said to black, I'm gonna change this to whites. Go ahead and choose whites and we can see many animal. I'll change. That's in just a second moved. Is the background to white? Awesome. Now let's go back Teoh the menu. So I'm gonna click on the edit booking right there and then I'll go to style. OK? And then what? You have the typography right here. You can see that we have it. Actors. I'm gonna click inside and then in here. Oh, I'm sorry. Actually, it's not gonna be in here. I'm just click this outside. I'm so it's right here. It's text color. I'm sorry. So on the typical for you will set text color, just click inside this box and then all changes to black and that you could we can. Now let's see. Ah, menu back in full swing because don't make some other changes. So the hovel right now which turns the attempts to green I don't like that. So let's make some changes. Okay? On the normal, I'm gonna changes to hover right now. Let's click on over so you can sit. Text color becomes green. The pentacle becomes green when we're hovering over the menu items. I don't like that. Let's change this. Okay, So what I'll do is very simply, I'll just changes back to black as well, and then click outside the point of Coehlo. Listen just to black as well, So let's see. Okay, Not too bad. We still have the drop down. Still incredible changes in just a second. Let's come down here to where you have the drop down. Let's click in there And then again, you have the text polo as black. Okay, not bad. Now hover is where you have the drop down items turning to green solutions against you. Black ares. Well, and there you go. OK, so not bad at all. Let's see what else we can change right here. Let's go back to the drop down. Actually. Ah, we do have a background color. He a set two f two f two f two. Ah, If we change, that's two white. Let's see. Okay. Yeah, not bad. Actually, like the white better, it's more simple. We'll just live this for now and display ahead. At this way, we can always come back and make the changes if we wanted to. I don't spend too much time talking about this, but we have made some changes. We've changed the many to from footer to the main menu with tentacle of the text from white to black of tentacle of the background for the other, from black to white as well. And then of course, have changed the with from the box too full or with So let's go ahead now and publish the head and then finally elemental, ask you. Where would you like to display your temporal click on add condition, and by default, he can see that entire site has been chosen. But then you can choose to only display the head out on your archives on singler pages. Or maybe on your walk. Hamas pages only. Go with General and go with the entire site. Save and close and then finally publish Saving close. Okay, there you go. So now it is live. Let's go ahead now and have a look. And there you go. We have our global head of with the logo on the left and the main many on the right, and you can see that the logo is very close to the edge off the screen on the left, and then the menu is close to the edge off the screen on the way. That's what happens when you change the with from box to fool with. So that's it. Thank you so much for watching the video Germany Pfennigs Video way. I'll show you how to cook. Ate the global food 25. Adding the Global Footer: Welcome back now in a previous video, was successfully added, Ah, Global Hedda. However, in my excitement, I completely forget about this little such button right here on the right, which you cannot see. But trust me, it's right there. The color is in white and, well, you can see the back and color is also in white, and that's where we can see it. So before we create our global footer, let's just go ahead and make thesis Barton visible. So let's go ahead and go to the back end will come straight down here to templates, go to the theme builder, and then the global header will simply click on edit with Elemental and let's make our Change. OK, yeah, so right there we have the button for the third column, continuing our search button. Let's look inside and for me. I'm going to go to style, and then we have the Tuggle, which is the actual button itself. Let's click on Tuggle and the column, then click inside here. I'm gonna choose Black, okay, and then let's see. Ah, so when you hover over it, I think it's also going to disappear. So let's go to hover they call it. Let's make their own black as well. Okay, that's much better. Let's go ahead. Off date and let's see, I'm gonna click on the menu button right here, go to view page, and while a lot, much better, you can click in there. And now you have a such Barton ready to go. So let's make Let's try something in here. I'm gonna click on. Let's see. Ah, did it into two shirts. Maybe about no results. Okay, Uh, that's no good. Let's try something else. Wow, Let's pray. Shoes. Okay, there you go. All right. So it does work and we can see we have the ninja shoes, and this doesn't look too good. But don't worry. We will create a tempered little on four our search results. But now let's focus on ad in the global food. So let's go to the back end and I before we progress any further, I must warn you that we're going to make some major major editing with elemental. So again, if you're brand new to elements or don't worry, I will do my very best to take this very slowly search, understand what I'm doing. But we are gonna be walking hand heavily with elemental in this video. So let's do this. I'm gonna go down here to templates, click on the theme builder, and then I'm gonna go ahead now and add a new one. Just appear. And of course, I'll choose the footer. Let's named is the global Fouda. Let's create a template and just like with the head of will have different kinds off templates pre built for us. There's quite a few of them that are good. You might see this once that have the stay in touch that has, like, a subscribe section. This looks good, but there isn't why I don't like using this particular kinds of templates for my foot size because keep in mind that the food is gonna appear on every page and you don't want to constantly show people this particular box. Okay? It's like your pig in them. Please, please, You know, stay in touch with me. Now you can display this specifically on your home page and then maybe on your contact page , but then you don't want to display this every single time. So that's why I will not use this kind of template for my global food top. What? I'm gonna use dough. Is this one over here? Now? What do we have? You? We do have pre built for us the contact information. We have a phone number, email address and physical address, which is good. And then we also have, like, the all rights reserved texting here. And ah, that's about it. Because the rest of the features in here we're not gonna make use off them will add Social Media Aikens separately from all you have done here. And then we'll just have to get rid of the subscribe section here as well. And then these particular texture looking at these are not menu items is actually leased items. So we'll have to get rid of these an ad photo menu. But always Let's just go ahead and do this. Okay? South click inserts. And now the fun begins. We're going to make some major changes. A cape Fresen I'm gonna do Is this down in here where you have the column? Edit button right here. I'm gonna like, like there and then delete do the same here as well lead to the same here as well. Lead the disingenuous Well, deletes. And there you go. Okay. I'm gonna go back and have again to you the column. Edit button right here. Right. Click at a new column. Do the same thing in here as well. Like click and then add in you column. Okay, we have the logo here. I'm going to. Right click. In a way, we have the edit partner, whether for the logo the blue night here. Right click and I'll go ahead and delete that. Okay, now check this out. I'm going to go back in here where you have the elements Parton clicking there, and what I'm gonna do is I'm going to drag a head in element, drag that, and I'll drop that in here. You can see right now that when I drag into this particular cold, you can see a blue bar that appears this man Survivalist. My mouse. Right now, the heading will appear above the content. All I can do it down here. Way to appear below. Okay, so basically, dragon drops. I'm gonna drop this in here. So now we have a text. I'm going change the text right here to contact. Contact us, Okay. And then all terms The HTML attack from H two to H five, making really small, neat. And then the style. Okay, I will change the text color two white. Okay. And then what I will do here is where you have the contact information. I'm gonna click on the edit button for it. Let's make some changes in here. I'm gonna go to advanced first. In here. You can see we have this thing called Margins. Margins and pardons are basically used to create space to add space between elements. Okay, so by default, we have 40. I'm gonna change this. 20 What? I will push that right up there. I like that. And then we'll click back inside. Let's go to style. Go to the icon and look, let's just change the color from pink. Did something that was a gay. I mean, it would be nice if this was like, uh, like clowns, website or something like that. But pink just doesn't fit the have the story building. So we'll go with just whites in this case. So I've got the buttons and now the actual content itself, you can click back inside, go to the content, and then in here. You have the full number so we can change this tube. Something else. If you want to. You can change your I can not for the email address. Let me show you something, and I'm going to click on the email address. All right, listen, just Teoh, I'm gonna go without Alex at the cool stall. Ah, come. Okay, now for the link. What I'm gonna do is I'm going to add something known as a mil to link. So in here, I will attempt this as Mill, too. And then Colon and then Alex at the cool store dot com. So what this will do is whenever anyone clicks on the link, waited to automatically open up their own die email service providers. So that's the point off and in the army, little in quite there. And then for the address, I'll just leave this address as it is. No need to change that. Okay. We're happy with the contact information here. Good. Now let's do something else over here where we have the second column. Check this out. Okay. I'm gonna do something pretty neat here. I am going to right click inside off the contacts element. Just like, like, right there. And then what I'm gonna do is Oh, yeah, I'm gonna click on duplicates. Okay? Duplicate that, and then I will click inside of the second or the 1st 1 doesn't matter, and then simply drag. Let's try that again. Okay, You can click where you have the edit button for the, uh, head up to just click there, drag and then drop in here. Awesome. So now we have contacting here, but then I'll click on the edit button right here and then change contact in here. Teoh, let's go with quick links. Quick links. Okay, let's do this one more time again. I will. Right. Click duplicates. And then again, drag, click and drag that in here. Jump that bite there. Now, let's change quick links in here to our full of us. So this way you can quickly just duplicate content and we use it and then just make some minor edits. It will make a walk. Ah, lot faster with elemental. Cool. So we got quick links. Let's go back to the elements. All right. And then I'm gonna drive the navigational menu element right here. Click drag. We're gonna drop that in here just underneath the quick links. Right there, Willis. Okay, so we've got the footer menu displaying. Okay? Yeah, we do want that, but we're going to make some changes. Okay? They lay out. Let's go with the vertical layout. Okay. Not bad. Not bad. Looking good. Let's go to the style now, OK, that's what we have in this style. So the text color again, I'm going to go with white. Very, very, very simple. And then let's click outside. Come back to me menu. Now the vertical Padden. We can choose to increase the space or would use the space. But you had vertical Pattyn, so I'll just make this nice and needs. Let's add beat More space. I think this is okay. All right, but I don't like this green button that appears is very, very ongoing. So let's see how we can change this. Let's go to hover, you know, Do we have a point of Coehlo? Ah, let's stick with, um White, maybe. Let's see. Okay, that's wide, but we don't want any pointed to RPS. Let's see. Let's clear this. Let's click outside. Okay. The point, all with in this case we can just go with zero. Okay. There you go. So that we Right now we no longer have any annoying point as any more. Okay, So finally, now, let's go ahead and add some follows Social Media Aikens. So we're gonna go back to the elements. Let's see, it's not on this site. I usually do Forget where we have this social media Aikens. I think it's gonna be under General Thomas take in. Ah, let's see. Let's see. Let's see a kid ego, social icons on the general's Let's drag that and then we'll drop that right there just underneath full of us. So by default we have Facebook, Twitter, Google Plus to add Youling. Just simply click on Facebook as an example and then in here you will have where you can add your calling soldiers at the HASHTAG for now And then, of course, we can add extras all admire item change the I can hear what purse to YouTube. So that's what we have a channel on YouTube. You can add a link and then all added little item. And of course we have instagram as well. Google Plus is kind of old right now, I don't think anyone uses Google plus anymore. So let's remove Google. Plus, let's add Ah, pencil rest. Yeah, pincers. I think it's Ah, it's a pretty good another good social media platform for online stores. So good. We've got Facebook, Twitter, YouTube, instagram and then Pinterest. Okay, not bad at all. Ah, we do have the style in here. It's a style. So we have the official color. But I don't know, I don't think it goes well. Put the bag down so we can do this. We can change the color to costume instead. And then the primary color we can choose a card will be inside the actual they'll be the backgrounds of the of the workers themselves. And then for the icons, the actual f, the bird and all that. You can change the color by changing the second Tikolo. So in here right now we can go with Green as an example. But of course that's that doesn't look good. It also I will go with white for now. OK, so not too bad. I kind of like this design. But again, feel free to add your own colors if you want to. Okay, you don't have to use. I'm my own examples. Okay, so let's see. I think this is looking good. We're gonna make one more change. Inhales go to the edit section. Let's go to style will change the bag on color all the way to black. Much better. I like this. Okay, then finally where you have the footer, The extreme foot down in here All just very simply, delete the social media icons right here goes to lead that. And then you have the all that's reserved for Simply click inside and then change the alignment. Old way to the center. So we have all rights reserved. 2019 Not looking bad at all. Let's see. Let's go ahead now and publish this. Okay, let's just make make one very quick look through again. What do you think? Maybe we can try Teoh. Centralize! Follow us instead. Let's click inside. So alignment for the full of us. Let's go with the center. What do you think? I think this is better. I think so. Yeah. Oh, I'll just go ahead and publish right now. Oh, and add condition will go with the anti aside saving close. Who are you for to his line. Let's have a look and Ah, but there you go. Not bad at all. This is pretty decent, but I'm pretty sure you can come up with something better than this. So we have a contact information quick laying. So we have a follow us social media. Aikens always reserve 2019. And we also have our header as well. So moving forward right now. All they're gonna concentrate on right now is adding content in between the header and the foot. And boy, this has been a very long to Terry element. Mouth is taken. I have to go now. I will see never next video wearable. Continue to build out our store. Thanks for what? 26. Adding the Global Single Product Template: welcome back. And in the people's tutorial, we successfully created the template for food. And now what I'm gonna do industry to us to show you how you can create a template for your single products. Now, by default will come, as does have a pretty decent template. It is against you right now a nutritive you, your individual products. You will find the images available, the title, the price, the art to cart button as well. And then just below the little products and up sells ive available. So it's not too bad. But with elemental, we can do so much better. So let me show you how you can create a template for your single products. And of course, it's very straightforward. Let's jump to the back end, go to templates. Go to seem builder, click on add new Select the single product. And then, of course, I do have my name gonna give it a global product template. That's gonna be the name created the templates, and by default, elemental gives you four, I believe. Yeah, so it's for you. So you've got the different styles, of course. Different designed. I like the 1st 1 the most but feel free to check out the other ones as well. They all look pretty good, but all those go ahead and choose the very 1st 1 Let's go ahead and insert that one into a template. Now check this out. OK, unlike the templates for the header and footer and in fact, any other kind of template specifically for the poor docked templates, you will have access to this very special category off elements. So it's on the product that you can see. We have access to the Wu commas, breadcrumbs, put a title, surprise images, stock matter and so much more information. So we can really customize the kind of information we want to display our on our individual product pages. So, by default, what do we have here? We have the main featured image, and then we have the images that make up the rest of the gallery for this particular products. So we have over here what we call the are breadcrumbs for this particular product. Okay, we have the title. This is supposed to be the product rating you can see right here edit product waiting. This is, of course, blank because this particular product doesn't have any waiting yet. So we have the description, the prize, the color shoes options. So this is a variable products. We have whites and black. OK. And then down here, we have some additional information the sq the category tags and then some additional information in here, so it's not too bad. But of course, we're gonna go ahead now and improve the way this looks like. What I'm gonna do here is because we don't have any ratings yet. I'm going to remove the waiting. Okay, so I'm gonna by clicking here. Let's delete that now, before you go any further, let me quickly introduce you to the elemental cola pallets. You might. You may have noticed that by default, whenever we add titles, the color is often this light blue. No. Where is this coming from? If I go over here and click on the menu button right here, click on the fold Colors. Take a look of this. You will have access to to call a palette for elemental. So by default, this is the one that's been used right now you have primary which represents mostly Thai tools head as and so on. You've got secondary. You've got your regular body text, and then you have accent, which would be for like, your list. I terms the hover color and so on. So I can decide to come down him and change the pallets to Joe Ca is an example. And, of course, by default right now you can see that our title has not changed to black because we've changed the color parents. So I'm just introducing you to this particular feature with elemental. You can also click inside each particular box and change the individual calls. If you wanted to you that is something you can do. But how does go with this Joker? Powerful now and simply apply. Okay, so let's go back to the actual template itself. Now, over here, we have access to the put images of the thumbnails in here. You can add some space in for here. If you want to make them look a little bit better. You can add some border maybe like double. You can go with dashed and so on. But I'm not gonna go with any borders again, so I'll just leave them as it is like this. Like that. Okay, so we have the title. Fair enough description. The price. Okay, the color. Let's cool down here. What we have here we have some information in here that looks kind of blow, Ted and a little bit out off order, to be honest. Description addition. Information there. I'll just go ahead and delete this one. And then let's go back to our elements. Let's see what we can actually add. Just underneath the are to cut button. I'm going to add the put up meta in here instead. Okay, let's add that. So this will consist of information like the SK you the category tags. The view currently is set to in line all changes to stacked. So we have the SK you We have the category. We have two tags. Let's see what table does table? OK, this looks actually better. I think I like this design a bit more. Okay, oils do we have here? We can change the link text if you wanted to. Let's do that. Let's change the color of link text from red to, uh, go black. Actually, no, I'm going to do control Z and ah, just clear. You can just clear the color right here. Let's go back for the Globe that I think it's find as well. Let's leave it on red. All right? Whales can be do captions. No. All right, let's just live. They put meta as it is. Let's go back to our elements. What else can we adhere? I like to add the social media share buttons. So in case someone wants to share this particular productive with their friends on social media, they will be able to do so. So let's go to general. I believe this is on the general. Actually, I don't think it's on the general. Oh, it's on the pro. I'm sorry. So it's pro and then you'll see the ship Buttons right there. I'm gonna drag share buttons. Let's paste it underneath our tags. Okay, so we have Facebook. Google Plus Now I'm gonna move Google plus cemeteries. Okay, Remove linked in. Let's add Ah, Prince arrest And then we can add, Let's see. Ah, email. That's an email. So we have Facebook, Twitter, Pinterest and e mail will change the view to I can. On Lee, it concerns a shape to circle change the alignment of the center and then I want she also keep the black and white clones came consistent with our icons, so I'll go to style. Let's change the official color to the custom color instead, and the primary color will go with. We'll go with black and there you go. So I've got black for the circles and then the icons are in white Awesome. I like this that this looks pretty to descend. At this point. Let's add some more information and ah anyway, have the product stock at which I feel is important. So that's had put up stock just underneath the actual price. Itself will jump that in there. I'm guessing the reason why we can see this is because this is a valuable product, but we'll see. Okay, I think this is OK for the top. So we have our image price title description. Stock quantity are too caught. Some information share buttons. All right, this looks a bit It's odd. I don't think we need animal this information against I'll just remove this column. All right, so related products is down to two products. But my gosh, this doesn't look too good. So we can changes by reduce by by adding two more columns. So let's click on the edit button right here so we can change the public's per page to four and then make it four columns as well. So there you go. Now it looks much better. And then, of course, the Upsell. We only have one upset, but this looks out off order. It looks ugly compared to the rest of the design. So what we can do is we can also divide this particular section for our obstacles into four , just like we did with the related products. So click on the edit button right here. Go with four columns and there you go. Now it looks much better. And, uh, I think this is fine. I think this is perfectly fine. Again. Just feel free to spend time. Design your per page if you want at more information or more content. You have all these elements right in here available to you. But I'm satisfied with this. I'm going to go ahead now and hit. Publish. Let's add a condition. Products. Yes, Let's go ahead. Saving close. And there you go. Let's go ahead now and have a look and see what we have and Oh, a. For some reason, the images not showing for the chick are blouse. All right, let's try something else. Let's go with the chicken jeans instead. Or kit. So it images now shine. Okay, let's go back to the check up. Allows. Now it's showing. Okay, but for some reason, we're not seeing the quantity a month at the stock a month available. Okay, let's try something else. Let's go to males. Go with the hoodies. Ah, let's go with the hoodie. Okay? Not okay. So now it surely 100 stock and then 100 stock here again. Let's refresh the page. Not sure why? That is the case. Ah, but okay, I'm not exactly sure why we're having 100 stock being repeated twice. I'm guessing this sometime. I may have to look into Let's just try one more put. That's Lestrade. The cool blazer. Okay, this doesn't have a stock lemma quickly do this. Let me just click on any product. Ah, let's come down here to the in Venturi. Ah, manage stock. Yes, stuck quantity. Let's go ahead and say we have seven available. Just go ahead now and update this. I just want to make sure that everything works well. So let's go ahead and get a product. Seven and stocks evidence stuck again. There is something wrong with the stock amount in here to know why this is happening. Let's try. Let's try this one more time, okay? I'm gonna try and edit the templates there we've just built. So I'm gonna go to edit with Elemental and and click on the Global Public Temple right here , which is the single product. Let's do that. I apologize. I'm not sure what is happening with the, uh, tempered right here. So we do have the edit product stock. Okay, Advanced. Nothing in here. About two style. I'm not sure why it's repeating. You know, for now, I'm just gonna go ahead and remove it, okay? I'll give it for now. I'm just update and then I'll try to troubleshoot this once I finished recording. They want to spend too much time are going over this. Okay, let's go ahead now and view the page and just make sure it's no longer day. Let's try a different product. Okay? Lets go back. Teoh the hoodie. Pick this one. Okay. All right. Ok, now I'm confused. Now it's 800 stock. What is happening here? I don't know. Okay, look, I'll try and investigate this particular issue once I finish recording. So well, I hope you enjoyed this particular video where we've created the template for single product. Thank you for watching. I will see in the next class. 27. Building the Home Page Part 1: Now it's time to begin to build out, Ah, home page. But before we do that in a video is having trouble trying to get the stock amounts to display correctly. So after a little investigation, it turns out that you don't need to add the element that displays the stock number as long as it enables talk management for your product. And you've also added the stock quantity elemental automatically provide the stock amounts so you don't need to spend time adding the element that shows the stock number anymore. It will be displayed automatically just as long as you have enabled stock management and have added the stock months. So just like you, I learn something new every day. I don't know that be fault, but it's all good. Let's go ahead now and begin to create ah, home page. So basically, this is the way our front page looks like right now, which is which is not too good. So we need to make some changes. So let's go ahead now, go to the back and I'm gonna add my home page first of all, so let's call this home. Let's hit publish. Let's go straight to appearance about settings go to read in also the aesthetic page to display home safe changes. Let's go back to the home page. And OK, so now I'm gonna go ahead now click on Edit page, and then I'm gonna click on edit with Elemental. And now we're going to begin to add some serious content. So by default, right now, Elemental will display the title of our pages. But we don't want the title for the home page. So I'm gonna click on the gear button down here very bottom or you have settings. Click in there and the now choose to now hide the title right here, Hide title that's gone Let's go to our elements. And the first thing I'm gonna do is I'm gonna add in a section this will provide us with two columns instead of sections or drug that said that in there. So awesome. We have two columns. Good. Now check this out. Okay. For the intersection. I'm gonna choose the content with from box to fool. With what? And then in here, where we have the plus button for the very first column, I'm gonna click inside, and I'm going to drag a call to action element. It's under the pro section. So Jack call to action on gun A job that in there cool change of skin from classic to cover . And when you choose an image right now and I'll go with our male model right here, I know that I will be providing with this image is there were two off this particular model . This one is much smaller. You can see just win it. 64 by 49 Choose the one that's larger, which is the 1920 by 12 82 in case I choose the larger of the two and said that. And then I'm gonna go ahead and change some text in here. Let's go to content. Change the head into, uh, let's go with fashion for him and then we'll change the description. What do I have? You have cars, will business and, uh, yes, athletic looks. Four. The swirl of gentlemen. Uh okay. And then I will change the text here. Click here to shop now. So what we want is whenever anyone clicks on the shop now button, it will take them streets to the categories are page for the products for men. So how are we going to get this link? Well, let me click in here. Right. Click on dashboard settings so we can open this in a new tab. So let's go to the back and let's go to products. Go two categories and then for men. I'm gonna click on view the man. So does go ahead now and go out this link right here. Everything after the m on dot com. Let's copy that. Go back in here. Uh, let's go back to shop now. Pay Slink away there. I think this should walk and it will tested. So if it doesn't work, then we just need to paste the full arguable. But I think we should walk away. They should be fine. So I played link only on the button or on the entire box Will go with button on Lee. Nothing. I should be fine. So that's that for the content. I like that. Let's go to style now and see I'm gonna change the minimum height and go all the way to 70 . Ah, VH. All right. So the difference between pixels and features that pixels, it's pretty much set. It will display the exact same size, regardless of what device has been used to video upside but virtues more responsive. So 70 VH, which is the view port viewed on deck stop, will be different from the 70 village. Viewed on, Let's say, a mobile phones. That's why I'm going with the age is just better for responsiveness. Okay, so 70 v h whales can be do. Let's go to content. So where you have the colors, you can change the colors. Film, of course, why it's to something else. It all depends on you, but over here we have hover effects. This is pretty interesting. By default, you do have the grow of animation for the content, which is where you see the content grain when you hover over it and then the background also kinds of zooms in as well. So you have, like a combination of two different animations, which you can, of course, change. So as an example for the controversy, but rather need groin, you can say fade in so I kind of like fades in. You don't see any text in here, but then when you hover your mouse over, you can also text fading in so there's pretty much lots of different kinds of animations that you can add in here. If you wanted to background the hover effects as well, you can add an overlay call up. The default is black already. But that's way too much time. Just click outside and ah, them just clear that I think this is okay. As there is no need to add any background color there for the whole of information. And Ah, OK, so that's that's pretty much it. I'm not gonna change anything else in here. But what I'm gonna do, though, is very simply, I'm going to, like, look in here and good to copy this entire column. Gonna come in here? No, but you have to climb button right here and then simply paste, okay? And then I'll delete this additional column. Good. So we don't have the exact same content with this exact same animations. But of course, I'm going to change the content now, So let's click inside the second blocks. Change this image to the one for the lady. And again, just like with the model. Be very careful. Make sure you choose the right kind off image for the model. I'm going to go with the Where is it? Which one of my choosing, this one right here, which is the 1000 by 1000 pixels. So go ahead and insert that. And then, of course, I'm going to change. The content is, well, fashion for her. And what do I have here for the text? I have the elegance sexy, Olaf, sexy. And, uh, how do you suppose that sexy and are graceful looks for the self s office dedicated a day. Okay. And then, of course, shop. Now put a category I'm gonna assume is going to be able just to Women don't needs to be changed. Yep. So it's just women. Okay, that's coming here added the W O for women, okay. And, ah, that's pretty much it. Let's go ahead now and update This are one more community change is we've set the content with here to fool with for the intersection, but noted that there is another main section at the very top in here that actually contains the intersection. So I'm going to click on the very first Almighty, which is the edit section for the main section, and then change the content with from box to fool with as well. And ah, let's go ahead now and update this and let's see what we have. Let's go ahead now and view the page and take a look at that. Now this is starting to look more like a real online store. And of course, if you click on the shop now button for man, he can say it goes traits to the men's section, which is great. Same goes for the women as well. So awesome. Pretty much awesome. I love this. We've been able to add some really good looking our call to action bottoms for men and then for the woman. So that's it. I don't spend too long on this particular video. Jimmy, in part to wearable, continue to build out the home page. Thank you for watching 28. Building the Home Page Part 2: Okay. Welcome to part two. Off Building Homepage in In part Long. We successfully added this to our call to actions for men and women. But then we're gonna go on now to add some more images off our products. And really, this is what you want to do on the home page of your online store. You want advertise, get customers excited, get them clicking on the different kinds of products that you have available for them to buy. So let's do this. Okay? I'm gonna add a new roll off about five images off some other products. So let's do this. You're gonna love what I'm gonna do right now. I'm gonna go to edit with Elemental again, All right? And let's wait for this to load. Okay? Miller, drag the intersection element waiting here. Drop that right there. So we have two columns. Okay, So the very first column in here, I'm gonna click on the plus button, and we'll just add a vaguely image job that in here. Let me go ahead now and choose my image, and I'm going to go with the wood jacket right here. I know that I'm using the ping version. which is the transparent background. So I'm gonna go without one incident in the media. Okay? I'm gonna add a caption right here. Custom caption. Until these as Hootie's. And then we can provide a link as well. So to get the link for the hoodies category. Let's do this. I'm gonna go back in here. Right? Click on Dutch. But Satan's opening in a new tab. Onda, Let's go, Teoh put school two categories Hoody. Let's go ahead now and view. And there you go. Okay, So I'm just gonna get and grab this product on this score. Catacombs hoodie. Let's go ahead. Clicking here. Advil into custom U of ill and well paced. That right there. Okay, awesome. So we have a image. The caption. Good. Let's go to style. Now I will make some changes in here for the caption. I'm gonna change the text color to ah White. Okay. And then the background Coehlo all changes to black cape bed. It'll Hootie's and then we have the image. Let's add some styling in him as well, so we'll go back to the image and where we have the hover right here, Click on Nova. Let's add some some transition effects left at some animation. So in here we have different types. We have the pulse shrink. You can see that's the effect. We also have the which will be every half buzz going again. Again. Again. Again. Again. Again vehemently. I hate this animation. This is just so I don't like it. Let's change it to something else. Um, what else do we have here? We have Pop. I think Pop is Have No, that's that's too strong. Let's go with, uh, let's see, Bob. Okay. Somebody kind of like, pushes the image up a little bit. We can also add a trance transition tuition to reduce the speed. I like to 0.4, and ah, Yep, that's no bad. It'll I like this. Okay, awesome. So if edit our caption, our image and some animation, check this out. Look, I'm gonna light clicking here, and I'm simply going to copy with that done in here, go out the right way, have the PLO's booking right click again, and then simply paste cape. And in very simply for this column right here, language like leak duplicates to the Simpson again duplicates annual add one more. My click and then duplicates. So what I'm gonna do right now is I'm gonna post the video and I'm gonna add are four more items. I'm gonna add the ones for the shoes, blouses, I think jewelry and maybe even bags. But I suppose the video right now and resume ones have added all the remaining our products . Well, come back. And as you can see right now, I have added shoes, jeans, jewelry and, of course, bags as well, and have also added the necessary links to introspective our product category. Okay, One thing I want to do before we move on is to reduce the with off this particular section someone clicking here where you have the second section, which is the intersection clicking there and where we have boxed. I'm simply gonna add 1000 pixels in here. So it's a little bit smaller than the rest of the other section on the website. Okay, let's go back to our elements now. I'm gonna provide additional products which are customers can take a look at. So I'm going to school all the way down here to where we have the woke Hamas section and you will see products in here for the drag products, and I'll job that in here. And there you go. So by default, welcome us will give us four columns with four words of products, but I think this is a bit too much. So just simply go with Let's go to those instead and four columns. Okay, I think this is This is pretty good on the query. You can actually choose very specific kinds of products to display in here. So by default we have the latest products on display. But you can changes to, let's say, Plus it'll only on sale as an example, or you give and go with the manual selection, and then you'll have to choose which particular products that you want to display. But I'll go with the latest products, and I'm gonna add a head up just to let people know that. Hey, these are our latest products. Some go with basic drug, the heading tab element right here, just above the products, and we can add optics in hand. I will say latest products. Let's gender size to NH four Central lies and, uh, okay like this. Let's go ahead now and updates and see what this looks like up view the page home page K follow. Take a look at that much, much better like this. So we have the two culture action Parton's. We have specific products in here with that categories, and then we just have some branded products on display. So really, we're advertising to our customers to our audience that, hey, check this all simple. It's behalf. We have jackets, Julie shoes lately, bracelets and in bags and all the good stuff. So really, this is what you want to do whenever you're trying to build an e commerce store, any kind of online store, actually, so that's pretty much it for building the home page. We're gonna add one more section, which would be like a subscriber sexual way people can add. The email address is enjoying our Miller list. I'm gonna show you how you can do that in the next video. I will see you then 29. Adding our Mailing List: well, come back. And now we're almost done building out the home page full website. But one most section I'd like us to add just above the footer would be the mailing list section of people can subscribe to a meal in form so that in the future we can send them emails advertising new products, offer them discounts and so on. Now we're gonna make use off mail. Chimp if you don't know Mill chimp It is one of the very best our platforms for going your mailing list. And there isn't why I like mill chimp is because they do have a free plan, which you can see right here. It is absolutely free for its join. Plus, you'll have access to 2000 contexts in your meal and list, and you'll be able to send a Z many, as I believe, 10,000 emails every month. So it's a pretty good platform to start with. And then once you begin to grow and you feel like you need to expand, it can choose to either go with the unpaid plants or simply switch Turner that my cousin platform like active campaign or something else. Now I wanted to show you how you can get militant walking on your website. However, it's gonna take way too long for me and we'll just simply add more minutes to this already very long course. So on YouTube, I do have an extensive tutorial teaching you how you can get mill chimp, how you can create an account taken created mailing lists, and so on are simply search for the complete war person. Milton Two titles in the 19 and you will see my big, ugly face way. The experience that you help you can walk with mill chimps of please. If you'd like to learn how to use milk chimp, you can pause this particular tutorial. Move on to watch this video, learn how you can create your account taken created mailing list. And then you can continue with this particular to totally. If you ready, not use milk chimp, then by all means, let us proceed. Okay, So how do we get subscribers our form on the home page? Well, as always, we're gonna go to the back end and then from here, we're gonna come all the way down here to Elemental and then go to our settings right settings. And then on the settings you will see integrations. Go ahead, click on integrations. And now in here, we can integrate elemental with different kinds of services. You have capture Facebook and so on. Here we have male chimps, so we have to add the a p I key from El Chimp. Now, I do have access to my M p I keys right here. Soldiers go ahead and grab this one right here. Come over. Hit you elemental paste the key and then click on validates a p I key and they agree east. You can see the green check. Mother means that elemental has validated r p i key. Awesome. All right, let's go all the way up here. Now go to templates. Click on the theme builder All you could just click on Add new Let's click on Avenue And if I'm going to choose the section and then I'll give you the name off mailing list. All right, so let's go ahead. Create templates. Bump Adam Bomb. Okay. And just like with the other global templates elemental providers with different kinds off our pre built templates. Excuse me. I need to clean my through just a bit. I Let's move on. So in here on the category, you can see we have access to different kinds off templates when it's if accused features but Folio and someone we're looking for subscribe. So let's go ahead and click on the subscribe. And now we have access to five different designs. I like this one the most. Right here. I do like the fact that we have the icon. I like the black background and just general design. It's very, very simple. So go ahead, click on insert and let's make some minor changes. The only thing I'm gonna change right here is I'm going to hook up the subscribe button right here with our mill chimp accounts. I'm gonna click on the pain right there. And now in here we can change the form name to something else. The submit button began Change to size. Change the lettering as well if you wanted to, but I'm not interested in any of this. What I'm interested in is the actions after submit what happens when the custom provides the email address and heat subscribe. Okay, By default, we do have email, and if you click on email down here. But this means is an email will be sent to us admin at started coal mining company com And we can change the subject to something else if you can see new subscriber for mailing list . Okay, So whenever anyone subscribed, subscribe to our newsletter, we're going to get the subject new software for mailing list and then for the message we have all the fields. What this simply means is in here you have the form fields, mill chimp or whether elemental was simply compiled all the information from all the fields and then send it to us. How do you actually get the form fields? Well, here for email as an example, you click on email and then go to advanced down here. This is the short code for this particular Arfield evolves to add another fields. Let's say at on the item go back to advanced. Now, over here again, you can see the new shot called for this particular filled. So that's how you can choose with specific hands of feels whose information you want to display. All right, let's go back in here. We have email, all fields and then we have the from email. You can change the from name as well replied to and any Here you have the metadata. So we have dates the time, the best in subscribed the page level for Mr Subscribe, the use of agents which would be the browser and so on all political stuff. And then you can choose to send your emails, you know, as a female or plain. I'll stick with the HTML for now. But here's the thing. Okay, Go back to actions after submit. And now inside this box, I'm gonna click inside. And now any. You have access to other things that can happen. I'm gonna choose mail chimp like they're awesome. Another have chosen milk champions. He mowed him down. Hairs appeared quick. Notes him. And now in here, you can either go with the default a PKK that you've added which sometimes may not work for some reason. So I'm gonna do is change a p I key to custom and then simply add the a p a ki over again. And now I have access to my mailing lists. They can see right now I've got three of them. Just choose. Let's a monkey Students as an example. And then once you choose your list, you can also choose our specific groups. If your list has groups in them, you can also go with a double opt in option as well, which out highly their commanders. Where you prevent our bots from filling out your mailing list. And then, of course, the field mapping as well. Our emails to email first name is too well, we don't have feels for the first time last time and so on. Soldiers lived this as it s so This is exactly how you can hook up milk Chimp, are you motive account with your website built with elemental. And then finally, we do have the additional options so you can change your from idea if you wanted to know reason for that, really. And then you have your custom messages. C continues on and then change. The kinds of message will be displayed are based on setting kinds off our situation. So you have access to all off this and ah, that's pretty much a deal. Is I'm gonna change right here would be the have a color for the software button. I don't like that. So let's go to style will come down here to button and then on over the background color was Just stick that with White. So doesn't change. Although the text does change. Let's change that as well. Let's go to Let's see button, you can hover. And then a text culo should remain black, so nothing changes. Okay, I like that. The last time I'm gonna do is make the section a bit shorter against Is it be too tall? So to do this, I'm gonna jump over to the edit section button itself. And now, under advanced, you should see the pattern set to 1 50 by one fifties against. There's a lot of space between the our content off this section and the borders that we have 1 50 by 1 50 So I'm going to try and make this a little bit short. Alice go with 100 by 100 and that's still a bit too tall. Walls, let's go with 75 by 75. Okay, so that's a bit shorter like that. Okay, I think this is fine. Let's go ahead now. And ah, simply just published this. Let's go ahead and hit publish and there you go. And actually, let's make a quick change to this actual text that say's don't miss new updates on your email. Let's just change the OK, so we'll just change the title here, too. Ah gets exclusive discounts on ah latest products. Okay, I think that sounds a bit better. Get exclusive discounts, analogous products. Okay, let's just hit updates and we all good to go. All right, So we've published our mailing list section. How do we not get this on the home page? It's quite simple. I'm gonna go to the dashboard settings. Let's go ahead and go back to the front page, click edit with Elemental. And then I am going to school all the way down here where we have a widgets area. I'm going to school down and under the pro section. You should see a particular element. Cold template is against its called templates of drug templates. Job that in here, I'm gonna choose my template as male. So after typing mail mailing list template, yes, that's what I want. And there you go. Just like that. We have the melon lists on our homepage. Let's go ahead now and hit updates and OK, so knowledge of Go ahead and view page and let's see what we have. Okay, so there you go. We have a subscribed to a newsletter. It looks good, except for the fact that our very much like to have the black background color fill the entire width of the section And also let there be no white space between the foot and the mailing list section. So, Jimmy never next. Video beer. I'll show you how we can make some improvements on our home design. I will see you then. 30. Quick Design Changes: Welcome back, my friend. Hope you having a great time. Hope you really enjoying this lessons and any previous lesson was successfully implemented . Our newsletter be connected are upset with Mill Chimp. However, even though the functionality has been set, the design is a bit off. As you can see right now, it's not looking too good. Ideally, we want the black background color for the newsletter section to go right to the edges off screen. And also we don't want it to be in the white space between the footer and newsletter section. So how exactly can we eliminate the white space and add the black color all over? If you'd like to think about this, you could pause the video. There are two things we need to change. Just two things. If you like to pause the video and think about this, I would highly encourage you to do so. I'm going to imagine that you thought about it. And if you have well, sure, exactly what to do if you didn't think about it. Well, it doesn't matter how awful. Show you exactly what to do. We're gonna go to edit with elemental, of course, and the two changes are this. Let's cool down here. We're gonna click on the edit section for the mailing list the first time we're going to do very quickly. It's changed the content with from box to fool with. However, that's not all you see. If I update the page now, okay and review the page. Let's come down here. You will see that even though the with has been stretched a bit more, we still have the edges right here, still in white. To eliminate. This will need to add a background culo to our section. The reason why you're seeing this space is because by default, elemental will add some Padden between your elements so that this way they don't bomb right next to each other. That the reason why we're having just a little space on the edges right there at the top at the bottom left and white, so elemental does, is to ensure that your elements don't bounce or heat each other. That's why so to get lead of that will have to add a background. Cole's Let's go back edit with elemental but but But bum bum bum bum get go back here and it's section go to style and then back on type will choose the classic Culo going to go with black updates. Now let's go ahead now in view the page. And just like that, the white space has gone all. We haven't noticed that black color and even though it's looking a lot better now, I don't know about you because design is very low relative. I feel that the black that we have for the millions section and then the foot isn't It's kind of be too much. It be great if we had, like, a different color for the footer section. So let's do this. I'm gonna go ahead now and edit With Elemental, however, I'll click on global food so we can changes globally. You've got a global food and then in here let's go to edit section style and they will change the color right here, too. Let me see a believe it's won't see one. Wow, what happened? Okay. Ah, I'm just There's there's gonna be one c one c want See? There you go. Once they once the one see updates. And now let's take a look at what we have. View the page. Go to the homepage, Brother. On that note. Let's see Black And there you go. There you go. I think this is a bit better when you have a slightly different Coehlo between the mailing list section and then the foot of section and of course, the our bottom section as well. I think this is a bit better, but hey, it's up to you. You can decide to stick with the black hole if you wanted to. One more quick change I will make again is to add a bit more space between the mail in section and then the product sections you can see right now the article bottoms a bit too close to the 1,000,000 section. So let's do this. I'm gonna go with edit with Elemental again, and then I'm gonna do is gonna go to edit section. We're going to go to advanced and then in here, I'm gonna add some margins. Okay, So margins are basically used to push content are sections away from one another basically right. So I'm gonna other margin at the top because, of course, we're targets. And so let's go with 30 Um maybe with 50 I think that's OK. by default, you'll see that whenever you add 50 to the top 50 is added to the bottom as well. That's because the values are linked together. So you have top and bottom linked together, all right and left, linked together. If you don't want that to happen, simple. Click on the button, right it's you break the link and then you can simply just make out the bottom zero in this case. So let's go ahead now and updates. And let's view the page one more time and better. This looks much, much, much better. So that's it. We have successfully designed our home page, and I hope you're happy with the overall design. Of course, it can always be improved, but I think this is a pretty decent and this will attract any potential customers to your website. Thank you for watching. I will see you in the next class 31. Creating the Search Results Page: welcome back in a previous video was successfully finished building out the home page full aw, e commerce stole and there were two more pages that we need to create. One will be the search results page, and the other will be the 44 page now by default, elemental and will commas provide a pretty decent template for the search results page. So, as an example, if I came in here right now and I switched full, that's a shoes as an example. All right, so we do have ah ninja shoes on display and, ah, it's there is the pages. Not too bad. It's pretty decent. Also, your message for something ridiculous like like this, for example. We'll get the search results for this, and they get the message that says, it seems we can find what you're looking for. So by default, the template isn't too bad. But we can improve this with element. And of course I'm going to show exactly how we can improve this. So let's go to the back end as usual. No surprise there, and we're going to go to once my page loads. Okay. I don't know why stick into a long Let's come down here to templates. Go to you thin build up and you can see that we've created so far. We're gonna create another temple this time, which would be the archive template. So let's go ahead. Click on our new cell, select the archive template, and then we'll just called. Is Thea sit results? Okay, Kuwait templates. Now, unlike the all the templates that have, like content within their per designs, the archives is just pretty blank as it is all you can see what I was just e structural issues so you can see we have two rows here the week to was with three columns. Here is just one column, two columns in here, so we don't have actually have any content inside. And that's because with archives, archives can represent anything that can represent clothes, toys, computers, electron ICS, different kinds of products. So it's a bit more difficult for elemental to use a particular kind of product to demonstrate how the timber it would look like. So this cause I'll just go ahead and choose the very 1st 1 in here. Let's insert that one and OK, so nothing really to showcase in here. But what I will do, though, is I am going to school down here to where we have welcome us. Okay? And I'm gonna go ahead now and add put up two categories. I'll explain why in just a second these job categories in here All right. So by default, we do have four. But we can take this as high as let's say, ah, eight, as an example. Chemical Also in quizzical ums to eight. And oh, I do have one particular category that doesn't have an image. Okay, we can change this in just a second. I can go ahead, come down here to query. Okay? And in here we can change the source from Show All to, Let's say, by Dick coined sub categories, which will be the two main categories men and women all. We can just go by manual selection. So let's just do this, Okay? I'm gonna go ahead and just simply ad these manually instead. Jackets. Ah, jeans. Luis, Let's Ah, what else do we have it? We have blouses. That's 1234567 Let's choose one more T shirts. Not does go shoes, shoes and ah, there you go. Okay. Okay, Cool. Let's go back to our elements. I'm going to drag a head in in here, just evolving here and I'll call this. I'm going to say our product catty Gorey's All right. We'll make this. An H three will put this at the center there. Okay, So what I'm doing here is should in case a customer searches for a product that doesn't exist in outside, they will see this message. But then below they will see are the links to the categories are present that it can click on. So, ideally, you want to be able to redirect users on your searchers all spirits to your products, beyond the can by different types, right? Not for these actual message itself. We can customize this. I'm gonna click on the edit button right here and then all the way down here, I'm gonna click on advanced. So in here we can customize the message so it stays by default. It seems we can find what you're looking for. And then I could just tagging him and say, however, check out the product categories. Ah, that we have below that. That All right? Okay, cool. So this will be the message that they will get. And then from here, they can easily never get to other parts off our website. Not too bad. Now check this out. Okay. I'm gonna come down here. You have the eye quick right there. Go to settings. Now, in here, we can preview this particular template based on the search results. So I'm gonna click on such results. And then as an example, let's say we were searched for genes. Then I can apply in preview and see what the results are. Okay, It's not bad at all. So the search results for genes. We have the chicken genes, the cool jeans. We also have the school to should Chika blouse. I'm guessing these are also at it because they are related items to jeans. As you can see right now, even in the script description, it stays comfortable blouse that fits well with jeans. The cobra is also if it looks good with James, the dish looks coverage. And so the search results works very, very well. And you can see the design is pretty good and then down below as well. We have the option to go to the order put categories, But let's try something else. Okay, let's go back to the I go to settings. Let's search for something we do close that. I don't end up something, something like this again. Apply in preview. Let's see what what we're going to get. Okay. Such results awful. This particular unique product, it seems we can feel what you're looking for. However, check out the characters that we have below. Excellent. I love this. I think this is pretty cool for the search results. Let's hit. Publish now. And then, of course, we'll have to choose a condition. I'm gonna go ahead now and simply choose the search results. Safe and close. Update is live. Let us have a look and see what this looks like. Okay, I'm going to go back to the home page and let's go to the search stepping for jeans. Okay. Not bad at all. Let's search for something else. That's it for Batman. Batman gadgets. Do we have any Bettman gadgets? Oh, no, we don't have any Batman get is. But we do have or their products in these categories. So that's it we've successfully created. It's such results Page and by the way, Such results page is very, very important, especially if you have a Norland store again, people. If you're selling like hundreds of products, for example, people should be able to simply jump into your site and quickly search for the exact product that they're looking force. This is why you need to create search results page for your website. Thank you for watching German event Expedia. Also, you have to create a four or four and will page l see you then. 32. Designing the 404 Error Page: Welcome back. Hope you having a great sunny day wherever you are. Unfortunately for me, as I'm recording this video right now, it is raining heavily outside. It's just past mid day, but it's raining its stock, and it's gloomy, but not to worry. I'm still in a very, very good mood, so let's continue with the vest off the tutorials and in the people's video, I showed you how to create a search results page for your online store. However, you also want to create a different kind of page, which is your four for Aero Page. So, as an example, if I went to, let's say, Ah, the men's category as an example, and that's just the open here rather than men. I ended up going to men seven as an example, enter. So this is what you call a full four pages, basically the pace that's shown when subscribers or customers land on a page that doesn't exist on your website. So by default, you know what the sea every it's Yeah, the pitch can be found, and that's pretty much it is very, very generic. It's not great. Ideally, you want to create a full forever page that is entertaining. That's funny. But also, more importantly, a page that can redirect use as back to your website. You might be thinking, Well, why would any user or subscriber deliberately go to a paid your bill that doesn't exist on our site? That's a good question, however, as you begin to create content, whether it's posed pages products, all this country will have links right and you might end up posting those links on blog's might use those links for at the ties Man's and Facebook, Google and so on. And then in the future, you might decide to delete those products. You might even decide to update those links to something else. A user who ends up using or clicking on any of those things that you've posted before will end up on a 44 a rope it because those links have since being changed by you. So in such an instance, you want to be able to redirect such a user back to your website so that you don't lose them as a potential customer. Hope them extent. So how do we modify the default for forever? Page with elemental Well, very simple Go to the back end and you already know what's gonna happen. We're gonna come down to templates. We're gonna click on add new as always, Select. And we're going to go with single, both type fulfill page naming templates full for create templates and check this out. So elementos gonna give us different templates as always. And, uh, I like this one right here with the guy like, Oh, that's too bad. I like this one. I also like the one with the baby as well. Honestly, you really want to make your four full pages entertaining you want, like at some humor there, So I'll just go ahead and choose this one favorite simple. Let's go ahead and start that. Okay, so it's a full, full hopes page not found. Go back to home page and ah, it's not bad. L is this way users can go straight to the home page, but we can improve on this just a little bit. So what I'm gonna do is I'm going to delete this column by tail. It's ah to lead that one and gonna come in here under basic. I'll drug the intersection and I'll job that's just underneath the group's patient found this trip that in there. So what I'm gonna do is I'm gonna add two buttons now. So let's do this at the bottom right here. Drop that in there and what I'm gonna do is change the size two extra large. I'll lend it to the center. Let's change the text. You Ah, visit home page and then for the link, I'm going to go with Dynamic right click on the Icon does what next dynamic. And then I'll choose the site. You are l so this way. If anyone clicks on visits home pages to take them streets to ah, home page Okay, like this and then what I'll do is right click and all Simple, great and duplicates come down here. Click and drag job this one right there and then change this visit home Page two visits our store and then for the link itself will have to change it from dynamic to just a Regula you are Well, it's all coming here and add four slash and then shop, which I don't think this would work, though, because we haven't changed the prima lings ever. We'll get there in just a moment. So that's it. Let's go ahead now and hit. Publish and OK, yeah. We want to display this on a full full page, saving close. And there you go. Let's go ahead and have a look and not bad for four Page not found. Visit the home page. It goes to the home page. Let's go back, visit a store and you can see that it doesn't work. So it's not working because the Pamela structure that we have currently is not structured to display the shop. You are well as but they find it. What am I talking about? Well, let's go back, Teoh. A website. Now take a look at this. A cape over here. On the your bill, you can see there were under the men's category of products. So you can see we have the question might put up on the scorecard. Tickles men. If we clicked on cool blazer, you can see again We have the question. Are politicals Kool Dutch blaze up? This is not a well defined propelling structure. So to change this Pamela instructor to something more to find, let's go to the back end. First of all, come down. It's settings go to prima links and then all do this all changed the common settings in here from plane to Post name and then down here, our changes from default to shop a base with category safe changes. And now let's go back and take a look at what we have. So let's go t men, Cool Jin's. Now take a look at this. This is way better than what we had previously because now we have the main shopping page right there. We have the main category, which is men, and then we have to put out which is cold. Gents, this is a multi better define structure for Oprah Mullings, and it's great for SC or for Google and other search engines. These search engines love it when you're peddling is haven't well defined structure. So to be very honest, this is something that we should have done, Alia. But it's OK. It's never too late to change the pummeling structure. So now that we have shop appearing in the Euro area, it should work with our 44 page. So let's try something in here were just happen some garbage right there. Let's go to the 44 page. Now let's visit our store. And now you can see that it takes us straight to the shopping page. So that's it for the full four, Errol Page. Hope you've enjoyed this tutorial. German of earnings Variable will continue to build out our online store. I will see you then. 33. Customizing the Archive Page: one more tempered elected talk about would be the product archive template. Now if I went to the woman's product as an example, we have a well defined template for the products archive you can see. We have the number of results, the images of the put up state title, the prize, the article buttons. And it is also a very nice are filter over here, where you can sort by popularity by the prices from low to high or high to low. This is provided by commas, not elemental global commerce. Now elemental does have its own product archive template that you can use. However, it's been duplicated, and it's not very effective to be. To be honest, my recommendations you will be will be to stick with this template that will come, as has provided you if you're using a different theme. And that theme most was designed to walk with newcomers. That thing might have an even better template for it's on archives. It's up to you to check that out. But even though these has been provided by will commas, we can still make a few modifications. So to modify the archives page for will come us. Let's go to the back end. Appearance cost Ahmadi's. And then from here you go to Woo Calmus. Okay. And then in here you want to go to your product catalog, So let's just Okay, so it's given us and examples over here right now, you can decide how many products you want. A shopper row, How many votes but pages What kinds of drugs you want showed. You wanna show only the sub categories or sub categories and products. How do you want to sit out the products as well? So you really do have some level of customization for this particular kind of page. Now, what I like to do is get rid off the imaginations. All right? It's a very good idea if you can just have all your products least at on one single page the black Facebook, where your customers just keeps falling down, schooling there on school in there until they find it put other they actually like. So to do that. But I will simply do is those per page I can just go something ridiculous. Garlic 100 for example. This way, all our products will be displayed in no matter What So all the customer has to do is just keep on scrolling down, scrolling down, scrolling down, scrolling down, scrolling down onto the find A probability, actually like So That's one more question that over. Commend that you make four bullets. Powerball is also pretty good. But again, depending on your design, you could go as high as maybe five or maybe even three per page out. Say I've recommended on three or four per roll of other. So that's it for equipment. In addition to the archives template. Thank you for watching. We'll see the next class. 34. Design Work Arounds: already. We've almost come to the very end off the design phase for these tutorial. And so far, so good. Everything that we've designed so far has been pretty decent. The home page looks nyse. The photo looks nice as well. The header looks pretty decent. We have, ah, good shopping page. Listen out. All the items the individual put up pages also looked pretty good, well defined, well designed. However, there are three pages that it's a bit more difficult to design using elemental, and those pages would be your caught page. This is provided by welcome us is. You can see the second book pages will again provided by will commas, and thankfully, it doesn't look too bad. This looks pretty neat, well designed. There's there isn't too much of my need to change in here. However, the my account page looks a little bit bluff. You can see there is very little space in between the foot are, and then the list items on the my account. Unfortunately, as powerful as elemental is, it's still lacking in some aspects. When it comes to integration with Wu commas and specifically on pitches like my account, you cannot really design the layout forward in my account page with Elemental as an example , you cannot change the order off the items in here. So, for example, you can say I want our payment methods to be at the top, and I want that. But to be at the bottom, you cannot do that. The only thing we can do is to either add extra content to the my account page or maybe just add if you design changes heaven, they and the one that sent you don't want to make him specifically would be to add some space between the my account content and the header as well as the foot of the physical will add some margins. But how do we actually do this? You might notice that we cannot edit these actual page itself with elemental. Remember that if I go to the back end, I go to welcome us. Go to Satan's go to advanced over here. Look at that. My account page has been set to my account woke. Hamas has complete control over the card page, the check out page and the my account page. This is why we cannot design any of these three pages using elemental directly, but there is a walk around. If we're going to redesign the d my account page, here's what we're gonna do. I'm gonna jumping into pages, add new and let me add a new title in this case, you to be account. You don't want to use the same exact titles for your walk around pages. So don't name my account. My account. Give it a different names. In this case right now, this one will be account. Okay, so very simply, I'm gonna go ahead now and edit with elemental. This will take us over here. Okay? First I'm gonna do is I'm going to hide the title. So let's click on to get booking right here and hide the title. Let's go to the elements. And now what I'm gonna do is I'm going to school down here all the way to where we have welcome us and then all drug welcome those pages inside, and then I'm going to choose the my account page. So now we have the content for that. My campaign shipment displayed, but we can now add some margin because I'll go to the edit section button right here clicking their go to advanced and then we can add some margins. Let's go with 14 for the top and in 40 are below. Let's go ahead and hit. Publish. Okay, let's have a look. Very, very quickly. Okay, this looks much better now, as you can see. Awesome. But then how do we set these actual template to be the my account page? Very simple. Let's go back to the back end. Go back to welcome us, Go to the settings and that will go to advanced and then changed in my account. Page two accounts. Okay, let's see if that changes. Let's now go to the appearance. Go to menus. Don't forget about this one. Very, very important. And that will add accounts. Oh, I'm sorry to the main menu, but before too many, let's like the main menu first. Okay, that will add account ought to menu. And then we can remove my account and then add the account in there. And then we can even add another twist will simply change the label to my account. Okay, very, very smart. So we're not changing the your available. We're changing the label to my account save menu And now let's go back. Let's go to my accounts And there you go. So that's walk around on how you can design the pages that you cannot directly design with elemental. That's my account page, the check out page and then the called page. Remember that you can always add extra content if you want it to, because now we can edit this page with elemental. So that's it. Thank you so much for watching. I will see you in the next class. 35. Responsive Design: one last topic we need to talk about before we wrap up. This section on design would be responsive. Design National Family with Responsive Design It's simply how your website would look like on mobile devices. Keep in mind that more people now view or browse the Internet, using their mobile phones than they do on the Regula next up. So it's very important that your website looks good on all kinds of devices and thankfully by default, elemental doors a very good job of making sure that your content is responsive. So this is my normal deck stop view mode. But let's see what it looks like if I reduce the screen size. So this is typically a tablet ah view and you can see it still looks very, very, very good over here. Okay, the future looks a bit odd, will change that in just a second. Let's take a look at all the pages within the ah tablet view. Okay, so the single product page looks very, very, very good like that. Let's try the Regula category page shop now let's see. So again, this looks very, very, very good. Ah, the header also looks pretty decent against right now that the menu has turned to the hamburger menu. We can change or two if it wanted to, but the food does have a bit of an issue, so I'll fix that in just a second. Let's go a bit further. Make it smaller all the way. Now this would be the usual. Develop our mobile screen for your mobile phone. So let's go to the home page. Let's see. Yep, this looks very good. And even the food tell looks very, very good as well. The foot It looks much better on the mobile view than it does on the table view. Let's try, although pages, Let's go to the jewelry page. See how that looks like. OK, good. Let's take an individual product peal necklace. Let's see how this looks like. And ah yep, not bad at all. No bed at all. Let's look, look at the mic on page. Okay. Doesn't look bad either. Let's take a look at Ah, check out page. Okay, again. So, overall, everything looks pretty good. Except for the footer section. In the tablet of humility, Richard Quincy is kind of off. So how do we fix this? Well, it's quite easy. I'm gonna go with edit with Elemental and then click on the global food. Let's go there. So we're going to edit the global Food and Responsive Mode Now, over here, down here. But you have responsive mode. The screen. I'm gonna change this and I'm gonna go to tablets. You can see preview for 768 pixels as a tablet view. Let's click in there. So now you can see this is where we have the main issue. Okay, What I want to do right now is to make the very first section in here two column. So we have the contact information and then we have the follow us are icons right next to it. So let's do this. First of all, I'm going to click on the column parking right here for the contact section and then in here You consider column with has been set to 100% note that the icon for the Tiber device is in blue. That tells you that we have you in this way. It isn't this in the are tablet view, right? So I'm going to change 100 right? Yes, you 40. So you can see right now that because the with has been reduced, it has automatically bumped up the quick links column instead. But what? All the incident is our drug to follow section right there. Let's switch this. So now we have follow us by next to it. But then I will increase the width of the followers section and we can go as high as 55. That's pretty good. So already this is starting to look much better to contact. Follow us. And then for the quick links, note that the menu has changed to the hamburger. Many. But I'm gonna change this. Okay, personnel do is first of all, increase the with for the quick links called me conceal. Right now, it's very, very, very small right there. That's the border. We'll go all the way to 100. So now it occupies to fool with okay. And then I'm gonna click on the edit button for the menu right there. And then over here, you can see we have the mobile drop down. This is the brake point. At what point does the menu turn from the regular menu into the hamburger menu? I'm going to change this instead to mobile. So now you can see that until the screen gets to this particular size, the with size, the legal out links will be displayed, as you can see them as their right now. So what I'll do is I'll simply aligned this to the center. So let's click on the edit button for the quick links sent to that. And then we'll click in him as well and then aligned that to the center. And there you go, we done. Let's go ahead now and dates and voila So we are done with the responsive design. So that's exactly how you can make a few changes use in the responsive features with elemental. Hopefully, you won't have to make all that's too many changes because elemental by default does a good job off are making your content responsive. But that's it. Full, responsive design, thinking fortune and I will see in the next class 36. Designing Popups: welcome officially to the final section off this mega tutorial Will will be covering are extending the functional tee off our online store on the very first functionality I'd like to add would be pop ups. Now I'm pretty sure you have visited online stores in the past where you visit the site and then you see this pop up advertising, ah, discounts advertising, some sort of new put out that they have on Sil. So I want to show you how you can do something similar using Elemental. So to do this, very simply, go to the back end as always and in templates, will click on pop ups right there. Let's go ahead and create our first pop up. We'll name this the let's see what we have. Ah, discount offer for Christmas order. Let's just as you it's Christmas. Even though it's June, they just assume it's Christmas Kuwait templates and ah, but let's see. All right, so we have defend for design templates in here. Now there is one which I rather like. There's one already built out here for for Christmas. It's a happy holidays. I like this one, but it doesn't offer like this counts. This is more like we want to hear from you kind of message. Let me show you. You can see. So I want you something different and it's gonna be this one. Down here you have the 30% off, so I'll go ahead and instead that one. And of course, we'll make some changes. It is Christmas, so I will change the background image. So we'll click on the edit section button, go to style, and then we'll remove this image. Choose another one and I do have my Christmas image right here. Let's insert that. Okay, we'll change it. Texts as well. And let's say, Ah, it's it's cursed. Mas hole, hole hole, Get huge. Do scones. Uh, this cones on all our products whole, whole, whole, whole That don't something like that? I don't know. Okay, um, let's change the call of the text so we'll go to style text color. Of course, we're gonna go with the regular white and ah, bind. Now let's let's click on the edit button Changes one Teoh shop now shop now. Ah, that and then the link, Of course. Bill at the link Ford slash and then shop. So this will go straight to the shopping page. Okay, shop. Now what else can we do? Let's go back to the overall section. Let's go to style layout. Ah, let's see. Content with its boxed Well, okay, I'd like to extend with off the pop up itself, so I'll come down here to the sentence button and then with Will expand is just a little bit more Teoh 4 64 That's fine. And I think this is good. If you can, of course, make all the changes. You can change the content position from top to you. Send toe ticket to the bottom. If you want to put all of it on top, you can add your overlay at the close button, fading left at some animation. It's really up to you, and that's gonna go ahead now and hit. Publish. Okay, so pop ups a bit more sophisticated than your regular templates? First of all, we need to add a condition. Where would you like to display this particular pop up? Let's go ahead and add a condition. Now I'm not going to go to the entire site. What I will do instead is I'll go with Blue commas, and then I'll choose the entire shop. So whenever anyone goes to any page that involves the shop products, they will see their pop up. Okay, let's go ahead and hit next. Now the triggers. Now that the user has jumped on the shop page or do they need to do before the pop up is actually displayed? You can go with the on page load. What this simply means is that they don't have to do anything. Once the page has loaded, the pop up will be displayed after a certain amount of time. I like after Let's go with after three seconds after three seconds. Once the pages loaded, the pop up will be displayed. But you can go with the on school on school to an element, which is actually very, very cool. This way you can show the pop up on Lee when the user has actually school to a particular product and then the probable show. But in this case, you need to use like toes. Yes, it's a bit more fan, so you may know war yourself for that one. It can go with on clicks after paid off in activity and then on page exit intent. This is very, very powerful because this will display the pop up whenever the user wants to exit the page just when the public will be displayed. Be careful not to overdo this typically are recommend. You just choose one out of this triggers because you don't want to trigger the pop up way too many times. I'll just go with the on page load for now. Okay, let's hit next. And then finally we have the advanced rules. What other requirements there is used only to satisfy before the pope is actually shown out of these? What over commend mostly would be the show up to X times. I'm gonna go show up to two times. Okay. This is very important because you don't want a situation where you're constantly displaying the pop up every single time to use that get century new shipping page, it becomes annoying. So you want to restrict the number of times you're showing this pop up. But some other cool things you can do in here you can show whenever I'm from a very specific you are. Well, you turned on. You can go with the you have else Let's say, for example, that this person came from a particular website. You can customize a pop up specifically for people coming from the website and say, Hey, you came from this upside. Here is your special discount. Something like that. You can even go with the show when arriving from attorneys on. And then you can add like search engines, external links. You can customize this and say, Hey, you came from Google. Here is a special discount and so on. You can also hide for locked in use as you can show on all devices. Or maybe show only until that some bubbles. But all those turn all these off and just keep it on the show up to X times, which would be two times I'm satisfied with that. I like that. Let's go ahead, save and close. And there you go. Let's have a look, and I'm gonna go to Ah, the front end. All right, so let's see. 123 full five. No pop up. OK, now let's go to the shopping page. 123 And there you go. Now we have the present off. It's Christmas. Ho ho! Get you discounts on products. Oh ho ho, it's up now it's exam straight to the shopping page. So that is exactly how you can create your pop ups using elemental. Keep in mind that we do have different types of pop ups. If I go back deductible settings, templates pop up slim. Just quickly show you Let's add a new pop up. Let's just call this one tests just very quickly Create template. Papa. Papa, Papa. So from this page right here under the category, you can see the difference is that we have We have the bottom bar. You have the classic as well, which is what we just created. You have the fly. Anybody pop up just appears. And then, of course, you have the full screen. You have the hello ball, you have the sliding and so on. So feel free to play around with all these different types off pop ups. Now, if you're interested in learning more about pop ups, I do have an extensive tutorial on YouTube where I talk about how you can create pop ups with elemental and uh oh wow, This is not a very good official expression anyway, enemy. If you're interested, I'll be sure to check out the to travel that they have on elemental on YouTube. On how you can create problems, I go into much, much indebted details on the different kinds of pop ups and the triggers, conditions and so on. So that's it. Thank you so much fortune. I will see you in the next class. 37. Order Tracking: Okay, so let's talk about the very first plug in for extending our functionality off the store. And this would be the youth Woo Comus order tracking Plug in. Now off all the players are going to introduce to you this is probably the most important off them all. And it's because, well, this plugging allows your customers to track the shipment off the items that they bought on your stop. Imagine you go into an online store, you pay for a product and then you don't know it's ah, it's very about You cannot track the shipment. It's not ideal. You don't want customers having to call you, send you emails and hey, you know, where is my shipment? I don't know where it is and you don't want to spend time answering such questions. So it's always best that you have a system set up in place where you can provide a tracking number to your customers, and then they can use that tracking about to simply track ah where their products are. And this plug in is very, very good for this, and this is a free plug in. However, they do have a paid vision, which I'll talk about in just a moment. But first, let's take a look at the free vision and what this can actually do for us. So you can go ahead, go to youth will come out on the track in and download, install and activate the plug in. Now, when you do that, you will see in a bit your back, and you will see the youth icon right here telling you that. Okay, you do have a youth plug in installed on your site. So from GIF, you should see if you click on it right now. You should see order tracking. Like so in here. You will have the general settings. So no, this is the free version. We don't have access to your human vision yet, So this is our on accessible. But we got to general in here, you can add your default caviar name, so I'm just gonna go with DHL cause I like DHL now. This is the default text that will be in your orders Page. Your order has been picked up by the carve your name on pick up date and then you're tracking code. Is this OK? Position of the text on the orders paid. Showing top from bottom. This is up to you. All those. Go ahead. Now save my changes. Okay, Now let's go to you, will. Come on. Let's go to our orders. Take a look at this. We have on order from Jon Snow, and it's processing. Now, if I go to the orders page because of install this plug in to the right, you will now see order track in. So in here, right now, I can add the cover name, which would be DHL. And then it can add a tracking courts of something like a for 56789 b o l I s e police. Yeah. So, whatever, this would be the check in code. So in here, right now, I can simply come in there and update. Right? Okay, Now check this out. I'm gonna bring over my Firefox. All right, So this is me looked in as Jon Snow, so you can see gents know now if I go to my orders in here, you can see we have the number 359 processing. If I click on view. OK, but come down in here. We still don't see any information about the tracking. That is because I on my end as the supplier, which in this case would be you. You will have to come in here right now and signify that the order has been picked up and also choose the date that the order was actually picked up. So in this case, I'll go with, Ah, 23rd of June. So once this has been selected, other has been picked up, and I updates. Now Jon Snow can begin to track his order. So let me just make sure that this is actually updated. Now, let me go back to Firefox. Has been fair fucks over. Let's refresh this page once again. Now check this out. Your order has been picked up by DHL on June 2030 19. Your track code is this. So now Jon Snow can go to DHL and then use this cold to simply track he's shipment. This is what the free vision of the plug in will do for you now with the paid version which went and you can see I do have the premium vision activated. The free version has been deactivated with the paid version. If you go back to youth and you go to or the track in in here right now, you will be able to choose your default caveat name. However, before you can actually choose it, you'll have to come over here to have years and oh my gosh in here. I don't care what country you live in. You will find a carry. It actually operates in your country because you have just about every single carrier in the world right here. But it's a China. Japan, Vietnam, Russia, France, Denmark, Hong Kong Tight one. You have all the carriers in here, so I'm pretty sure you will find a candidate walks in your country. So just as an example, let's go with our vote bull like that Will bull. Let's go with the speedy Let's go. If they're a stop pack TNT, Italy and ah, ups. Okay, let's go ahead and save changes. So let's assume these are the canvas that we walk with. Now, if I go back to general in here, I can choose the default carriers. In this case right now, I'm gonna go with ups. Okay. Now, in here you have the option of choosing to automatically, said the older sister, completed Once the order has been picked up by the carrier, I will not become in that you do this because setting in order to complete a typically signifies or implies that the customer has received their shipments. So it's up to you. But I will. I wouldn't recommend that you do this. So, just like with the free version of the plug in, you can change the default text to change the position with the paid version. You now have access to the e mails as well the kinds of emails that your customers would receive once the shipment has been picked up. You can modify the text in here as well, and then you have this option of also generates in the pdf invoice but inactive. What? Walk with this, you will have to have the invoice payment plug in installed. So but just ignore that for now. Let me save my changes. And now let's go to the orders. Let's come down here to Jon Snow. Okay, so let's see what's happening here. Okay, so I'm just going in here right now and add the d tracking posting code. It's optional. It's not terribly important biologist at something that here 878 Okay, so it's been picked up. That's the trick in code. That's update. Now, if I go back to Firefox now, let's see the difference form Jon Snow's perspective. If I refresh the page now, take a look at this. Now, we have this really beautiful tracking. I couldn't write this, and Okay, well, your order has been picked up, and now all Jon Snow would have to do is just to click on track, and it will take him straight to O. It was supposed to take him to ups. What's going on? Okay, island, just close this. Let's go back to O. Okay. So in here, where we have the order details, I did not choose to carry a name you can see in here. I have to choose ups. Okay, So, yeah, ups. Let's just go ahead and update this. Okay, Now it should work if I go back. Two Firefox. Let's refresh this page. Okay? Indulgence. No tracks, and you can see it takes him straight to U. P s, where he can add the real tracking code and simply track his package. They can see the two major differences between the FRA vision and the paid fishing with the paid version are you can choose from your end as the supplier the whole bunch of caviar, as you can choose your default, our carrier and then from the perspective off your customers, which is very, very important. They can simply just click on the track and link right here until they came straight to the website off the Are carriers website. They don't they don't have to go there, are manually and add the tracking number themselves. I know that so technically you could get away. Using the free vision of the youth will come out on the track and plug in. You could. However, I will strongly recommend that you go with the paid vision because it makes you said, look more professional. And of course, it will be a lot easier and more confident for your customers are to use the pay division of supposed to be free innovation off the plug in. So that's it. Thank you so much for watching. I will see you in the next class 38. Managing Refunds: Welcome back. Let's talk about the next plug in for improving the functionality of our store. And this is gonna be the youth advanced. We phone system for kamas now, just like any other business owner. You probably hate the idea off refunds, but this is something that will happen eventually. Eventually, you will have a customer who would buy a product from your stole, and they may not be happy about it. And as a result, they will demand for a refund. You need to be able to set up a refund system in place to handle such occurrences. So this is a very good plug in that I can recommend for setting up such a process. And just like with the order tracking, plugging but talking about previously there is a free version, and a paid vision of this plug in will walk with the free version first. So I have a really installed and activated the youth advanced before system for commerce plug in on my website. You can do the same and when you do the same, if you come down here to your back end, you will see a section in here for the youth of refund requests and then further down here on the youth, you will now see the and fans that we found System are links. Let's click in there and do some settings. So first of all, you will have Teoh make sure this box is checked to allow refunds, and then you can set the number of days for refunds automatically. Here it said 2 30 You can extend that to 60. It all depends. And then, of course, you can also enable taxes. If you want to refund, are the taxes as well? Avalon. Check this and simplicity. My changes will talk about the people a vision in just a second. Now, if I go to my orders page, let's go to John Snow's order. So anyway, never click on status in here. You now have the option of re funded by day. It's available now if I bring in Firefox, all right, And that refresh. This is from the perspective of Jon Snow now on his dashboard. You can see he now has the my refund requests so that customers can click him there and take a look at all the refunds that he or she has made now, when it comes to the orders themselves, take a look at this. Jon Snow can now view his order and then in here he has the option of reformed in his entire order. So if Jon Snow comes in here and say is very fun, my entire order and then you will have this box saying, OK, why are you asking for a refund? Because I am going to the north off the wall. But the Avery game of Thrones fan, you probably might understand this reference. If we don't, it's OK. I'll just go ahead and submit this. Okay, now surgeons know if it goes to my refund requests now he can see that. Okay, here's submitted the request to have his order refunded. Now, if I go back to the back end from our perspective and I go to youth refund requests, check this Arctic looking here and now you can see right here we have the yellow icon saying, Oh, there's a refund request from Jon Snow and even if I go to the orders page in here right now, you can see the request is also there as well. So it's very, very obvious to the admin in the back end that hey, someone has made a request. So that's exactly how the are free vision of the plug in Actually works now with the paid version. I don't have a copy of the plug in to show you it. You know how it works on my store. However, I do have access to the demo. So with the paid version from the back and in here, you will be able to set additional options for your refunds. So, as an example, you will be able to close new requests or without exceptional rejecting the request. First, you have adoption in here. Now for the refunds themselves. You can activate to have all the funds automatically accepted. Its option is right in here, and then you can also reach stock refunded items on automatic refunds, which is a great idea. And Indian also said a minimum amount of the order required to accept customers requests again very useful. You can display a message which shows users that the product is refundable or you can also indicate when a pull it is not refundable, and then you can edit the kind of textile. But it's played in such a scenario, you can all file uploads as well in this case right now. This would be ideal if you want to. Cosmos stick pictures off the product may be the customer said that the package arrived, destroyed or not in the right order, they can take pictures as evidence and send those to you so very, very important. And then also coupon settings. You can offer coupons in place off reform, which I think is a great ideas. It can see you have all these additional options available when you're walking with the paid version off the plug in. Plus, if I go to the orders page, I'm just show you from the perspective of the buyer right now. Let's go to my account orders. Okay, let's take a look at this view, okay? This is very, very important. Now, with the free version of the plug in, the customer cannot ask for partial refunds. So this guy's right now where we have to separate orders. One for bag the bag Russian alone for the gift bag you can see with the paid vision. The customer has the option of asking for a refund for a specific product. If you're working with the free version, the customer will not be able to ask for separate reforms if the customer purchased three orders and wants to three items of one order and most to ask for a refund for one particular order or battle items. I'm sorry they will have to ask for a refund for the entire order. So that's kind of like the main issue walking with the free vision off the plug in. So I would recommend, if you can afford it, go. But the paid vision off the advance that we formed our system plug in. So that's it for handling refunds. I hope you enjoy this tutorial there. Any questions? There's always be sure to reach out to me. Thank you for watching. I will see you in the next class. 39. Managing Gift Cards: one more point like to talk about would be the youth. Will commas gift cards? Plug in Now? Why do I recommend this? Well, not every customer who comes to your store would want to buy other products that you're selling. It could be that maybe they wanted to get something for their friends and loved ones, but they don't know what to get them. In this scenario, what they can do is to simply get a gift card from your store, send the gift card to the friends, and then their friends can use the gift cutter per chase, whatever they want to get from your store. So implementing a gift card, our system on your store is a great way to drive more sales. And this is an excellent plug in for creating such a system. Now, just like with the previous to plug ins we've talked about, we do have a free version and a paid version. Let's talk about the free version first, so I have installed and I have activated the plug in Never come down here, Teoh, yet you will see the gift cards can click in there and OK, so you will see this message. This is Go ahead. Now click on Kuwait. Your first gift card. Let's do this. So the product name. I'm going to call this Christmas, Love. Okay. Description not show what Teoh get for your loved ones. Uh, let's see. Ah, why not gift them a gift card? Okay. All right. So put up categories. I'll just go ahead and add a new category and call this. Ah, gift cards, gift cards for care degree at that one. All right, put tags. I'll give this one gift card. That's at that. And then put a image. I'll just add this gift cut right here. Now check this out. Okay. On the part of data you want to go with the gift card? They will now have this option for gift cards to choose that one. And now in here, you can add the month that you want your gift card to have. So this goes right now I can go with, let's say, $10. You can have 14 $50 as well. Let's have a few more. Let's go with the 100. I will go with the 2 50 will go with 500 and of course, for the very, very rich people will go with 1000 US delays. Okay, so we have six different options. Full the gift card amount. I'm just go ahead and copy this text. Come down here. Paste at Aziz. Well, and Ah, OK, I think that's about it. Let's go ahead now and hit. Publish. And OK, so we have Christmas love. Let's now bring in Mr Firefox and Mr John Snow. Let's go to shop. That's what we have. Gift card Christmas love. Okay, let's look inside. What do we have here? You can choose the amount. Okay, let's go with $50 again, let's add that to the court and let's go ahead and view the court as well. And then we're gonna proceed to check out and let's come all the way down here. We'll just go ahead and use stripe agree. Place the order para para palm. OK, and there you go. So now Jon Snow is gonna have access to the gift card Code white here. So Aldrin Stone, it's to do right now is just to send this code to his friends or family members or whatever , and then they can use this code to get $50 worth off the goods film are start now from our back end. If I now go to gift cards and I click on gift cards, you can see that automatically. The gift card has been created because Mr John Snow just made the order so that the gift card by there. So this is exactly how the free vision of the plug in works. So what about the paid version off this plug? And well, as you can see, I do have it installed. An active on my stop Siviglia to youth Go to gift cards under General Cetin Zeke Incident. We have access to a wide, wide range of different kinds of features. So I'm gonna do my very best to try to go through all of this as quickly as I can. So what do we have in here? First of all, we have the allow manual amount option on every kind of gift cards. So rather than state in the specific specific amounts of cash for each one of the gift cards, you can allow your customers to dictate that so they can be very specific. They can say OK, well I want to give to my friend. 6 to $7 are worth off a gift card so you can allow your customers to do that so you can take this box right in here. And then you can add a minimal manual amount of a gift card in this case. Right now, I'll go with 25. Okay, now you can also enable the scent later which I Haley recommend. This way, you can have customers send the gift cards on the birthdays on special days and that they will never have to forget. So this is a great option of the commander you do that allows you to set multiple recipients for single gift cards. Again, this is up to you. By default. It's checked. You can set a gift card expiration date if you wanted to. You can also should've recipients name and email address in the cart. Yes, let's do that. I love recipient. It sells for physical gift cards. Okay, this guy's right. Now a form will be added with the recipe ins named Sender's name as old, as well as a message from the Ascender to the recipient. So let's add that physical recipient details has been a tree. Uh, now I wouldn't I wouldn't take that box. Preventer. Chase and visual give calls in physical gift cards in the same order. I think this is a great idea. This way. Don't be any confusion. Ah, play gift cut code on the cart page. Or you can also apply the gift cut code on the check out page. I would rather were displayed The gift cat code on the check out page. I think it's better this way. You have the option of this plane, the form directly and in here you can see the description. I think it's best that you just allowed these option where you have to take the Sezer, have a gift card. You know, click here to enter your code. I think that's much better than just explain. Give cut form directly. So before the check out form. Ah, okay. There are other options in here as well. I'll go with the before the check out form did formats. I'll leave that as it is. All right. Gift. This product. I think this is very, very important. You can allow users to buy a gift card with the same amount of the products they would like to gift. So I think this is a good idea. What this will do is just on the single products page. There will be a button way that where that say's gift this product. So the customer can simply click on that link and give the particular product you whoever they wanted to give it to. So I think that's a great idea. I will not display the on the shopping page. I think this will affect the design of the shopping page on Check this so this option will only be available on this single our products page. Right? Ah, email button actions at the protocols. Yes, I play automatically this count. Ah, no ml Bachmann Redirect go strictly to put a page. Okay, our email button labeled go to site. Okay. This by the way, these email here is basically the email that the recipient of the gift card will receive. Just so you know, we're all right. Next we have in here design and images. Now you can allow your users to upload a customized image for the gift card. There isn't why this is a great idea. Is because your customer it might want to purchase a gift card for a very specific kind off event. And if you allow them to upload a custom image, they can sell its very customized image for that particular event and then use that image and then send it student asleep. And I think it's a great idea, so I'll definitely encourage you to allow this option. Our image. Max size set a limit in megabytes. Old highly recommend that you said it limits. You don't want customers uploading images that are very, very large. Enable use Put image option yes. Allow users to use the public image as main gift card image. Okay, and now enable for the gallery. You can allow users to choose the gift cut image Among the wounds in the gallery notes in hit pay. Very close attention. Images that can be used by customers have to be uploaded through the media gallery. Now to make the search easier, you can Google images in categories. Okay, let's do this. All right. I'm gonna light clicking here. Such a gallery categories, right Click open a new tab. So let's just take a look. I'm gonna add new gift card categories. So let's just do this. We have Christmas. Let's add that one. We have the birth day. That's at the one as well. And, uh, just a wedding. Okay? It was at wedding. Okay, so we have these three different gift cat categories. We'll talk about this in just a second. Let's close this. Let's go back in here. All right. Show the image title in the photo gallery. Okay, let's do that one as well. Now, in here, you can choose to not allow your system to automatically generated gift codes. In this case, right now, you would be the one responsible for genetically calls yourself. So you can decide to check his books right here and then choose the court pattern. Do you want to go with 16 digits for your cold? Maybe even 25 digits or 90 digitally? Entirely up to you. Gift card orders. Now, what happens when a customer ordered forgive cut, But then the order was canceled. Do nothing. And this goes right now, I'll simply say, disabled a gift card and then in here as well when it give cuddles ordered balls refunded. You also want to do is able to give cat as well. I think this just avoids any potential situation where your customer is able to reuse the gift card code that already paid for. But then they were funded. So just to avoid such scenarios, all the recommended to disable the gift cards in both cases in here and then emails and notifications. Okay, so display email button. Yep, allow gift cards gift recipients to get the gift card discount automatically by simply clicking on the link in the email they have received. This could be a good idea. I'll go ahead and enable that one so email button redirect when they click on the link that they've received in the email. The recipient of this goes right now, what should happen out with direct them to a specific page, and that would be the shopping page. All right, so they've gotten the code, the gift code in the email. I'll talk about this. I'll show all this in just a second. Once they click on the link in the email, it should take them straight to the shopping page, where they can begin shopping away. It'll bottom label click here for discount. Okay, attach pdf to the gift cut. Quit email sent. Let's do that one as well. Our purchase identification. In this case, buyers will get identification when the gift cut has been used. I think that's a great idea. Let's do that. One gift card identification. Allow. Admit to receiving BCC allowed bastard city basis even to give God code. Uh, yeah, let's allow that one. And that's pretty much it. So yet a lot of different options in here I would highly recommend that you take some time , a positive video and go through all the options one at the time. Because it is our lot. I'm gonna go ahead now, save my changes. And now let's see how all these works Now, the first we're gonna do is we're gonna go over to Media Library Now. Take a look at this. Okay? I have four different gift cards. I have the regular gift card. I have one. That Cesar just for you. I do have one that says Happy birthday and I do have one, which is for Christmas. Now, remember, we quitted four different categories for gift cards down here. You can see I have added the category for each specific gift. Cats of this one is for Christmas. This one is for birthday, as you can see, and then this one is full wedding. And then this one is for Regula Gift card or Easter in this case, so I'll device you to do the same. Let's go ahead and close this. Now let's bring in five Fox and let's see what it has first. Okay, let's scroll all the way down here and let's say, for example, generals to ghettos the windbreaker up. So let's click on it. And now in here, you can see the option that sees gift this product. So before you can click on the lingua, just choose an option inhales go the blue option. Now let's click on Gift this product, and now you can see we have the genetic gift card. The price Now in here, these all the options that we've set in the setting, so festival John can decide to use the default image, or he can go with the customize in this case right now. If it clicks and customize, he will have access to his to his one computer, and it can choose a very specific image to use for the gift card. Remember, we enable that option. Or he can just used the product image or choose designs if he clicks on shoes design. Take a look at this in here right now, he can choose the designs that we have currently in our store. So this is a great way off providing rely ity of different kinds of cards and images for your customers to you. So let us, if example, it's ah, it's it's birthday so it can choose the Happy birthday design. So there you go. And now recipients, details. Arlen, just go ahead and use my email. My Gmail address name is is Alexander Uh ah, Lannister and ah name. And this gazes Jon Snow. That's mean. And I'm going to see, uh, heavy birthday, Alex Love from, uh, John from John. Okay. All right. So John could also do the postponed delivery, but he could check the box in here right now and then choose the delivery date if you wanted to, but we'll just ignore that for now. Let's go ahead now and add this to the court and let's see how this works. Okay? It's been alerted. Caught view the cart. Okay, Now, let's go ahead and proceed to check out. And now in here, you can see the message. Essays have a gift card. Click here to enter your code. Remember that we chose to have this display doing the check out page, but just before the check out form. So there you have it. Let's go down in here. And we'll just pay for this one real quick with stripe, please. Or the papa. Papa. Papa! And there you go. So right now, Jon Snow has the gift card code. It's right there. If he goes to his account, you can also see that we now have the gift cards option available. But this will only show when the customer has received a gift card. In this case. Right now, John hasn't received one. He sending one to his friend Alex. So if he goes to orders and even they can see number 388 it's processing. And that's for the gift card. So we now from our own end will have to go over here. Teoh, where is it now? Will come out. Let's go to orders and I'll check this out. Jon Snow has just made an order a minute ago. Okay, let's click in there. What is this? Ah, he's made an order for a gift card. Oh, wow. Okay. However, if you look in here, you can see gift cards were heavy right there. Click on gift cards. And now in here, you can see the gift card that John has just bought. So we now have the option off sending the cold to Alex. Let's do this. I'm gonna go ahead now and say send now and it's been sent. Or Kate. So what I'm gonna do right now is I'm gonna bring in my Gmail accounts. Uh, just Jack that over here and the you go so you can see right now, I have received the email from the cool store, and it says, Hi, Alexandra Lyness, that you've received this gift card from Jon Snow. Use it on our online shop. That's the link right there. Click here for the discount. And then it's also says, Jon Snow. I would like to suggest that you use this gift card to purchase the foreign products. So I click on go to site and it takes Alex straight to the public page for the wind breaker . So that's exactly how this process works, and I think it is absolutely fantastic. One last intermission. Before I go for the gift cards, you have the ability to manually create on gift cards. If you wanted to, you click on Add New and then in here you can add a tiny tool that purchase a month. You can make it digital if you wanted to, and then you can send the gift card to the recipient yourself so you can add the sender's name. The recipient's email at the message delivery date. So this is the manual way off, quitting gift cards rather than the automatic way. So it's really up to you if want to go with the man away or the automatic way. And, of course, there is an extensive guide on how to use the Purim vision off the gift cards. Plugging it really is extremely extensive, and it's another plug in old Hello, Commander. You go with the paid version just to ADM or variety and functionality to your gift card system. So that's it for gift cards. Thank you so much for watching. It's been a long video, but I hope you enjoyed it. I'll see the next video 40. Additional Extensions: Okay, so we've covered three main plug ins for extending the functional T oversight, but I wanted to make this video specifically to talk about some additional plug ins that you might be interested in. Now, there are two main websites. Forget in plug ins for your online storm. And that would be, ah ye themes to come and, of course, woke from a stock. Call me in this two sides. You will find every single kind of plug in. They can think off for your online stop now. There isn't why I have chosen not to cover anymore. Additional plug ins is because even though I've been building an online store for clothing , you watching this video might be interested in building a living kind of store. Maybe it's store that sells electron ICS, toys, things like that. So the plug ins I covered are specifically plug ins that you would find are useful in just about every kind of Still, because every store would need ah reformed system in place. Every store would need its customers to be able to track their shipments and, of course, gift cards. Always a great idea for any kind of shops. Does the reason why I covered those three plugging specifically. Now, if you're building an including store like I was, you might be looking for plugging. That would allow your customers to try on virtually the clothes. You can have, like a measurements chart or something like that. A store that sells toys so electronics appliances will not need such a plug in. So this is why all the commander to check out these two men websites. So if you go to youth infocom and then under the girls characters, you'll see plug ins and you can see all the different categories of plug ins that they have from administration to design a navigation payment, Social network ship input page. They have different kinds of players and off course, woke from us in here. You find, ah, lot of plug ins, go to work. You must come go to the accession store, click on the link right there. And of course, if you scroll down here all the way down here, you will see that they have 284 different kinds of plug ins, which is just absolutely insane. So I guarantee you that you will find a plug in that will suit your exact needs. So feel free, take a time. Go through this to upside to check out the plug ins available just as an f Y I. Enough mention there's quite a few times already. But I do have my links in the district explicitly for interested and gets in any one of these planets. Please use the links in the strongbox below. So thank you so much for watching and also in the next class. 41. WooCommerce Elementor Skillshare Conclusion: Well, there you have it. We've come to the end or this tutorial on how to build an e commerce store using woo commas and, of course, the elemental page. But a plug. And I hope you enjoyed it. If you did, be sure to leave a review and let others know that you enjoyed taking this course. And, of course, be sure to check out my other courses here on skill share. I do have a lot of them from WordPress development to even cybersecurity. So we should check out my link and take a look at my instructor page and enrolled in any of my courses that you might be interested in. My name is Alex has been a pleasure. Thank you so much. And I wish you all the very best in your e commerce endeavors. Bye for now.