How to Create an Online Store (eCommerce Website) – 2016
Articles,  Blog

How to Create an Online Store (eCommerce Website) – 2016


Hey everyone. In this tutorial, we’re going to be teaching
how to create an online store, otherwise known as an eCommerce website, and we’re going
to be taking it step-by-step. People often pay $5,000 to $8,000 for this
kind of thing, but you won’t need to if you just follow this along with us here. In the time it takes you to follow along,
you’ll know everything you need to know about setting up your own online store, including
accepting payments from your customers. We’ll take you through everything step-by-step. If you have any questions, don’t be afraid
to ask via the comments below, and we’ll be happy to get back to you with an answer. And, please give this video a thumbs up rating
if you value what I teach. I’ll take you through some of the features
very quickly. I’ll show you how to implement a drop down
menu where you can separate things by category. I’ll show you how to set up a homepage,
a nice header image, add some featured products. We’ll show you how to add your products
to your pages. Add a nice sidebar area with a cart, with
a shopping cart, so customers can easily see the shopping cart view and check out at any
time. Let’s go into a couple of products just
to give you a demo. So here’s one example. This is what a product page looks like. I’ll show you how to enter a normal price
plus a sale price, which gives you this icon here. And also, check out this piece of functionality. When a customer selects a different color
or different variation of your product, the image adjusts accordingly. And, I’ll give you another demo of that
functionality. So say this cashmere jumper, a customer can
choose sizes, and choose a color. And based on the variation, the image will
change. I’ll also show you how to set up this featured
area, this featured image area, so customers can browse through all of your product images. It looks very, very professional as you can
see. They can select the quantity they want to
add to cart, and add to cart. They can then view their cart, and check out. I will show you how to accept payments, applied
coupons, and also set up your shipping. And most importantly, I’m going to show
you how to accept payments from your customers. And, I will actually give you a live example
of a payment being submitted through the online store that I set up through this tutorial,
so you would be able to do the same thing. If you want to see that, skip to the Accepting
Payments section of this video and you will be able to see how it all works. Plus, this particular design does not cost
you a thing. It’s something that you would normally pay
$5,000, $6,000, $7,000, $8,000 to a web developer to develop for you. I really urge you to go out and get quotes
because you’ll see how much it actually costs to get this stuff set up if you actually
hire somebody. So as you can see here, it works perfectly
on a mobile device. All I’m doing here is mirroring my mobile
phone onto my computer, so you see the dropdown menu looks perfect. I can view the homepage. I can go to a product. I’ll be able to view that product. I can see different images as I can on desktop. I’ll be able to see the description, view
the details, and add to cart. And then, continue to check out and make payment
as a customer would on desktop. So it works perfectly on a mobile phone as
well. This will all be included if you follow what
I show you step-by-step. If you want to have a look for yourself, go
to EMC online store on your computer or on your mobile phone, and have a browse through
and see how everything works. You’ll see it looks very, very professional. And, that’s my goal. To help you set this up, a really professional
online store that you can set up and manage all by yourself. And, customers will be able to buy any product
from you. You’ll get paid instantly, and then all
you need to do is ship the product out. I’ll teach you how to use WordPress to manage
all of your content, and we’ll be using something called Woo Commerce to manage all
of your eCommerce stuff, which includes setting up your products and also accepting payments
from your customers. And if you have a look at this URL here, this
is just a quick example of other websites that use Woo Commerce, the exact same platform
I’ll be showing you how to use for your own online store. It’s very, very reliable, and it’s easy
to use. It’s perfect for beginners. Here is an overview of the things that I will
cover during this video. First, I will show you how to get online,
and then I will show you how to set up your store – everything from adding products,
accepting payments, etcetera, etcetera. Everything you need to know step-by-step. So the first thing you will need to do to
get online is acquire a domain – your dotcom domain name, which costs approximately $12
to $15 a year – for example, www.yourstorename.com, and secondly, webhosting. If you don’t know what webhosting is, it
can simply be described as a server or a computer where your website’s files are stored, so
that customers can access and purchase any one of your items 24/7. These two are absolute essentials. You can’t run an online store without a
domain and webhosting because a domain without hosting is just a blank white page. And luckily, they’re the only two essentials
that actually cost money if you use the process that I’ll show you. Secondly, setting up your store. I will show you how to install the store design. If you go and get in touch with web developers
or eCommerce developers, go and get quotes for how much they charge you. I know from experience that they often cost
between $5,000 and $10,000 to set up a store of the same level or same level of quality
that I’m about to show you right now, but I will show you how you can install that design
for free that won’t cost you anything. And also, full setup, which includes adding
products, accepting payments, and everything else you need to know to set up your store,
so that it looks good and customers are able to purchase your products. If you had somebody manage that for you, it
would cost a lot of money as well. But, I’m going to show you in the time it
takes you to watch this tutorial, how to do all of this yourself. So you’re saving all of that money. And, I strongly urge you to go out and get
quotes for these two right here because you’ll be surprised at how much they actually cost
in the real world. And therefore, maybe you’ll value this tutorial
a little bit more. Okay. Let’s start with getting online. The good thing is you can acquire a domain
and a host in around five minutes, and both from the same place. So if you go to your web browser, and go to
www.hostgator.com, that’s H-O-S-T-G-A-T-O-R dot com. You can get both your domain and hosting from
these guys. I’ve been using this company for approximately
eight to nine years myself for all my website, blogging, and online store needs. And so, that’s the reason that I present
them to you. They’ve got excellent support through online
chat. They’ve also got support through the phone. They’ve won multiple awards, actually. They’re one of the world’s biggest hosting
providers. And, they also have a 45-day money back guarantee
if for any reason you are not satisfied with their service. But, I’ve been using them for eight to nine
years myself, and haven’t come across any issues. So, I doubt you will either. If you want to use another host of your choosing,
that’s absolutely fine. Just keep in mind the rest of the steps in
this tutorial are based on my HostGator account, so it may be a little more difficult for you
to follow along if you use another host. But for me, HostGator has worked really well,
and so I’m going to stick to what I know works best. Click on the Web Hosting tab. If you scroll down, you’ll notice there
are three plans on offer. The Business Plan is not required. There are some extra features, which you may
not want when you first start up – for example, a free private SSL and IP, and a free toll-free
number. You may want these a little bit further down
the track when your store is up and running, and you need all of these things. But at the moment, that’s not necessary. The Baby Plan and Hatchling are similar with
one main exception. The Baby Plan allows an unlimited number of
domains to be hosted. Unless you have multiple online stores, this
won’t be necessary for you. So the Hatchling is sufficient. It allows you to host a single domain. It is also the cheapest starting at around
$4 a month, depending on how much you want to subscribe for upfront. And, that is absolutely perfect for you to
start with. So, I’ll be selecting that for now. You can do the same. On this screen, you can select your domain. If you already own one for whatever reason,
maybe you’ve bought one from somewhere else, enter it in this field here, in this tab. Otherwise, I think most of you will not already
own a domain. And so, here you can register a new one. Enter any dot com that you would like to own. Now, it’s a personal preference of mine
that I choose dot coms. You can select anything you want – dot net,
dot info, dot biz, etcetera, etcetera. It’s just my personal preference to keep
my domains as dot com domains, but all the other extensions work exactly the same. So that’s your choice. So enter the domain that you want to own. For the purposes of this tutorial, I will
register one called EMC, which stands for eMedia Coach, online store. You will notice that the system checks to
make sure that your requested domain is available. If your selected domain isn’t available,
then you’ll obviously have to think of something else and select one that is. So, go ahead and enter a domain name, which
you want to order. It’ll automatically add it to your shopping
cart. Secondly, choose a hosting plan. I selected the Hatchling Plan from before. You can select Hatchling, Baby, or Business
based on your requirements. Billing Cycle, select something that you are
comfortable with. And, it says here 20% off. That’s the default discount HostGator gives
you when you sign up initially. But in a second, I’m going to show you how
you can get an even better discount than that 20% off. I will select 12 months for now. We can enter in all these details a little
later. Let’s skip all of that for now. In the Additional Services box, deselect any
items that you do not want. Just so you know, I do not use any of these,
and they are optional extras. They are definitely not essential. So I would deselect all of these. Then in the Enter a Coupon field, you’ll
see that HostGator gives you a default coupon code, which is the 20% off coupon code. I want you to just keep in mind the amount
due in the bottom right of your screen, and use this coupon instead. Just type in ONLINESTORE, O-N-L-I-N-E-S-T-O-R-E,
then click the Validate button. Once you do that, you will see that the total
amount due is less. And, that’s because this particular coupon
offers you a bigger discount than the default coupon code that you are given. So make sure you take advantage of that. Actually, this coupon is best if you’re
selecting a plan of six months or above. But if you selected a one-month plan, so you’re
paying on a month-to-month basis, there’s a better coupon code to use. And, I’ll show you that right now, actually. So let’s choose one month. Use that coupon instead, 1DIRTYCENT, 1 D-I-R-T-Y-C-E-N-T. Then when you click Validate, you’ll notice
that you get the first month of hosting for just one cent. And, the other amount here is your domain
cost. And, that amount is per year, not per month. So that $12.95 covers you for one full year. Also from time-to-time, I may receive referral
credits from HostGator. That’s important to me because it allows
me to produce these free tutorials for you, now and in the future. So, I sincerely thank you for your support. When you’ve selected your particular billing
cycle and used one of the coupons I showed you, go up and then enter a username. Enter your security pin for your account. And the, enter your billing info. Make sure that the e-mail you enter here is
absolutely correct because you will receive a confirmation e-mail after you complete the
order. And, it will contain your new account details,
as well as confirmation of your ownership of your new domain name. So I will pause and blur my screen while I
enter my personal details, as well as my credit card information. And you can see, you can pay by either credit
card of PayPal. So I’ll pause and blur my screen while I
do that. All right. That’s done for me. Pause this video, and go ahead and do that
yourself. Then, double-check your order. Go to the “I have read and agree to the
terms and conditions” check box, and then click Check Out Now. You will receive a confirmation e-mail from
HostGator in a few minutes after you check out. In a few minutes, you will receive a confirmation
e-mail from HostGator. So I want you to go to your e-mail inbox,
the e-mail that you used to sign up for HostGator in the last step, and open up that e-mail. You’ll see it has your new account details,
a control panel link – I’ll show you what to do with that in a second – and your username,
password, and the domain, which you have registered and now own. Our next step is to go into our control panel,
and install the WordPress platform. Basically, that is the Content Management
System that we are going to be using to manage your eCommerce website. So, open up that link. Okay, and here, enter the username and password
provided to you by HostGator over here. So you can just copy your details in, and
then click Log In. This is the control panel of your hosting
account. You really don’t need to access this page
often. We’ll only need to use it now to install
the Content Management System, which is WordPress. The eCommerce platform, we’ll be installing
in the next step. So for now, let’s go ahead and install the
WordPress platform. Scroll down and look for a link called Quick
Install under Software and Services. Click on that. Click on WordPress in the left-hand side navigation,
then Continue. Your new domain should populate automatically
in that field there. If it doesn’t, just select it from the dropdown. Leave this field blank. Disable auto upgrades. In the Admin E-mail section, enter your own
personal e-mail address. In the Blog Title, enter the title of your
online store. You can change this at any time. In Admin User, just enter admin, and you can
leave First and Last Name blank. Then, click Install Now when you are ready. And, it will install the WordPress platform. And, that’s all. WordPress has been installed. You will be able to access the Admin area
using this link here. It’ll be yourdomain/wp-admin, and it should
give you your username and password as well. We’ll go in and change the password in just
a second. But when you access this link, keep in mind
it may take around 10 to 15 minutes to activate initially. This only happens the first time when you
install WordPress. This is what it should look like when it’s
activated. It usually takes about 10 to 15 minutes, but
just refresh that page until you see this screen here. And, enter the username and password provided
here. And, that’s all. You have successfully logged into WordPress. This is the Administration Dashboard that
you will be using to manage your entire online store. The first thing that I advise you to do is
change your password. To do that, find the User’s tab and click
on All Users. Then click on your Username. If you scroll down, you will see there is
an option to enter a new password. When you’ve done that, click Update Profile,
and that will update your password. So once that’s done, just keep in mind that
that password replaces the default one provided to you by WordPress here. So I would strongly advise you to keep these
details, this link, the username, and your new password somewhere safe, so you don’t
forget them because you will need them every time you need to access this Administration
Area for your eCommerce website. Next, I will be installing the store design. Currently, if you have a look at your site,
you’ll see that it’s actually up and running. It’s functional. Obviously, it does not look like an online
store yet. But don’t worry. We’ll get to that. But it’s taken less than 10 minutes to actually
get you online. Okay, so the online-store design. Go to woocommerce.com. Woo Commerce has a range of designs or themes,
they call it, for your online store. What you’ll actually need to do is sign
up for a free account with these guys. I won’t take you through that because that
should be pretty obvious. Once you’ve got your account, go to Themes,
and go to All Themes. Then, let’s click on Free. We will want to search for some free things. Okay. The one I am going to use for this tutorial
and the one that I showed you at the beginning of this video is this one here called Mystile. So click on that. You can take a look at a live demo if you
want, etcetera, etcetera. Do a bit of reading about this particular
design. Then when you’re ready, click the Add To
Cart button. I cannot actually add another one of these
things to my cart because I have already purchased. When I say purchased, this is free. So I have already got one of these free things
added to my account. But you will be taken to an Add To Cart page,
and then you will be able to check out. And, your order total will be zero, so you
won’t need to pay anything or enter any other details. You’ll simply be able to check out, then
go to your Download Your Products link. And, you will see here that the Mystile theme
has already been added to my account, and it’s available for download. So you will have the same thing. Click on the Download button. What this will do is download the design files,
and will save that onto our computer. So Save, and save it somewhere where you can
easily access because we will need that file in just a second. Once that’s finished downloading, go back
into your WordPress Dashboard. Go to Appearance, and click on Themes. Click on Add New Theme. Look for the file that you just downloaded
to your computer. It’s the mystile.zip. Open that one up, and click Install Now. This may take a few minutes to install. When that’s done, click the Activate button. And, that’s all there is to it. You’ve now installed the new online store
design, and it hasn’t cost you a cent. So if you want to see what your site looks
like currently, you can. And, that’s it there. There’s nothing on it because we haven’t
added anything, but we’ve installed the framework that we need as far as design goes. Next, we are ready to install the eCommerce
platform that we’ll be using to manage the eCommerce side of things for our online store. To do that, go into a section called Plugins,
then click Add New. A plugin is essentially an add on or an additional
bolt-on functionality for WordPress. So there are millions of plugins available
for all different types of purposes. So it’s like taking a car, and then adding
new features onto that car. A plugin works the same way. We’ve got our WordPress installation, and
now we’re going to be adding another functionality onto WordPress, which is the eCommerce functionality,
which will allow you to set up your products and accept payments and everything else that
you need to do for an online store. So the plugin we need to add right now is
called WooCommerce. And, that’s the one there, WooCommerce – excelling
eCommerce by WooThemes. So click the Install Now button. And, you’ll see the plugin is installed. Once that’s done, click Activate. And, that’s it. We’ve installed the additional WooCommerce
functionality onto our site. The next thing you need to do is click on
this Install WooCommerce Pages link. And, before you do that, I’ll just show
you what that actually does. So currently, the default installation, there
are no pages on your site at the moment. So once you click Add WooCommerce Pages, these
will set up the core pages that you need to operate an eCommerce site. So let’s click on that. Okay. That’s done. So I’ll refresh this page and show you what
that’s installed. There you go. It’s added your Cart Page, Check Out Page,
Account Page, and Shop Page. The Sample Page here is the default page that’s
installed when you install WordPress. So feel free to trash that one. You won’t need it. And, that’s it. You will see on the left-hand side, you’ve
got the WooCommerce area now, which will allow you to configure a lot of settings. And, I will now start taking you through that
step-by-step. Now that we have our eCommerce platform installed
and ready, the next thing we should do is just configure some basic settings before
we go forward and add products. The first thing that I do is go into Settings,
and General. You can change the site title if you want. Remove the tagline, and here add a WWW dot
just where I’m adding it there. If you go to your site currently, you’ll
see that it does not have a WWW in front of it. See? So, I add that. That’s just a personal preference, so it’s
up to you if you want to add that or not. And, go down and Save Changes. This step actually prompts you to log in again. Next, go into Plugins. If the MOJO Marketplace and WP Super Cache
have been installed by default, just check them and click Deactivate, and Apply. Then once that’s deactivated, check them
off again, and you can Delete. They are two plugins we do not need. Yes, let’s delete these files and data. Next, let’s go into the Mystile section,
and Settings. I’ll go to the Layout Options. What I’m going to do is check this box here,
Wrap your site inside a frame, and also click the Main Layout to be a right sidebar. Now what this here does is – I’ll show
you before I save the setting. So currently, you can see this is a widescreen
layout. It goes from left to right taking up the whole
page. Now if I save that
that makes it into a boxed setting. Now, when I add a background color that actually
looks pretty good. And, that is a personal preference of mine. Having it as a boxed layout. You can keep it a full-width layout if you
like. It’s just my personal preference to keep
it a boxed layout. Now because I did that as a boxed layout,
I’ll go into Styling Options. And then, in the Body Background Color, I
can select a color for the background. So I might give it a light green background. That looks quite nice. Next, let’s go to the Footer Customization
tab. Currently, you will see there is some information
on the left side of the footer, and some on the right. What you can do is remove or edit any one
of these. So, Enable Custom Footer Left. Let’s activate that, and I’ll leave that
blank. And, Enable Custom Footer Right, and what
I’ll do is perhaps just copy and paste that as my right footer. Cool. That’s done. Looks a little bit cleaner. And last but not least, let’s set up some
basic WooCommerce settings. So go to WooCommerce. Click on the Settings link. First up, in the General tab, select your
Base Location. You can also select countries to which you
want to sell. You can keep the options open, so that you’re
selling to all countries, or you can actually select specific countries to sell to, like
so. But, I want to sell worldwide, so I’m going
to keep that open to all countries. And, go down. Select the Currency, and also Currency Position. So that’s the position of the currency icon. Obviously for dollar, it will be for left. And, when you’re done, click Save Changes. That’s it. That’s all we need to do for now as far
as configuring some basic settings. Now for the fun part, let’s start setting
up some products on our online store. Let’s go to Products, and Add Product. There are a couple of different types of products
you can set up either Simple products, or Variable products. A variable product is one such as a pair of
jeans or a jumper where it can have different colors and come in different sizes. And, each of them represents a different variable. Whereas, a simple product is something like
a watch where it only comes in one size, one color, and there are no variables to that
particular product. So I will be showing you how to set up both
simple and variable products because they’re the two that you will need to use most often. On a side note, there are other products that
you can set up including virtual products, which aren’t actually tangible, therefore
don’t require shipping. And, downloadable products, which is something
like an eBook or a digital product where the customer actually downloads a file after purchase. So let us start by setting up a simple product. Let’s use the example of a watch. So you can add a title for your product. This field here is for the long description. So I will just enter some dummy data for you,
for demonstration purposes. And the field, if you scroll down here, is
for your short description. Okay. So, we have selected a simple product. You can assign a SKU to that product if you
need to. If you’re a small operation, then you will
not have SKUs. But if you’re a larger company, then you’ll
have a SKU attached to each product. So that is not mandatory. You can set a price, and you can also set
a sale price, which I’ll come to in just a second. Inventory, you can manage your stock levels. So you can select how many you have in stock. We’ll come back to these other options a
little bit later in this tutorial. But for now, for a simple products, that’s
all you need in this area here. You can also set a featured image. Click on Select Files, and then go to the
area in your computer where the images are saved. You’ll see that once you select an image
from your computer, it will upload into something called the Media Library. So once your image is uploaded, select Set
Feature Image. And, the feature image is actually the image
that will show up on the front page of your shop, the first image people will see of your
particular product. You can also select additional images for
your product gallery. And, you’ll see them upload as well into
your media library. Once images are uploaded, you don’t need
to upload them again. You can simply come in here and select the
images you want. Okay. Then in Layout, select this full-width layout. And, don’t forget to assign a category to
this particular product. So this is a watch. So maybe I’ll put it in a category called
Accessories. Perfect. That product will be attached to this category
that I’ve just set up. And when you’ve done all of that, click
the Publish button. Let’s see what that’s done. There you go. It looks absolutely fantastic. This is the featured image here. These are the additional image items in the
image gallery. So when you click on one, you can actually
scroll through the different images for that product. We’ve got our short description here, and
long description here. And the customer can select the quantity,
and add your item to cart, after which they can go and check out. We’ll go through all of that stuff later. But for now, that looks great. I want to show you what happens when you have
a sale price for a product, so if I go now and enter a sale price of say 330, and you
can schedule that sale price as well. That’s a really, really cool feature. Okay. Let me update that. See the product now has the little sale icon
added to that, and shows you the full and discounted price. So that’s how easy it is to set up a simple
product. Now let’s go ahead and set up a variable
product. The example we’re going to use is one of
a cardigan or a sweater where it comes in a couple of different colors and also a couple
of different sizes. So they are the variables that we will need
to add onto the product page. So let’s go ahead and click on Add Product. And, this is going to be a cardigan. You’ll remember the long description goes
here, and the short description at the bottom. Now, let’s select the variable product from
the dropdown. Again, you can assign the SKU if you need
to. Then, go down to Attributes, and click the
Add button. Our first attribute is going to be size. In this field here, enter the different values. In this instance, the different sizes for
that particular product, and separate them with the pipe key. So we’ve got small, then hit a space. Use the pipe key. Space. Medium. Large. That key there is – the vertical line. It’s just a vertical line. For me it’s situated on my keyboard under
the backspace. So if I hold down Shift and click that button
there, it gives me that vertical line called a pipe. So enter your value followed by a space, the
pipe key, space, next value, etcetera, etcetera. Then, ensure these two check boxes are ticked
– Visible on the product page, and Used for variations. And we want to add one more variable. The next one being color. Now, we’ve got some available in light grey
and dark grey. Used for variations. So at the moment, we should have six different
variations – a small, medium, and large in a light grey, and a small, medium, and large
in a dark grey. That’s six variations. So, don’t worry about that. Just click Save Attributes. Then, click on the Variations tab. And, click on Link all variations. What this will do is it will automatically
assigned all the different variations based on the attributes that you entered. So like I mentioned, we should have six of
them. There we go. Six variations added. You can see there’s a small, medium, and
large in light grey, and the same for dark grey, which ends up with six variations. Now what you need to do is set up the details
for each one of those variations. So click on this little image there. It allows you to add a custom image for that
particular one. Okay. Set the price. Set a sale price if you need to. And, you can also manage stock levels if you
need to. And then, start doing the same for all of
your other variations. The image is already uploaded, so I just need
to select it. And then, you’ve got the dark greys. So I’ll add a different image for the dark
grey ones. And, I’ll show you what that actually does
on the product page when you select a different variation. It’s really cool. I’ll show you that in a second. And, I forgot to add a price for each one. That’s silly. So let’s say the greys are 65 … the light
greys are 65, and the dark greys are 75. And, you can set a sale price for each one
of those individual ones if you need to. Down here you can set a default, so when a
customer lands on this page, it will actually show a default size and color. So let’s say we want the default to be medium
grey. And, that’s all for now. I’ll go up. I can select or add a new category. Then, I can select a feature image. And then, add some images for my product gallery. So what I did there was just press CTRL, and
select all the images that I wanted to open and upload. Okay. That’s been uploaded to my media gallery. And last but not least, just go down and select
the full-width layout again. Okay. Let’s give that a shot. Let’s save. Cool. So the price is a range between 65 and 75,
and we’ve got our feature image there. We’ve got our image gallery. Now here’s the really cool part. Okay. See how it’s defaulted to medium and light
grey like I said to you before? Now, okay let’s choose a different color,
dark grey. You’ll see the price automatically changed,
and so did the image here because that image there corresponds to
the image we uploaded over here. So whenever you select this variation, that’s
the image that will show up. There you go. That is absolutely perfect, and looks fantastic. The functionality is extremely user friendly,
and it looks highly professional and something you’d pay thousands of dollars for somebody
to develop for you if it wasn’t for these free resources here. If you have any questions about setting up
products, of course, please ask in the comments of this video below, and I will be more than
happy to help you out. For the purposes of this demonstration and
just so it’s crystal clear, I will add one more variable product and show you through
the process. So let’s say we’re adding it for beanies. I’ll just copy and paste a long description
from another screen I’ve got here, and the same for a short description. I will select the variable product. Attributes, I will add an attribute. The only variation for these are color. So let’s say I’ve got a blue beanie, cream,
green, and grey. Let’s check this tick box as well. Save attributes. Then, go to Variations. Now, I can click on a link called Variations
to make it easy for me. There’s only four variations being the four
different colors. And, I’ve got a different image for each
color. So that’s the blue. I’ll enter a sale price as well. We’ve got a cream beanie, a green one, and
grey. Perfect. I’ll select the full-width screen, then
I’ll select a featured image, the one that I want to show up on the first page, and then
Add Products to the Gallery. So I can check each one of these. I’m holding down the Shift button while
I do this. If that doesn’t work for you, just select
them individually, and Add to Gallery. Let’s assign it to the Accessories category. If it belonged to a category that doesn’t
exist, I could’ve created a new one, and then Publish. And, there we go. I’ve got the option to select a color. And when I do, the image changes. Perfect. That’s really, really good. I’m really happy with that, actually. I’ll show you how to set up these related
products a bit later in this video. But for now, that is absolutely perfect. So go ahead and start setting up your products. Now for a part of the tutorial, which I’m
sure you’ve been waiting eagerly for me to cover. And that is how to accept payments from customers
who are shopping on your online store. For that, I recommend using PayPal. And, just go to paypal.com. I’m sure you’ve seen PayPal everywhere,
absolutely everywhere, especially eBay. It’s one of the most easiest and secure
methods of accepting payments. So if you haven’t already got an account,
hit the Sign Up button and sign up. It’s free to join. The way PayPal makes money is they take a
percentage of any money-received. That percentage is between about two and three
percent. So it’s a pretty small fee, and it’s absolutely
secure. The reason is all the payment processing happens
on PayPal’s side of things, not on your side. So therefore, it’s the easiest and most
secure way that you can accept payments on your online store as quickly as possible. And, the good thing is it can accept credit
card payments as well from customers who are paying by credit card. And, I’ll show you a bit about that a little
later. So go into your online store, your Dashboard. Go to WooCommerce, and click on the Settings
link. Then, go to your Checkout tab. Okay. So here you can leave Coupons enabled. I’ll show you that later. I like to keep Guest Checkout enabled. A guest checkout simply means that customers
do not require to sign up for an account on your particular online store. They can checkout without creating an account. So then, go down and you’ll see there are
a few different gateways to choose from. So we want to be able to setup this PayPal
gateway. So you can either click on Settings on the
link here, or you can go up here and click on these links here. Essentially, we want to disable anything that
is not PayPal-related. So you will see here the bank transfer is
enabled, and cheque payment is enabled. So I want to disable those two. Okay. I’ll just deselect that check box there,
and Save Changes. And, the other thing was cheque. Okay. If I go back to my checkout options, you’ll
see that the only payment method enabled is PayPal. So now let’s click on that Settings button,
and let’s set that up. Leave Enable PayPal standard as checked as
default. Title and Description, you’ll see with these
text, these pieces of text slot in later. PayPal e-mail, this is the important step. So when you sign up for PayPal, you’ll be
signing up with a particular e-mail account. So in my case, my e-mail associated with my
PayPal account is [email protected] Okay. So when you sign up for PayPal, you will have
an e-mail address associated with that particular PayPal account, and that’s very important
because that is the e-mail that you need to put in here. So for me, it’s [email protected] This means that any payments are received
will go to the PayPal account associated with this e-mail. So that’s an important step. Leave everything else as default. Receive an e-mail, you can leave that blank
as well. You only need to input that if your PayPal
e-mail is different from the e-mail entered here. But if this is your PayPal e-mail address,
then that’s all you need. Leave the rest blank. And then, go down and click Save Changes. One optional thing you may want to do is Send
shipping details, which are your customer’s shipping details instead of their billing
details, through to PayPal. So for now, I will leave that deselected,
but you may need that in the future. That’s all it takes to set up your online
store to accept PayPal payments. Whenever a customer purchases an item from
your online store, the money will be received into your PayPal account. And then, at any time you can withdraw all
that cash into your bank account. To make things crystal clear for you, I might
as well put through a transaction, a real transaction to show you how it operates from
a customer’s point of view and how it will work from your point of view. Just so you know, there’s going to be a
lot of blurred sections on the next few screens that you see. The reason is obviously there is going to
be a lot of personal information of mine when I access my PayPal account, and so I’m going
to be blurring everything out that I need to. So this is just for demonstration purposes. I am going to put through a real transaction
through this online store that I’ve set up. So the first thing I’ll do, I will log out
of the Dashboard. So it’s as if I’m a customer, a real customer
right now. So let’s go to Shop. Let’s say I want to purchase a cardigan. Okay. I’ll add that cardigan to cart. And, let’s say I want to purchase a black
tie. I’ll add that to cart as well. Now I can view my cart. I’ll go straight to Checkout, so I’m going
to be putting through a real transaction. It’s not a fake transaction. You’ll see the money flow through to my
PayPal account. Then, on the Checkout page, you’ll see that
if you’re a returning customer, they can have the option of logging in. That’s because if they’ve already purchased
from your online store, you’ll see here they’ve got an option of creating an account. So they don’t need to enter their details
again, but you will remember that we enabled an option called Guest Checkout. Guest Checkout means that users can checkout
by entering these details, but they are not forced to create an account. I think that’s a really good idea. Leave the option open to your customers. Coupon Code, I’ll take you through later. So I’ll go ahead now and enter the Billing
Details. This e-mail address will be your customer’s
e-mail address. Of course, we’re doing this from their point
of view. For that, I’ve got an e-mail address, which
I can use. So the Hotmail e-mail address that can be
my customer’s e-mail address as an example, and phone number. Then, as a customer, I will have the option
of creating an account by assigning a password to that account. So I’ll leave that unchecked for now. And you’ll go down and see that you can
view your order. And then, you have the option of checking
out via PayPal. So now, I will proceed to PayPal. All right. So the customer will enter their e-mail address,
and PayPal password if they have a PayPal account. Otherwise, they will enter their credit card
details through that form there. So as you can see, I can purchase via credit
card as well. For showing this live transaction, I will
just log in using a PayPal account that I have. A lot of people nowadays have PayPal accounts. And it’s very, very common, actually. Just have a look at eBay and see how common
PayPal actually is. So the customer will enter either their credit
card details or use their PayPal account, and then let’s Pay Now. Cool. So after completing that transaction, they
will receive a transaction ID, and they will also receive a confirmation e-mail and be
allowed to return to your online store where they will receive this confirmation
page. Their order has been received, and it’s
just a confirmation so your customers know that their order has been successfully processed. Okay. So let me log in to that Hotmail account. So you can see what it looks like from a customer’s
point of view. Okay. So I’ve made an order. I’ve received a confirmation e-mail. Thank you for your order. Your order has been received and is now being
processed. It’s got the details of my order. The total and just a confirmation to show
what the shipping address where I’ll receive my order in the mail. So that’s absolutely perfect. As a customer, I have completed the transaction,
and I’m just waiting for you now to ship the product to me. Now, I’ll log out of this e-mail and go
to my online store’s business e-mail to show you what it will look like from your
point of view. There you go. If you check your e-mail, you’ll see that
you’ll receive a notification from PayPal telling you that you’ve received money and
secondly an order confirmation. So if you look at that e-mail, it will show
you what your customer has ordered, how much they’ve paid, your customer’s e-mail address,
their telephone number, and also the billing and shipping address information. And, I’ll show you what that looks like
in your PayPal account. And there it is there. We’ve received $80. The payment has been completed, and it’s
been added to the available balance of your PayPal account. I previously had some money in my PayPal already,
so obviously it’s showing a bit more. And, you’ll see that you have received the
full amount minus the PayPal fee. And in this instance, it was – the fee is
about $1.70. I had about $500 initially, plus 80, minus
the PayPal fee. And to withdraw money to your bank account,
just click on this link here, and then you’ll be able to withdraw that straight to your
bank account. So that’s how easy it is. And there you go. There is a live demonstration of a live transaction
from a customer purchasing products on your online store to you receiving them into your
PayPal account, and being able to withdraw money into your own bank account. And, I apologize for all the blurred sections
of my screens, but there’s obviously a lot of personal and sensitive information here. But if you have any questions about any of
that, setting up payments or anything about PayPal, leave your questions in the comments
of this YouTube video. And, I will be happy to help. Now, I’ll show you how you can adjust or
manage this sidebar section that you’re seeing over here. It looks pretty messy and dirty at the moment. That’s just because this is the default
WordPress installation. It’s put there by default. So I’ll show you exactly what I do, and
you can copy that if you like. I’ll also be showing you how to make pages
full-width. So if you choose not to have a sidebar, you
can do that as well. One thing to note, this Shop page currently
does not have a sidebar area. So the first thing we need to do when we go
to our dashboard is let’s go to Mystile Settings, then let’s go to WooCommerce. In this layout area, I want to enable the
sidebar on Shop Archives and also enable the sidebar on Product pages, and Save. So there you go. Now the sidebar is appearing. Now, I’ll show you how you can manage all
of that. If you go to Appearance, you’ll see a link
called Widgets. Basically, what a widget is it’s a little
feature where you can add pieces of information in nominated widget areas. So this is a primary widget, which is the
sidebar area. And, you’ll see that each one of these tabs
correspond to the sidebar area we were just looking at. And, you can also add widgets to your footer
area. So for now, let’s just go ahead and delete
all of the default pre-existing areas. Cool. Cool. So that’s what it currently looks like. Now one thing I like to add is a shopping
cart on the sidebar, and you can use this by something called a WooCommerce cart. It’s pre-installed when you installed the
WooCommerce functionality. So that should already be there for you. All you need to do is drag and drop it into
this area here. You can rename that any way you want, and
you can also hide if the cart is empty, and click Save when you’re done. And similarly, you can drag and drop any one
of these other items. So you can add Embed Video. You can put an Author Bio. You can also add a Search field. What I’ll do, I’ll add a product category
field. This will list the categories in my online
store. I can rename that. I can order that, and I will show product
counts as well. And, you can select these settings or customize
these settings, as you like. So let’s see what that looks like. Perfect. So I’ve got a section here with my cart. I can remove products directly if I wanted
to. And when I add products, it will appear in
this section as well. So it’s really, really user friendly. And, this area here, Product Categories, your
customers can easily navigate through the various categories that your online store
has. So if I wanted to look at accessories, I can
click on that and I’ll be shown everything in the accessories category. And the customer can directly view the cart
or checkout using this section here. They don’t need to navigate to checkout
here. It’s just a more user friendly, and a more
straightforward navigation system, if you have that My Cart area in your sidebar. So, that’s something I really like to do. You can do the same if you choose to. Another thing you can add is a Free Text area. To do that, I recommend a plugin called TinyMCE. So if you go to Plugins and click Add New,
search for a plugin called TinyMCE and it’s this one here, Black Studio TinyMCE. I’ll install that one, and activate. Once that’s activated, you can refresh this
page. When you come back in, you’ll see a item
called Visual Editor just over here. That’s the plugin we just installed. So, if you wanted to add any other pieces
of information, I recommend this plugin because you can add text, you can bold, italic, do
anything else that you can do with a visual editor. You can also add media, which means you can
add images. And when you save that, it will appear in
the sidebar section here. Okay. So I’ll remove that for now, but that option
is up to you. Also to rearrange things, all it takes is
a drag and drop. So just hold down on your mouse, drag and
drop, and it will automatically save. And then, when you refresh the screen, that
will take effect like so. Similarly, you can add widgets in the footer
area as well. Ideas include adding your contact information. Maybe just putting some text. You can also add a cart section as well in
your footer. That will appear just over here. So I’ll show you an example of one, and
you can go ahead and do that if you choose to. There you go. You’ll see those widget areas appear in
this footer area. The reason it’s in four columns at the moment,
one two and there’s two more here, is because it’s part of the setting. I’ll show you that. Footer Customization, and that’s it there. So if you only wanted two items in the footer,
you can choose that. If you only wanted one, you can choose that. Etcetera. Etcetera. Another item you can add is Social Media. There is a social media widget somewhere here,
and it’s this Subscribe and Connect. So you can add that anywhere you want. You can add it to your footer. You can add it to your sidebar. And, when you drag and drop that in, it will
activate your details on this page here. In your Mystile Settings, there’s an area
called Subscribe and Connect. You can go down here and enter the details
of your Twitter URL, Facebook page, Youtube, etcetera, etcetera. And any items that you enter – I’ll show
you an example. And let’s just pretend some of these as
well. I’ll Save Changes. Your social area would appear here, and the
links would go off to the links that you entered in here. So those icons appear, and people can navigate
through to your social media. So that’s another really cool idea if you’ve
established your social media. Here is another tip for you. So if you go into your Shopping Cart page,
you’ll notice that the sidebar exists on that page as well. However as a personal opinion, I do not like
having a sidebar on the Shopping Cart page. That’s because it distracts customers from
what they are about to purchase. And so, the whole idea is when they’re on
an online store, they should have no distractions from purchasing your products. It should ideally result in the highest conversion
rate, and having a sidebar with stuff on that is just a distraction from them purchasing
your products. So what I like to do for this page is to make
this a full-width page, and therefore remove the sidebar. So you can do the same thing if you like,
and the way to do that is go into your Pages. Go into the page that you want to change. You can do it one of two ways. You can make this into a full-width template
over here, or you can select this icon here and that will give it a full-width layout. There you go. That’s much, much better. I’ll do the same for the Checkout page,
and I’ll leave this page as it is. So if I go to the Checkout page, I can use
this icon here to edit the page and give it that full-width layout. Perfect. I highly recommend that you do this, but at
the end of the day, that’s your decision. That’s just a personal preference of mine. But any pages you want to make full-width,
just use the same process I just showed you. All right. Now, I’m going to show you how you can set
up the homepage for your eCommerce website. To do that, first let’s go in and configure
a couple of settings. So go to Mystile Settings. Let’s go to the WooCommerce tab first. Ensure that this check box is selected, Display
featured products. So we want to be able to display featured
products on the homepage, and we’ll be able to select which products are considered featured. So I’ll show you that in a second. And, deselect the Display Recent Products
on the homepage. So all we want to do is display our featured
products. You can also display product categories if
you like as well. Take a look at what that looks like in your
own time. At times, I like to use that. Sometimes I don’t. It really depends how it looks on the site. But for now, let’s just leave our featured
products selected and Save Changes. Once that’s done, go and hover over Products
and click on the Products link. See these star icons here? They indicate which products are considered
featured and which aren’t. So currently, what we’ll be able to see
on our homepage is nothing because we haven’t selected our featured products. So let’s say we want this to be considered
a featured product. Click on that. The page will refresh and that will be colored
in, indicating it is a featured product. We’ll select this one. Okay. Perfect. Now let’s see what our homepage looks like. Great. Now the next thing we will do is add a banner,
a banner image just over here. So let’s go back into our Mystile Settings,
and now in the Homepage hub, you’ll see there’s an option here to display a banner
on the homepage. I’ll select that, and I can upload my featured
image here, which will show in that area. So you can select a banner image if you’ve
already got one uploaded to your media library. If not, you can upload an image. I’ve got one that I’ve prepared. You can choose to have a text overlay over
that image as well. I do not want that, and that’s all. So let’s Save Changes, and take a look at
what that looks like. That is absolutely perfect. And, you will see that the products are now
taking up the full-width. There’s a lovely banner here, and overall,
I’m really, really happy with the way our eCommerce website is currently looking. If you’ve got a section here that has a
Hello World blog post. I’ll show you how to get rid of that. You need to deselect this checkbox here. We do not want to display blog posts on the
homepage. So let’s save that. That is absolutely perfect. So over time, your featured products may change. So all you will need to do is go back in here. Go back to the Products section, and then
continue to select the products that you want to be shown to your customers as a featured
product. And, they will be appearing on the homepage. And when a customer clicks through on one
of them, they’ll be taken directly to the product page. They can view the info that we set up earlier,
and add to cart. So go ahead and set up your homepage. If you have any questions, feel free to ask
me in the comments. Now I’ll show you how you can add a logo
to your online store. There’s two ways you can do this. If you want to make one yourself, you can
and I’ll show you how to do that. But if you want to get one made for you, try
out something called fiverr.com. Fiverr is an online marketplace, and you can
get services for different types of things. So you’ll see if you search for a logo,
you’ll see possibly hundreds of different logo designers willing to make you a custom
logo for your online store. And it will cost you $5 to do so. So you can look at people’s portfolios,
and you can sign up for an account, order, and then they’ll deliver a logo for you. Alternatively, if you want to make a logo
quickly for yourself, go to onlinelogomaker.com. Click on that Start Online Logo Maker. Let’s delete these default items. You can add various symbols or icons. You can resize things, and I’m going to
make mine small because I don’t want the logo to be overpowering. And then, you can add some text. And, you can also change the color of the
text, and font. And, you can also change the color of items
in that icon. When you’re happy with your logo, just click
the Download Logo button, and you’ll be able to save that onto your desktop. Once you’ve done that, go back into your
WordPress Dashboard. Go to Mystile Settings. And in the General Settings tab, you’ll
see an area for your custom logo. So what you can do is upload that file we
just downloaded. Then once it’s uploaded, let’s click this
Use Image as Custom Logo, and then go down and save changes. Now that should take effect on our site. One thing we forgot to do is we need to deselect
these check boxes here. We don’t want to show the site title or
description. Save, and now that should work. Perfect. So that’s how you can add a logo to your
site. Feel free to make one yourself, or get somebody
else to make one for you. All right. Now I’ll show you how you can create a awesome
Contact Us page. It’s going to look really, really cool. So let’s go back into your Dashboard. Let’s hover over Mystile. Go into the Settings area. You’ll see there’s a tab for Contact Page. Click on that one. Let’s enable the contact information panel. You can enter a title for the name of your
particular location. So let’s say for example, Los Angeles Office. You can enter your address in there. Put your telephone number in, fax number if
you have one, and a contact e-mail address. Okay. Let’s save that for the time being. I will show you what that looks like. So let’s go step-by-step, so you can see
what I’m doing. I will add a new page. Just open that up in a new tab, and I’ll
call that Contact Us. In the template, select the Contact Form template. That’s very important. And in this field here, you can enter anything
you like. I’ll select the full-width layout, and publish. Okay. That’s what the Contact Us page currently
looks like. This was the free text that we entered, and
here is our contact panel details that we entered into the form in the previous page. And there’s also a contact form here where
the customers can fill that out and get in touch with you. So looks really, really good. It looks really clean. You can of course add or remove any information
that you don’t want to show. The next thing I want to show you is this
Google Maps coordinate, and I think that is an absolutely spectacular functionality of
this particular theme. And it’s all in built. So all you need to do here is grab the Google
Map coordinates for your particular location. It sounds complicated, but I’ll show you
how to do it. Let’s just google Google Map Coordinates. I’ll just search that in Google. Let’s use this site here, gpscoordinates.net,
and just wait for it to load up. Cool. So once that’s done, you can put your address
in here. Obviously, you will put in your exact address,
but I’m just going to use a example here. Now when you enter your exact address, the
latitude and longitude information will change, and it will pinpoint your location on the
map. So what you need to do is copy and paste latitude. So let’s copy and paste it in there followed
by a comma, and then copy and paste the longitude attribute and paste it in there. You can edit the map height if you want. I think 350 to about 400 is a good size. So I’ve saved my changes, and now let’s
refresh the page to see what that looks like. That is absolutely perfect. I mean that’s an absolutely professional
looking Contact Us page with your information and a dynamic Google Map, so that customers
can zoom in, zoom out, and find your location of your shop front if you have one. Of course, that’s optional. If you don’t have a shop front, you won’t
need that. But, that’s how to do it, and you can change
the height of this particular map. So that’s set at 350 pixels right now. I can go back in. Change it to 450, and there you go. I’m extremely happy with that. So go ahead and set up your Contact Us page,
and let me know if you have any questions. That page will also automatically appear in
the menu area here. And, I’m going to show you a little bit
later how you can edit this menu area to display exactly what you want to display. Now, I’ll give you a brief introduction
into this content editor that you see here. For a lot of you, this will be pretty self-explanatory. So if you want to, just skip the next few
minutes of this tutorial. But for the rest of you, I’ll give you a
brief overview of what you can do with this area here. So, this is a content editor. You can use this in exactly the same way that
you use things such as Microsoft Word. You type text in. You can bold certain items. You can italic. You can also add links. So say you wanted to add a link to another
page. So you can highlight the text, click this
link icon here, and then you can enter the link to any website page that you want, or
you can link it to any existing page on your site by just selecting from one of these here. Then by clicking this box here, it will open
the link in a new tab, which means it does not take the visitor of your website. So I’ll add that link in there. To remove a link, just click on a link you
want to remove and click that remove link icon. Now when you enter this content editor, it
will look like that. But to get all the items, click on this toolbar
toggle. It’s known as the kitchen sink, so it gives
you all the other tools that you need. Such as – you can also change the color
of your text by using this area here, like so. What else can you do? You can put a quote section. So say you wanted to have some customer testimonials,
use this little quote you see here. Click that, and you can put your customer
testimonials in there, and so on, and so on. To exit the testimonials, just click on that
quote again, and it will put you back to entering normal text. You can also align left, center, right as
you’d normally would in a word processing software. You can also bullet point things. So say you wanted to put
a bullet list. You could also put numbered lists, and you
can underline using that. You can also put a subheading by using this
dropdown here. So if you’re using a subheading, I would
recommend using Heading 2 or Heading 3. Another thing you can do is add images to
this section, so by clicking Add Media. Now the way this works is you can upload files
from your computer. So you can click the Upload button, select
the files that you want to upload, and then double-click and open and it will upload them
into this Media Library. Alternatively, you can – I’ll show you
in just a second. I’ve got another screen open in a screen
that you cannot see. If you open your folders, you can simply select
the image, and then drag and drop it into here. So I need to select my image. I’ll use that one there. I can drag and drop it in here, and it will
start uploading. I like to click Link To None, so that the
image does not link off anywhere and set the size to full size because what this design
will do is it will automatically scale images to their largest possible size. So if I just click Insert Product, you will
see it go in here. Let’s save for now. And, there you go. There’s your testimonials. There are your bullet points. There’s a subheading, and some text. This image looks great as well. It doesn’t link off anywhere. You can also link the image. So if you click on that image, which you uploaded,
you can click on that link there and you can add a link in the same way I’ve showed you
before to open it in a new window if you want it to. Okay. And, this is what I mean by opening in a new
window. You’ll see that it opens in a new browser
window. It does not kick you off the page you’re
actually on. So that’s it there. That’s a brief introduction into the content
editor. Before I continue, one more thing I’ll show
you is how to embed a YouTube video. So if I go to YouTube, let’s just go to
any video. You’re probably familiar with the Embed
button. It’s under Share. And then if you go to Embed, you’ll be able
to see some code to embed a YouTube video. So what we want to do is use a custom size. Let’s put a width of say 800. The height will be automatic based on your
width, then all you need to do is copy and paste this code in here into your content
editor. But the key thing to remember is this content
editor here, to get these options available to you, that’s in the Visual tab. But if you want to enter a new code, it’s
really, really important that you use the text tab, the one here. So you’ll see when you click on the text
tab, you’ll see some coding that’s behind all the visual stuff that you see, but you
must enter any code in the text tab for it to work properly. And then, I paste that YouTube embed code. Okay. And, click Update. Okay. Then, I can refresh this page and we will
see a YouTube video in that area. There you go, and you can of course adjust
the size of the video. And, it’s as easy as that to embed YouTube
videos on your online store. You’ll also remember that we installed a
sidebar earlier in this video, and it’s that there. You can also add a section in here where you
can add a Visual Editor. So if we go under Appearance and Widgets,
you may remember that this area here is where we add items to be able to control what’s
visible within our sidebar here. So at the moment, we don’t have too much
flexibility to be able to enter anything as easily as what we just showed you in the Visual
Editor. All you’ve got is this Text widget here. And, you can enter text in there, but it doesn’t
give you the options that the Visual Editor gives you – bullet pointing, adding images,
all that stuff. So it’s pretty useless. So to be able to do that, I highly recommend
a plugin called Black Studio TinyMCE. So if I just search for that in my Plugins
section, it’s that one there – Black Studio TinyMCE, and activate. Once that is activated, if I go back into
the Appearance Widget section, you will see that there is a new tab called Visual Editor,
and I’m looking for it. There it is. Okay. So now when I drag and drop that in, you can
see now that there is this Visual Editor that we can do anything we want with. A title, you can add text. You can add an image. You can embed YouTube video. You can have bullet points, links, etcetera,
etcetera. So it’s a really handy tool. And when you save that, that will exist in
your sidebar. So there is a little tip for you there. Just to give you a little bit more flexibility
if you need it. So go ahead and install the Black Studio TinyMCE
plugin if you intend on adding custom elements to this sidebar of your website, or alternatively,
to any of the footer elements. All right. Now I’ll show you how you can customize
this menu area over here. So you can customize this menu in any way
you want, and I’ll also show you how to add a dropdown menu to this. So let’s go back into your Dashboard. Hover over Appearance, and click on the Menus
link. Let’s give our new menu a name, and then
hit the Create button. Select Primary Menu, and save. Okay. Now we can add all the items that we want
to show on our menu. So if there are any pages you want to add,
you can do that. So yes, I want to show Contact Us, My Account,
Checkout, Cart, and our Shop. Then, click Add to Menu. I’ll go step-by-step, so you can see what
every step in the process does. Okay. So there’s our new menu, and the order here
corresponds to the order of these here. And if you want to change that order, all
we need to do is drag and drop. Okay. Now let’s add a homepage as well. So if you go to Links. Put in your homepage URL, and just name it
Home. Click Add to Menu, and I’ll drag that to
the front. Perfect. I can also change the title of any of these. So say I want to name this one Products instead
of Shop. I can do that. So I can go to this dropdown here. Rename this to Products. I can change Cart to My Cart, and I’ll leave
everything else as it is. Great. Now I’ll show you how to add a dropdown
menu. So what I’m going to do in the product section,
I’m going to have some sub-items relating to each one of the product categories. Okay. So I’ll go back in here. I’ll leave this page open, but I’ll open
under Products and Categories, I’ll open that in a new tab. And you’ll see here, these are the categories,
which our products belong to so far. And as you go along, you will have more categories,
etcetera, etcetera. But anyway, to list those categories in a
menu, all you need to do is grab the URL for each one. So I just clicked to View. So I could grab the URL of this page here. Go back into our menu section. I can create a custom link, so I’ll paste
that URL in here. Name it Accessories, and I’ll go ahead and
do the same thing for the other categories I have here. Okay. Now if I save that as it is, you’ll see
that the menu will appear in the top level. And you will see what I mean when the page
refreshes. There you go. So they appeared on the top level. What I want to do is make them appear as a
dropdown. So to do that, all you need to do is drag
and drop them, and then indent them under the top-level item that you want, so just
as I’m doing here. There you go. And even within these, you can change the
order in which they appear by dragging and dropping. Okay. Let’s refresh, and there you go. You will see a little arrow icon indicating
that there’s more to that menu. So users will be able to come along, hover
over any one of the top-level icons, and then navigate to the page, which they want to visit. And obviously, your online store will contain
different categories, different products, but the functionality can be the same. You can make things as easy as possible for
your customers to access. And so, there you go. That’s how you can create and customize
your menu. And, that’s your main menu. There’s also a menu that you can add over
here in this section here. It’s like a sub menu. I’ll show you how to do that as well just
in case you want to do that. So what we’re going to have to do is create
a new menu using that link here. Name this one Top Menu, and we want to make
this the top menu. The previous one was a primary menu. Okay, then let’s add a couple of items. So let’s say Checkout, Contact Us, and My
Account. And, I’ll save that. Okay. Let’s refresh the site to see what it looks
like. There you go. You see these sub menu items? Or I should say secondary menu. Obviously, you know, we’ve already got Checkout
here. So maybe Checkout isn’t the best thing to
put there, but you get the point. You can configure these in any way you want. You can remove, etcetera, etcetera. Okay. And now, I’ll run you through setting up
your shipping options. You’ll see currently on Shipping and Handling
it says, Free Shipping, and it asks the user to calculate their shipping. I’ll show you how to set up your shipping
properly. Going back into your Dashboard, let’s go
to WooCommerce, Settings, and let’s go to the Shipping tab. Okay. We want to leave Enable Shipping checked. We want to disable the shipping calculator. You can leave that enabled if you set up your
different contingencies based on location. But for now, let’s leave it unchecked. We can go down and you can see that currently
the Free Shipping option is … has a status of Enabled. There are other options such as Flat Rate
Shipping, International, Pickup, Local Pickup, and Delivery. So for now, let’s leave Free Shipping as
enabled, and we’ll also add Flat Rate. We’ll also enable Flat Rate Shipping. So I’ll save those changes for now, and
then go to the Flat Rate tab. Let’s enable that setting, then let’s
go down. You can select which countries this particular
shipping method will be allowed in whether it’s taxable or not, and then an amount
per order. So let’s say for example, shipping is $5. Our flat rate is $5. Then, we can go down. You will see here per order the shipping will
be charged for an entire order as a whole. Okay. You can enter a handling fee if you like,
and you can also enter add on rates. But before I do that, I will save changes
just so you know what difference this setting makes to our Cart page. So there you go. We’ve got our flat rate $5, and free shipping
enabled. Okay. So now, we can go in here and add extra options,
and the way to do this is add the name of the option, followed by space, the pipe symbol,
space, the additional cost, and the type of cost – if it’s per item or per order. A good example is Express Shipping. So Express Shipping often attracts a higher
rate. So a space, pipe symbol, which is for me under
my backspace button on my keyboard, and then enter the extra amount that this particular
item costs … will cost the customer. So in this instance, let’s say $5 on top
of the regular, $5 that we set. So it should be $10 in total, and we’ll
set up a Per Order. Okay. In the next line, let’s say Same Day Shipping. Let’s say that costs an extra $15 on top
of the original $5. I will apply that Per Order as well. So save changes. There you go. You will see that the different shipping alternatives
are offered. You can even change words, wording. Let’s say Standard Delivery, Express Delivery,
and Same Day Delivery. Perfect. So you will see these items here. Standard Delivery is $5. Express Delivery is $5 plus the 5 we entered
here, and Same Day Shipping is $5 plus 15. So it’s 20. And so, your users, your customers will be
presented with these options. Now on the Free Shipping, you can actually
set it, so that they only get free shipping if they have a coupon for free shipping. So we’ve got here the title, Free Shipping. It’s enabled. It can say here it requires a minimum order
amount or a coupon, or a minimum order amount and a coupon, etcetera, etcetera. So you can just set it, so that there’s
a free shipping coupon. It’s completely up to you, and it’s customizable. So you can go in there and set things up exactly
how you need them. So let’s say minimum order amount and a
coupon. Maybe you will set up a coupon saying Free
Shipping for any Purchases over $50, and I’ll show you a little bit later how to set up
coupons. So let’s say that it’s 50 for now. Great. You’ll see the Free Shipping is not available
because our order total is only 48, but let’s say we added something else. And then, apply a coupon code, which is our
free shipping coupon code. And I know I haven’t told you how to do
that yet, but I will soon. But once a customer enters that coupon, they’ll
see this Free Shipping method available to them. So there you go. That’s how you can set up different shipping
options for your online store. All right. You’re going to love this next part. I’m going to show you how you can enter
or add coupons, so that customers can redeem those coupons on your online store. So if you go to WooCommerce, and go to Coupons
… and let’s add a coupon. Give your coupon a code, so you’ll be giving
this code out to your customers. Say for this first one, I want to have a free
shipping coupon. So let’s say shipping 50, and you’ll remember
a second ago, I set up my free shipping to be free for any orders above $50, so a minimum
order and a coupon required above 50. And, I set that up a second ago. So let’s try and set up a coupon to redeem
that. Okay. If it’s a free shipping coupon, just check
that box there. You can set an expiry date if you need to,
and let’s click Publish. Okay. Now let’s select a couple of products, and
see if this coupon works. Okay. Beanie. Okay. Before I add this one to cart, I’ll just
go to my Checkout. So the current order is $28. If I use that coupon code, you’ll see the
coupon is applied, but the free shipping option isn’t available because our order total
hasn’t hit the $50 minimum. So now if I go ahead and add this t-shirt
to cart, there you go. The t-shirt’s been applied, and also the
free shipping coupon is now showing up. So if I remove that, that free shipping option
disappears. But if I enter the coupon, there it is and
your customer can use that and proceed to purchase your products. Okay. So I’ll show you another example. Let’s say we want to give everyone a summer
discount of 25%. So let’s say our coupon code is summersale. For discount type, I’ll use it as a cart
percentage discount. So let’s say we want to give 25% off, you
can set an expiry date. You can also enter usage restrictions. So you can apply a minimum spend or maximum. You can check this box if the coupon cannot
be used with any other coupons, and also you can check this one here if the coupon does
not include any items that are already on sale. Plus, you can include certain products, and
you can exclude products. Similarly, you can include certain product
categories, or exclude certain categories from using this particular coupon here. You can use it and apply it in many different
ways. In usage limits, you can limit the amount
of times the coupon can be used in total. So let’s say for the first 30 times, and
then the coupon will become invalid. And you can also limit it to the number of
times a particular or a single user can use this particular coupon. So say they can only use it once. You can configure that. And when you’re ready, hit Publish. Okay. So now when a user goes to your … goes to
their shopping cart and applies that coupon code, there you go. You’ll see that the discount is applied
to the cart total. Now, if any of these products were on sale
and I clicked this check box here, that discount would only apply to full-price items, not
sale items. So as you can see, it’s very flexible. You can use it in any way you want, and it’s
a great way to run promotions and get your customers excited and interested in purchasing
your products at special times of the year. So definitely, make use of coupons, especially
if you have e-mail campaigns going out. Offer a coupon in the e-mail campaign. Maybe a 10% off, something like that. Just to keep your customers coming back on
a regular basis. The power of coupons is really amazing. So make sure you take advantage of that. Now, I’m going to explain to you two very
important marketing techniques – upselling, and cross selling. These are two very important marketing techniques
to persuade your customers to spend more money on your online store. Okay. We’ll start with upselling. An example of an upsell is take for example
we’ve got two types of jumpers here, a cashmere jumper and a cotton jumper. Now ignore the fact that the products are
a bit different, so this is not the ideal example, but it’ll do for now. So pretend these products are pretty much
identical expect one’s cashmere, one’s cotton, and therefore the price difference. When somebody goes to purchase a cotton jumper,
you try and upsell them with the cashmere jumper to attempt to get them to spend more,
so therefore the idea of upselling is to persuade the buyer to purchase items where the item
that you are trying to persuade them to purchase is of higher value or has a bigger profit
margin for you. Just like when you go to a fast food chain. You’ll buy burgers and you’ll get upsold
with fries and a drink because the fries and the drink have a much greater profit margin
than the burger, so the same concept here. Okay. So let’s start with upsells. I’ll show you how you can do that from your
Dashboard. If you go to Products, and go to All Products,
… Okay. So we want for every person that goes to add
a cotton jumper in their cart, we want to attempt to upsell them to a cashmere jumper,
which is of a higher price. Okay. So what we’ll do, go to the cotton jumper. So the item … the original item through
which you want to upsell your customers. Then, click on Linked Products. In the upsell box here, you’ll see, okay,
there’s a little bit of information if you hover over the Tool Tips. Same thing that I just explained to you, and
you can search for the item, which you want to upsell. Okay. We got cashmere jumper in there, and I’ll
go ahead and update. All right. So when the customer views this particular
product on your store, you will see that there’s a little box here saying, “You may also
like …” and therefore recommending the product which you are trying to upsell. So you can do this for as many products as
you’d like, and think strategically when you do this. The next item, cross sell, cross selling occurs
when a customer is purchasing an item. Say for example, cufflinks, and as well as
that item, you recommend another one or two items that complement the original item. So say for example, somebody’s purchasing
cufflinks. You may want to also recommend purchasing
this men’s watch, and you can do that for as many items as you want. So you can try and cross sell one, two, three
items if you’d like. And, I’ll show you how to do that. Similar to before, go to the product that
you want to offer the cross sell through. So say for example, for anybody purchasing
cufflinks, we want them also to purchase a watch and a tie. So what I’ll do, I’ll go to cufflinks. I’ll go to Linked Products, and then Cross
Sell. Let’s search for the watch, and also let’s
search for the tie. Perfect. Okay. So cross sells do not appear on the product
page here. This is just related products, so that’s
not related to our cross selling. It happens when we add to cart. So say somebody’s added this product to
cart, they’ll view their cart, and then there’s a section here, “You may also
be interested in a black tie or a men’s watch.” And you’ll see this a lot on sites like
amazon.com or ebay.com. You’ll see areas where they say, “Customer
who purchased this product, also purchased this other product.” And so, it’s a good way to get customers
to purchase or spend more money in one transaction. So hopefully, they’ll come to your – they’ll
add cufflinks to your cart. They’ll say, “Okay. I’ll pick up a men’s watch as well.” They’ll click on that. Add that one to cart as well. It’s a great marketing technique used by
every single business that I know to try and generate more revenue from their customer
base. So go ahead and think strategically. Use upselling and cross selling in the best
way for your particular online store, and I assure you, you’ll make more money from
each sale than if you do not use these features. So take advantage of them. If you have any questions or need my recommendation,
definitely leave a comment in the description, and I’m happy to help you out. And, that is all. I hope I’ve been able to teach you everything
you need to know about how to create an online store. Please be kind enough to give this video a
thumbs up, and also subscribe to my channel because I’ll be putting out more awesome
videos very soon into the future. Of course, if you have any questions about
anything I taught you in this video, please do leave your questions in the comment area
below, and I’ll be more than happy to help you out. Thank you for watching.

100 Comments

  • MAHESWAR JOSHI

    nice video and better information about eCommerce website.A person easily know and make the eCommerce website by this video.

  • Jeeva Siva

    Thanks for your great tutorial. Did the woocommerce website change? I couldn't find My Style free themes . Even I couldn't find the free menu button in the web site . please help. Thank you very much.

  • Arfat Mujawar

    What about if domain time gets expire after 1 year will our website live or closed ?
    What we have to do after domain expiration ?

  • Mohammad Alkasm

    Hi! thank you for the amazing explaining , I would like to ask you, how the costumer will trust me if I am a new sore online_How can they be sure that they will get the item that they ordered ?

  • Abid Nawaz

    i need your help to creating mobile recharge website, i just require box for entering mob number which will automatically get in my email address, can i have your email address

  • George Smith

    Adding each product one by one doesnt make sense if you have 500 or 1000 products. Is there any way of importing products from a csv list or something similar?

  • Rainflower

    There is no one on you tube ore the internet that has this gift to explain tutorials like you doe. EXCEPTIONAL. Moreover its free, not like the others that has tutorials you cant understand and cost a lot of money. Thanks so much. You are the best,

  • Nibaron Gogoi

    sir the theme name is not coming in the dashbpard and I cannot edit any other themes like mystile why?? please give a solution

  • Mian Haseeb

    The best video tutorial I’ve ever seen. After watching your video I’m feeling like becoming a developer of best e-commerce website even though I never studied e-commerce or web development as I’m an electrical engineer by profession. Tons of thanks to you sir for sharing this valuable stuff ☺️

  • Evelyn Hooks

    YOUR TUTORIAL WAS AWESOME. I M SO ANXIOUS TO GET STARTED DESIGNING MY SITE. FIRST WANTED TO LISTEN TO YOU IN IT'S ENTIRETY BEFORE DECIDING TO USE YOUR STEP BY STEP INSTRUCTIONS. TO BE CONTINUED!

  • Mohammed Saeed

    thanks for such simplified illustration,
    i have two questions, how can i build the same E-commerce with two different languages ?
    you were adding only one SKU a time, but what if i have thousands of SKUs how can i add list of SKUs at once?

  • Random and Weird

    Help me..I have been with godaddy for 2 years now paying less than €50 for my hosting and never paid above €10 dollars for domain per year.. Recently I went to purchase hosting and it was around €180 for just a year and tried purchasing a website builder anr it says around €300 this was even jumped all of a sudden from €80 to €300 in a month….is this normal?..

    Is hostgator any normal?

  • Ronaldo De Franca

    Hi! Is it possible to build a website in other languages? Portuguese, for example? Thanks a real lot for the fantastic tutorial.

  • lesabell zyadanova

    can we do this project for selling tour packages ? …2nd how can we make menu bar not hidden can we make it sticky?…. how can we make reservation form if it possible to use that design for tourism to sell tour packages ? …

  • KISHLAY KUMAR

    Hello, It's a great video for any beginner to create a website like a pro. Great Work!
    Although I need help! I want my product page to let customer upload photos/text with their orders before tapping 'Buy now' button. As I need to create a website for personalized gifts and handicrafts store. I am confused about it. Should I search a similar template or try searching some plugin to support the feature? But I haven't found any of them(template or plugin) like I want. Please guide me, what should I do.

  • Sanjeev Bali

    Superb, hats off sir, this video helped me like anything….saved my 3yrs learning same stuffs in university for such high end dynamic website..

  • Animagition

    Great tutorial. I am just wondering though. If I want to build a web site where visitors will have to create an account in order to be allowed to download certain types of files based on their registration levels, and only for a limited time, after which they will have to renew, will WooCommerce allow me to do this ?

  • vinay bhushan

    How to create one more box like colour of the product in product description page and in the box the customer can write the word. Simply as like personalization tab

  • Sylvia Vasquez

    Thank you very much, Sir. You have and your program has made more sense than any other program I have invested in and spent money and they never go really in to detail they just give you have of it. Thank you now I can work on my page or build my store with this that you kindly have taught me by watching this video.

  • Payse Tamara

    In the video they don’t ask you to pay for the WordPress . But when I try it now myself they ask me to pay

  • Byasa sahoo

    what if i buy domain and web hosting from some other sites otherthan hostgator….will i still be able to incorporate word press, woo commerce and other plugs ins in to that.?

  • Adenike Ifeoluwa Ajao

    Nice video!! But I can't get the free MyStile template downloaded from WooCommerce, the process is not as straight forward as it was illustrated in this video.

    Pls help.. Thank you

  • Adenike Ifeoluwa Ajao

    WooCommerce says MyStile theme is RETIRED, i can't checkout to download it.. Please what must i do?

  • Steve Bouck

    Excellent training video, very thorough, explicit step by step instructions, didn't assume we knew anything. Cheers!!

  • jack martin

    Very good video.Thank you soo much for enlightening me on soo many areas that I didnt know.You are a pro.

  • Yamma Nizami

    Hi I have come across this video and love it. I am attempting to build my website but a lot of the woocommerce has changed. Are you able to update this video? would be amazing if you could.

  • Ravi Gupta

    I tried to design by following your steps but same theme and plugin are not available…so it's difficult to follow you…but your video helps only to learn

  • Xing Zhi Chen

    This video has been extremely helpful so far. But I was confused when I downloaded my theme from woothemes and the product did not show up on the left handed bar "mystile"

  • Rhaeinah Ceyrinna

    this isn't involve coding right? i am asking because i am doing an e commerce project for my final year at university

  • Mohammad Fandi

    This is the best video I've ever seen, it is amazing.
    One query please, can we make it multi language in the same platform?
    Thank in advance…

  • samsuhang limbu

    I really like your informative video. I was wondering if you have more information on the domain and web hosting…..(as how to renew it if it expires- would you get an email?) also when creating the website….most of the information was regrading the admin account is it possible to make a subaccount within the account. I am not sure if my question make sense but it would be really helpful if you could provide insight.

  • Mehdi G

    Hi there. Absolutely loved the video. Just set up my own store with the help of your video. Quick question: Woocommerce seems to have retired the Mystile Theme. Which free theme would you recommend as an alternative. Thanks in advance.

  • Evgeniya Sakhinova-Muke

    Great detailed tutorial, thanks a lot!!! Could you describe how to make a site like this one bilingual? Thanks in advance!!!

  • Sreenivasa Hosamane

    I have a question on the host gator. Are the steps in your tutorial same eve if I have a different web hosting server ? Please let me know

  • Isaac Adonkie

    its been a wonderful tutorial , i already have a url through wordpress, but i am finding difficult to add the woocommerce plugin, because wordpress is asking to upgrade to business plan so I am kinda stuck

  • felix brown

    Thank you Sir for sharing your knowledge here. I'm working with images in Photoshop CC and learning about screen resolutions. What size are the image files, (.jpgs) are you using for your product images? I'm new to compression of images for the web. Again, hats off to ya!

  • MRoy Ghosh

    Could you help me with an opening pitch for clients who have just booked a domain.,, Am really impressed with this tutorial!! …

  • anand1sagar

    how to add buy now button also how to make website responsive for mobile app also how to add cc avenue or similar services like paytm

  • Ben Buoncristiano

    trying to set up a website some things have changed since you did this video I'm lost great video need to do updated version
    Ben B

  • John Jennings

    When i try to click my admin url it takes me to page saying ".this page isn't working" is there a way to fix that so i can finish/start my site

  • Piri T

    Hi totally enjoyed the tutorial.The free theme mystile is it possible to get a copy of this and apply it. When i setup my site, this theme was no longer available. Cheers PhilT

  • Annabelle Santillana

    Thank you so much for your video tutorial. You have shared a VERY Valuable Information and Skills to creating a website & ONLINE Store. You are brilliant and great instructor. It was so easy to follow your step by step instruction and your instructional techniques. This is what I have been searching for, for such a long time now. I am so happy to have come across your video. I will definitely be viewing this video more than several times and will surely subscribe to your other videos. Thank you so much. Watching this video definitely gives me confidence in going after my dream in joining the eCommerce business. THIS IS A GREAT KICK-START! Thank you for sharing!

Leave a Reply

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