– Hey designers, welcome
back to my channel.If you're new around here,
then I'm Charli, I'm a designerand in this series, I'm
gonna be taking you throughmy process in depth and all
the details of building outmy online store using Webflow Ecommerce.(upbeat music)I've been running an online
store for almost a decade now,and in that time I've used
various different platformsfor running it, but I've always feltvery limited in terms of what I coulddo with the design of my store,either because the platforms
had limited amount of themesor there wasn't many
customization options,or with some, you have to know
a specific coding languagein order to be able to do
anything cool in custom.I'm super excited that Webflow
has brought out Ecommerce.Using Webflow Ecommerce,
building a store in it,is just like building any
other page in Webflow.You can do anything you like.I know it's gonna be super easy for meto code up my design visuallyand I know that I can make use
of Webflow interactions too,to do some cool interactive
and animated stuff with my sitethat I've never been able to
do with my online store before.When I was designing my
store that meant thatI wasn't just designing a
skin for an existing template,I wasn't just designing what settingsI was gonna change to
make it look how I want.I can really put items
wherever I like on the page.That was a lot of fun to work through.This is a quick look
at some of the designsthat you'll be seeing me build outthroughout the series, but
here in this first videoin the series, I'm gonna
give you an introductionto Webflow Ecommerce,
show you around the tool,get you used to it, show you how it works,how I'm setting up products and categoriesand things like that.Let's get our bases covered
before we get into building.Alright, here we are in
Webflow and the first thingthat we have to do is enable Ecommerce.I'm gonna come over here
to this little cart icon.And let's get going, it's gonna
create two new collections,Products and Categories,
'cause this is how it organizesall your things in your store.Let's do this.Once you've enabled Ecommerce,it'll show you this checklist hereof all of the things
you need to work throughand make sure that you've sortedand thought about before you
launch your online store.Let's just take a look through
the set up stuff mainly.I think we should startwith showing you how you add product.For my store, I have
set up four categoriesand six products already.Products and categories in Ecommerceare pretty much like a CMS collection,where there's a bunch of fieldswhere you're gonna create items for itand then you can do certain thingsin your design with them.There are fields that come as
standard when you're addinga new product, things like a description,a main image, the price
obviously, you can put in a SKUif you do that sorta
thing with your store.But there's also custom fields,so let me show you some
of the custom fieldsthat I have set up.If you click on the little
cog there, you can addwhatever custom fields
you like to your products.I added space for a couple more imagesand I also added this reference one hereto get the main category.So basically this talks to
the categories collectionand I'm telling it what the
main category is for my product,because I wanna use that
later on in my design,as you will see.For categories, I haven't
added anything extra yet.Let's go ahead and add
my last product, for now,to my store.
(keys clicking)And all I have to do for this isfill out the fields, essentially.(electronic music)I'm setting its main
category to be Matte Prints,but then up here in the category tags,I'm setting it to be matte prints,as well as in my all products.Again, 'cause this is
gonna come up in my design.As you can see in here,
for the product as well,you can add in the measurements of itand you can also add the weight,which comes in handy later onwhen you're working with shipping.It can calculate the
weight of the total order,based on what you tell it
each item weighs in here.Now I wanna add something elseto the custom fields for my categories.You might have noticed in
the designs that I showedup on screen earlier, I make
use of a lot of bold colorsin my design and I want those colorsto be matched to a certain category.All the screen prints
have a pink background,that sort of thing.What I'm gonna do is add a field herein my categories collection for color.This means that I'll be able to able seta main color for each category.Let's save that and go in and
edit my categories to show it.Because I'm working within
my personal site project,I already have saved
all of my brand colorsto the color pallette, which
is definitely somethingthat I would recommend
you do as you get startedwith a Webflow project.(electronic music)Now there's a color
assigned to each category,and I'm gonna be able to use
that later on in my design.The next thing I should think aboutin setting up my online
store is shipping, obviously.I need to send these products somewhere.I'm gonna click on Add Shipping Zoneand get started planning this all out.I'm gonna start with my local shipping,which for me, is the UK.(keys clicking)You can charge it based on weight,like I showed you just beforewhen you're setting up a product.If you tell the system how
much your product weighs,it'll calculate the
shipping cost based on that.You can charge a percentage
of the price as shipping.Whatever you like.I'm gonna go with quantity
based for my shipping bow,and I'm also gonna give my
customers two different optionsfor the shipping, either
tracked or untracked,just so they can have a
cheaper option for shipping,if they want it.Let's go for quantity based
and I'm gonna call thisSingle Print Untracked.
(keys clicking)Just to spell it out,I'm gonna put a little
description in here,saying no tracking provided,so they know what they're doing.This is for minimum of one,maximum of one and it's
gonna be three pounds,and then add my tracking options.(electronic music)Then for in case someone's
buying two or more prints,I'm gonna set this minimum
quantity of two, maximum of none,can be as many as they like
and it's gonna cost themfive pounds for untracked.(electronic music)Alright, that's my first
shipping zone done.Let's add another one,
let's go add Europe,And what I like that
Webflow has done here,is instead of me having to go
through and select the flagof every single country in Europe,it's got shipping groups that workkind of like post office ones do.I can just select Europeand all of the countries in
Europe will be selected for me.And also because countries can
only be in one shipping zone,you can see that United
Kingdom is grayed out here,'cause it's been used previously.Now that I have all my shipping sorted,another thing to take a
look at is taxes, obviously,if you're running business,
you gotta make sureyou pay your taxes.My business is registered for sales tax,which means I have to charge
tax on products that I sellto anyone in the UK or in Europe.I can go in here and turn on or off,if I want to charge tax for that region,which is really useful.It doesn't have to be
like a store wide thing.You can do it based on country.With the U.S. for example I
don't have to charge tax there,so I can just turn this off and
people who buy from the U.S.won't have that included.And of course, a very
important part of setting upan online store is
enabling people to pay you.That's always a good thing, right?I'm gonna connect my
Stripe account right hereto get that working.Now I have my categories set up.I've got my products set
up within those categories,got my shipping all figured out,looked at the tax stuff,
connected my payment provider.I think that means we are ready to get inand start building the store.I'm gonna end this video here though'cause that was a whole lotta stuff.In the next one, we're gonna start withbuilding out the product page.This is the page for displayinga single product in my store.I'm gonna show you how all those fieldsthat I showed you in the
set up here come into play,and how that's all gonna be built.If you're already excited though,and you wanna just get
straight into Webflowand get started building your own store,then they'll be a link
on the screen right now,and also in the description,
where you can go do that.But, give this video a
thumbs up if you enjoyed it,if you're excited for the series to comeand I will see you in the next video.Alright, bye.(upbeat music)
Source
