Ecommerce, meet complete creative freedom: Webflow Ecommerce is now in open beta (yes, for everyone).
As we wrote in our announcement post, the options for creating custom ecommerce experiences have hardly advanced in recent years. On one hand, restrictive templates and oversimplified WYSIWYGs handcuff the creative freedom of store builders. And on the other, the technical barrier of coding limits the playing field for who can create a truly custom experience.
Today, all that changes: Webflow Ecommerce is in open beta for everyone, so you can build custom ecommerce experiences visually.
What today’s beta release includes
First off, it’s worth explaining what “in beta” means. In other words, why is today not a full launch?
First: Webflow Ecommerce is 100% ready for live, production stores selling physical products.
But, we’re finishing up product variants — so you can sell products with different sizes and colors, for example — before we go ahead with a full launch early next year.
Of course, variants are only the first in our long list of planned enhancements. More on that later.
For now, let’s take a look what you can already do with today’s beta.
Create and customize products
Just as you have complete control over content structure in Webflow CMS, you have complete freedom to define how your product schemas are structured in Webflow Ecommerce.
This means you can expand upon the default fields for each product type (think name, description, main image, price) and add whatever data you want to use in your designs.
Some ideas for what this unlocks:
Custom images: Decide exactly how and where you want to feature photography in your store, creating as many image fields as you need for your design.
Color fields: Give each product a custom accent color, then use that color in your designs (think button colors, outlines, background hues, and much, much more).
Microcopy: Add custom text fields for those little snippets of copy that bring extra clarity to your product listings.
And these are just starting points — we’re sure all of you will find mind-blowing ways to take advantage of this flexibility.
Visually design and customize your store
Webflow Ecommerce introduces a completely visual way to build online stores — including key areas like your product pages, category pages, shopping carts, and checkout pages.
Design custom product pages
Whether you’re building your site from scratch or starting with a template, the design and layout of your product pages is completely up to you.
Design custom galleries and category pages
We’ve all seen the standard product grid view (here’s all products in the “shirt” category, here are our “fall” items, etc.). And while this easy-to-navigate-grid can be the best choice for your store’s browsing experience, it can also be limiting. Thankfully, with Webflow, the layout of these listings and category pages is completely up to you.
Plus you can display your product listings to any section of your site that you want, just like Collection items.
Customize your shopping cart
Changing the design of your shopping cart on existing ecommerce platforms can be an ordeal. But now it doesn’t have to be. With Webflow, you can choose between several default cart positions and animation easings — then customize those to look and feel however you want.
Design a custom checkout page
In most ecommerce platforms, the checkout page is perhaps the most notoriously expensive, difficult, and painful page to customize. But with Webflow, customizing your checkout page works just like everything else in Webflow: you have full design control in a completely visual canvas.
Compare this ease of customization with Shopify, which requires you to first pay thousands of dollars a month for a Shopify Plus account, then code the design yourself in their Liquid templating language (or hire a developer — which costs an additional who-knows-how-much).
And don’t get us started on how much fun customizing a WordPress template can be ...
Build a complete website
Ecommerce-specific design flows aside, one of the biggest advantages to building your store in Webflow is the freedom and flexibility you have to build a full, completely custom website on this same domain.
Tens of thousands of people are already using Webflow to power custom marketing sites, blogs, and more — and adding these types of pages (and integrating product listings within them) is easier than ever. Some of the most exciting opportunities here include:
Blogging: Build a custom blog into your site to fuel content marketing — and easily incorporate related products within your posts however you see fit.
Coming soon pages: Gearing up for a new release? Build a flashy preview page and list your upcoming products. Add a form, then boom: you’ve got a customer waitlist.
Campaign landing pages: Want to create custom product landing pages for an ad campaign? Create a Collection, reference a product, customize the design, and watch those conversions pour in.
The key point here is that just as you can feature CMS content all over your site, the same design freedom and flexibility applies when it comes to designing with your products — so the shopping experience can integrate seamlessly with the rest of your site.
Run your store and fulfill orders
Running an ecommerce store is a labor-intensive process, and fulfilling orders opens up a whole new realm of challenges for running Webflow sites. Here’s how that side of ecommerce will work in Webflow.
Process payments through Stripe
One of the biggest challenges of getting Webflow Ecommerce ready has been enabling payment processing on Webflow sites.
To speed this process along, and to take advantage of their amazing payment-processing features, we built our payments infrastructure on top of Stripe. This means that you’ll need to create and connect your Stripe account to Webflow to collect payments, process refunds, and get paid.
Building on top of Stripe gives you a secure, popular, and trusted payment processing system (Stripe powers Shopify too) — and a host of great features:
A note to those living outside Stripe’s supported countries
To be fair, relying on Stripe does have its downsides in the short term: mainly that you need to live in one of their 26 supported countries to use Webflow Ecommerce.
On this point, it’s worth stressing that we plan to add PayPal and other payment options to expand our reach for those outside of Stripe countries — Stripe was just a starting point. Plus, as Stripe continues to expand their global network, all those new countries will be able to use Webflow Ecommerce as well.
Define shipping regions and rules
Collecting payments matters, but it’s meaningless without order fulfillment. While we have a lot of additional features planned on this side of the platform, here’s how fulfillment works in the beta.
Define your shipping regions
Once you’ve decided where you’ll ship, you can go into your settings and choose the places you’re fulfilling orders for. You — or your client — can also customize these settings from the Editor.
Set different shipping methods
The shipping rates for the different regions you’re sending products to might differ, so in your ecommerce settings you can create shipping methods for each of those regions, and calculate your shipping rate based on:
Percentage of total order cost
Or set a per-item or per-order rate — including free.
You can also extend the power of your ecommerce site with Zapier integrations. One that we’re particularly interested in exploring during the beta is using the “new order” trigger from Webflow to create a “print label” action with one or more Zapier apps. Zapier’s already written a handy guide that explores how this could be done. We’ll be working on a tutorial of our own for Webflow Ecommerce, so keep an eye out for that.
Automatically factor in taxes
To make accounting easier, we’ve integrated with TaxJar to automatically calculate sales tax and VAT for customers ordering from the United States, Canada, the European Union, and Australia.
For orders outside of these countries, you’ll need to calculate taxes manually, outside of Webflow — but we’re planning to make this process smoother by allowing you to manually set specific tax rates for regions in the future.
Manage orders, inventory, and fulfillment
Once an order comes in, you’ll see it appear in the client-friendly Editor, where you can dig into the details on who ordered it, what their address is, and most importantly, mark the status of the order for your own tracking.
While today’s beta release introduces a ton of new features and functionalities to Webflow, there’s a lot more coming. Here’s a look at what we’re tackling before the end of beta, and a look into the future beyond that.
As mentioned, the main piece we’re still working on during the beta is product variants. Until this is ready, you won’t be able to create stores whose products require options like product color and size.
More payment options
Beyond adding variants, we’ve already started working to add additional payment options, like:
The best place to start with Webflow Ecommerce is by watching our “first look” workshop, which includes an overview of the product and a live demo of designing key ecommerce pages in Webflow.
If you’re new to Webflow and are looking to get oriented, we have hours and hours of video content and courses on Webflow University. In particular, we recommend checking out our course on Webflow CMS, since much of the design and product management flows in Webflow Ecommerce are built directly on top of Webflow CMS.
As we move toward an official launch, we’ll be releasing a ton more ecommerce-specific education materials, including full site rebuilds and deep-dive videos on each new element that Webflow Ecommerce introduces.
If you want to get a store started quickly, or are just looking to reverse-engineer an existing site, we also have a new set of free and paid ecommerce templates, which you can check out in our template marketplace now and use your for your next project.
Details on pricing
There are many ecommerce platforms to choose from, and many offer very similar features. Some platforms are very mature, but none offer the design customization of Webflow, and none allow you to customize them completely visually. For context, Webflow Ecommerce provides merchants the ability to create a Shopify Plus-level website (which starts at $2,500 USD/month), complete with customized checkout — at 1/70th of the price.
On top of that, you can build pretty much your entire ecommerce store for free — and only add hosting once you want to go live on a custom domain and start accepting payments on your site. No 14-day trial, full design control — everything you need to understand the value of Webflow before launching your store.
Once you’re ready to go live, you’ll need to choose from one of our new Webflow Ecommerce hosting plans and enable SSL for your domain. You can get a full look at the new Ecommerce plans on our pricing page.
As you can see, our introductory Standard plan starts at the same price as our existing Business hosting plan, and includes everything that already makes Webflow great (full visual design control, custom CMS, custom search engine, on-page content Editor, world-class global SSL hosting) plus a ton of new, ecommerce-specific features, including:
Custom checkout page design on your own domain
Automatic tax and VAT calculation
Manual shipping rule configuration
Customizable receipt and shipping emails
Order-management dashboard in Editor
Beyond this introductory plan, our Plus plan at $79/month and Pro plan at $212/month (paid annually) introduce features for businesses with higher sales volume, including:
0% transaction fee
More staff accounts for managing your store
Whitelabeled receipt and shipping emails
Higher annual sales volume
Pricing is subject to change when we launch in early 2019 with product variants support and additional payment options, but if you add an ecommerce plan during the beta, you’ll get to keep the beta price on that site for the life of the subscription.
How to share your feedback
As always, we’re eager to hear your feedback, thoughts, and questions as you get started building out your first stores with Webflow. To keep everything in one place, we’re encouraging everyone to leave feedback, bug reports, questions, etc., in our ecommerce forum category.
For feature requests and ideas, please add your input to the Webflow Wishlist, where we’ve created a new ecommerce category (and added some initial ideas in there already).
Let us know what you’re most excited about in the comments!