what's up guys my name is Daryl and in
this video I'm gonna show you all how to
create a professional and modern
ecommerce website step-by-step and you
don't need to know any sort of coding or
have any experience whatsoever because
everything in this video is done with a
simple drag-and-drop builder with
hundreds of free templates for you to
use on your website
that'll make it super easy for you to
build your e-commerce website so if
you've always wanted to learn how to
create ecommerce website for the very
first time and you're kind of tired of
the runaround and this tutorial is for
you because I promise you at the end of
this video you'll be able to create your
own e-commerce website from scratch and
you'll also become a wordpress expert
now as you can see this website looks
super professional it's really modern
and I'm gonna teach you how to create a
website that your visitors are gonna be
really impressed with and also make it
really easy for them to navigate at the
same time so they'll come back and
purchase more and more of your products
if you take a closer look at this
website it's gonna look very similar to
popular online retail stores like
Walmart H&M forever 21 and Guitar Center
we took direct design inspiration from
these multi-billion dollar companies and
applied it on our own website so you can
be certain that you're going to walk
away today with a professional and
modern style ecommerce website that your
visitors are gonna be really impressed
with and personally it really inspires
me to make these ecommerce tutorials
because people watch these videos and
create their own websites and business
like this website right here called frog
soap com this person with no experience
watch my video and built their entire
website and is now making thousands of
dollars every single month using the
same theme and WordPress platform that
we are going to use today in this video
so if you're tired of the BS and you
really want to create a professional and
beautiful ecommerce website that'll make
you a ton of money then keep watching
because right now I'm gonna give you a
quick tour of the web sites and I'm also
going to show you the 4 step process we
are going to use to create your new
e-commerce website so it's really simple
step one we get our domain and hosting
step two we install WordPress step three
we activate our theme and step four we
start building our e-commerce website
creating products and you will be
accepting credit card payments right
away right after watching this video
in fact you're gonna have access to
hundreds of free beautifully designed
templates that are professionally made
and modern that I'll make it even easier
for you to make an amazing ecommerce
website now one thing to note here is
that this is a live ecommerce website so
someone right now can come to this same
website and use their credit card and
purchase products right away and that
can get paid right away on this
ecommerce website so I'll walk you
through the process on the customer's
experience in just a bit
but first I'll show you how to create
this really nice landing page so here we
have this text and then we also have a
price and we have these buttons right
here now you can add as many buttons as
you want and you can link this to any
part of the website if you want to do
that as well also I'm going to give you
the demo images for this websites to
help you follow along in this ecommerce
tutorial next we have our header so here
we have some really cool social icons so
you can have follow on Instagram follow
on facebook follow on tik-tok Pinterest
LinkedIn YouTube etc here we have a
quick check out button and also our cart
so your customers can always check back
and see what is in their cart and they
can click on checkout and purchase the
products right away on this ecommerce
websites here we have the dashboard so
your customers are gonna have their own
personal dashboard where they can go
ahead and update their payment details
they can update their account details
and they can update anything and also
track their orders as well next we have
our logo now if you don't have a logo
don't worry about it because I'm gonna
give you a really cool website that you
can get a really nice professional logo
next we have our menu to the left so we
have our home
the abouts we have the my accounts with
a drop down menu with the check out in
the carts we have the shop page with the
categories so let's say for example that
you're selling different categories now
you can go ahead and list those
categories on your menu as well here we
have our blog and also our Contact Us
page so I'll show you how to set all of
this up in this video
alright so scrolling down here we have
these cool icons so these are something
where you know it'll encourage
engagement such as free shipping free
returns and something like you know
in-home setup or something else here we
have product category so if you're
selling various products it's like for
example
watches laptops and headphones you can
categorize the products on your website
so when someone clicks on a specific
category it'll take them to a page where
you're only selling that specific
category so here this is the watches
category so I'm listing all the watches
and you can see here how it zooms in
when I hover over its and your customers
can click on quick view just to get a
close-up of the product and get some
more information about your current
products so scrolling down here next we
have our featured product so if you want
to add like your most popular products
on your homepage you can do that so here
we have these products and your
customers can click on a quick view
without having to leave the page and
they can just kind of get more
information about the product and scroll
through the images etc so I'll show you
how you can incorporate your featured
product on your homepage now also what
you can do is change the style of your
product so this theme has several
different styles on how you can design
your products and display it on your
e-commerce website that'll make it look
really nice and really modern next I'll
show you how you can incorporate this
newsletter so here you can see I
subscribed earlier so your customers can
come to your websites and put in their
email and click on subscribe and they
can go ahead and subscribe to your
newsletter or you can send them spam and
coupon codes and all that good stuff
next we have a last-minute deal so here
I just added this timer and you can go
ahead and list your products right here
so here you notice that we have this
different style which looks really nice
also we've added these a little bit
closer and it just creates a sense of
urgency so if you want to list your on
sale products you can go ahead and list
them right here next we have our blog so
if you want to incorporate a blog I'll
show you how to add that on your
e-commerce website and we cannot forget
Instagram so if you have an Instagram
you can go ahead and display your feed
right here so every time you make a post
it'll automatically get uploaded to your
e-commerce website and lastly you have
this really beautiful footer with our
payment methods on our website so here
you can see we have a little bit about
the company we have the blog we have
some products and we also have this
newsletter where people can go ahead and
also subscribe to newsletter on your
e-commerce websites now on the bottom
right right here if I
on this it's gonna scroll up to the top
right back to the homepage so next let's
introduce you to the shop page all right
so this right here is your beautiful
shop page and you can see right here we
have this video background where we have
this really nice banner and of course
you can change this to an image another
video and you can change this text to
whatever you want scrolling down here
you can see we have our products now
your customers can go ahead and sort
products by popularity they can sort
products from low to high or high to low
etc on the left side here people can go
ahead and search for their favorite
product or if they're looking for
something your customers can also filter
by price so if they're broke and they
have no money they can say all right so
I want to filter the products between 50
to 250 and they click on a filter it's
going to then show the products that are
only from 50 to 250 and not more than
that so that's just a really cool
feature that you can have on your
e-commerce website here I will filter it
back here on the left side we have our
one-day sale products so if you have
products that are on sale you can
display them right here and also
whenever your customer clicks on a
product the website will remind them
that they clicked on this and so if your
customers kind of forget on the product
they clicked on they can always see oh I
viewed that product let me go back maybe
they will buy it which happens all the
time
that is called retargeting and I'm sure
you've seen that on Facebook or Amazon
or something like that
here we have see our product where I
added a video so if you have like a
promotion or if you have a video you
want to add ecommerce website you can go
ahead and add it right here so this
right here is an example of a simple
product where we have the title we have
the price and then we have the
description people can add it to the
carts
people can see it's in the category of
watches they can go ahead and share it
to their favorite social media network
below that there's some more description
like maybe made in USA talk about the
material maybe a return policy people
right here can review the product by
saying oh it was great I loved it and
then they can go ahead and write a
comments and then below that we have
related products so if your customer is
looking at one product we can recommend
others now also on the bottom right here
you can see that there's a sticky so
this will remind the person that there's
you in this product because you want to
keep their attention on the product you
know that's the reason why you're
watching this you want to make money so
this right here is an example of a
simple product and we can customize and
change this layouts and I'll talk more
about that in this video so let's say
for example you have a product but you
have different sizes or something like
different colors so here we have these
headphones and we have different sizes
so we have small medium and large so
I'll say all right I want the medium one
and for the color so here you can see
how the product changed so blue because
I selected medium blue and right here we
can click on zoom in and people can
actually zoom in to get a better view of
your product and then you know if they
go back to white it'll change vice-versa
it's growing down here we have the same
thing social media icons and then we
have some description of the product and
also related products so it's just a
really clean atmosphere I mean you guys
can see this ecommerce website just
looks really clean it's really simple in
that it's gonna be really easy for you
to sell your products with this
ecommerce website now one thing to note
also is that if you have videos of your
product you can display videos of your
product so for example right here I have
this product and if I click on this
video button right here
it's gonna go ahead and display a video
so maybe if you have a video of your
product you can have this icon right
here where it'll give someone a better
visual of your product so that's really
really cool so I'll show you how you can
add this it's actually really fun really
easy to set up so this right here is
something that you can expect to learn
so I'm gonna show you how to create this
really nice shop page where you can add
as many products as you want have
different categories and you can
virtually customize it any which way you
want also for your e-commerce websites
so I'll tell you what let's go ahead and
buy something and show you the process
of how your customers navigate through
your e-commerce website so I want to buy
something I want to buy this right here
I'm gonna add this right here to the
carts you can see right here how this
displays I can click on view the carts
here we have this really cool banner
that's saying oh use the coupon code so
I'll show you how you can add coupon
codes that you can actually discount
your products when they are viewing
their cart so here the total costs
around two thousand two hundred dollars
alright that sounds good let's go ahead
and buy it so right here I'll click on
proceed to checkout and
here we have our checkout details so
right here the customer can put in their
information their first and last name
their address their town their state etc
and they can go ahead and pay you with
credit card or PayPal so what I'm gonna
do here is I'm gonna use a new payment
method and I'm gonna use my credit card
as ready so I'll go ahead and use my
secret credit card and the total cost
around two thousand two hundred dollars
that sounds fine to me I wanted to go
ahead and save my credit card for future
purchases and I have agreed to the terms
and conditions and right here I'll click
on place order now this is the exact
process of what your customers are going
to see and how they will purchase
products on your e-commerce websites by
the way guys that credit card is in test
mode so it's not real so don't think I
put my credit card on the Internet so
here you can see that the customer got a
receipts so here we have the order
details it has the products the building
address and all the information right
here also whenever you make a sale on
your website you will get an email
automatically telling you that someone
has bought something on your e-commerce
website so here you can see the name of
the person what was bought how much it
cost how they paid you and also it gives
you their billing information and then
right here we just put congrats on the
sale you can put anything you want there
obviously it's just for two toll
purposes and right here your customers
will also automatically get an email
telling them about their product what
they bought and this is their purchase
receipt so here you can see they bought
the watch they bought it with credit
card if there's a problem with their
billing address they can change it in
their accounts they can see their
address and also you can leave a cool
note for them saying thank you for using
our Oh websites now your customers will
also have their own personal accounts
where they can look at their their
orders so they can see all the orders
they have purchased they actually have
their address so if there is a problem
with their address they can go ahead and
update their address they have different
payment methods where they can
automatically store their credit card on
your websites and just overall take a
look at their account details to see if
there's any problems with their accounts
also right here you've noticed that I
had this really cool slider so we can
advertise other products in there
- bored so if you want to remind them
about new products you can go ahead and
add a new products right there so your
customers will also have their own
personal dashboards that they can manage
and control on your e-commerce websites
so if you guys are ready to learn how to
create a professional and beautiful
ecommerce website that just looks really
professional and it's really simple to
build and easy to navigate let's go
ahead and get started with this
ecommerce tutorial you guys ready let's
go all right let's get this tutorial
started so the first thing we'll do is
get your domain and hosting so for
example my amazing website comm step 2
will install wordpress and wordpress
powers more than one-third of the entire
internet it is very popular step 3 we
are going to install the number one best
rated best selling ecommerce theme for
WordPress also called flat sum and step
four we are going to build out your
e-commerce website and right after
watching this video people will be able
to purchase products right away now
there is a link in the description of
this video it'll take you to a page that
looks just like this right here and this
right here is icon calm now I've been
using sycron calm for almost what three
years now and sycron calm is the fastest
and the most reliable web hosting and
how do I know that how do you know that
I'm telling the truth I'm not just
trying to lie to you well I actually
tested them against 14 other web hosting
companies for three months and sycron
came up as the top two fastest and also
the most reliable web hosting so you can
be certain the heights gonna be really
fast and you're not gonna have a lot of
downtime with site ground it's a very
reliable web hosting company so of
course there's three different plans
there's the startup the grow big and the
grow geek now in all my videos I
recommend the grow big because with the
grow big plan you can host unlimited
websites rather than just a single
website and that's a pretty big
difference so right here which says get
plan click on get plan alright cool so
now we're gonna go ahead and register
your new domain so for example my new
amazing website com so go ahead and talk
it over with your girlfriend or
boyfriend or have a beer and think about
it but this is where you're going to put
in your new domain so I'll do something
like paddywhack
toriel calm of course this is just for
too-tall purposes and Pennywise my dog
so just you know that's how it is all
right so that domain is available so if
it's not available it'll notify you
saying pick another domain but this
right here it's available so right here
you'll put in your email and your
password for your new sycron accounts
your client information right now I'm
actually visiting Thailand but I'm from
the United States so I'd put USA and I
live in California so here I'll put in
all my client information and scroll
down this is we're gonna put your
payment information such as your credit
card etc and then right here you put in
your social I'm just kidding guys it
does not ask you for your social
security number I'm gonna get in trouble
one day for that but no there's no any
website to ask for your social security
don't use it but this website does not
total joking so here we have our your
plan so for the period
I recommend 12 months because 12 months
will actually give you enough time to
decide this is for you or not and you'll
also get a good discount for 12 months
next we have extra services now I
require you check this domain privacy
now the reason why you're gonna do this
because if you have this checked it will
protect your personal information so
it'll protect that if you don't have
this checked people are gonna see your
personal information so you're gonna get
a bunch of spam from all these random
companies trying to sell you bunch of
crazy stuff like pharmaceutical pills
and SEO packages all this crazy spam you
don't want that so if you have this
checked you won't get any of that and
it'll protect your personal information
so I highly recommend that you have this
checked right here and scrolling down
right here so once you're done filling
out all that information you will click
on I have confirmed to read and agree
the Terms of Service and I'm sure you
guys are all gonna read this stuff and
this stuff right I know every went out
there reads all that so once you read
all that so you go ahead and click on
the check also if you want to go ahead
and register for site grounds
newsletters where they give you spam I
mean they give you promotional emails
you can go ahead and check that as well
and once you're done filling out all the
information on this page you'll click on
Pay Now
and I will meet you on the very next
page all right cool so this is your new
psych round dashboard so right here
which says setup sites click on setup
sites right here we have the option to
start a new website or migrate a website
so for most of you you're gonna click on
start new website so right here click on
select you'll scroll down and then we
have some options and on the left side
right here you're gonna see WordPress so
right here click on select now this
right here is going to be your login
credentials to access your WordPress
website so go ahead and write this
information down and don't forget it
because you will need this information
to log in and make changes to your
websites alright so I went ahead and I
put in an email address and a password
and then right here I'll click on
continue now right now it's basically
trying to ask us if you want to add the
site ground side scanner for those of
you getting started I don't work in
minutes you can always get this later
and you can add it to your plan so right
here click on finish so right now what's
gonna do is that it's going to install
WordPress on to our domain so we can go
ahead and make changes and build our
websites also go ahead and check your
email and in your email you're gonna see
that you'll get this email that says
verification required so go ahead and
click on that and verify the email to
make sure that you don't get your domain
suspended because once you purchase
hosting they need to verify that that's
actually a real person so go ahead and
verify your domain and get that all set
so you just click a button in the link
and everything's all done so right here
you can see that I just got the email
saying that this was installed on my
website which is pretty cool so let's go
back to your sycron page now if you get
this page right here which happens quite
a bit don't worry about it right here
just click on home and then click on
websites so whenever you build a website
you'll see your website right here
listed so right here just go ahead and
click on site tools and this right here
is your new site ground dashboard now
also for those of you who install that
in a successful just click on go to your
account and I'll bring you to this same
page right here
so this right here is this like your
dashboard where you can see your name
servers or your IP address etc on the
left side right here you'll see
WordPress so you'll click on WordPress
and click on install and manage now go
ahead and scroll down to the bottom of
the page here and you'll see that you
have the domain right here you'll see
the installation of WordPress the
version and then right here you see
action so you can login to the admin
panel so right here click on login to
admin panel ok so this right here is the
WordPress wizard and it's just going to
ask you a few questions but we can
actually skip this so on the bottom
right here where it says exits go ahead
and click on exit and congratulations
this is your new website so right now
when the dashboard and if you want to
see your website live on the Internet's
on the top left right here you'll click
on visit sites and this right now is
your new website so your website's live
on the Internet if someone goes to your
domain they're gonna see this right now
so don't worry we're gonna make it look
really amazing so right here go ahead
and click on dashboard now there's a few
things that we need to do before we
actually build our website we need to
change some general settings and we also
need to fix our SSL up here so the first
thing that you'll do is go over here to
settings and go to permalinks now you
want to make sure that this is under
post name by default so if it's not on
post name make sure it's on post name
this right here is just making your
website look a lot cleaner so for
example you know your website comm -
about us or - contact not all this other
numbers and stuff like that so make sure
it's on post name and click on Save
Changes the next thing you'll do over
here under users click on your profile
now whenever you want to change your
password or if you want to change your
email this is where you're going to do
it also you can go ahead and change the
color scheme of your current dashboard
now you're gonna see this a lot so make
sure it's something that you like I like
Midnight's
I think it's the easiest way to see what
you're doing if you scroll down right
here you'll see that you have your email
address so you can
hangs at any time that you want and also
right here you can go ahead and add in a
new password so if you want to go ahead
and change your password in the future
this is where you're going to do it but
right here I'll just click on update
profile all right now there's a few
things that we need to do so we need to
go ahead and install some plugins and
also disable some so right here click on
plugins and click on install plugins now
in case you don't know what plugins are
plugins are basically applications for
your website so there's an application
slash plugin for selling online for SEO
for a contact form but our right here we
need to click on deactivate under
wordpress starter we don't need that
plug-in just yet
and one thing that I want you to do
right here is go to installed plugins
and click on add new the next plug-in
that we're going to use is we're going
to install an SSL to get rid of this not
secured on our website so if you usually
when you go to websites like for example
right here you'll always see that this
is secured also if he goes to Google
you'll also see that it's always secured
but you notice our website does not have
that so we need to change that so right
here type in really simple SSL it's
actually very funny SSL's originally
came out only for e-commerce websites
but now Google introduced a new
algorithm saying any website has to have
it so right here you'll see really
simple SSL so click on install now and
then you'll click on activate
now SSL is the main purpose of an SSL is
to actually encrypt credit card
information that comes on your websites
so that is the actual reason for an SSL
but even if you're not selling online
Google still recommends that you have an
SSL I know it's pretty crazy so the next
thing that we're gonna do is we are
actually going to install the SSL on our
website with site Brown so let's go back
over here to our dashboard so right here
we have these options on the top right
here we have security we have speed we
have email etc so click on security and
then you'll click on SSL manager so here
we have our domain and we're going to go
ahead and select an SSL so
right here go ahead and click on let's
encrypt wild card and then right here
you'll click on gets so right now what's
icons doing is that it's installing an
SSL on to our domain that'll give us the
secured little notification right here
and it'll also encrypt information for
credit card users etc alright cool so
the SSL has been installed on our
website so there is nothing more for us
to do on this page so you can click on
dashboard and then check any other
settings but right here if we go back to
our websites we need to refresh this
page now so click on reload this page
and now you'll see that the website
actually can find our SSL so right here
click on go ahead and activate SSL now
before you do this you will have to go
ahead and log in again so make sure you
have your email information and your
password written down the one that I
told you to write down because it's
gonna kick you out of WordPress and I'm
going to show you now how to login again
to your website so right here click on
go ahead and activate SSL now you'll
only need to do this once
so you'll never need to do it ever again
right here on the top left right here
now you can see we have connection to
security uh congratulations
now right here you'll enter in the email
and the password that you wrote down
earlier so this is how you log in to
your WordPress website so I'm gonna go
ahead and put in my email and my
password and then right here I'll click
on login alright cool so you can see
that our website is now secured and I'ma
close all these little annoying little
things right here and now we have the
connection is secure so congratulations
you now have a secure to web site and it
is looking good according to Google now
I'm gonna go ahead and log out and just
show you all how to log in to your
website in the future so right here I'll
click on log outs and what I'll do here
is I will just go ahead and show you
this domain so to log in to your web
sites what you're gonna do is right here
type - WP dash admin now this is the
address that you'll have to type every
time that you want to go ahead and log
in and build or make changes to your
website so there click on enter my
information right here is
stored I'll click on remember and login
all right congratulations so now you
have a fully functional website that is
SSL verified etc now let's go ahead and
do the next step where we're going to go
ahead and install our theme now
currently right now we're using a
default theme it's very plain it's very
boring there's a lot we can do with it
so the next thing we're going to do is
step three we are going to purchase and
install the number one best-selling
ecommerce theme for WordPress which is
called flat sum now there is a link
below to purchase the flat something and
it'll take you to a page that looks just
like this right here so this right here
is the flat sum theme and it is the
number one best-selling WooCommerce
theme for WordPress and it has a lot of
good reviews and it is super easy to use
so you can see here how it has tons of
sales a lot of people liked it and the
item rating is very good so it has
around five thousand four hundred and
fifty seven positive reviews now there's
a lot of themes that you can use for
WordPress a lot of e-commerce themes so
over here you can see that this is the
best-selling ecommerce theme for
WordPress and they're gonna see flotsam
as number one it's number one because it
has its own builder it has tons of
templates tons of options and it is not
gonna limit you to do anything that you
want for your e-commerce websites a lot
of these other themes they're not really
that good I've used tons of themes guys
and they're really not that good so
flops up again is the best theme for
e-commerce so it does have a small fee
but for 59 bucks for what you get it's
incredible and I have tons of themes so
what you'll do here is you'll go ahead
and click on Buy Now and you'll go ahead
and purchase this theme on theme forest
or yeah theme forest or in bottle market
I don't know this website gives on self
two names it's really weird now once you
actually go ahead and purchase this
you'll go ahead and download it so over
here I'll go to my downloads alright so
I purchased flotsam and it is right here
so this is the theme that you're gonna
need so right here you'll click on
download and click on install WordPress
file only
so you'll go ahead and click on that and
you'll notice right here on the bottom
left that the theme is now downloading
so you're going to take this file and
you're going to upload it to your
WordPress websites so going back over
here on appearance we'll click on themes
now these right here are free themes and
they're just like they're not for
they're not for e-commerce they're just
for they're for anything and they're
really not that good I've never even
I've used one or two in their extremely
limited so go
I wouldn't recommend them at all right
here you'll click on upload theme choose
the file and then you'll go ahead and
select the file that you downloaded all
right so here's the file it is the
flotsam multipurpose responsive
e-commerce theme right here I'll click
on open and click on Install Now alright
cool so it has just installed the
flotsam theme onto our websites so right
here you'll click on activate alright
cool so right here it has a wizard now
personally you don't need to go through
this so for right now just click on not
right now
because I'm gonna basically kind of
guide you through the process here
they're kind of they're gonna jump you
around in different areas and you might
confuse you so right here click on not
right now now let's just take a quick
look at our website so right now you've
noticed that we have flotsam right here
we have some different options we have
some other little different things that
popped up and right here click on visit
sites and you'll notice right away that
the site has kind of changed in some
aspect so we have the menu right here
the the font is different the color we
now have just a lot of different styles
and functionality to our website so you
can see here have a slight slowly
changing step-by-step now let's go ahead
and make some pages so we don't have a
menu right here you know we need like
the home the about the contact us etc so
let's go ahead and do that let's make
some pages so let's go back to our
dashboard right here go to pages and
click on all pages now these are all the
pages that are actually on your website
right now
and these are just default ones that you
don't need so right here we'll click on
all of these and move to trash so this
is how you delete pages now let's make
some pages so I want a home page right
you want an about Us page a Contact Us
page right so here I'll close this and
simply type in home
click on publish and publish and we're
going now here's a shortcut right here
plus new + page ah shortcuts
see that's shortcuts here we go about us
publish and publish and then we'll make
our last pages is to contact us now the
other pages like the shop the car to my
account that's going to be automatically
created for us later once we install a
free plugin and then here a loop
contacts click on publish and publish so
we made the pages and now we need to
actually create a menu so we need to
basically tell the website ok so where
are these pages going now right here
under appearance
we have menus and go ahead and give your
menu a name so this is this is my main
menu right main menu here I'll click on
create a menu alright and then right
here we see pages we can click on view
all and it's going to list all the pages
now click on select all right here and
click on add to menu
you're gonna see that we have two home
pages so we have two now this one right
here again is default and it says a
custom link now we're gonna use custom
links a little bit later when we talk
about product categories but for right
now we don't need a custom link so on
this one right here just click on remove
I don't want that get out of here
and this right here is my main menu so
click on main menu and just click on
save menu alright now let's go ahead and
take a quick look at our website right
here so right here wilco to the top left
and click on visit sites and now you can
see that we have the home the abouts and
the contact and if I click on them
they're completely blank there's nothing
there now there's one thing that we need
to do here so if you notice our main
home page is not our home page so we
need to assign the home page is our
primary home page so what we can do here
is over here in our customize will click
on customize
and then what we're gonna do is you're
gonna see you have all these new options
now just to give you a crash course guys
on the theme customizer it just allows
you to change stuff so right here I'll
just give an example header you can
change the header style right here you
see this so now it looks like that's and
then over here now we have something
that looks like this right here or right
here with the buy button etc so
essentially what the theme customizer
does is that it just changes the actual
header and the footer so it controls
everything outside of the page builder
but I'm not gonna go into this too much
because I'm gonna talk about this a
little bit later so I'm gonna go ahead
and click on publish right now and go
back so next let's go ahead and keep
going to what we were doing before I'll
go back we're gonna find home page
settings and then you're gonna see a
static page now for the home page I want
to make that a home page so right here
you see blog or I'm sorry the post page
here I'll click on publish so if you
want a blog you would simply click on +
new page and then go ahead and make a
blog page so for example right here we
can do blog right and then I click on
add so what I just did right there was I
actually just made a blog page for us
now we still have to assign it to the
menu but that's just a shortcut
WordPress cute a lot of cool shortcuts
guys so here I'll click on publish so
what I can do really quickly is give you
another little kind of crash course here
so right here in their menus you can
also customize your menu through the
theme customizer so right here I'll
click on main menu and you can see that
we have all these various pages and here
you can rearrange them etc so that's
just a little you know a little rundown
if you want to go ahead and design the
menu from here if you want to do that
but I'm just giving you you know that
option so here I'll click on close and
you can see here now the website sort of
coming together so we have the home page
the about Us page the contact we have
the buttons and the footer all we need
now is the actual contents in the middle
of the website which is we're ready to
build a website but right before I do
for those of you who want to assign the
blog to your menu let me go ahead and do
that really quick you don't have to
follow me here if you don't want a blog
I'm just gonna show you really quickly
so again appearance and menu so whenever
you create a page this is how you're
gonna add it to the menu so again right
here pages the blog page which we
created right from the theme customizer
or the shortcut we add to menu and then
just put it wherever I can have as a
drop down you know I'll leave it as a
drop down why not and go to save menu
and then right here visit sites voila so
we made our homepage we made our menu
and we assigned it so I think right now
we're pretty much all ready to get
started with building out our websites
so whenever you want to design your
website there's two ways you can do it
right here on our edit page you can
click on edit with the UX builder or you
can click on edit page I'm just giving
you two options and click on edit UX
builder it's the same thing again it
brings you to the same place so click on
edit with UX builder alright it's cool
so right here we have this WP content
blocked and we don't need this because
this is the default a Gutenberg and
Gutenberg is far from being anything
even good so we're gonna delete that so
to delete that with your new editor you
see this gear icon just click on this
and click on deletes so think of this as
your new building this is like your new
building area this is what you're gonna
build out your website so let's just go
ahead and get started so there's a lot
of templates that are here but these are
absolutely terrible because they don't
include the image they don't give you
the image sizes a lot of them are not
arranged properly and they're very
confusing so I know the images make it
look really simple but trust me you want
to do this yourself so right here we'll
click on add elements now there's
different elements that you can add to
your website so there's like a text
there's a button all this stuff so just
give you an example right here I'll
click on text and there's different
style text that you can you know apply
and I'll click on apply and then if you
want to change it you'd open the text
editor and then you can go ahead and
change this to anything and you'll see
how it's changing on the website and
then for example if you want to add
something else right here under this
plus icon I'll click on this and I'll
add in a button
something like that you know and you can
change the button style to whatever you
want to all these different ways and
then apply so this is just a quick
rundown of how to change stuff and then
for every single module there's like
different ways on how to style it and
just by reading this I think you'll
understand what this is you know like
you'll understand that the style you can
do simple shade here they have radius so
radius deals with circle and squares
basically if you want to have an icon on
your button you can go ahead and have an
icon now I'll talk more about padding
and margin and a little bit's which is
this right here which can be it's it's
actually pretty simple but this would be
a bad situation to teach you in but
that's just a quick rundown of how to
add stuff so let me go ahead and delete
this really quick now let's go ahead and
do something else where we're going to
use the template library which is what
you're going to be using for most of the
tutorial here so right here under add
elements you'll see flotsam studio click
on flat 'some studio okay now right here
you'll notice that Fossum actually has
pre-designed sections they've made for
everybody so you can use these sections
you can use the images you can use
everything about them and you can see on
the left right here how they've
basically created sections into
categories so here we have campaigns
here we have call to actions now call to
actions for beginners is just buttons
that's what it's just basically buttons
that's it it's just a fancy word of
saying buttons so think of it like just
buttons so here we have banner etc so
we're gonna turn this websites into our
websites
okay so first click on ecommerce and
let's scroll down here I'm gonna scroll
down and you're gonna find a temper that
looks like this right here it's called
this single product focus and if you
want to see it up close you can click on
preview and what that's gonna do is it's
gonna show you what this is gonna look
like so you can see here how I got a lot
of ideas from this page I didn't use all
of it of course I decided to take a lot
of this out because this is more for
like a web design business but I like
the landing page and I just decided I'll
use this but I'll change some of the
images and the colors etc
so right here I'll click on imports now
I don't want to import the images here
because there's a lot of images that are
unnecessary then right here you'll click
on start so what it's gonna do now is
that it's just going to import the
structure of everything and then we can
design it the way we want now also there
is a link in the description of this
video to download free images that you
can use to follow along in this tutorial
so first what I'll do is I'll click on
update so this now is my new homepage
when I click on update so now I'm saving
all of my progress and if you scroll
down right here you'll notice that
everything was imported now I don't want
to use all of this right here because
this is just too much stuff for me to
use so whenever you want to delete stuff
you'll go to the gear icon right here so
selling points you'll see how the
sections highlighted and I'll click on
deletes right here deletes here deletes
and then again will keep deleting this
because we just don't need this stuff
because this stuff is just not relevant
to our websites I just want the landing
page so what you can do here is just
kind of grab sections that really
drastically speed up the process of
making your website because this section
alone will take me a lot to make from
scratch you know this is a text module
two buttons it's a two column row etc so
what I'll do here first is I want to
make this a full width page right I
don't like this box look so on this gear
icon right here I'll click on this I'll
go ahead and find templates and I'll
change us to Page full width all right
so now you can see that this has gone
across the page and I'll click on apply
now in the future if you want to just go
ahead and delete everything from the
page and you messed up right here you
see clear post contents you can click
clear and they'll delete everything so
you can start over from scratch just in
case you don't like your template so
let's go back over here and now let's go
ahead and kind of dissect this let's
find out how to how to change all this
stuff so right here we have section here
click on options and now you can see
that we have different options to change
this section so I can I can control the
color so right now we're controlling the
sex
the background of this so right here we
can add an overlay we can change the
color of this etc now this right here is
an overlay so if you take this off it's
gonna be the default color so if you
want just like a basic color you can go
ahead and do that as well but I want to
go ahead and upload an image so right
here under select media I'm gonna click
on that click on media library click on
select files now I'm going to go ahead
and find the images that I actually gave
you guys so I'm gonna go ahead and use
these same images so here I'm gonna hold
shift and I'm going to take all of the
images that I have and I'm going to
upload them one time because I don't
want to have to keep uploading them cuz
that'll take a long time right so right
here I will click on open and this will
take probably like two minutes three
minutes at most all right you guys are
ready you guys are done so if you've
noticed right here we have this image
right here so take this image and then
right here on the bottom right you'll
click on use this image and voila we
have this beautiful image and what you
can do here is you can go ahead and
change this text you can change the
button color etc just by clicking on the
actual module so for example I'll click
on the button and now you see that all
the options are now changed specifically
for the button so here let's just go
through some of these so here we have
letter-case we have different colors now
this right here is actually through the
theme customizer so we haven't gone over
through that yet but we'll go through it
a little bit later but I'm gonna put it
as my secondary color for now we'll come
back at the end of the video I'm sorry
at the end of the page and I'll talk
more about the theme customizer and this
because I don't want to jump into the
theme customizer I'd rather you know
keep going so next we have the animate
feature right here so for some browsers
it doesn't work sometimes the animate
feature so what you can do so for
example I'll just do bounce in up and
I'll click on apply and apply so if you
want to see the image or the animation
what you can do is you can go to your
website and just click on the refresh
button and you'll see the button right
here how it has that animate feature
where it just kind of goes up like that
and you can kind of go through
trial-and-error so again click on the
but
in here you can do something like blur
in and click on apply' and updates and
then over here just refresh the page
again and now you see how it blurs in
like that so it's really cool you know
so you can do that with every single
module which is really amazing so
usually you'd have to enter a bunch of
CSS and JavaScript but with this theme
it just has all these features inside of
it now let's just say you want to go
ahead and change this text so you click
on the text right here and open the text
editor so just simply go ahead and put
in like the you know the new iPhones
watch or something like that
iPhones watch and then click on OK and
there you go and you can go ahead and
add as many text buttons as you want so
you can see here every little module has
a plus icon so let's say for instance I
want to go ahead and click on apply I
want to add something right here below
the text but also above the button so
I'll just click on this and then we can
add in something like a row and I wants
maybe a one column row and then here
I'll say ok and then you just grab an
elements so here add on elements and
then simply just go ahead and put in
something like I don't know social icons
you want to add in social icons and then
here you just go ahead and put in you
know the address of the social icons to
make them display so you can add in as
many as you want
so that's just how you can kind of add
stuff to your website and this can even
be like an app landing page so you can
have so your application right here and
you can have like an image such as a go
to Spotify or go download it here or go
to the App Store or whatever but I don't
really want this so let me show you now
how to kind of move stuff around so here
on the Left right here we have these
different rows so you can see how how
the row controls this section the gap
then we have this right here which is
the buttons so let's say for instance I
want to go ahead and take this and I
want to hold it and I want to drag it
below so you can kind of take your stuff
and kind of just move it around and drag
and drop it to wherever you want it to
be and this applies for every single
module on the left side so you can drag
this anywhere you can put it anywhere
that you want etcetera
but right here I want to take this row
and I don't want it so right here I can
click on deletes or I can click right
here and click on delete it's the same
thing so next let's add in this section
right here I want to add in these three
icons and these three images with
product categories so over here I can do
this various way so right here we will
click on this plus icon we can use the
flat sim studio but let me show you
really quickly how to do it manually if
you want to go that route so right here
we can add a row you would choose the
number of rows so I'll just say I want a
three column row and then click on apply
and just simply click on the plus icon
of the add elements and simply add a
Nelly element that you want to add
inside of this box so right here we will
find the icon the icon box now the big
flaw with the icon box is that it
doesn't have a cons I'd come with the
theme so you'll actually have to go
ahead and click on select media and
you'll have to select your own icons
there's other websites that you can
download icons for one's called free
pick calm and I'll leave that in the
description below but I find that very
inconvenient so I don't like to use the
icon box manually so here I'll click on
deletes but if you want to add in any
elements you would just simply go ahead
and just grab an elements maybe you want
to add in I don't know a testimonial
here we go testimonial looks really cool
and then you can always change the way
it looks with these different styles etc
so that's how you can actually go ahead
and do it manually but I want to use the
flotsam studio because the fossum studio
is one of the main reasons why people
use this theme because it's extremely
easy so right here you'll see this row
that we made so I can go ahead and take
this and delete it because I don't want
to use that right here plus and then
here I'll find the flotsam studio so
there's various things on you know what
we can add so at this point I think you
can kind of get a better understanding
now on how to use this so right here we
have call to action and the one I chose
I'm sorry I use icons really quickly so
services and icons and I chose this one
right here so it has the icon boxes
already and everything
already done so here I'll just click on
imports that cool so it added the icons
for us now one thing I want to do here
is I kind of want to adjust the padding
and I did talk about padding but I
didn't really go over it so I want to
reduce the space here because I feel
like it's too big and I kind of want
these these great little lines to end
right here so whenever you want to
reduce the padding of something options
and we're gonna find padding so right
here you see under layouts there's
padding so padding is essentially space
so the more padding you have the more
space that you have so right here if I
hold it and I drag it you're gonna see
how it increases the space and then if I
hold it and go back it reduces the space
now if I have something like zero
padding you can see how there's zero
space but I kind of liked that look I
like how it's very condensed and I like
how it's structured and looks pretty
clean so I like this look and then right
here there's different color schemes
light or dark etc you can also make this
sticky scroll form or it has this little
scroll button so you can kind of go
through these options on your own time
and kind of you know mess around with it
and check it out etc but for right now I
think that this right here looks pretty
good I find that this is you know
exactly what I need so you can kind of
go to these options and just take a look
at them this triggers for video I don't
want a video we might add one on our
shop page but you wouldn't want to add a
video behind this because it just
wouldn't look good so next let's go
ahead and add in this section right here
so what I'll do here is say okay I'm
done with this section now really
quickly if you want to go ahead and
change the color of the text you can
click on the text go to open text editor
you'll click right here on the toggle
toolbar and then here we have text color
and I'll just make it a dark black and
click on okay so you can see here how
the text is now black now I'll also show
you how to change the font the font does
require a free plugin and I'll talk more
about that once we actually install
WooCommerce but for now let's just keep
using the page builder to get you more
comfortable and
we'll talk about changing the fonts so I
made this section right here so I'll
apply this again now let's go ahead and
make this section right here now right
here you'll see add elements click on
add elements and the Fossum studio will
always display so usually when you
reduce padding a lot it's kind of hard
to find the button to add the flotsam
studio so you ever can never find it or
something like that so if there's a
problem just click on add elements so
right here we'll go ahead and find
banner and then under banner you're
going to see this one right here it's
called the e-commerce info box 3 column
I'll click on preview and this is the
one that I use you'll notice it looks a
lot different because I made some
changes to it so right here I'll click
on imports now I don't want the images
because I already have my own so here
I'll click on start alright cool so now
we have this box and what I can do is
click on the actual backgrounds and I
can add in my own background so you'll
see over here how I have the headphones
so I'll go ahead and find the headphones
right here and I will use this image now
whenever you upload an image you'll see
that the image doesn't display however
we have this little button right here
and we can kind of drag it and we can
display where we want the image to show
on the backgrounds and we need to
actually kill the overlay right here so
right here under the overlay click on X
so now you can kind of see the actual
image and you can see how it's
displaying right there pretty cool so
you can change the text anything that
you want obviously so right here under
product sale you can do something like
headphones you know headphones and click
on OK and I'll click on back so right
here under the banner you notice that
this really isn't a link to the products
or this isn't a link this is just a
background image however if you scroll
down right here you'll see that we can
put a link right here so we can go ahead
and put in our products later and then
link them to that specific page later so
I'm just kind of giving you a little
thinking outside the box here you don't
have to use this can be a button this
can be a anything that
you want so just kind of think outside
the box here so that's just you know one
way on how to do it and we'll talk more
about linking to your categories in just
a bit
now also you've noticed right here how I
have this black border right here and we
don't have that by default so I'm gonna
show you now how to add a border so
first off we have a border right here
and I'm gonna add in something like ten
pixels so ten pixels and now you'll see
right here how there's this border right
there and I want to add it to all the
sides so you can see here on the picture
this is top right bottom left that's
that's how it goes and I want to make
this a solid border and I want to give
it a color so right here I'll give it a
black color and then I can even add a
radius which gives it that circular but
that doesn't really work well so we'll
just leave it at that so now you can
kind of see how I just added a border
around it let's do it for the next one
right here select media so here I'll
just grab a laptop image so I'll take
this one click on use this and then I'll
simply change the texts to something
like you know discounted laptops
discounted laptops click on OK and then
I'll click on the banner right here and
then I'll go back over here make sure
the overlay is dead actually I think we
need an overlay just a little bit yeah
we do need overlay there just a little
bit cuz the the white text is hard to
read with the white background and then
right here I will simply go ahead and
add in another one so here we have ten
ten ten ten this is fun right guys you
guys are where you guys are you guys are
learning Web Design and right now we
have the whole coronavirus thing so this
is a good option on how to remote
remotely you know and I'm sure you guys
are all tired of the coronavirus news
and you're watching this from 6 months
from now you're like oh I remember that
and so now let's do it one more time for
this one right here so here I have the
watches so I'll just simply go ahead and
click on image I will find a watch I
think that's the same one right there
yeah the same one use this image and we
can always move this image around
alright here we can
you know mess around with it and then
here I will take off this color the
overlay is okay now one thing I didn't
mention it was the hover so right here
we have the zoom we have the blur we
have like the the fade-out so when you
hover over it it'll have different
animations so zoom in long see that so
you kind of go through the animations on
your own time to kind of see what you
want but right here again a lot of
border we'll add in ten
I find that border is really cool
actually you know it really it really
makes it clean and it kind of emphasizes
it cleans around the edges it just looks
really cool I think here odd and solid
and then odd and a black color as well
alright next let's say you want to go
ahead and reduce the space right here so
actually right here there's a gap so
when you imported this template there is
a gap module and here you can see the
height you can actually go ahead and
make it go down to zero
or you can leave it at 45 something like
that so it just adds a little gap so
there are modules that actually add
space in the flat something so now right
here this is all good and done if I
click right here you'll see it just
looks good so so far the websites really
coming along you know and what you want
to do is just click on update and apply
or apply an update and just click on X
and this is your website live so this is
how it really looks like on the internet
so people can come to this website right
now and this is what they're gonna see
so let's go ahead and add the title in
really quickly here I'll click on edit
view X builder and then we'll move on to
the more interesting stuff of adding
products so I'll scroll down here I'll
click on the add elements flotsam studio
actually no no click on back here no
we're gonna use this now we're going to
use this we're gonna use title title and
for the style I want it is centered so
this right here is going to you know
it's going to introduce our products so
for the title I'll do featured featured
products
and we can make it a little bit bigger
something like that all right so I'm
like that's okay all right apply and
that's that that's good you guys are
good and let's now create products so
here I'll click on exit the Builder and
you can see again the site looks good
everything's going according to plan
now let's add WooCommerce plugin so
that'll basically give us the ability to
start creating products so right here we
have plugins and I'll click on add new
now again right here I click on popular
just give you a crash course I'll close
this so there's just various different
plugins out there for virtually
everything for WordPress this right here
is the one that we're gonna use this
right here this one helps with the SSL
this right here this imports stuff I
don't even know this is a contact form
that we can use actually this right here
protects against malware there's so many
plugins out there for virtually everyone
so once you're kind of working on your
website you might want to venture off
and do your own thing and kind of find
out you know what's what you you might
need to do something for your site that
someone else doesn't but this is the one
that we need right here so right here
you'll click on install now it's called
WooCommerce so right here you'll type in
WooCommerce and click on enter and this
is it right here you'll click on install
now now what this is gonna do is that
this is going to automatically create
the pages for us and it's going to have
the ability for us to take payments and
to create products so right here click
on activates so WooCommerce is gonna
prompt us with a setup wizard so right
here click on yes please now right here
they're asking us to connect will
commerce with jet pack and jetpack is
another plugin and it's also a service
that allows us to do some really cool
things like have automated sales tax etc
but we're gonna do that a little later
so right here on the bottom click on
proceed without jetpack and here you can
choose the option to you know have them
know what's going on by sharing data or
knots but I'm not going to share it so
I'll just click on next
so where's your store located now if you
are an e-commerce store and you are
not having an address don't worry about
it because you can delete all this later
so for example right here I'll just do
109 California Way
I'll put United States California city
of good ol Santa Clarita and then here
I'll put in nine one three five five and
I'll just say I mean there's an option
for this or not I really don't know what
it does if you tell them or not to be
honest but I'm just gonna click on
continue so what industry are you in you
don't have to tell them if you don't
want to but I look at that hemp hemp
drive products you know this companies
from San Francisco if they're offering
you if they're asking you that
but uh I'm what are we doing electronics
yeah electronics there we go continue
now I want you to select physical and
downloads now these other products are
plugins that you don't really need in
fact I do have tutorials on all of these
plugins but that's that's for something
completely next time all you need is
physical products or virtual or
downloadable products and then you'll
click on continue how many products do
you plan to sell I don't know and then
are you selling no now they're gonna
offer us different plugins now these are
free plugins but I just don't want to do
this right now cuz I don't want to go
ahead and dive into Google Shopping and
MailChimp so I don't want these plugins
on my websites and then here I'll click
on continue and it's saying okay choose
a theme now I'm already using flotsam so
I'll just continue with my active theme
alright cool so this is gonna be your
new dashboard so whenever you make sales
or whenever you see orders it's going to
appear right here under your ooh
commerce dashboard they're gonna have
charts and orders and all this really
cool stuff now if you see a dashboard
that looks like this right here don't
panic this tutorial is not outdated this
is a new platform that they're going to
be introducing very soon
right now they're testing it so I just
want to make sure that if you see this
right here it's not out to dates and we
will cover all of this a little bit
later in the video so do not worry
all you to know is that on the left side
right here you see products
and right here if you click on all
products this will display all the
products that you currently have now
right now we have no products so let's
go ahead and create our first product
you ready you ready all right let's do
this
create product click on create products
so I'm first going to show you how to
create a simple product so a simple
product is essentially something with no
features you can only add it to the car
so there's no options and it's gonna
look just like this right here so it's
just the title a price and description
and that's pretty much it so over here
let's go ahead and give it a name so
I'll just do e e phones right or I don't
know a phones and this is gonna be your
long tail description so this
description right here is going to
display at the bottom of the page and
this can be something like the material
you know like 100% cotton or hundred
percents here fiber made in USA 30 day
money back these are something that are
like four technical things like you know
material where it's from or whatever you
want to put at the bottom of the page
and then right here we have price now
don't worry about the currency we can
change this to over like two hundred
currencies I'll talk more about all the
settings as far as shipping taxes
currencies all that stuff a little bit
later in the video list for right now
let's just get you comfortable on how to
actually make products so right here
I'll just say all right the e phone is
right now $600
but it's on sale for a 500 bucks and
here I can even schedule a sale so from
April 1st to something like April 30th
it's gonna be on sale from $600 to 500
but I want to make this right now
because I want to show you how it looks
like right now etc inventory this is
we're going to put in your school
numbers manage stock if you want to show
people how many you have in stock you
can put it right here so I have 10 in
stock do you want to allow back orders
sure why not when you want to be
notified by email that you're running
low on the product well maybe around 5
something like that
shipping right here you can talk about
the weights and the dimensions etc link
products so upsells and cross-sells so
upsells you can actually be the right
here our products that you recommend
while you're currently viewing the
product so for example these right here
are upsells so you can see here how I'm
viewing this product and now it's
recommending these products so this is
an example of an upsell if I go to my
carts by adding to the carts and I view
the carts right here they'll be boxes
recommending other products those are
cross sells so across L is something
that you recommend when they're checking
out so for example they might want an
add-on for something else so that's an
example of a cross sell and Amazon does
that all the time so you're recommending
other products with in conjunction with
this product so that's an example of a
cross sell and we can add those once we
actually have products right now we
don't have any products this right here
is going to be your product short
description so for example I'll go ahead
and click on the phone and this is going
to be this text right here so this X is
very important you want to make sure
that it's something that is representing
your product and your accurate
so here I'll paste this product image go
ahead and select an image now for your
products so I selected a phone right so
here I'll select this phone set product
image now do you have other images of
this product if you do you can click on
add product Calgary gallery images the
tongue-twister and just select whatever
other images that you have and now that
to the gallery product tags we can post
something like phones and this right
here is important product categories so
I want to make a new category here for
phones so I want all of my categories to
be in phones you understand and don't
worry this website right here will go to
the backend and we'll talk more about
everything once we're kind of done with
everything to get you a better
understanding of how exactly I did
everything on this websites so we have
phones right there now for general right
here you can see we have the price
advanced purchase notes if you want to
give them a note you can go ahead and
leave them a notes order no I'm sorry
menu order this will actually position
the product where you want it to be
however with our theme we can actually
position products with our theme so with
other themes you kind of have to go
through it manually but with ours we can
actually set it on our website you know
for us here we have reviews if you want
to enable reviews and then there's
extras which is um this is specifically
for the flotsam theme so this is really
cool we have a custom bubble if you want
to add in a video to your product you
can add you can have a video you can
have all this other really cool stuff
and kind of go to that and mess around
with it here we have a lightbox or a new
tab etc but I'm not gonna go to this
this is you can just read through this
and kind of understand how this works
here I'll go to general so I think
everything is all ready to go so he
phones everything is good here I will
click on publish and let's take a quick
look at our product all right awesome so
here we have e phones you can see it's
on sale from 500 to 600 we have the
description we have 10 in stock and here
you can see the gallery so people can
actually go to the gallery they can open
it in a lightbox and scroll through
pretty cool if we scroll down right here
we have various social media icons where
people can share it to their favorite
social networks here we have the
description so the fiber made in USA you
know I'm sorry we should have done
carbon fiber carbon fiber guys my bad
and then we have reviews so someone can
leave a you know leave a five-star
review saying awesome now you can also
have the option to have these moderated
so if you have a bunch of trolls
trolling your websites you can moderate
these comments as well alright so
congratulations we actually made this
product now let's before we go on to the
next one let's quickly touch base on the
theme customizer so I'm going to show
you really quickly on how to design this
page right here so right here we have
customize and we have product page
so remember I told you the theme
customizer kind of controls everything
outside of the actual the Builder so we
can actually create a custom product
page from scratch however I'm making a
whole separate tutorial for that because
I can take another 30 40 minutes and I
don't want to bring it in this video but
I will have another video for you so
let's just say for instance I want to
add a header right here so right here
you can see that we have a product
header we can have you know different
colors you can have this image here so
you can kind of see how I can you know
adjust things maybe right here we can
have something like a right sidebar
where we can add different widgets we'll
talk more about that when we have our
product page here we can have like a
stacked product layouts a wide gallery
huh a wide gallery so something very
wide here we have a right custom sidebar
with full height etc but I'm just gonna
leave this for something like no sidebar
for now scrolling down here we have
product image styles so you can have the
images on the right side something you
know like that's the text alignments we
can align it in the center so now you
see it's in the center we can have the
different style so flats minimal one
thing to know here is that flat it
actually makes these like rounded
something like that or you change the
default so you can kind of go through
these right here and kind of like a
product tabs these are the ones at the
bottom you kind of go through these and
mess around with these so for example
right here I think I changed my
description to I think mine looks like
this right here so I changed mine right
here so something like that you can see
mines full width and the only thing that
I really changed here was the color
which isn't a theme customizer so and
then people can actually scroll through
my products right here too which is you
know pretty cool so what you can do here
is just kind of go through this mess
around with it now we can't scroll
because we only have one product so we
need to add more but I just want to kind
of introduce you all to this section
where you can kind of add you know add
stuff here we can even add a transparent
header
you know have a bunch of fun here etc so
I'm gonna take that off with a quick
have this title and yeah so you can kind
of go to this and have fun with it
again I'm not gonna go through each and
every setting you can kind of just go
through these and mess around with them
and you can kind of get a better
understanding of what all these do
sometimes it takes a while for some
change from some changes to you know
happen so I'll just leave it like this
and click on publish alright so this
right now is my new product so this is
how it looks like and it looks really
professional it looks clean here I'll
click on Add to Cart and it's been added
to the cart etc now the reason why it
doesn't display that little drop-down
thing like my other website this one
right here is because we need to
actually have that in the header so I'll
talk more about that when we talk about
the header but that's that's why it
doesn't pop up automatically but let's
go ahead now and create another product
so I've shown you about how to create a
simple product let's now create a
variable product so a variable product
is a little different here so right here
we have these camo headphones and now I
have size and I have color so let's go
ahead and make a variable product now so
right here the shortcuts plus new and
product so I'll just do the same thing
camo headphones camo headphones and then
here I'll just put in some description
now right here on a product data we'll
select variable product and you notice
right here everything disappeared and
that is quite okay you'll go right here
and click on attributes and attributes
are basically your okay attributes or
attributes you let me know in the
comments what it is I'll just say
attributes I'm not really sure here
I think it's attributes I think
attribute is when you want to like
salute someone right and attribute is
like a material or like a a a category
or something like that right so anyways
here I click on add so what attribute do
you want to add so maybe something like
size
how many sizes well I want small and
this next button is above the enter sign
so you'll see your enter keyboard
there's a little - right but you're
gonna backspace hold shift and press the
button or the button above the backslash
of the answer or whatever and it'll give
you that symbol here I'll do it large
and that's it
and I want to click on it huge for all
variations so essentially I want to use
this for all of the variations that I'm
going to create for this products still
with me all right just just stay with me
here save attributes this is actually
the most confusing thing in the entire
tutorial is variable products but once
you understand it it's a piece of cake
all right I promise now let's add it one
more so we have size maybe you want a
head color right so here color I'll put
whites the dash and blue and use for all
variations and click on save attributes
next we're going to click on variations
variations there it goes click right
here and click on create variations from
all attributes click on go and say yes
always say yes never look at the warning
signs there we go alright cool so now we
have a small whites small blue large
white large blue so simply click on one
now we need to actually price this and
we need to add a picture for it so I'll
click on the image right here for small
whites and I'm gonna find the white
headphones just right here and set
variation image and these are 300 bucks
alright 3 under dollars and that's it
and I'll click on this arrow to close it
and simply go to the next one open image
find the blue set variation and then
this will be $300 closed or they're
closed here we have large white so just
do it for the next two right here and
remember you need to add a price if you
don't add a price to one of these the
product will not be able to add to the
carts so who commerce is very strict on
the price you need to enter the price
for every single one so here
upload an image whites and then 300
bucks and then I'll do the last one
right here
it's over the blue pretty fast huh it
should be to do a contest you know
variable product a variable product
creator how much of a loser I am and
then for the product short description
I'll go ahead and just paste in some
regular stuff whatever now for product
image you're gonna put the image that's
you want people to see so I'll just put
something like the white one right here
we have it in blue you know of course
and this right here is the default form
style so by default when someone clicks
on the product what do you want the
defaults to be set on do you want it to
be some on small whites or you want it
to be set on large whites or large blue
it's up to you or you can just have no
default color so when they come in the
product it's just gonna have they're
gonna have to select what they wants so
here I'll just do large white that's the
default one and then right here I'll
click on headphones or I'll select
headphones create a new category alright
and I will click on publish so I think
we're all ready to rock and roll guys
let's let's let's take a look here
alright created it I'm gonna close that
do you the product okay
so you can see on the default how large
white is defaults right here small blue
there goes it changes small whites large
whites large blue and that's it so now
you have a variable product and then
here add to the carts it has been added
to the carts so congratulations so we
have now created a simple product and
also a variable product and to be quite
honest with you all variable products
are probably the most confusing things
for most beginners and it's probably the
most confusing thing in this tutorial so
once you've done that you are pretty
much a pro at everything let's go back
to our home page here so we made
products right now I kind of want to add
them
our homepage so right here let's see
right here nope right here will click on
edit with UX builder under edit page and
we can assign those products to our home
page now there's various ways on how to
do this guy so we can add products
categories we can add in all sorts of
different styles so right here add
elements and what we'll do is I will
just find products so now you can see
how WooCommerce created all these new
modules for us so now we have products
product list product categories etc so
here are select products and there's
different styles and how you can design
your products so now you can see how the
titles bigger masonary style lookbook a
grid style I'll just do well dude we'll
do this one here okay and here we can
have like an overlay a shade so you see
that etc so what I'm gonna do here is
I'm gonna switch over to this website to
give you a better kind of picture of
this right here actually it right here
here we go so here we have all these
products now just imagine that we
created you know two products so here I
have a product for phones I have a
product for headphones and I have a
product I'm sorry a category for laptops
so right here I'll go to I'll go to
products click on products and options
and right now I'm controlling this
section right here so for the style I
can have it like overlay where it looks
like that or looks like shade so you can
see from the flotsam theme I mean it's
beautiful and you can do this with other
themes maybe but it would require so
much coding it's ridiculous in fact this
push is exactly what walmart.com uses
for their products on their homepage so
we're stealing Walmart's idea you know
let's let's hope we don't get sued all
right so I'm just kidding you won't get
sued you won't get sued and then here we
have this now the reason why you can't
see the price is because the font is
black so I might want to change that if
I'm using the badge so here we have
something like slider and what this will
this is it creates a slider so
it'll continually slide their products
so people can kind of slide through them
so that's just something that if you
want to add you can have that you can
have different things like change the
navigation color the bullets so that
would be this right here so once you add
something like for the type it'll
introduce other options for that
specific one as well so for example not
full slider I don't like the full slider
for formation airy it'll add different
things formation area like do you want
to you know show this or that formation
area etc I think the most common one
that you're gonna use is row and maybe
the slider that's pretty much it and
then here we can control the number of
columns so if you want three products or
two products to show you know something
like that
the def you can kind of control the def
you know and some of these I gotta be
honest I'm just not sure so it looks
like the DIF is essentially a box shadow
so that's kind of what that's referring
to is a box shadow but I'm gonna go
ahead and close this and just leave it
like that so that's basically how you
can design your products in the layouts
now let's say for example I just want to
display a specific category in this I
just want the headphones to show up or
the best selling products to show up
right here in a category I can find the
category and just put headphones and
that's it
so only the headphones now are going to
display well you know what I just wanted
washes or I want phones I only want the
phones on my front page so what you can
do is just change the title to something
like best phones right so best phones
and there you go now you have a section
for phones you see what I'm doing here
I'm just trying to kind of make you
think outside of the box here and then
just kind of design it however which way
you want it you know so there's no right
or what or there's no right or wrong way
to do this cuz it's really up to you so
that's how you can kind of add products
to your homepage all right so I don't
wanna go over that too much but that's
pretty much it
so here I'll just do row and I'll just
do something like three alright and here
my products alright so these are my
products so you can go to the options
and design and decorate them so with
this right here this box is saying let's
say for it and for instance you don't
want the price to show up you just take
that off in the price
no longer displays you know maybe you're
those super high so elegant websites and
you don't want to display your price
something like that so this is it just
disables it that's all it does
so you can kind of go through that and
have fun and rock and roll and let's say
you want to have for instance right here
you want to make this right here phones
and then your second column you can have
it as just your just your laptop's right
so the first row is gonna be phones and
the second one's gonna be laptops so and
then you can say you know what's maybe
just have three I only have three
products to make it look better you know
something like that so or yeah so no I'm
sorry total post total post for total
post four and then columns three my bad
so then you'll have three products as
plates so like that and yeah and then
you contains at the animation etc so you
can kind of go through that and have fun
and add products to your home page you
can add products to any part of your
website it can be on your about Us page
your contact page so just get creative
alright so let's keep going here so I've
shown you all how to add products to the
homepage and let's make this section
right here so let's go ahead and click
on this right here and we're gonna go
ahead and go to flat 'some studio so
we're gonna find the sign up and I'll
find the newsletter right here so I
import this and I'll click on starts
alright so essentially right now I'm
adding this newsletter in now right now
you can see that we need a contact form
so we need to install a plugin for that
so let's click on updates and I'll click
on close so the next plugin that we're
going to install is a plug-in that
allows us to have people subscribe and
also contact us which is very important
so right here it's go to dashboard we'll
go to plugins and go to add new right
here you're going to type in contact
form 7
and this is the plugin right here you'll
click on install now and click on
activate alright and there's one other
plugin that you might need you might
need the MailChimp for contact form 7 so
right here add new you can type in
MailChimp and we'll scroll down right
here and this right here is contact form
7 extension from MailChimp so you'll
click on install now and activate now
for those of you who don't have an email
list I have a full another tutorial on
MailChimp MailChimp is a free email
provider that allows you to create some
really nice email campaigns and it's for
free I'm not gonna cover it in this
video because that video is an hour and
a half long and I don't want to cover
email marketing in this video obviously
so that's the plugin that you're gonna
need so you're gonna go ahead and go
watch my other tutorial MailChimp if you
decide to use
now this extension which I think most of
you would want and then you'll come back
to this video and you can kind of
connect them etc so you do need an API
key and you get that with your MailChimp
account but anyways right here we have
contact and contact forms so if you
don't want to use MailChimp right now
it's pretty simple this is your new
contact form so right here I'll click on
edits
ok and right here I'll select form and
I'll just put your email and that's it
we'll just leave all this and that's it
and click on save so this is gonna be
our subscribe form so right here changes
to subscribe subscribe and click on save
so essentially what I'm doing is I'm
creating a form for people to subscribe
on right let's go ahead right here and
click on add new and we're gonna make a
contact form now so people can send us
our wonderful emails and complain in
everything about us
so right here contact form now you'll
see these different options again and
this is what your forms gonna look like
so people can enter their name their
email the subject their message and they
can send it you'll actually see
more up close when we actually add it to
our website so it'll look something like
this right here I'll go to my contact
page on this websites it looked like
this right here so your name your email
subject your message and then they can
send and it'll go directly to your email
box which is really cool so it's amazing
how technology has changed so much guys
it really is crazy so let's go back to
our website right here and let's add the
contact for I'm the added subscribe box
sorry your click on edit ux builder you
guys can tell i'm not on the script you
probably watch youtube videos over there
a lot very clear and they're on a script
and they're fake so hope i'm not anyways
right here i'll click on contact form 7
select the form you'll see subscribe and
contact form and we'll click on
subscribe next we'll go ahead and add in
this section right here so last-minute
deals and we added a countdown timer
with products and then we added that
again and we added our blog and then our
instagram and then we're done this is
gonna be really quickly so let's speed
up the process here guys so i'm gonna
click on add elements find the title
right find the title i want to make this
centered and here this will be on sale
products apply now let's find the
countdown timer well maybe this make
this bigger really quickly options make
this bigger apply add elements type in
countdown and countdown to what so I'm
gonna put 2020 what month in 2020 well
I'm gonna say the fourth month of 2020
and or let's do the second month or no
third month every third month there we
go so one day 21 hours and 42 minutes
though we can always change this text
right here so if you don't want to say
weeks you can change it to weeks or you
can take out weeks or whatever you want
to do there but that's my countdown
timer you'll click on apply and then
right here or actually here I'll click
on add elements and type in products
again so products
and then here I'll click on on sale so
whenever you put a product on sale you
can actually put on sale right here and
they'll go ahead and grab your on sale
products so here I'll click on apply and
then of course you can go ahead and
design this however you want it to look
et cetera so I think push was it the one
I used I used push so there you go so
only the on sale products will display
right here which is really cool because
now you have this kind of different you
know you have different categories on
your homepage for this and that and you
can see on here how are my demo websites
I just I just grabbed right on products
guys for to toll purposes so I just put
in anything right there but you can
create an on sale category and that
would work just fine next let's go ahead
and move on to the next section because
we already talked about product so you
can kind of list whatever you want here
and I'll add in a new elements and this
will be the blog posts so here blog
posts now we haven't done blog posts yet
so we'll talk about that in just a
little bit when we're done with the page
but blog posts is super easy and then
here you can always style the blog post
to make them look however you want you
know but I'm not gonna really cover that
just yet because we only have a featured
image for it and the last thing that
we're gonna do is we're gonna add an
so right here Plus and type in Instagram
Instagram feed and then here you can
have different styles of you need to add
in a user name first
so here I'll apply its ok so it looks
like here that they have this Instagram
I guess this is just a regular Instagram
so you're gonna put your hashtag in
username and I only want maybe around
five images on this page so not not too
much you know something something easy
so you guys are doing a really good job
you have your homepage you have products
you need to add our shop hates to the
websites but before we do that let's
finish the rest of the website with our
about us and Contact Us page we need to
add some plugins onto the web sites such
as changing the fonts like we talked
abouts
now you're gonna come across these
notices on WordPress guys disclose them
they're so annoying you know
the developers just want to make money
off you guys that's really what's Happ
here so right here in our plugins we'll
go to add new and we're gonna go ahead
and install some plugins that we need so
one of them is called google fonts and
this is the one that I use now there's
so many fonts out there or like there's
there's easy google fonts there's so
many fonts the one I used was this one
right here google fonts typography and
you know once you're done with the
tutorial you could venture off and use
any which plug-in you want etc here I'll
click on add new again and we're gonna
add in another one next we're going to
install a plug-in called
whoosh sidebars this one right here this
book is pretty important this will
actually give you a lot more
customization and add presets for your
product pages and also your shop pages
so let's go ahead and click on add new
again we're going to solve just one or
two more plugins so the next part I'm
never going to install is called wish
list so this will let people wish lists
products and this is this is it right
here
y ith WooCommerce wish list so here I'll
click on Install Now and click on
activate now also if you're using
MailChimp which I think most of you
might be using there's one more that we
need to install so right here click on
add new and this is going to be
mailchimp woo commerce now this is
actually a really cool plugin so what
this is going to do is this is going to
automatically take the email addresses
from people who buy your products and
store them in your email list so this is
the plug-in right here it's called
MailChimp for WooCommerce click on
install and activate
so right now MailChimp is prompting you
to go to their websites but I'm not
gonna do that just yet so I'm gonna go
ahead and ignore that so let's go ahead
and go to our dashboard right here and
you might get some ads or not
advertisements just notices from the
developers saying that something's
change on your website like this right
here I'm gonna close these because I
want to look like this right here so
let's go ahead now and visit our website
and
let's go to the theme customizer really
quick so one thing I want to know it's
before we make the about us and the
contact page is that right here we have
google fonts and we have some different
settings right here so here we have
basic fonts and we have font family
heading fonts and button fonts so what
this is going to do is let's say you
have this header right here right so
this is a header text what font do you
want this to be well I want us to be
Poppins
I like Poppins so now you'll see that
this has changed right here so this font
has changed so if you want your base
typography to be something else you can
do something like Georgia and you'll see
that your base right here is changing so
here I'll do something like Poppins
again a big tip guys is don't have too
many fonts on your website you might
only want one or two to maximum and then
right here four buttons you can go ahead
and select another one for your buttons
etc but Poppins and the base are going
to be the ones I want so I'll leave that
and set it to publish I want to change
these button colors so let's go back
right here really quick and go to style
here I will click on colors so we have
these main colors right here and for
every module you're going to see that's
okay the primary color is gonna be black
now if I select a secondary color that
can be something like whatever color you
want it to be so when you're building
out your modules it's going to make you
assign a specific color for that
specific button so I actually want this
to be something like you know I can
change it to black now what I did in my
other website was I added a white border
so I taught you earlier how to make
borders right here so you can add
borders around buttons and I did that
because I wanted to create that elegant
look but I also want the button to be
visible so here you can see I added this
really stylish by now and when I hover
over it the background is white that'll
kind of notify them to purchase it
something like that you know we're
marketing here so we want to make sure
that our buttons kind of correlates to
you know what we want people to do so
when you're actually
building your websites you want to go
ahead and make sure that you assign the
specific colors to whatever parts of the
website you're trying to you know
achieve etc and if you've noticed right
here that the font has changed
throughout our website so that's why we
need a plug-in to kind of change the
fonts for everything so that's pretty
much it you know that's how we can
change the colors and also change the
typography of our websites now let's go
ahead and create the about Us page now
guys this is gonna be really quick and
fast so on my rent on my page right here
on my about us I just grabbed a
templates and I modified it slightly so
let me show you an example now I'm not
gonna go into detail on the about and
contact page because I think by now
you have a good idea on how to make the
website already so let's just go ahead
and jump into this oh my bad my bad here
I'll go to edit and go to edit view X
builder so we're now gonna do the about
Us in the contact and after that we're
going to jump into the theme customizer
and talk more about the shop page which
we haven't really covered just yet so
right here add elements flotsam studio
so right here under the about Us section
we have this little banner right here so
I'm gonna import this and I'll click on
start so you can see here what I did I
took this image but I didn't like the
bottom part of this one right here and
that's okay so I decided to get rid of
this so right here in their section I'll
delete that now remember whenever you
make a page you're gonna make it full
width so right here into the gear icon
you'll click on that templates and full
width and there you go
so now I have this header right here
next I'll go ahead and go back or I'll
apply that change add elements flotsam
studio and here I need about a section I
actually use another section that I like
I like this section right here imports
and starts so here I'll go ahead and
show you really quickly how this looks
so here I have this section and on my
website I have a new one it's this one
so you notice right here all I did was I
just changed the text I made it dark and
I just changed the images so
when you're building your website try
not to look at the images too much
because I know for a beginners
standpoint it can really influence you
and think oh look this is this is for a
clothing website I can't use this
section of course you can just change
the colors change the images and there
you go now you have an electronics about
Us page right and right here we have
another one so team and members so over
here add elements flotsam studio and I
select the team members now guys you are
more than welcome at this point you are
more than welcome to go through and pick
anything that you want so here I'll just
I'll grab I'll grab this one right here
the dark one now a good strategy for you
guys building out websites that are
complete amateurs is usually when you go
to websites it's the the sections are
always categorized so let me explain
really quick because I just want you to
know this so right here background no
background background no backgrounds
backgrounds no backgrounds and then
background or images something like that
so usually when you're building out your
websites you're going to come across
websites that are kind of like you don't
want to have just white everywhere so
you need to take the white off because
the white can create boredom it can
create people to leave your website so
usually right here I have image whites
dark new section and then add in another
section so you want to kind of not add
as much white as possible because that's
really going to make people think that
your site's boring they're gonna say the
sides boring I'm leaving I don't want to
buy anything not unless you're going for
that like Apple look that all-white look
kind of thing then that's your goal or
that's your criteria or whatever you
want to do so anyways let's go back over
here to my about Us page so here you'll
need to enter in the images so right
here we have images and here change
media and even on the files that I gave
you there are pictures so just take a
picture use the image and there you go
and then you can always change all the
the settings right here you can add a
tick-tock a Facebook will use this take
talk here if you guys have to take talk
leave it in the comments below
sure why not you
I'll check it out so here we have team
members so at this point you would just
simply go ahead and add in the media so
here and then right here change media
and it's that simple guys simple simple
simple easy easy and then you can adjust
this etc you can change it with all
these options to the left side I'm sure
by now you guys are getting comfortable
with this and then here you can see that
I added this section right here which is
the logos section so apply a del ament's
flotsam studio I believed I use the
testimonial section right here the
testimonial section and I used this
section right here and I think I just
changed the the background yeah I think
I did all right now did I know is this
one right here there we go import this
one and I'll import the images the
images are really cool that flotsam
gives us the images because quite
honestly guys when you're working on
your website you're gonna find that
images are the most annoying things out
there when it comes to web design
because images are hard to scale they're
hard to size and if they're big images
they can slow down your website alright
so you can see here how this section
imported I'll click on updates and let's
close this and just take a quick look at
our about Us page now so the about Us
page and see everything is good and we
have a beautiful professional about Us
page lastly let's do the contact page so
let's finish the website before we move
on to the last section so we'll go ahead
and just grab a template and we're going
to embed the contact form onto this so
people can actually contact us with
problems or if they want to tell your
amazing or whatever they want to do I
know customer service can be quite
annoying because I've been there guys
I've liked the pot clean so I know all
about that's fun stuff so here I'll go
ahead and find let's eat contact there
we go contact and right here I just
grabbed this whole section right here so
I'm gonna click on imports alright and
again if you want to make this full
width simply click on the gear icon and
right here under templates you'll select
page full width and here I'll click on
apply and update
so now we have this as our page now we
don't have our form right here so here
I'll click on the form and remember
earlier how we created that form well
right here you simply select the contact
form and voila and even notice right
here the colors are being applied
because on the actual theme customizer
it's sort of influencing this right here
and it's changing the color so we have
your name your email subject your
message and then send and right here I
don't want this give that out of here
and also right here for maps now Google
recently introduced a new updates where
you have to pay for the API so for this
specific tutorial I will not be covering
maps because I don't want to create an
API and all that stuff but I'll make a
separate video for its so be sure to
check out my channel I'll be talking
about how to add Google Maps to your
website it's really easy just know that
you do have to pay for it now and before
it was free so darn them or you can use
Google Maps but then again I will have a
whole nother video on that so I'm gonna
delete that for now and delete this
whole column and then there you go here
we have company details you can put in
whatever you want so a text editor and
you can say you know we are amazing and
that's it so here apply and updates and
we are see we are done a new
congratulations so as it right now you
guys now have a fully functional website
you know you have the homes about us
contact page you have a contact form
where people can contact you and on the
home page right here we have everything
that we need so we have the page
everything looks really good so let's go
ahead now and move on to the next
section where we're gonna talk a little
bit more of the technical aspects such
as the theme customizer the shop page
and also the blog alright so you guys
are doing really good so congratulations
get yourself a beer now let's talk about
the menu the theme customizer and also
talk about how to add a really quick
blog so to add a blog post it's really
really simple so right here under + new
you'll just go ahead and click on post
now this is how you can make standard
blog posts for your e-commerce website
and this is actually a really good idea
because you
talk about like top 10 best is top 10
best at etc so here I'll do top 10 best
electronics or gaming and then right
here you can add in some demo content so
I'll just paste in some demo content and
this right here is a different editor so
it's called Gutenberg and I will have
another video for this but it's pretty
simple so for example right here that
say you want to add in an image here
I'll go ahead and grab one from our
media library and this is something that
you can do to talk about products or to
you know introduce different things
about your websites and once you're done
blogging the most important thing is
right here it says featured image you'll
select a featured image now this is the
image that people are going to see when
they see your blog so for example I'll
grab something that has to deal with
computers or something like that and
I'll click on publish right here and
publish and that's it I've made a blog
post and if you want to see your blog
post right here just click on a view
post and this is it so here we have the
blog post and then we have some content
we have the image and it looks really
really cool now the theme customizer can
kind of change how this looks
so I just want to talk about the
blogging first before I jump into the
theme customizer because they kind of go
hand in hand
also you can add categories to your blog
post so right here we have top 10 best
so you can categorize your blogs the
same way that you categorize products
it's the same exact style so here I'll
click on updates and that's pretty much
it so right here if I go to visit sites
and I go to my blog every blog post at a
publisher will be listed right here so
this is where they're going to display
that's why we created a blog page and
assigned it to our specific blog post
there so that's just a quick way on how
to add blog to your website next let's
talk about the menu so we actually have
the shop page the account page and
everything else let's add that to the
menu Before we jump into the theme
customizer so right here I'll click on
dashboard
now when you install WooCommerce it
created pages for us automatically so
right here appearance and menus now
click on View all and you'll see
that we have some other pages now we
have the card to the checkouts and we
also have the shop page so those are the
carts and I'll rearrange this so I'd it
like this I'll put the I'll also need my
accounts so my account as well I'll put
my accounts next to the contacts and
then I'll put the cart and a check out
below that just like that and then here
I will click on save menu ok and now
let's take a look at our websites so now
we have the shop page if I click on shop
all the products we create will be
listed right here here click on my
accounts this is the dashboard for your
users
so it look just like this right here and
you can edit this so right here under
edit page you can edit this with the UX
builder as well so just like we made
other stuff we can add to this page and
add whatever we want here we have the
cart page so right now I have things
listed in my carts and then also we have
the checkouts now the theme customizer
has different styles how you can design
this also you can actually go ahead and
use the Builder itself so you can
customize this in two ways you can use
the Builder or you can use the preset
options in the theme customizer so
that's basically how we can add you know
the shop to our page etc or shop to our
menu let's now talk about the theme
customizer which is one of the more
important aspects of this tutorial so
here we have the header so basically in
short the theme customizer controls
everything the page builder cannot so
here we have the header we have commerce
options we have the footer we have
different menu styles widgets and
sharing social icons now essentially
what the theme customizer does is that
it styles the website in different ways
so first let's talk about the header
which is probably one of the more
important parts of this video so let's
first talk about the preset option so
here we have different options so here
you can see I added some text earlier we
have some social icons now if you want
to adjust this it's very simple we have
these little bottom gadgets right here
now HTML blocks
that's just text so right here you can
see I added some text if I want to move
the tag
I'll just take this text and I'll drag
it right here next to the main menu and
now you'll see that it says used arrow
for 10% off and if I want to edit that
I'll just click on this and right here
you can see in between these two
brackets you would just type whatever
you want so here I'll go ahead and type
in something else I'll just say here we
go best e-commerce tutorial all right
right yeah yeah good okay and I can drag
this back to over there and you'll see
that it's right there
now I can also drag in a checkout button
like that I can add in languages ooh
that's a good one languages huh so here
we have different languages now this has
to deal with another plugin but don't
worry I will have another video for that
because the language plugins that can
get very tricky and advanced so I don't
wanna use language for this video sorry
and next time guys here we have wishlist
so I can put wishlist right here and I
can change the style so now you can see
the theme customizer can design
everything so here you see that's on the
top right here we can change the style
of it etc so the header options or the
header builder is pretty straightforward
you know I personally you can have up to
three headers so right here we have I'm
sorry three bars so we have the top bar
the header main and we have the header
bottom and you can just add in stuff
wherever you want so you can just keep
dragging and dropping and as you can see
you can make this header extremely
diverse so there's a lot you can do with
this header so with this header builder
it makes things a lot easier and I
prefer this because other themes have to
design headers with the page builder and
that becomes a responsive Nightmares
so with this right here it's very
responsive out-of-the-box so that's just
a quick way on how you can design your
header you can move stuff around etc and
if you guys need a logo you guys can go
to fiverr.com so there's a link in the
description below to fiber comm so this
right here is fiber comm and I do have a
coupon code if you guys do decide to use
this website now just type in logo and
you'll have these freelancers make an
amazing logo for you for as little as
five dollars so let's say for instance
your budget five dollars so the maximum
you'll spend is five dollars here you
have tons of people
who
make really high quality logos you know
I've seen other videos on YouTube where
people try to get like free logos now
guys that's not practical and if you're
anything serious about your business you
wouldn't mind spending five bucks to get
a custom made logo in fact I got my logo
on this website so I'll leave the coupon
code in the description below you guys
can I think get an additional 10% off
your logo if you want to use that but
that's really up to you but please use a
custom logo don't use like a free logo
maker or those free websites because the
logo is not gonna look good and
thousands of other people have used that
same logo so it's just not practical
it's really really not so you can kind
of go through the options right here for
the header and you can just kind of mess
around with this now if you want this
little button right here how it kind of
drops down you will need to add the cart
so right here you have the cart button
so make sure you have the cart if you
decide to want this feature where it
drops down where if you add something to
the car it's gonna automatically pop up
your visitors which I actually prefer I
like it I think it looks really cool so
I'll just click on this one right here
you know I just want to add a preset I'm
gonna click on this one and that's it so
I'll just leave it like this right now
because I just think this is here
actually let's take a look at this one
here there we go we'll use this one for
now all right so this one's the one I'm
using for now and here I'll click on
publish so again the header is extremely
diverse there's a lot of stuff you can
do so here are all the options for the
header now each of these these options
right here they all control the header
so for example you want to upload your
logo you can just remove this and upload
an image and your logo will display
right here if you want to change the
local position you can change it or you
can use the preset options so again each
of these controls the actual style of
the module so for example carts you can
have a different looking cart so you see
right here we have a little bag with the
number you can add a shopping cart or a
basket you know something like that
there you go so that's pretty cute right
you know it's that's cute
and then you can change actually the car
so I'll leave it as drop-down I prefer
that so I think the other ones actually
you know what the other ones aren't that
bad at all you know I I do I do think
they're they're not bad but I prefer
just to drop
because the drop down just makes it a
lot easier so you can kind of go through
the car style and go through these but
you'll have to save it and then close it
and then you can kind of mess around
that and you know you can get
comfortable today cetera but I'm just
gonna leave this for now because I think
this right here is standard go back over
here so again you know I think by now
you can kind of get an idea just by
going through these adding your social
media icons so all this stuff right here
it just designs the modules that's all
it does right there alright so I don't
want to go through each and every one
because you guys can probably get a
better understanding of this just by
messing around with it and now you kind
of you know now you have a good
understanding of its so let's go back
over here now we have style style is
basically the colors of the website now
when you're designing your website
you're gonna see that the modules have a
primary secondary success color and
alert color so for example right here I
have the button to primary and also
secondary I forgot which one I chose but
it would sure you're building your
modules in your website you can assign
these specific colors so for example the
success color you can make it blue so if
you assign something with the success
color it's going to be blue so that's
how you can assign colors to your
website also right here at the link
color so when someone clicks on the
links it'll be that color when I hover
over it the links will be black but if I
change this when I hover over the links
it'll be a different color so
essentially what this is doing is it's
just changing the color so here the shop
colors the Add to Cart color the sale
bubble color the new bubble color they
review stars you can change the review
stars to any color you want so here on
the shop page that's going to go over
there really quick we have this stars as
black so we can change the review stars
the sale bubble right here we can change
the sale bubble color to anything that
you want so again you have full control
over virtually every single part of the
shop now the reason why this is a big
Pro is because other themes don't have
these features so again this is why you
probably want to stick with flat zone
when you're building out ecommerce
websites so let's go ahead and go back
right here I don't want to jump over too
much I'm just kind of giving you an
example and they have other things you
can check out like typography
and the image lightbox etc so when
you're building your websites these
specific sections corresponds to
whatever you're looking at so right here
with the blog so this is going to
correspond to the blog so the blog
layouts you can have the post layout as
normal inline two columns and what you
can do here is go on over to the blog
section and just kind of you know mess
around with it so you'll see what
happens so I actually like that
I like the post layout like this right
here I think that's a little bit cleaner
because you can have several blog posts
that looks really really cool all right
here I'll click on publish so that's
basically a quick rundown of like the
blog and everything that you can do blog
archive that means blog categories so
this will be kind of how it looks like
on the category pages and then single
post which is when you click on the post
etc here we have WooCommerce there are
some options right here so we have store
notice now this is going to basically
enable a store notice at the bottom of
the websites and that basically tells
people that's whatever you want to tell
them see right here this is a demo store
for testing purposes only going back
here product catalog so this is where
you can kind of design everything so
this is where you can kind of design the
layout design the style so here we have
you know a different style or you have
like the missionary style or you can
just do like the basic brick style and
then I actually like this right here
force image Heights so what this is
going to do is that if you have products
with different image sizes flotsam will
automatically make those images the same
Heights as all of the other images to
make sure that it looks really clean and
nice here you can do something like
products per page products per row so if
you want two products per row you can
have two products per row and then you
can change it for mobile as well here
for the header we can add a different
header style to make it look really
clean and really nice and then we have
other options right here so go to these
options and see what you like
again you can spend hours on this
because there's just different ways on
how you can style your stuff like here
we have Add to Cart select options etc
so at this point you can kind of get an
idea what these do so for
sales bubble it'll change that that
looks ugly you have it like that I think
the circle is the best see how its
circle now and then here it's squared so
yeah you know you can have fun designing
your your page right here I'll talk more
about how to create a custom shop page
when we're done with the theme
customizer now also right here we have
product page so here we have a product
page and you can design the product page
so here you can add in a header you can
add in you know the title something like
that
you can have you know you can virtually
add in anything that you want to add
here so all these options right here
they control the actual product page so
if you want to you know design your
product page you can go ahead and do
that now I will have another tutorial on
how to make a custom product page from
scratch now to do this it would take a
little bit longer and I'm gonna have a
separate tutorial for that but that's
only if you want to have a completely
custom product page built from scratch
and not use the templates so make sure
to subscribe because I will be having a
video on that as well but I'll just
leave it like this for now I think this
is fine right here I think this is a you
know I think this this looks good and
I'm gonna leave it at that for now so it
looks pretty cool and looks really
professional so I'll leave it like this
and click on publish alright and then my
account again you can change the my
account page so these all correspond to
the pages now there is one that I do
want to talk about which is the checkout
page so the checkout page you can make
this simple default or focus I prefer
focused I think this is more simple and
it just kind of makes people you know
okay cool checkout go place order done
and then right here you can do optional
or hidden so for example let's say you
don't want the address you can just hide
the address so they don't have to fill
up the address and if you want the phone
required you can make the phone required
and that's basically you know a quick
rundown on how you can design the the
checkout page and the same thing goes
for the cart page as well so with the
cart page you can do the same exact
thing so you can do something like
simple let me go ahead and go back here
so let me go back right here because we
need to go to the cart page just to kind
of show you where words of being applied
to so here we have simple we have
focused and I do like the focus because
what it does that it takes off the menu
and it kind of forces users to kind of
go through checkouts and now they can
always hit the logo button and go back
but here you can design the cart page
from scratch and just have a really cute
nice looking cart page so again the
theme customizer does control all these
features so now that I've talked about
that let's go ahead and talk about
layouts you can change the layout of
your website to boxed framed which just
looks like this right here or with full
width like that and then you can go
ahead and go to these options these are
the layouts of the websites so that's
what that's referring to pages right
here I'm not gonna go through that
that's really not important portfolios
I'm not really gonna cover portfolios in
this video menus we talked about that
widgets we will talk about that after
the footer homepage settings you know
what that is and then the share icons
just changing the share icons on the
website etc so that's a quick rundown
guys of the actual theme customizer now
let's talk about one of the more
important aspects which is the footer so
let's scroll down here here we have the
footer now the footer is actually pretty
important so this theme gives us two
different footers so we have footer area
one and we also have footer area two and
then we have the absolute footer which
is this section so this has up to three
footers now usually web sites only have
one footer so I want to disable footer
area one I want to get rid of that and I
want to enable footer area two and give
it a background now the reason why
nothing's there because we haven't added
any widgets so let's now add some
widgets to our footer so going back over
here we have widgets and click on footer
area too so you can have more than one
footer but most web sites only have one
footer so adding a widget so what our
which is well widgets are basically
little things that you can add to your
websites that come with WordPress that
add some sort of functionalities
for example most people do something
like a text widget right and this can be
like how we got started and then you'll
put in some text right here so on my
demo websites or on my other website so
on my demo website right here I have a
text footer right here so this is a text
one so it's just simply text and this
can be something like you know how we
got started about us maybe give them
your dress whatever you want to do so
that's done that's pretty much it let's
add another widget and over here you see
I've added the blog widget so this is
just showing the blog now you can add
whatever you want you can add pages you
can have products I think it's called
post right yeah flat some recent posts
and then our blog and then you can also
show the thumbnail too so you can have a
picture of the actual blog post which is
it looks really professional looks
really good here I'll add another
widgets here we can add products so you
want to list a products you can list
products by price product categories
however you want to display your
products but I'll just put regular
products so just whatever just products
and I want to show up to five products
now I only have two products on this
website but on my demo website I have
many so I can show as many as I want so
that's how I would show that's now also
right here I'll go ahead and click on
done here all out of widgets and I
believe I have a sign-up form or mitt
MailChimp sign-up form now there is a
plugin that you need to install it's
free it's MailChimp for WordPress now if
you want to go ahead and watch my
MailChimp video to kind of get your
email marketing campaign start up you
are more than welcome to do that but
this would be the plugin that you would
need is called MailChimp for WordPress
and then here I'll just you know add it
in now once you actually get the form
and you add in your API the form will
display just like this so you need the
API key and once you add in the API it's
really simple you just copy and paste
the API key and then you get the new
contact form so that's how you can kind
of create a really nice custom footer
and you can mix and match stuff if you
don't want to have the the the signup
form you can add in something like pages
maybe so
this right here you know pages you know
pages so these are a list of all your
pages which will help users navigate
your websites
so that's just a way on how you can
design your footer and you can get
customizable and all that really fun
stuff so that was just a quick rundown
of how to design the footer and also run
theme for layouts I'm sorry for for the
footer right here we can go ahead and
scroll down and go to the absolute
footer so the absolute footer is this
one on the bottom right here so for
example if I want to Center this and
change this to black we can do it like
that or you can change whatever color
you can put whatever text you want and
you can add even more text right here
and then you can add in like a scroll to
up button so this would control the
button you can put on the left side or
on the right side and then you can put
in more text in the footer so there's so
much you can do with this so you can
have a ball and you can have fun and
drink beer and design your footer and
have a bunch of fun so that's basically
a quick rundown guys of the theme
customizer so you can see how the theme
customizer is very important it controls
the the header of your website the
footer the shop page it also controls
the my accounts it controls a lot of
other parts of your websites okay next
let's talk about your Terms and
Conditions and Privacy Policy so you're
selling on your website and you want to
make sure that you are protected now in
the theme customizer you might have
noticed right here under the leave it
under the cart page so let me see if I
can find it really quick so we'll
commerce we have the checkouts
yeah the checkout page right we have the
option to set a privacy policy page and
a terms and conditions page so what you
want to do here is you want to go ahead
and make a page specifically for your
privacy policy and your Terms and
Conditions and this will help you
against chargebacks now in the link of
the or in the description of this video
there is two websites that will give you
free templates for a generator to create
a terms and conditions and a free
privacy policy so let me just run you
through on how to make people check it
because this is a very important part of
the video because this will protect you
against certain
chargebacks and if you're American and
you live in United States you know
everyone out there likes to sue
everybody for no reason so you want to
make sure you have at least some
protection right so let's do that really
quickly so here I'll close this now I'm
gonna make my Terms and Conditions and
Privacy Policy page so right here under
plus new I'll click on page now for
these pages we're not gonna sign them to
the menu because people don't really
need to see this now you can add it to
the footer of your menu but I would not
add it to the you know I would not add
it to the main menu so terms and
conditions and then right here you can
just go ahead and paste the content
whatever you want now right here you can
enter in your company name your website
and URL and they will go ahead and send
you this whole entire template right
here that you can use on your websites
so you can use this free of charge they
don't ask for anything I think that's
for donation or some like that so if you
guys are generous and you want to you
know give someone to give this website a
donation or something like that you can
do that but I'm just gonna go ahead and
paste this random content in here and
then I'll click on publish now this same
website also has they have the Terms &
Conditions template as well and also for
those of you who are living in the
communist Europe they have the g8 EPR
alright cool so I got Genie PR for you
guys I'm just kidding it's not communist
I'm totally lying
alright so this would be the turbid
conditions template that you can use and
you can kind of go to their websites and
use it at your own disposal and there
you go so I'll just you know grabbing
some demo content right here and I'll go
to plus new and I'll make another page
so I detergent conditions already but
I'll just pretend that this is privacy
policy now so privacy policy you get
what I'm doing here so just random
content and this is my privacy policy
whatever all right now let's go back to
the websites and under the the theme
customizer we'll click on customize so
this website again it's completely free
and you can kind of just go through it
and uh I'll put it in the description
I'm not associated this company at all
so if they give weird advice I'm sorry
but I did go through their their their
contract I did read it before the video
so I can see it's
it's not like just some like just a
bunch of jargon so here we'll go to
WooCommerce and go to carts and we need
to assign that so basically I'm sorry
checkout will go to checkout so it's
under the checkouts and right here in a
privacy policy page we'll select the
privacy policy and under their terms and
conditions it will select terms and
conditions now when people are actually
purchasing you'll see right here they
have to click on this box now again this
is really cool because with other themes
you have to buy a plug-in upload the
plug-in and it doesn't even correspond
to the theme that much but this right
here does so that's how you can assign
this page right here and again you can
make people have to click on that to
check out so that'll protect you because
there are dirtbags in the world and they
will try to charge back your purchases
and tell the bank hey I never got my
purchase and they probably did so when
you have a terms and conditions it'll
actually kind of protect you against
sellers and also protect yourself as
well alright so we are getting close to
the end of this tutorial so the last
thing we're going to talk about is
adding product categories to the menu
and then we'll talk about the
WooCommerce settings and payment
gateways and you are all done so you
notice that when we created our shop
page nets we have specific categories
now there's no way to link them by
default to product categories so let's
say for instance you designed or you've
made a category for headphones here I'll
click on headphones and then go to the
headphones category so here we have this
but the problem is people can't actually
go to the headphones category so there's
a really simple fix for this so all its
needs to do is find your category of the
products and take this link right here
and you will copy this now in the
beginning of this video you remember we
had that custom link in the menu you
remember that's let's do that now so
here's go to dashboard so now I'm
showing you how to add product
categories to your menu which is pretty
important actually here we have
appearance and we'll go to menus and
then we'll find custom links and you'll
simply go ahead and paste that URL in
there just paste the URL copy and paste
guys and then here
headphones and they click on add to menu
now also you can just go ahead and add
the product categories right here to the
menu as well so that's another way to do
it if you want to do it you can do it
both ways so for example here I'll put
in phones and I'll do phones and add
that to the menu so there's no right or
wrong way to do it
I'm just giving you two ways I'm just
kind of introducing you to think outside
of the box because if you want to add
maybe one product to your menu you can
just link one product to your menu using
the custom links right here so I'm just
trying to kind of you know give you
different options for whatever kind of
reason people everyone has a different
website and it's really hard for me to
determine what they're trying to do so
let's just click on save and menu
actually no no no we're gonna reorganize
that that is really ugly here we go
there we go there we go all right so
here visit sites and you notice right
here we have phones I'll click on phones
and there you go
and then headphones same thing guys it
is this it achieves the same exact
result so that's how you can add product
categories to your menu so lastly before
we talk about what commerce settings and
payment gateways let's talk about
actually designing our shop because you
can see our shop page is very bland very
boring
we have no widgets we have no bar we
have nothing so let's first talk about
how to design this page right here so
the first thing we'll do is go on over
here to dashboard and you're going to
notice that we have something called UX
blocks so UX blocks essentially can
override certain pages so you can make a
custom shop page from scratch now click
on add new and this is going to be shop
header now all I want to do with this
right here is I want to kind of add a
section to my shop I don't want to
redesign it a hundred percent but I just
want to add a banner so here I'll click
on publish so now this section right
here is a block and you can assign this
block to any part of the websites so
here click on UX block so we need to
design this block right so right here
it's for you seen a screen before add
elements
in the flat sim studio and right here
I'll click on campaigns and this can be
something like your banner for your shop
page you know you can again you can add
this to virtually your footer your
header your shop page your category
pages but I will be having a full
another video on product pages and stuff
like that for flats um but I chose this
one right here the Black Friday so here
click on imports and there you go so
right here under the banner you notice
that we have these really cool little
background things so to do that sort of
change it you can change it to
sliding-glass you can change it to
confetti you know whatever you want to
change it to so that's pretty cool right
but I do like the snow I think the snow
was a pretty cool one thing I also want
to do is I want to change the width of
this this is too tall for me so right
here I want to reduce the height to
maybe something like I don't know what's
good you guys can tell me now uh 300
will do 300 no no no no no no okay okay
I'll do 350 around three 350 something
like that and I'll click on apply and
apply okay so I just basically made a
section for virtually any part of the
website so let me go ahead and explain
what we just did here so here I'll close
this now you see this shortcode right
here we have this shop header go ahead
and copy that now I know there's a bunch
of weird stuff right here but don't
worry this is just how it looks and
let's go now to the theme customizer so
visit sites and the shop page and right
here well we can just select product
category okay and then right here you're
going to see this content right here so
we have shop page header and shop page
contents I want to paste that shortcode
there the shop header so now that I
place that this actually is gonna change
so what I'll do here is there we go
there goes there we go whoo there it
goes
so you can kind of see here how you can
design specific parts for your shop page
so you can design
a completely shot page from scratch if
you choose to do that now again there's
a lot of different customizations and
things we can do here so I'm not gonna
cover it all in this video but that's
just an example on how you can design
your shop page maybe I want to get rid
of that button you know so here I'll
click on publish and I'll close this now
what's really cool here is that you can
actually design this right here now your
users on the website won't see this only
you will see this because we're logged
in so here I can just say oh I want to
make a quick change you know I'll just
I'll make a quick change here I'm gonna
I want to get rid of this button there
we go and then update and then that's it
guys the changes has been made live on
the websites oh it is so damn incredible
that we can do this with flotsam so now
that we have actually done this right
here let's add in some widgets so what
the hell is this shop army what is this
what does all this mean well let's use
my other website to give you a better
demonstration of that okay so here's my
demo website and on the left side right
here you see I have these widgets now
these widgets are the shop sidebar so
right here under widgets on the theme
customizer you'll go to shop sidebar and
you can add various widgets so this
right here is a product search a product
filter by price products one day sale we
have a recently reviewed products
recently viewed products sorry and we
added a video and this is just a YouTube
video you can just link it in there
that's all I did right there so now that
you kind of get an understanding of the
widgets and again you can you know you
can add in other widgets you can mix and
match this I can add another widget I
can add a Cart button I can get rid of
the video if I want to get rid of the
video so here you can see that we have
the cart displayed right here so users
can check out maybe earlier so let's go
to our website right here and now that
you kind of you know you have an idea
let's go ahead and let's cut let's
customize this and we'll go ahead and
mess around with the shop page or the
shop widgets so over here we'll go to
the widgets and we'll go to shop sidebar
and let's just add a widget so this will
be a search product search
search and then maybe we got those broke
people on the website who have no money
at all so we got a comment everybody
guys so filter by price there you go now
you can see here how it automatically
goes up to 500 max because 500 is the
most expensive product we have on the
websites here out of widgets
Wow you can even have flats and blocks
so you can even have a you can even
assign those blocks
I wonder how that'll look it'll look
pretty terrible actually oh that's
actually really cool Wow you know that's
really nice actually you know what maybe
maybe we should leave this I like that I
like the flotsam blocks here it's so
responsive it I just love it here add a
widget you can add a sign-up form you
can add products so here we'll add more
products and then here I will add in
something else maybe you can add in a
video so there you go you can add in the
video right there and you just copy and
paste the link and so on and so forth so
I think here now you kind of get an
understanding of how to build this so
yeah have a ball go have fun you can
just add as many widgets as you wants
and there's no limit you can add as many
as you want just keep in mind that the
more you add the longer the page will
stretch outs and if you don't have
enough products there it can look a
little awkward right so that is a full
rundown on how to design the shop page
from scratch you can design the header
you can add all sorts of really cool
stuff widgets etc alright so now it's
time for the good stuff we are going to
dive into the WooCommerce settings where
we can set shipping taxes and also get
paid if I start accepting credit cards
on the Internet's so let's go ahead and
dive into this I'm gonna go to my
dashboard right here and I'm gonna go
ahead and talk about all the commerce
settings that are gonna be available to
you so right here first I'll go to
WooCommerce and dashboard now one thing
I want to note is that if you see a
screen like this right here where it's
selling you to do things were saying
outing your first product you will need
to have to go ahead and go through each
one and once you actually go through
each one it'll like give you a check
mark after that checkmark you will then
get this dashboard right here or it'll
give you the sales it'll talk
about the average order and all this
stuff so I know that's annoying but I
don't know if this is a permanent
updates but at the time of making this
video you're gonna see this screen so
for example right here personalized
store I'll just skip I'll just skip skip
and complete the task and then it'll
give you a checkmark again once you do
all of these right here it'll bring you
to this page right here so I know that
can be a little inconvenience but again
that's out of my control because that's
just what it shows at the time of making
this video so first off what you can do
is go ahead of your dashboard and you'll
see your current sales now also right
here under orders these are be these are
going to be all the orders that have
come through now you have the option to
check out the order and then you can go
ahead and complete the order once you
think everything is okay so for example
this is just for your own good you can
say alright you know we checked
everything out it looks good I'm gonna
go ahead and update this to completed
order so that's just an example of where
your orders are gonna be and this is all
the information about it etc and also
right here you can see the fee etc and
also you can have the option to refund
as well next we have coupons which we'll
talk about in just the bits here we have
email customizer now the email
customizer is a plugin that you can use
that can kind of style it to look like
this right here so to get that plugin
I'll go ahead and go to my demo website
right here just go ahead and go to
plugins and add new and this is just a
free plugin and it just gives you the
ability to just add a difference
customizable customizable forms because
the one on default is really ugly so
this is the run right here it's called
condensed email customizer you'll click
on install now and activate it now once
you do that it'll bring to this page
right here and you can go ahead and take
some of these templates or you can use
this one right here which I got off
their website which you can download get
to sign up and make an account but you
get it for free so that's just an option
if you decide to have custom emails and
then you can design it and also all
sorts of really cool stuff but I'm not
really going to go through and F I'm
just giving you the plugin you can do it
on your own time so that's just so when
how you can have a really nice emails
for your website's
coupons will talk about coupons just a
bits
customers so with someone purchases
something they're going to get an
account created for them and this is
where their information will be
displayed here we have reports again
reports this is gonna be probably phased
out pretty soon this is the same thing
as the dashboard it's just a different
style of looking at it it's just your
sales and then right here we have status
now this is just again technical
settings so this would be something that
you would give companies if they asked
for like this I give me your logs or
tools because you might have errors so
this is where you're going to get all
the technical stuff like this is the
server the PHP version the post Mac size
all this information which is really not
that important or it is not to us but to
housing companies or to someone trying
to fix an issue and then those
extensions where you can get additional
extensions but I have a lot of tutorials
for all those already but that's um you
can do on your own free time so first
let's go to settings here
alright so settings right here this is
where we going to put in your store
address remember the video how I told
you you can change all that information
later well this is where you can change
its here you can go ahead and enable
taxes you can also enable the the use of
coupon codes etc and then here you can
add in currency so this would be your
different currency so you can go ahead
and select your currency I'm using the
dollar so I will go ahead and leave that
so there I'll just leave this to I'll
you know all the base settings and then
for example if you want to sell to
specific countries or you want to sell
to all the countries except for you can
go ahead and select them here so this
can kind of restrict people from buying
on your website so you would want to go
ahead and say our eyes I alway want to
ship to these areas and I only want to
sell to these countries etc so that's
pretty much it's here we'll go to the
next one which is products so this right
here is uh now a lot of these settings
are not needed because the theme kind of
controls some of these settings but for
example right here if you want to enable
reviews or enable product ratings you
can go ahead and leave those checked or
unchecked and this would be something
for dental products so downloads require
a login so that means this does not let
people purchase as a guest etc
so you know that's not for everyone here
but let's go to shipping here shipping
is probably a little bit more needed in
this video so we first need to set a
shipping zone so we have no shipping
zones so here I'll select a shipping
zone so let's say for example I'm
shipping in the United States right so
I'll put United States United States and
then here we'll go ahead and find United
States now here I can add a shipping
zone so what I want to charge people in
the United States so I want to charge
them a flat fee do I want to give them
free shipping or local pickup well I'll
just say flat rates I want to charge
them a flat rates and the flat rates is
not taxable and it's gonna cost everyone
495 that's free shipping around sorry
that's that's flat rates now you can
also add an additional shipping method
like a free shipping and free shipping
will require certain conditions so free
shipping requires wets well a minimum
order of maybe $50 something like that
right so we can get free shipping if
somebody purchases something of $50 or
more on our websites and yeah I mean
that's pretty much it and then again we
can add in more countries so other
shipping zones we can add in another
country now this right here is saying
let's say for example someone buys
something that's not in the United
States what do you want them to be
charged by default so we can charge them
something by default so look if you're
not the United States and you buy from
us then we're gonna charge you $9
because I don't know I don't know where
you're coming from and shipping might
cost more money so I'll just charge
people $9 by default now there's a lot
of different ways on how you can price
your shipping I have another tutorial on
a plugin called table rate shipping and
you can ship products based off weight
off quantity it's extremely dynamic and
I think that video is maybe 40 minutes
long so you want to check it out I will
leave that in the description below but
for most of us that's pretty standard so
you can charge people free shipping or a
flat rate etc here let's click on
accounts and privacy so this right here
just allows people to
guess checkouts account creation and
this right here is a new feature and
this was because of the whole gdpr thing
where you want to delete people's
information after a certain time but uh
yeah you can kind of go to this and take
and take a look at its privacy policy
and then this right here is personal
data retention and that's where you can
kind of decide where you want to delete
people information or delete their
accounts if they're inactive etc so this
would be all like the technical stuff
personally I like these settings right
here you want to have it so people can
check outs automatically without making
an account because making an account can
kind of deter people away from buying
stuff etc here we have email so whenever
you purchase something or whatever they
purchase something they're going to get
an email and you will get an email so
right here you can see new order and
this goes to me if someone cancels the
order this goes to me if an order was
failed it goes to me now right here you
can see that if I put a order on
processing they'll get an email if the
order was completed they will get an
email if I refund it they will get an
email and you can manage those emails by
clicking on manage and you can kind of
design them so you can put thank
you.thank for using our website you're
amazing etc and you can also turn these
off and turn them on so if you don't
want all of them you can turn them off
or on etc here we have integration and
this is for something of I'm not going
to cover because we're not gonna go over
max mind and then advanced right here
these are basically the pages of your
cart page your checkout account etc it's
just notifying you and these pages are
created automatically for us so it's not
that too difficult all this stuff right
here these are just the URLs the
permalinks so when someone views order
downloads when they edit their account
these are the permalinks that are
displayed so that's just keeping you
informed and everything now let's go
ahead and enable taxes because we need
to enable taxes so right here in are the
general settings I'm gonna enable taxes
rates and calculations and click on Save
Changes and what that's gonna do is that
that's gonna order the tax button right
here so now
there's two ways on how you can do this
and I do recommend using jetpack so will
commerce created a plugin that will do
the taxes for you automatically so it'll
automatically calculate the taxes based
off where they're purchasing or you can
go ahead and set the taxes yourself so
for example right here you can enter
prices with tax or without tax you can
around the tax up or down you can
display the prices in the shop excluding
tax or including tax etc and then you
can display the prices during cart
checkout excluding tax or including tax
if you want to do that now if you want
to charge a specific tax rate I'll show
you how to do that and then we'll talk
about automated taxes so let's say for
instance I'll insert the row I'll put
United States let's say you United there
we go United States now you guys can go
to tax jar com to get more legal
information but some states require that
you charge the tax base off where you're
from and other states require the tax
base off what you're shipping to so I
can't really give you a advise on the
taxes but let's say this is say for
instance I am selling digital products
in California I would need to charge I
think no I don't think there's no sales
tax for digital products but if I'm
shipping to other states
I'm gonna charge the sales tax based off
where I am so for example right here
I'll put you know I'll just put
California I'll leave it at Los Angeles
and I'll put it in nine point seven five
I think that's a tax rate here I don't
know
and then priority so priority is
basically once you have a lot of
different taxes the priority will
override everything so number one will
be the priority and then number two
number three etc now compound is saying
do you want to charge taxes on top of
the shipping which I don't think people
do but if you want to do that you can go
ahead and do that and again shipping
right here choose whether this choose
whether or not this tax rate also gets
applied for shipping and then again you
can compound it as well so that's
something that you might want to
consider but that's basically how you
can add in taxes so let's with the ROA
and save changes well I think remove
that one or
move this one right here there we go
remove that there we go Save Changes so
that's how you can kind of set up taxes
now you can just go ahead and leave it
for the entire the entire US so say look
the entire US or you can go into the
state code and zip code etc so you can
see here how you'll have a lot of
different tax rates but this right here
probably be standard something for just
one country etc now let's talk about
jetpack so jetpack will allow you to
have automated taxes and they've done a
very good job with it so let's go ahead
now and install jetpack so jetpack will
set the taxes for you automatically
which I kind of recommend actually and
they don't really have a lot of good
plugins but jetpack is actually pretty
pretty damn convenient so right here
under plugins we'll go to add new now
this is only if you want automated taxes
so if you want the taxes done for you
automatically this is what you're gonna
do so the plug-in right here is called
jetpack and it has five million active
installs we'll go ahead a click on
install now now this will require you to
make an account for wordpress.com which
is their sister websites so here I'll
click on activates alright and what
you'll do here is your go to continue
with wordpress.com and you'll go ahead
and make an account and you'll register
and once you do this you will have the
taxes for you created automatically with
the API with jetpack ok so I connected
my website with jetpack now I'll need to
install one more plugin to get automated
taxes so right here under plugins you'll
click on add new again this is a free
plugin now eventually this plug-in will
be added inside whoo Commerce core and
that plug-in is called WooCommerce
services so this right here is a plug-in
that you'll need it has almost a million
active installs so right here you'll
click on install now this plug-in right
here it'll actually help you with
printing out shipping labels and it also
give you the option to have your taxes
automated so they do have an API for I
think it's tax jar or something like
that they have an API which grabs all of
the taxes and everything so it kind of
pulls it from their site and gives it to
you so we even have to do any of that
technical stuff now right here it's
gonna say connect your store so click on
connect now this does seem a little
repetitive and just
might be a little annoying but you have
to connect your website and that's
pretty much it so now your site's
connected with jetpack so let's go over
here to WooCommerce and go to settings
now you'll first need to make sure that
your taxes are enabled right here after
that you'll want to make sure that this
is under geo locates and then right here
you'll click on tax and now you'll see
automated taxes appear and you can
simply click on enable automated taxes
and click on Save Changes and that's it
so now that we have our shipping done we
have our taxes done the next thing we'll
do is we'll create a quick coupon so
right here we have coupons and before we
check out I want to use a coupon to kind
of you know just give a discount so here
I'll put Darrel 10 which is I get a lot
of coupons with that name so right here
you have some options so you can do a
percentage off the cart so for example
10% off you can also grant this to give
free shipping and you can set an
expiration dates so I'm gonna say this
coupon is only good for another five
days and that's its and then there's
other options right here like usage
restrictions so the minimum spend so
what's the minimum they need to spend in
order to grant this coupon and what's
the maximum you can include certain
products or exclude certain products you
can even do product categories or you
can exclude categories and then usage
limits would be something like how many
times can the person use this coupon how
many times can this coupon be used and
then how many times can it be used per
user but I'll just leave it all as a you
know as unlimited so here I'll just say
I want to give 50% off Darryl will do
Darryl 50 so Darryl 50 and then right
here gives 50% off and I will publish
this coupon all right so now that we
have our coupons everything's ready to
go let's add some payment gateways now
right here under the WooCommerce we have
settings so if you want to take payments
on your website you're gonna click on
payments right here now if you are in
Europe or United States the most common
is going to be PayPal and also stripe so
stripe is a free service and they will
go ahead and accept the payments for you
and it will transfer automatically to
your bank accounts PayPal again is not a
very popular one the only comma PayPal
is that they'll have to be redirected to
PayPal and then they will pay through
PayPal and they'll return back to your
websites now if you are from India or if
you are from the Middle East you can use
to check out comm also you can use
raiser pay these two are really good for
Southeast Asia and also the Middle East
and India as well so these are probably
the top two for those countries so
that's another option also PayPal PayPal
worldwide as well but the most popular
one for people in Europe United States
is going to be stripe and also PayPal so
it's pretty simple you go ahead and you
sign up with PayPal right so you make an
account you go to the process and that's
it you just make an account now the same
email that you use to sign up with this
right here you're going to take that
email address right here and you're
going to put it in your PayPal settings
so right here I'll click on manage so
right here we have an able PayPal now I
have an account with PayPal and this is
my email for PayPal so when you make an
account all you need to do is take that
same email and paste it and you're done
that's it now when someone checks out
with PayPal it's going to automatically
go inside of your PayPal account so it's
that easy it's very simple to do it's
very easy to get started the next thing
we're gonna do is we're gonna do stripe
now since we have an SSL we can use
stripe now if you don't have this setup
yet you will need to have this setup
before you strike because stripe
requires an SSL Certificates so right
here under payments I'll click on
payments again and what we're gonna do
is right here under stripe you'll click
on manage our first you'll have to
enable it you'll enable it and then
you'll go ahead and mess with that etc
so you're first going to click on enable
stripe and you're gonna see that right
here we have enable test mode now
there's test mode and there's
so the first thing you'll do is you'll
make an account with stripe so go ahead
and create an account with stripe now
there is a process to make an account
verifcation etc and once you do that I'm
gonna go ahead and go through the
process of the dashboard so this right
here is my dashboard for my test account
for stripe now if you don't have stripe
enabled on your payments so I was
actually on my demo website and if you
don't have it on your websites you just
need to install the plug-in for it's a
free plugin so right here under plugins
you'll go to add new and then right here
you simply just type in stripe and it'll
be stripe for WooCommerce and that'll
just give you the ability to accept
payments with stripe so right here
you'll select will commerce stripe
payment gateway I'm installing it and
here I will activate it ok and then
going back over here to WooCommerce and
settings going over to payments you'll
now see that we have tons of options for
stripe so there's a lot of different
countries where you can adjust it etc
but right here you'll see stripe I will
click on enable and setup so stripe
right here is enabled title we'll just
put credit card right here we have a
naval test mode now if you want to
enable real mode you just uncheck that
and now you can see that this is live
and live so live publishable key live
secret key I'll run you through both
just to make sure you're comfortable
here so I'll click on a test mode for
now I'll go back to my counts now right
here I want to make sure that this is
under view test data so it's orange and
you can see test data right here I'll go
to developers and go to API keys I'll
just copy and paste this and that's it
we're done
so publishable key right here and then
here reveal secret key and we're done
okay and then right here this is a
inline credit card form so this kind of
creates like a different little style
form there's two styles so if you want
to check that out so you can leave that
checked but I'm not gonna have that
checked and I want to disable all those
weird buttons on my website because this
right here it's like they have to store
everything through their browser on Pay
Pal Apple pay and chrome payments so
they don't have that so they're not
gonna know what it is so I just leave it
disabled so here I will click on save
and we are all done let's go ahead now
and go shopping so let's have some fun
now let's just pretend on the regular
customer coming to the website for the
very first time and I want to buy
something so let's do this
all right awesome Black Friday sale look
at this I'm gonna add this to the cart
and there you go
so I got these see right here and I want
to view the cards so I think I put a
coupon code onto this domain right so
here I'll type in darrell 50 there we go
and apply this code and look at that we
got 50% off how amazing is that so here
I will click on proceed to checkout and
I'll go ahead and fill this information
right now alright so I fill that in my
information you can see here I put in my
dress and everything else now again this
is all fictional information here I'll
put in credit card so I'm gonna put in
my secret credit card so you guys can
steal it here we go guys this is a fake
credit card so for two for two is
actually this is the test mode people
email me like hey Brooke we left your
credit card on the Internet and my guys
it's it's not my credit card it's fake
so here I have agreed I have agreed and
I will click on a place order alright
awesome so the order has been received
the order is now complete so let's go
over here to stripe and let's go to my
home and look at that we can see that
the payments is there and it was just
accepted so we have just made money so
congratulations
now if you want to make this real which
most of you do all you need to do right
here is click this go to developers grab
the API keys and now you're gonna grab
the live key so once you're ready
once your websites ready you'll just go
ahead and swap the key so that's all you
need to do now also your customer will
can go into their accounts and check
their orders and you can see how it's
processing they can change all their
information right here now also the
other video or the beginning of the
tutorial you saw that we added something
to the website so we added like a little
flip box so here so here I'll scroll
down and I think there's a flip box or
something like that yeah flipbook now
this is just you know if for if you want
to have it to have it to the account
which I like it I think it's really cool
and you can add that into their account
and they can like look at your future
products so that's pretty much it for
accepting payments so at this point
we've accepted payments we know how to
accept payments again if you want to
accept the real payments right away on
the websites let me just show you one
more time because I don't want to leave
me a nasty comment so right here we'll
go to WooCommerce and settings and then
right here under payments you'll go to
payments under stripe you click on
manage and then right here you disable
this and then right here it says
publishable key you copy this and then
you paste that and then right here you
just reveal the secret key and then you
paste it in there and you're done so
that will allow you the ability to
accept credit card payments that are
real so now you can accept real credit
card payments and you can always save
their information too so they can come
back to your website
they don't have to enter in their credit
card information and then here I'll put
in like this is from Darrell Wilson
websites so this right here is the
statements of where they're getting
from so in a nutshell that is payments
so as of right now your e-commerce
website is live and you can start
accepting payments right away from
credit cards all over on the world now
one thing I want to talk about before
that you all go is mobile responsiveness
now by default flotsam is very mobile
responsive and by default you won't need
to make a lot of adjustments on default
now for example this is the website how
it looks like on desktop this is what it
looks like on mobile devices and also
I'm sorry tablets and also mobile
devices now if you want to change stuff
what you can do is you can actually go
ahead and go to the specific section
right here and you can see here how
these are highlighted to either green
and all you would do right here is go
into the options and make any changes
you want now right here you can see that
this overlay and all this section right
here this is being applied specifically
only for the tablets so this is where
you can kind of adjust things and make
them look different
etc so for example padding you can
reduce the padding and you can change
the minimum height etc now again this is
only being applied specifically for the
tablets here I'll click on mobile and we
can do the same thing you know I can
adjust the padding minimum height etc
and you can go ahead and go through
these options and mess around with them
now if I go back right here to the
desktop you'll see it looks exactly the
same so when you are making changes
you'll want to make sure that you if
it's not mobile responsive enough for
you then you can go ahead and go to
these options and check it out so that's
pretty much it for my ecommerce tutorial
guys I hope this was really helpful by
now I showed you how to create the
websites I've showed you all how to
design all the different pages now
remember you can go to any page right
here like your account and you can click
on edit with the ellipse builder or you
can use the theme customizer if you
decide to do that it's strictly up to
you I've showed you all how to accept
payments I've showed you all basically
everything that you need to know on
accepting payments and building your
e-commerce website from scratch
also you've noticed that here is the
receipt that we got from the purchase so
you can see right here at 11 minutes ago
the
it was from the website and we got the
discount and you can see all the
information right here so we know that
the emails are working just fine also
for those of you who want to display
your products on various websites you
can watch my video on 20 other websites
where you can list your products to sell
your products online and additionally I
just made a new video on the best boo
commerce plugins that can make you a lot
of money now
I do have a lot of other videos that
talk about booking websites multi-vendor
website so be sure to check out my
channel and make sure to subscribe
because I do have tons of content that
relates to selling online e-commerce and
WooCommerce so again guys I hopefully
this people is really helpful for you
all make sure to give me a big thumbs up
and leave me a comment let me know how
this was I do spend a lot of time making
these videos I think this one took me
three weeks to make so hopefully it was
very helpful for you my name is Daryl
Wilson and I will see you guys in my
next video
take care