Webflow Ecommerce Overview

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Webflow Ecommerce Overview

With Webflow Ecommerce, you can build and design online stores, customize every detail of your cart and checkout experiences, manage products and orders, set up and launch a fully functional, completely custom online store without writing a line of code.

In this overview
  1. ‍Building your store
  2. ‍Designing your store
  3. Launching your store
  4. ‍Marketing your products and online store
  5. Processing orders

Building your store

You can get started with Webflow Ecommerce by choosing a template or starting from scratch. If you choose an Ecommerce template, Ecommerce will be enabled for you by default. If you choose a different template, start from scratch, or update an existing site, you can enable Ecommerce by clicking the Ecommerce icon in the left sidebar.

Once you enable Ecommerce, a number of Ecommerce features (elements, pages, collections, settings) will be available for you to get started within the Designer and Editor.

You can follow the Setup guide in the Ecommerce panel to set up your store and launch it or follow this guide which also links to a ton of educational content related to Webflow Ecommerce.
Resources

Ecommerce collections

Two Ecommerce collections are automatically created for you so you can get started with your Webflow store: Products and Categories. These are dynamic collections, just like CMS collections. However, unlike CMS collections, Ecommerce collections are somewhat different. Check out the resources listed below to learn more about dynamic collections in general and Ecommerce collections in particular.

Products and categories

Once you’ve updated your collection structure, you can start adding products to your store and organize them in categories. You can do this manually or automatically by integrating it with other services such as Zapier.

Learn more

Designing your store

When it comes to designing your store, you’ve got the same design freedom and flexibility as the CMS — so the shopping experience can integrate seamlessly with the rest of your site. You can create filtered, limited, and paginated lists of products and feature them on your homepage.

Ecommerce elements and pages

You can also create collection template pages for your products and categories, and even customize the checkout experience by styling two Ecommerce utility pages: the checkout page and the order confirmation page.

Learn more

Launching your store

Once your store is built and designed, you’re ready to launch it. However, unlike the CMS, you cannot publish a functioning Ecommerce site by just pressing publish —  you’ll need to set up your store first.

Ecommerce settings

First, add your business address and information. This allows us to set intelligent defaults for many of the other store settings such as currency, unit system (imperial vs metric), initial shipping zone (store's country), and initial tax settings. You can, of course, update these settings at any time from within the Designer or the Editor.

Learn more

Marketing your products and online store

You can connect Ecommerce collections with CMS collections and feature products in blog posts, or link products or product categories to a brand collection. You can also feature filtered product lists on your homepage to create seasonal promotions, advertising campaigns, and coming soon landing pages.

Customize emails

Customize and style automated transactions and receipt emails to match your brand.

Learn more: Customizing Ecommerce emails

Manage lifecycle marketing with flexible forms

Add a Webflow form to collect emails for a waitlist. Connect your form to MailChimp or other platforms to run email marketing campaigns.

Learn more

Create dynamic ads

You can also pass events to Facebook, Instagram, and Google to run smarter marketing campaigns.

Learn more

Set up Ecommerce tracking with Google Analytics

You can also integrate your site with Google Analytics and set up ecommerce tracking to see ecommerce data in your analytics reports.

Learn more

Processing orders

Now that you’ve published your store, you can start getting orders. Orders will be received in the Webflow 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. You’ll also get a notification for new orders through email and in the Designer.

You can also manage your orders with the Webflow API or Zapier integrations to make fulfillment and store management a breeze.

Resources

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form