Client's guide to the Editor

Start off the year with a 21-day portfolio challenge

Intermediate

16min

In this course, we'll cover a brief overview of the Webflow Editor, the pages tab which gives you access to each page on your website, the collections tab where you can organize your website databases such as your team members, blogs, and various other content, and the ecommerce tab where you can manage your online store's products.

This is the Client's guide to the Webflow Editor. Share these lessons to get your clients up and running.

Enroll for free

Webflow is free for students and educators

Learn more & apply

Summary

Course progress

Nice job, we did some time travel into the future and it is looking amazing!

0

%

Completed

0

of

6

Lessons done

In this course, we'll cover a brief overview of the Webflow Editor, the pages tab which gives you access to each page on your website, the collections tab where you can organize your website databases such as your team members, blogs, and various other content, and the ecommerce tab where you can manage your online store's products.

The challenge

Challenge

Day

Enroll for free

Clone completed project

Clone blank pages project

Get the course assets

Ready to get certified?

Test your web design and development knowledge learned in the Webflow 101 course. Challenge yourself with questions about the principles of the web, like the box model, HTML and CSS.

Go to Webflow 101 exam

The challenge

Challenge

#

Check out the new Figma to Webflow plugin

Ready to get certified?

Once you’ve completed the Webflow Expert Certification Course, you’re all set to take the next step in becoming a Webflow Expert. Please note: passing the Expert exam does not guarantee entry into the Webflow Expert program.

Go to Webflow Experts exams

Course outline

Client's guide to the Editor: Introduction

Client's guide to the Editor: Introduction

2:26

Coming soon

Client's guide to the Editor: Pages tab

Client's guide to the Editor: Pages tab

2:12

Coming soon

Client's guide to the Editor: Ecommerce settings

Client's guide to the Editor: Ecommerce settings

3:58

Coming soon

Client's guide to the Editor: Collections tab

Client's guide to the Editor: Collections tab

2:07

Coming soon

Client's guide to the Editor: Ecommerce tab

Client's guide to the Editor: Ecommerce tab

2:53

Coming soon

Client's guide to the Editor: Orders tab

Client's guide to the Editor: Orders tab

2:54

Coming soon

Written articles

Webflow site plans

Manage site plans

Account billing

Project billing

Webflow branding

Editor branding

Webflow integrations

Related courses

Intermediate - Advanced

Landing page generator for Ryan Reynolds

Learn how to build a dynamic landing page generator in under 30 minutes.

Beginner - Advanced

21 day design portfolio course

Build and visually design a full portfolio website within the span of 21 days.

Beginner – Advanced

Figma to Webflow

Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.

Beginner - Intermediate

Webflow 101

Introducing Webflow 101, the ultimate course to learn the fundamentals of web design and development.

Client's guide to the Editor

6

Lessons

Client's guide to the Editor: Introduction

Client's guide to the Editor: Introduction

2:26

Coming soon

Client's guide to the Editor: Pages tab

Client's guide to the Editor: Pages tab

2:12

Coming soon

Client's guide to the Editor: Ecommerce settings

Client's guide to the Editor: Ecommerce settings

3:58

Coming soon

Client's guide to the Editor: Collections tab

Client's guide to the Editor: Collections tab

2:07

Coming soon

Client's guide to the Editor: Ecommerce tab

Client's guide to the Editor: Ecommerce tab

2:53

Coming soon

Client's guide to the Editor: Orders tab

Client's guide to the Editor: Orders tab

2:54

Coming soon

No items found.

Client's guide to the Editor: Introduction

A brief overview of the Webflow Editor — log in and change or add content at any time.

‍

Read the full article

Download assets

Clone this project

Read the full article

Client's guide to the Editor: Pages tab

Use the Pages tab to edit each page, optimize site search settings, and set passwords for specific pages.

‍

Read the full article

Download assets

Clone this project

Read the full article

Client's guide to the Editor: Ecommerce settings

Once your store is built and designed, add the finishing touches in the Ecommerce settings before launching your store.

‍

Before launching or updating your store, there are a number of settings you can add or change to make sure everything’s configured properly.

Everything we're covering today can be found in the settings at the bottom of the Editor.

In this video, we'll add our business info, make sure our payments can be accepted online, configure our shipping info and taxes, and finally, we'll enable checkout — so the store can go live.

So, we'll start by opening up our settings and adding or changing our business info. We can just open that up, and add (or even change) our store name, the email you want customers to use if they need help with an order or support from your store, and the rest of the business details.

You can also select your currency and the unit system (Imperial for inches and pounds; metric for meters and kilograms). Make sure you save — and every time you change your settings — make sure to save your changes.

Keep in mind (even though this is a pretty rare occurrence): if you change the currency from what it is and you already have products? This can reset the existing prices for products and shipping, so make sure you update pricing and shipping related to each product after making a change like this.

But that’s business info. What about payment gateway? Like Stripe? We can add that or configure that as well. In our ecommerce settings, we can go into Payment. From here, we can add or modify our payment gateway. This is how you’re able to actually get money from each transaction. Each time someone buys something on your store and pays for it online, this is how you’ll receive those funds.

You can also enable web payments (like Apple Pay — this depends on the browser that people use to your visit your store). But if you haven’t already enabled checkout, you’ll notice we can’t actually switch this on. So later, in this very video, we’ll enable checkout and come back to this.

What about shipping methods? Under shipping, we have all our shipping zones. This includes domestic shipping, but we can get a lot more specific. If we go over to add shipping zone, we can create a new zone that can include specific countries. Like Europe. Which isn’t a country. From there, we can add countries. Let’s say the European countries we ship to include England, and of course all the other countries in Europe. Just select Europe.

And after that? Let’s add a new method. (A new shipping method.) These options let you pick the type of shipping method you want to add. Want to charge a flat rate when shipping to European countries in our list? We can choose flat rate. Or we can pick something based on a percentage of the total — lots of options here. Let’s choose flat rate for our example. We can fill out this information, and set a rate. Let’s say it’s $15 flat rate shipping. We can do this per order, or in our case, we’ll charge $15 per item. Let’s save that shipping method, then save the shipping zone we just created.

That’s shipping methods. What about taxes? Sales tax or VAT can be automatically calculated. You can turn on auto-tax calculation. What this does is automatically calculates an estimate for the taxes for any of the supported regions if you’ve specified those regions earlier as shipping zones.

Please note: some countries or regions require that tax is included in the price of the product. If you ship to a place like this, that’s something to keep in mind. If your product prices are inclusive of taxes, make sure to go to your Tax settings and declare that you’ve included those taxes in your prices.

Finally, let’s talk about the last big step: enabling checkout. You can find enable checkout right here under checkout. And that’s all we have to do. Flip the switch. And save.

Now before, we mentioned web payments. If you want this (it’s optional — web payments is something you can enable or you can leave it disabled) — after you’ve enabled checkout? You can go in and turn on web payments. And we can save our changes. And remember: after you’re done with all of this, it’s a really good idea to publish, so changes to things like currency or other business details are updated on your live site. Just publish your site and you’re good to go.

And that’s an overview of Ecommerce settings in the Editor.

Read the full article

Download assets

Clone this project

Read the full article

Client's guide to the Editor: Collections tab

Collections are like databases — use them to organize team members, blogs, and other content types.

‍

Read the full article

Download assets

Clone this project

Read the full article

Client's guide to the Editor: Ecommerce tab

The Ecommerce tab in the Webflow Editor is where you or your clients can create, access, and manage products and product categories.

‍

Read the full article

Download assets

Clone this project

Read the full article

Client's guide to the Editor: Orders tab

An overview of the Orders tab, and how to fulfill, unfulfill, and refund Webflow Ecommerce orders.

‍

Read the full article

Download assets

Clone this project

Read the full article

Requirements

Free (or paid) Webflow account — sign up
A published Webflow site

Download course assets

Clone this project

Use this version to clone the completed project

Clone this project

Blank pages without hitting page limits

Go to Webflow 101 exam

Related courses

SEO fundamentals

An overview of search engine optimization (SEO) fundamentals and best practices — learn how to optimize your content from the start.

Beginner - Intermediate

Webflow 101

Introducing Webflow 101, the ultimate course to learn the fundamentals of web design and development.

Freelance web design boot camp

The Freelancer’s Journey is a free, comprehensive course to help you build a successful, fulfilling freelance career in web design.

Beginner - Advanced

21 day design portfolio course

Build and visually design a full portfolio website within the span of 21 days.

Didn’t find what you’re looking for?

Discuss your build

Connect on the Forum, share and get help from the community.

Visit Webflow Forum

Give us feedback!

Share or upvote product ideas from the community.

Visit Webflow Wishlist

Contact support

We're available Monday–Friday, 6 a.m.–6 p.m. PT.

Visit Webflow Support

There's more coming

We're rolling out more lessons very shortly. Sign up to get early access to additional Webflow lessons and courses.

Shoot, something didn't work. Try again later, bud.

home

© 2023 Webflow, Inc.
All rights reserved.

Product

Designer Enterprise CMS Ecommerce Interactions

Memberships

Editor Hosting SEO Accessibility Pricing Templates Feature Index

Company

Press Accessibility Statement Merch Store Terms of Service Privacy Policy Cookie Policy Sitemap Become an Affiliate

Learn & Get help

Courses Lessons

Webflow 101

Blog Resources Forum Community Hire an Expert Customers Webflow vs. WordPress No-Code Movement Status Support Wishlist Inspiration Glossary

Social

YouTube Twitter Facebook Instagram TikTok