- Hey designers, welcome back to my channel.
If you're new around here, then I'm Charli, I'm a designer
and in this series, I'm gonna be taking you through
my process in depth and all the details of building out
my 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 platforms
for running it, but I've always felt
very limited in terms of what I could
do with the design of my store,
either because the platforms had limited amount of themes
or there wasn't many customization options,
or with some, you have to know a specific coding language
in 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 me
to code up my design visually
and I know that I can make use of Webflow interactions too,
to do some cool interactive and animated stuff with my site
that I've never been able to do with my online store before.
When I was designing my store that meant that
I wasn't just designing a skin for an existing template,
I wasn't just designing what settings
I 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 designs
that you'll be seeing me build out
throughout the series, but here in this first video
in the series, I'm gonna give you an introduction
to Webflow Ecommerce, show you around the tool,
get you used to it, show you how it works,
how I'm setting up products and categories
and things like that.
Let's get our bases covered before we get into building.
Alright, here we are in Webflow and the first thing
that 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 organizes
all your things in your store.
Let's do this.
Once you've enabled Ecommerce,
it'll show you this checklist here
of all of the things you need to work through
and make sure that you've sorted
and thought about before you launch your online store.
Let's just take a look through the set up stuff mainly.
I think we should start
with showing you how you add product.
For my store, I have set up four categories
and six products already.
Products and categories in Ecommerce
are pretty much like a CMS collection,
where there's a bunch of fields
where you're gonna create items for it
and then you can do certain things
in your design with them.
There are fields that come as standard when you're adding
a new product, things like a description,
a main image, the price obviously, you can put in a SKU
if you do that sorta thing with your store.
But there's also custom fields,
so let me show you some of the custom fields
that I have set up.
If you click on the little cog there, you can add
whatever custom fields you like to your products.
I added space for a couple more images
and I also added this reference one here
to get the main category.
So basically this talks to the categories collection
and 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 is
fill 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 it
and you can also add the weight,
which comes in handy later on
when 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 else
to the custom fields for my categories.
You might have noticed in the designs that I showed
up on screen earlier, I make use of a lot of bold colors
in my design and I want those colors
to 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 here
in my categories collection for color.
This means that I'll be able to able set
a 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 colors
to the color pallette, which is definitely something
that I would recommend you do as you get started
with 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 about
in setting up my online store is shipping, obviously.
I need to send these products somewhere.
I'm gonna click on Add Shipping Zone
and 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 before
when 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 options
for 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 this
Single 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 them
five 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 flag
of every single country in Europe,
it's got shipping groups that work
kind of like post office ones do.
I can just select Europe
and 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 sure
you pay your taxes.
My business is registered for sales tax,
which means I have to charge tax on products that I sell
to 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 up
an online store is enabling people to pay you.
That's always a good thing, right?
I'm gonna connect my Stripe account right here
to 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 in
and 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 with
building out the product page.
This is the page for displaying
a single product in my store.
I'm gonna show you how all those fields
that 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 Webflow
and 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 come
and I will see you in the next video.
Alright, bye.
(upbeat music)