Setting up an Ecommerce store | Webflow Ecommerce series – Episode 1
Articles,  Blog

Setting up an Ecommerce store | Webflow Ecommerce series – Episode 1


– 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)

19 Comments

Leave a Reply

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