Introduction to the E-Commerce Stack
Hey welcome to the channel. My name is Mike and in this video I'll be showing you how to get started in e-commerce using one of the most powerful tools on the entire internet and at the same time it's surprisingly easy to do. So easy that we're going to do this entire thing in just 15 minutes. So this is a 15-minute beginner's tutorial how to make an online store using WordPress.
Now WordPress powers about 40% of the entire internet and it's great because you can start off very small with a template, a one-page, a one-item store, and you can scale indefinitely. You can turn it into a gigantic blog, you can have a product catalog of thousands of products, you can really scale indefinitely using WordPress. So that's why we like to recommend it.
And the way WordPress works is kind of like... I like to compare it to like Microsoft Word, for example. It is the engine that runs your website, but you have to save it somewhere. So on a document on your computer, you would save it to your hard drive. A website, you're going to save it to a host. And the host that we like to use is called Hostinger. They're very fast, very affordable, great uptime, great reliability. So those are two elements there. We have WordPress being saved on Hostinger servers, but then on top we like to have another layer that makes it easy to interface with this. This is going to be your drag-and-drop builder, this is going to be how you manage your store. This is really going to help a lot and those are the plugins I'll show you a little bit later on in the video. The good news is everything in this video is free with the exception of your hosting, which is honestly an incredible price and they have some sales going on right now. But with that being said, let's head over to my laptop and start the timer, 15 minutes to make this website.
Purchasing Hostinger Hosting
Okay, so to start off, we're going to santrellmedia.com/hostinger or you can click the link in the top of the description and then it'll bring you to a page that looks something like this. So you can see $2.49 a month plus 3 months for free. They've got Black Friday sales, there's always deals going on here. So we're going to click on claim deal. That'll bring us down. You can see the three different pricing structures they have here: premium, business, and Cloud startup. The business one is the most popular one, it's usually the one we recommend, and you are getting a really good deal on this as well. You can see the price is like substantially less than normal, but I recommend reading through these and seeing which one fits your business best. I'm going to add it to your cart.
And now here is where most people make a mistake. You'll see we have four different options. I recommend, doesn't matter which one you get, but just do not get the one-month option. By the time you have the $5 setup fee, $14 a month, you then pay for a domain, the other ones have a free domain... It ends up being close to $40 for one month, and then for like $48-ish you'll end up getting an entire year. So just spend an extra maybe $8 to $10, get the entire year. But what I'm going to do is go for 48 months here, so four years. You are getting the lowest price here and the benefit is, one, we have a discount code that applies to the entire four years, and two, you'll not have to renew at a higher price until four years from now. So you're really locking in a pretty low price. It ends up being like $150, $160. You'll see that is honestly so much lower than even four months on most other website builders.
So now we have to create our account. I'm going to type in my email, then we can put in our payment method. You'll see we get three extra months, we get daily backup, domain name included, Whois privacy included, the setup fee all waived, and you end up being $167.52. But we actually have another discount I'll show you in just a second. But we can put in our information and scroll down here to Have a coupon, and we can type in santrell, santrell10, hit apply and that should bring it down another 10% to $150.77. Pretty good deal there. Now I'm going to put in my information and click submit.
Domain & Initial Setup
Then we can click on start now. It's going to walk us through a couple steps. Honestly, you just skip all of these. It won't personalize your dashboard, but you don't need it to. Everything in this video will show you like everything you would need. We can skip this step as well. We're going to start it from scratch. We don't need to, we don't need the AI to build anything for us. And then we can claim our free domain, assuming you did not get the one-month plan. If you got anything over 12 months, you will get a free domain with that. We can click continue and now we'll enter our contact information. It's going to be registering the domain, and in this time I recommend going over to your email and verifying your email for your Hostinger account as well as for your domain. This might take a minute or two. Then we'll click on finish setup, and now we have two options here: we can view our website or we can go to the control panel and manage our website. So I'm going to click on manage site. That'll take you over to your Hostinger dashboard.
Installing WordPress
Now from this page we want to go to Website on the left side, we want to click on autoinstaller right there, and then we're going to select WordPress. Now you see WooCommerce right there, don't be tempted to click on that, we'll get we'll get WooCommerce in just a second. But now our website title, we're going to call this Santrell and then we are just going to click install. And now we have WordPress installed on our website. We can either click on admin panel right there or what I like to do is every time I'll sign into the website in the future, I will go to the domain. So if I just click on this, it'll bring us over to our website, santrellenergydrinks.com and then just type /wp-admin and that'll bring you to a login page. You can change that little slug in the future for cybersecurity reasons, but for now I'm just going to sign in using that new password we just made. And there we go, this is the WordPress dashboard. I know it might look intimidating, I'll walk you through what everything is in just a minute.
Installing the Astra Theme & Starter Template
But let's kind of make a little progress here on getting our website using a template. So if we go down to Appearance and click on Themes, we will be able to add a new theme. So click on add a new theme on the top and then you should see Astra on the right, if not, you can always search for themes and type in Astra. I'm going to install Astra. You'll see Astra right there. Click on install and then we have to click on activate and that'll make that our default theme, which is not the same as a default template. But you should see a giant thing on the top, a big banner that says install Starter Templates. We're going to click on install Starter Templates.
Now we can choose Elementor as the page builder, and from here we can click on e-commerce and just check out any of these online stores. Let's say online shop. So this one looks good to me, I'm just going to select it. We can upload our logo. If I don't have a logo, we can add that a little bit later as well. So I'm just going to say skip and continue. We can choose our color scheme. So an energy drink, maybe this is a little bit more red or a little bit more orange. And I'll say continue. Now we have to enter a little bit of information. Leave all of these checked, except you don't have to share non-sensitive data, then say submit and build my website. All right, so now let's click on view your website.
First Look & WooCommerce Setup
And you'll see right away we have a full-blown website here. All we have to do now is swap out these photos, this text, the buttons for our own content, but we don't have to build anything. It's very, very easy to do from here. So let's click on the WordPress icon on the top left. This is going to bring us back to our dashboard. And like I said, I'll walk you through what the dashboard is and how to manage everything in a minute, but you'll see that we have way more going on in the left side. When we installed that template, there it gave us WooCommerce. That's how we sell stuff, that's what we wanted. It also gave us like CartFlows and a lot of other different plugins down here. If we click on WooCommerce, you'll see it walks us through setting up our store. So I'm going to say set up my store, then say continue. And you can choose if you want any of these features. Honestly, there's a lot going on here, so I don't necessarily need to have like some of these. And you can always add them later by the way. We do have a full video on how to create Tik Tok ad campaigns. It also gives you like a free match on up to $1,500 of free ads on Tik Tok. All that linked down below to that video. But I'm going to say continue right here. Let's actually add our first products now.
Managing and Adding Products
If we click on products on the left side, you'll see we have a bunch of products that were added automatically for us. We can edit any of those. Of course if you want to remove them, which you absolutely should because they're fake products, you can select as many as you want, click on bulk actions, and we can move them to trash. Then we'll click on apply and then I'll get rid of all of those products that we're not actually selling. But to make a new product, on the left side under products you'll see add new. We can click on add new and we're going to add our Santrell energy drinks. We can add a product description. I recommend not making it like a giant paragraph like this. Again, I'm just using dummy text here. You're way better off using things like short little paragraphs, make it very readable with some bullet points, have some like top reasons, some images in there. Make things bold as you need. So if there's like things that are really accenting what your product is, make them bold. And of course, if you want anything to link to maybe like your privacy policy or any other thing that might make sense, maybe like different flavors, you can link over to like another product. You can click the insert link and you can just paste the link right there to whatever website you want.
Then if you scroll down you'll see we have quite a few tabs here. Now we have multiple different types of products we can sell here. It could be a virtual product, it could be a downloadable product like maybe a wallpaper for a phone for example, an MP3 file, whatever. And then of course the standard physical products. If you don't select those, you've got four options here. If you have a simple product, which is just going to be like if I'm just selling one thing, like if I only sell this water bottle, that's a simple product. In other words, if somebody orders it, there's only one stock keeping unit, only one SKU, and that's the item that gets shipped out.
Then we have a variable product. This is going to be for example clothing, when somebody goes to buy it and they have a little dropdown and they select what size, maybe they select what color, there's other variations of that same product that all might have a slightly different price or they're all going to have a different SKU, and somebody can order a t-shirt and you could ship out two very different t-shirts. Like you could have a red small one or like a green large one.
Then we have grouped products. Those are going to be things that are generally sold together. So maybe this would be for example, if you're selling different parts of a kit, you could individually buy things or you could just sell it as a group. The group product would be essentially what the full kit would be.
And then we have external or affiliate, and really this is kind of a rare one but I would say this makes the most sense if you're selling a bunch of stuff and there's one item that really helps a lot to tie everything together, but you don't sell it, but whoever does sell it, say they sell it on Amazon for example, you could get an affiliate link to that. Then you can list it on your website, when somebody clicks purchase it'll bring them over to Amazon and they just check out on Amazon and buy that, and then you'll get a commission of maybe two or 3% when they actually go through that order.
So regular price, let's say $24.99. You could have a sale, and so it's going to cross out the regular and say the new sale price. Then we have inventory. So you can actually track your inventory with WooCommerce, super powerful. We can track inventory, we can say right now we have 500 pallets of these or 500 cases of these, and you can choose if you want to allow back orders. And then the low stock threshold, you have a storewide threshold of two. For this one, maybe we want to know if it's like 10, we'll get a notification. And you could also limit it to one item per order. So this would be like if you're selling toilet paper in 2020. Then we can go down to shipping and we can choose what our shipping price is actually going to be, what kind we're doing. We don't actually have shipping set up at the moment, so we'll come back to this a little bit later. We can have linked products, so upsells and cross-sells. Attributes would be any variation you might have, so here you can maybe have like flavors. Then you have your little short description you can add down there, keep it like maybe one sentence or so.
And then if you go back up, you see this entire column on the right side. So right now it is just a draft, we didn't actually publish this yet. We will publish it in a second, but we can have some product images. So let's select some product images. We'll set one of them as the product image, so maybe that one right there, and we can have a product gallery as well. So I recommend having at least like four to six images per product, it generally helps a lot in my opinion. And then we have product categories. There were some that were imported with that template. We can add a new category and call this, call this energy drinks, add the new category and we're in that. And then we can go up and click publish. So now we have our first product that's actually ours listed on our website.
Setting Up Payments & Dashboard Tour
Next we can set up payments. This one's super easy. We'll just click finish setup. We can accept Woo Payments. There's a lot of different ways to accept payments and then you'll basically just keep entering your information, your bank account details and everything as you go through this so you can actually accept money from other people.
Going back to the WordPress dashboard, let's click on pages and kind of a quick rundown on the left side. Dashboard's where you can go, you can get your updates, you can see any plugins that are out of date can be updated right here. Then of course we have posts, those are going to be anytime you want to make a blog post. I'll show you how to make a page, blog post is going to be nearly identical, the same exact builder with Elementor. Media is just where you save all of your photos and files you have on your website. Pages will be where you can actually go and edit your homepage, your about page, your cart, your checkout, different things like that. You have plugins. You want to make sure you don't have too many plugins on here, but these are going to be third party apps that run on top of WordPress. So like I showed you, Elementor is one of them, we have Tik Tok is going to be one of them, WooCommerce is one of them, and so you can manage these, you can update them down here, you can deactivate them if you no longer need them and ultimately get rid of them if you don't want them. So let's go back to pages, click on all pages and let's just edit our homepage real quick.
Editing Pages with Elementor
We'll click on edit with Elementor. Now a quick crash course on how Elementor works. This is called a section layout. So you can see this entire section outlined in pink right here. Usually the background will indicate which section it is. So this entire light background is all one section. Then the dark background, this little rectangle here is all another section. Let's close out of that. You can see all the sections. And you can move these sections up and down by hovering over the little six dot array, click and drag, and you can drag these up and down like I said and just drop it and it'll go wherever you want it. If you don't like something you can hit the little X right there. If you wish you could redo that, click on the history button and just go back to it. If you want to duplicate a section, you can right click on that and duplicate that section. So you kind of saves you a little effort there. If you click the plus icon you can add a new section between. And then under the section category, the next tier on this hierarchy is going to be columns. So you can have multiple columns within a section. This is clearly four columns right there. Other ones, this is another four column. This one, it looks like two columns up here. And so you can choose how many you want. You can also rearrange where that column divider is just by clicking and dragging that back and forth.
And then the third tier in this hierarchy are going to be elements. If we click on the little nine dot array on the top left, these are the elements that Elementor, name makes sense now, actually give us. So if we want like a text editor, we can click and drag that over. Click on the 9-dot array, if we want maybe a button below that, click and drag a button over, drop that below it. And so you see how you can kind of start to build your entire website. For anything that you put on here, anything you drag over or anything that's already here, if you hover over it and click on the pencil icon, you can customize that. We have three tabs here. Of course, the first one is going to be the content, what is actually there. So we've got an icon, we have text, and we have a little title for this little thing right here. You can edit all of that right on the left side here. The second tab is going to be style, where you choose how it's actually arranged, what it looks like. And the third one is going to be advanced. This you can kind of change like the padding, the buffer on either side. So if we click on responsive mode on the bottom, you can actually view that. So we'll click on responsive mode, click on portrait, and now you can look at these and say, "Hey, you know what? I really don't like this section here." Click on the six dot array, go over to advanced, go to responsive, and you can hide this on mobile. So this little three-tab edit option is available for elements, for sections and for columns. So that's a crash course on how to use Elementor.
Then we can click on update, click on the little hamburger icon on the top left, and we can click on exit. Now the first time you do this, it's going to ask you where you want to exit to. I recommend just going back to the WordPress dashboard.
Finalizing WooCommerce Settings & Conclusion
Under WooCommerce, if you click on settings, you have a lot of tabs here. You can customize all of these. If we just go over to shipping, this will allow us to set up our shipping zones. And if you click edit next to the shipping zone, right now it says free shipping in the United States. Sure, we can keep it as that. That one sounds good to me, just to keep things as simple as you want. But you can always toggle this off and have other shipping methods as well. And you can have different prices as a flat rate, you could have local pickup for example. Now if you click on orders, you'll see this is going to be a list of, once you receive an order, where it actually appears so you can package it and actually get it out on time.
All right, so I think we have a pretty good crash course there on how everything works in WooCommerce. If we just click on the homepage on the top, so if we go over to our website, I recommend going through everything, testing it all out, testing the buttons, testing out the entire order process, and then actually going through with a sample order to make sure everything works properly. And then once you're ready to go, you can start marketing your website.
So I hope you enjoyed this video and found it helpful. I really wish you the best of luck with your online store. I have more in-depth tutorials if you're ready for the next level on how to use WooCommerce as well as Tik Tok ads as well as many other things related to this topic. I'll link all of them down below. Thanks for watching and I'll see you in the next video.
