Ecommerce panel overview — Webflow UI tutorial
Articles,  Blog

Ecommerce panel overview — Webflow UI tutorial


How is what we’re about to do any different
from a PayPal button? Or a design from the ocean of templates that
look like everyone else’s templates? Because when we build this out, we’re using
the full power of HTML, CSS, JavaScript, and vibranium, to give us complete design freedom. Direct manipulation of 3D transforms. Interactions. Precise control. How much control? Down to the pixel. Percent. Em. Rem. VW. FR. Sub-pixel. And when building an Ecommerce store, importing
a CSV is one of the fastest ways to add products. Right after not adding products. The third-fastest way, but often the most
intuitive, is to add your products manually. So we’ll do this in steps. We’ll add products, we’ll organize using
categories, we’ll talk about managing them, and then the video will fade to black like
this. How do we get to designing our Ecommerce store? We start with our products. We can add products manually right in the
Ecommerce panel. Under products, we’re simply going to go
over and add a product. Name our product. Price our product. Add other stuff. Create. That’s it. We added a product. Categories. Categories let us organize things. And there are two ways to create them: (1)
when we’re adding a product, we can simply add this product to one or more categories. Right where it says “add this product to
one or more categories.” If we don’t already have categories, we
can add them from the same place. And (2) (the other way) we can go to the categories
thing in the Ecommerce panel. From here, we can create new ones and, when
we do (when we create a new category), we can even pick some products to add to it. That’s two ways to add categories. Why two ways? Because choice. Free speech. Truth to power. TED Talks. Lens flares. Categories was the second thing we were going
to talk about. Number three? Let’s talk about managing these. From products, we can export, import, and
this one’s big: we can add custom fields. If you’re already familiar with the Webflow
CMS, you know that custom fields were forged in a fiery cauldron of science and magic to
empower designers and content creators to manipulate both space and time. You can pull all of this (all these fields
for each product?) — you can pull all of it right into your designs. But from each of these panels, we can access
and modify our settings. When we’re done? We just save. And everything’s updated automatically. So. That’s a brief overview of these pieces. What about orders? This takes you to the Editor. This is where you (or a store owner who might
be your client or a collaborator) — this is where you can manage and fulfill customer
orders. We’ve created a ton of content on Webflow
University regarding setup, design, and of course, order management — so make sure
to check that out if you want to dig deeper into making life-altering Ecommerce sites. Here’s that fadeout.

7 Comments

Leave a Reply

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