Webflow Conf online, SF, and LDN agendas are live now.
Explore sessions
Blog
Webflow Ecommerce is now in beta — for everyone

Webflow Ecommerce is now in beta — for everyone

Webflow Ecommerce is now in beta for production stores. Take a look at what’s included in today’s release, what’s ahead, and how to get started.

Webflow Ecommerce is now in beta — for everyone

Webflow Ecommerce is now in beta for production stores. Take a look at what’s included in today’s release, what’s ahead, and how to get started.

No items found.
Written by
Barrett Johnson
Barrett Johnson
Barrett Johnson
Barrett Johnson

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

Add custom fields to enrich your product structure and site design.
Add custom fields to enrich your product structure and site design.

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.

Connect your custom fields to any elements in your design.
Connect your custom fields to any elements in your design.

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

Yes, you can even use our new grid layout.

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

Complete layout freedom on product grids.
Complete layout freedom on product grids.

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

Your store, your cart, your dance party.
Your store, your cart, your dance party.

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

Custom checkout — at a fraction of the cost (and time).
Custom checkout — at a fraction of the cost (and time).

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:

  • Ability to accept payments in 130+ currencies
  • Detailed payment analytics and reports
  • Dispute handling and refund support
  • Out-of-the-box PCI compliance with Stripe Elements
  • Fraud prevention and analysis with Stripe Radar’s machine learning
  • Much, much more
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

Define shipping regions by one or more countries.

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

Set different shipping methods for different regions.
Set different shipping methods for different regions.

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
  • Item price
  • Item quantity
  • Item weight

Or set a per-item or per-order rate — including free.

Shipping integrations

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

You can find fulfillment details and track order status from the Editor.
You can find fulfillment details and track order status from the Editor.

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.

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Get started for free

What’s coming next

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.

Product variants

An early look at how product variants will look in the product management panel.
An early look at how product variants will look in the product management panel.

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:

  • Google Pay
  • Apple Pay
  • PayPal
  • Amazon Pay

And extending payment support beyond the list of countries that Stripe currently supports.

Longer-term plans

All that said, our work on Ecommerce won’t stop once our official launch is done. We’ll be keeping a dedicated team on Ecommerce, with a long list of improvements and enhancements already ahead of us.

Some of these planned improvements include support for:

  • Sales, discounts, and promotions
  • Digital goods and subscriptions
  • More in-depth sales reporting and analytics
  • Customer accounts and management
  • More first-party integrations (marketplace integrations, shipping, fulfillment, taxes, etc.)
  • Abandoned-cart recovery emails

Got a feature you want us to build? Add it to the Wishlist in our new ecommerce category.

How to get started with Webflow Ecommerce

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.

Webflow University

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.

Ecommerce templates

We’ve released a mix of free and paid ecommerce templates just in time for the beta.
We’ve released a mix of free and paid ecommerce templates just in time for the beta.

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!

P.S. We want to know what the beta launch means to you — so share a video of your reaction to Webflow Ecommerce for the chance to be featured in a special project we’re working on.

Last Updated
November 14, 2018