hello everybody welcome to the show
welcome to Tuesday trainings we're gonna be looking over a Wix template today
this one is called the drone store ecommerce template even if you don't
sell drones if you want to sell anything I think it'll be worth your time to take
a look at this brand new template from Wix.com so stay tuned. I look forward to
this time we have together all right once again we are here at the
webmaster Academy I'm Michael Wood the Wix Certified
Trainer for today and if you haven't met me before, I am the owner of Captivatim
Multimedia and Web Design and I could show you how to build stunning and
professional websites from concept to automation at the academy just head on
down to www.webmasteracademy.online today we're gonna be looking at the
drone e-commerce store which is one of the brand new templates from Wix.com
first we're gonna do a quick preview of the website and then we're gonna go
under the hood if you liked this video be sure to give me a like or a comment
it always helps me to know some of the things that you're enjoying if you're
watching the replay go ahead and ask a question and I'll try to get back to you
as soon as I can alright so we do have my wife's the hair
Dalaran a wood hello thank you for joining us we also have Linda's out
there on our YouTube channel thank you for joining the stream
remember if you have any questions feel free to ask and at the end I'll try to
get to those questions let's take a look at this website first of all it's a
beautiful site very visual and that's what I like about some of the new modern
designs the other thing is you want to make sure your website's designed and
optimized for mobile devices so I actually zoomed out on this site
just so you can see it better but here it is with the proper zoom which is at
100% so up in the top left hand corner we have the logo remember you don't have
to sell drones to use this template the whole idea of a template is to just
simply swap out the items with your own customizations and you could sell just
about anything on the same template so just swap this out with your
and if you click on the logo it'll actually take you back to home that's a
good little web design practice they have a subscribe list up at the top for
you to get news and updates we have a phone number and there's a shopping cart
with the number of items in the cart yes Wix does have shopping carts and
e-commerce now a lot of times you have to pay a
little extra for the e-commerce plans mostly because you need a secure server
to handle financial transactions all right now on the right is an image of
your product here we have professional Joan drone solutions the call to action
button is right here and they want you to buy so the button says shop now I
talked a lot about call-to-action buttons at the webmaster academy you
always want to pick one action you want all your visitors to take so shop now
isn't appropriate called the action let's go ahead and scroll down we have
edge to edge photos here and they go all the way across the screen and as you can
see they are touching each other here so they're borderless images you can shop
now for their latest product and their other latest product here which are the
accessories so you want to kind of put the latest and greatest in this box and
then if you have accessories put that here
these are the top brands that they carry and you would swap these icons out with
your own you also have a list of the best sellers and I believe this is
automated but will go under the hood in a few minutes okay so as you could see I
hover over each of the images and they offer a quick view so I'll click on
quick view and a light box shows up whether the outside edges are dimmed and
you could see a better image of the product in fact if I hover my mouse over
you get a real nice detail of the product it also has a regular price with
a line slash through it and then the regular price all of this will be done
on the back end the visitor can select their quantity and they can go ahead and
add it to their cart they'll have the product name and a SKU number and again
all of this will be handled on the backend and doesn't have to be handled
on the website directly then they have a section for new products so bestsellers
and new products is a great way to get in front of people the things that
matter you might have a store with 20 items a hundred items maybe only five
things and you want a way to really present the best and that's this is your
storefront so that's the way you showcase some new items or a new sale so
you have a best seller section and the new product section there's a row here
for testimonials and you can actually add images or customize this any way you
see fit and then there is a very big footer and I talked about footers in
another video and I always say that you know there's three things you want on
every footer that's the contact information which we have down here on
the right and you want your social media icons as well but this footer is a
little bit more substantive in terms of how many menu items it's like its own
menu navigation we see this practice in much bigger sites and an e-commerce of
course will be a little bit bigger than a regular five page website so here they
can shop with the different categories there's information about the company
and then you always want to provide some kind of support the frequently asked
questions shipping's and returns your store policy and your payment methods
you know what's beautiful about working with this template as somebody has
already thought through the e-commerce experience so as you're building out
your store you might wonder what is your shipping and return policy what is your
store policy let's go ahead and click on the store policy and it actually takes
us to another page and what's interesting is some of the copy is
already here for it for you your users Express ease of the highest importance
to your business so some of the copies already there you just need to make the
adjustments for your own store okay I'm just checking the chat to see
if anyone has any questions and I'm just responding here hello everybody alright how do you guys like this
website so far let me know give me a heart a like some comment this is mostly
to our Facebook users let me know what do you think about this template so far
I think it's fantastic so I'm gonna go back to the home I always go back to
home okay now if I click on this button says all products so here's all of them
and as you can see it's quite extensive you have images here you have product
types down here on the left there is a slider look at this slider right here
where they can adjust the price range and look at it actually filters the
items based on the price range so if you only want to go to nothing higher than
$233 it'll show you those lower priced items all of this is happening in real
time that's some pretty slick code if you asked me and then you can sort by
brand so these are multiple checkboxes and I could just simply check those
there will be quite a lot of work for you on the front and that's putting in
all of your items but once you've done that the web design will work by itself
practically okay then I can go to the product types are also listed up here in
the menu so there is some redundancy but that's okay because people shop and they
navigate websites differently here are just the drones and of course we have
the same filters over here on the left for each of the products I also have a
page for sale items only some people just want to know when to get where to
get the best deal so make sure you show that two of them up front and then
there's a user forum and this is a great way to build
unity and to build search engine optimizations on your site you're
selling these products but you are also competing with other sellers so you want
to get a lot of content on your site to bring people and part of that is being
human I do another video on SEO be sure to check that out I have an entire
course on SEO at the webmaster Academy you could check that out as well so one
of the things I do talk about is making sure you have lots of human interactions
on your website what better way to do that is a forum and what's interesting
about this forum is new users can actually log in and sign up so this is a
demo so obviously it's not going to work here but you can go ahead and log in and
sign up and you can easily become a member here and sign up and then as a
member you can go ahead and comment on these different articles so it kind of
combines the best world of a community with a blog by creating a forum so
here's a few sample articles and you want to just keep writing articles about
your products here's a guide you know drones for beginners there's three views
three and three posts now this is a category so if I say view category it'll
show all the posts that fall under that category and people can heart or like
they can leave comments and it also gives you a count of how many views are
here and it'll give you the author of the post so one of the beauties of a Wix
site is that you can invite collaborators to work on your site when
we start going under the hood and going into the backend you can have people at
your organization only do the store items they never have to touch the
website they never have to do web design they can just manage the inventory of
your products by adding them as collaborators you can also
writers of writers to your team and they can add posts and blog posts with again
without having to touch the actual website so that collaboration really
leverages your team it's like having a professional web designer working for
you 24/7 so I really love these forums and how they're designed and then always
have that about page with a another tab that leads to contact us this template
right here if you had a professional web designer build you this site from the
ground up because we're not talking about five pages we're talking about
e-commerce products a forum where people can sign in if you hired a web designer
to design this from the ground up you're talking easily over $1,000 easily your
Wix get the template it's a little bit of that do-it-yourself but I am there to
guide you and show you along the way again I'll take you from concept to
automation at the academy let's go ahead and look at the editor and let's get
under the hood so first thing you have to do is save
the site and I'll just put your drone sample you get a free Wix domain of course you
can always connect your own domain later I'm going to pause for just a moment to
see if there are any comments or questions at this point okay so far so good
all right let's get under the hood then and the first this is just the design
part then we'll go into the e-commerce part so on the design this has been
built using columns and so if I manage the columns we can go ahead and Matt we
picked which column we want to work with and I could even switch the columns as
you could see here it would kind of do a little switch there I can add columns
and I can duplicate columns and then I could easily switch out the image so if
you are not selling drones maybe you're selling Tigers that'd be interesting
legally of course but if here is selling legal Tigers this is what it would look
like here I actually have a video so you can easily just swap out these photos
with video just with the click of a button so that's a professional Tiger
solutions we can change the colors just by changing the column background and we
can change the palette so what I'm going to do is change our palette if we're
gonna sell Tigers we'll have more of this Safari looking palette right there
and then the background will change automatically we just maybe pick the Safari say done
and then it'll automatically switch everything to match that theme so that's
pretty nice okay so that's how you customize the columns again if you want
more detail on any of these aspects check out my design course at the
academy alright you could easily switch out the
these are all columns that there's there's actually one two three four this
is a five column strip and what's good about columns is they adjust themselves
nicely to different screens that's why you build columns if I were to just take
these logos and just simply place the images on a blank canvas the problem is
the spacing between the images can change depending on the computer screen
and you get some uneven results so building columns ensures that as we take
this screen and if we were to basically you know make it smaller or bigger the
the columns will adjust themselves and the spacing is maintained
okay so those are columns this item right here is actually a grid gallery
and what's nice about this is I can go into settings and this is done on the
back end once you build out your products you could build these galleries
and all I need to do is change instead of bestsellers I can just change it I
can change it to the sorting I could add a sorting option if they want to sort
from newest to price high to low by the way this is all made possible through
the new Wix code that they've built in here for you I can show filters so if I
want people to filter through a price range a collection or option I can give
them that in this case I just wanted I basically want to control which products
are being displayed so I'm gonna leave the filters and the sorting off I can
fix the design I can fix the fonts so as you can see we can do a lot of
customizations from a design side or you could just leave it alone that's okay
too I can change the product elements I
could take out the price maybe you just want to show the product name and make
them click on it to get the price lots of different options here I could even
change the layout I could take out the text completely
here I can attach it kind of more of a more of a Polaroid effect and this is
another effect I have here so there's different you know ways we can change we
can change the image to sixteen by nine or we could make it more of a square so
with a click of a button we're making changes that
back-in-the-day used to take forever because you would have to manually
resize every square and then make sure the spacing between the squares was
maintained a lot of work back in the days
template makes it real easy here alright so instead of bestsellers I could just
change the collection I could say I just want to show the accessories or let's
show all the products that's gonna make your homepage much bigger and you have
this load more button appears so we'll just leave it alone at bestsellers
now you notice some of my when I change the colors on this website we lost some
of the titles and that happens when you change colors so I would have to go into
here and basically just manually change that to one of our site colors so
there's a little bit of hand-holding you have to do when you do change the site
colors and just one of those things you have to be aware of okay alright so far
so good that's how you change the loadouts on
the best sellers and new products just just you could choose which collection
you want the testimonials these are again three different columns go in here
and change the text and add your images and then the footer as we just described
these are also columns so it's an interesting way you build strips and
then you build columns so that's column one two three four and five so there's
five columns here and each of them you'll adjust the text and then when you
adjust the text each of these lines has a link so you would have to click and
highlight click the link button and then decide where that links going
to go it can go to a page on your website or it can go to an external page
off the website or any of these other options so you would need to highlight
the text and then decide where that link is going to go you'll do that and that's
how you build out a multi-page footer navigation okay so I hope that makes
sense to you let me just check the chat does anyone have any questions about
some of the design elements of the homepage if you like this so far give me
a like or a comment you okay looks good so far all right let's
go under the hood and show you a little bit of the e-commerce so to do that I
would click on my store and I'm gonna say get started you do need to have an
e-commerce plan for this to work let's manage our store so it's going to
open up a window our dashboard is the new Wix dashboard it's gonna take a moment to load of items while that's loading I can
maybe go to these other sections so here's some store products now up yeah
there they go so here's the product so what you're going to do obviously if
you're starting from scratch you'll probably want to select all and delete
them all okay that'll be your first step and then you're going to add a product
so when you add a new product you can actually make it digital files this is
the beauty of the Wix ecommerce you can sell ebooks or coloring books or songs
or albums anything you want to make digital you can make that it did a
digital product or it's going to be a physical product so we'll say physical
because we are selling drones here and you're gonna go ahead and title your
product up here at the top you'll add images you can add a video people love
that and here's the cool thing is all you
need to do is check which box you want that to be in which collection you want
that product to be in and you just can say create collection to create these okay and then there's a basic info right
here you can add the product name you can add a little ribbon at the top like
new arrival or best seller or recommended you can add that there go
ahead and add in your price and then here's what's cool if you click on the
sale button you can either just say what the discount is or what the sale price
is so at the price you put the original price sale price you'll put the new sale
price and when you select this box that says on sale that's what creates that
line that gets cross through the price and then shows in the the sale price so
you're doing all of this on the back end and the web design will take care of
itself then you'll type in your description then you could decide if you
want to track inventory or not if you are tracking inventory you'll say how
many items these you have so you'll say maybe 10 of them and then as people buy
the products you will be notified of your inventory as that happens if you're
selling digital products and you don't need to worry about that you can add custom text field if you
want to personal if you want to allow buyers to personalize the product so if
you're doing engravings or personalizations go ahead and add that
text field there well you you give a blank so the user can type in the text
field you can also add product options like maybe you have different sizes or
colors or it's made out of something different so you'll give a name for that
option scroll down here and then the choices and you're gonna give them
different choices it could be a list or it can be different colors ok so
especially if you're selling shirts or products that come in multiple colors so
that is how you set up a new product and it it's very tedious but it's gonna be
like that no matter what ecommerce solution you use I just love the number
of options you're able to implement here so you have your products and then you
have your collections when you create a product that's when you decide which
collection it's going to be in by making collections we're then able to build out
those automatic strips on the home page that show the best sellers or whatever
it is you want to show them ok so that is the back end of the ecommerce store I
can have multiple store pages I can also add store elements if I want to maybe
build out another web page I can have a slider I can do a product widget that's
the thing where you know you can kind of click and drag so let's let's kind of
throw this on top of everything here so here's a product widget let's take a
preview and see when I hover the mouse over you kind of get that animation
effect view details and it'll take you to wherever you want it to go so here's
the product details doesn't look like much because we were just doing that
really quickly ok let's go back to the editor
and this is the navigation menu as you can
see and we can go back to the home page here okay so that is how you that is how you
edit the new products on this ecommerce site it's very tedious but again once
you've put in that work on the front end then it's easy to set up those strips of
using the different collections that you have set up the shopping cart will work
on its own people will have the cart they can check out using their favorite
payment method and then they'll handle the shipping and that sort of thing
which you'll have to handle you'll have to handle the shipping if you're doing a
WIC site if you have a third party you can have them come in as a collaborator
and they can be aware of the things that were purchased and you can have them
ship it out obviously you'll have to pay for that type of service but what I
would do is get that third-party shipper and have them become a collaborator on
the backend okay so that is how you set that up if you want to know more details
about the design more detailed explanation of e-commerce and how it
works and Wix comm then check out the webmaster academy where I'll take you
from concept to automation as we finish up I just want to check to see if
there's any questions at this point all right if you like this video give me a
like or a heart let me know what you think about this so I can make more
videos remember to subscribe and to this channel and subscribe to our Facebook
page thank you for joining me I'll see you
guys next time at the Academy thank you you you