Getting started with Webflow Ecommerce

Beta

Webflow Ecommerce is currently in beta. For more about what’s included in the beta, and what’s coming next, read our beta launch blog post.

If you’re new to Webflow and are looking to get oriented, 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.

We’ll be releasing full education tutorials and videos when we officially launch Webflow Ecommerce in early 2019. In the meantime, the guide below provides an overview of all the fundamental pieces available in the beta.

In this guide

In this guide, we'll give you an overview of all the things you can do to build a fully functioning Ecommerce site. We'll be releasing separate content for many of these features gradually. Let's begin!

  1. Enable Ecommerce
  2. Set up your store
  3. Add products and categories
  4. Design your store
  5. Finalize your store settings
  6. Launch your store
  7. Manage your orders

Enable Ecommerce

Enable Ecommerce by clicking the shopping cart icon in the left panel. This will enable all Ecommerce features (elements, pages, settings) and automatically create two Ecommerce Collections to get you started with your Webflow store: Products & Categories.

Enable Ecommerce by clicking the shopping cart icon in the left panel.
Once Ecommerce is enabled, you cannot disable it. If you want to test Ecommerce before enabling it on your actual website, enable it on a blank project or try one of the Ecommerce templates.

Set up your store

Once you enable Ecommerce, you can follow our Getting started workflow to set up your store and launch it.

Follow our Getting started workflow to set up your store and launch it.
This guide can help you set up your store, design it, and launch it.

Right from the Ecommerce → getting started panel, you can start by adding your business address. This allows us to set intelligent defaults for many of the other store settings: currency, unit system (imperial vs metric), initial shipping zone (store's country), and initial tax settings.

Then, you can continue setting up your store under Settings → Ecommerce. Here, you can set up the following:

  • Business Info — Store name and customer support email address
  • Business address — Business name, country and full address.
  • Currency — the currency that will be appended to the price field of your products Collection. Changing the currency resets all existing price values of products to 0.00 and sets all products to draft. You will need to manually update the price of every item, and re-publish.
  • Unit system — the unit system of weights and lengths of products. Choose between the imperial or metric systems.

We’ll cover more store settings below. Now, let’s start adding products.

Add products and categories

You can add products to your Webflow store from the Ecommerce tab in the left panel.  Click the products collection to open the product manager. Here you can add products just like you would add CMS items.

Unlike CMS collections, the products collection has a set of default fields that you cannot edit in the Collection schema. However, you can add custom fields to your Ecommerce collections. So, you can add more images, color fields, switch fields, and even a file field where you can upload a catalogue of your category or PDF specs of your product.

Importing products using a CSV

You can import your products from any other platform in CSV format. Make sure your exported CSV follows our CSV template structure.

Downlaod the CSV products template
Download the CSV template

You can use a spreadsheet editor like Google Sheets to update your CSV to meet the requirements. The price value is required and it should be a number without the currency unit. Learn more about supported field formats.

You’ll be able to map your CSV data to the default product fields including the categories field. Currently, mapping to custom fields is not supported. If a category exists, it will be mapped to the existing category. If the category doesn’t exist, a new category will be created.

If there are any issues during upload, download the import errors log to fix the issues with your CSV file.

You can also import items using Zapier. Learn how.

Design your store

You have the same design freedom and flexibility as the CMS when it comes to designing with your products — so the shopping experience can integrate seamlessly with the rest of your site. 

If you’re new to Webflow, the best place to learn about building with the CMS is our CMS video course on Webflow University.

You can showcase your products and categories on your homepage or any other page using Collection lists:

  1. Drop a Collection list where you want on your page
  2. Connect it to your products or categories Collection
  3. Add elements and connect them to your Collection fields
  4. Style them as you please

You can even filter, sort and limit the number of items in your Collection list. And you’ll have a fully custom product gallery! Learn more about Collection lists.

You can build and style your product and categories pages exactly as you’d do with a CMS Collection page. You can even set up RSS feeds for these pages. Learn all about Collection pages.

Ecommerce elements

Add to cart

One special element that you can add onto a product page is the Add to cart element. This button allows users to add that product to their shopping cart.

Add an add to cart element onto your product page from the add panel or using Quick find (CMD/CTRL+E).

You can customize the add to cart element in the element settings panel: choose to show or hide the quantity input field or toggle between the three states: default, out of stock, and error states to style the add to cart element fully.

Add to cart settings
‍Add to cart settings

To edit the error messages, select the error message on the page, then select any of the default error messages in the settings panel and click the pencil icon to edit it.

Edit the error messages from the element settings panel

The Add to cart button is coming soon to the Collection list as well, stay updated!

Cart

You can add a shopping cart on any page from the Add panel → components section.

Add a cart onto any page from the add panel
Add a cart from the add panel or using Quick find (CMD/CTRL+E).

If you have a navbar saved as a symbol, you can add your cart to that Navbar, and it will appear on all your pages where you’ve already added your navbar.

You can fully customize and style the cart button as well as the cart itself.

  • You can hide, replace, or style the cart icon. For example, change the color of the cart by applying a font color.
  • You can edit the button text or double-click and connect it to the quantity or subtotal of your cart. You can also add another text block to connect it to the quantity or subtotal.
Connect any text block in a cart button to the total quantity of products in the cart or the subtotal amount of the cart items.
‍Connect any text block in a cart button to the total quantity of products in the cart or the subtotal amount of the cart items.
  • You can show or hide the cart quantity — the total items in the cart by double-clicking the element called cart button. The setting is under element settings →  cart button settings.
  • You can hide the cart quantity when the cart is empty by double-clicking the element called cart quantity. The setting is under element settings → cart quantity settings.
Hide the cart quantity when the cart is empty

You can edit the cart itself. First, open the cart from the element settings panel (D). Then, choose the cart type, the easing and duration of the opening and closing animation, and the number of items to show in the cart preview. You can also specify if you want to open the cart when a product is added to it.

Edit the cart settings

You can also toggle between the three states of the cart to style each of those states: default, empty, and error. You can edit the error messages in the settings panel just like you'd edit the errors of the add to cart element (read more above).

You can also customize and style any of the elements within your cart. Just select the element and update its settings in the element settings panel (D) or style it in the style panel (S)

To close the cart, click the open cart button again.

Checkout page and checkout elements

So, an online shopper has added some products to their cart and they are ready to submit their order. They’ll open the cart, choose to continue to checkout, and they’ll be taken to the checkout page (/checkout).

To go to the checkout page, open the cart and click continue to checkout
‍To go to the checkout page, open the cart and click continue to checkout

The checkout page is a new Ecommerce utility page — found in the Pages panel → Ecommerce pages section — which comes with some default components already added to the page.

Ecommerce template pages and utility pages
‍Ecommerce template pages and utility pages
Must know
You can customize this page by reordering the components and elements and styling them as you please. However, note that deleting or hiding components which contain required fields will break the checkout form.

You can add the order items and order summary components back later if you change your mind. They will be available in the Add panel when you’re on the checkout page.

Pro tip
You can also add a navbar and a footer to this page, even a “continue shopping” button that takes users back to the main store page.
Order confirmation page and order related elements

Once the order is submitted, the online shopper will be taken to the order confirmation page. This is another Ecommerce utility page in the Pages panel → Ecommerce pages section. 

It also comes with a default template that you can customize and style fully. Unlike the checkout page, all components on this page can be removed and re-added from the Add panel. You can add the whole template with all the blocks by dragging in the order confirmation components. Or, you can add the following components individually within the order confirmation container: order items, customer info, shipping method, payment info, order summary.

Order confirmation page elements
Pro tip
Again, you can add a navbar and a footer to this page. You can also add a button that takes users back to the main store page or your homepage.

Finalize your store settings

Now that the store is designed, let’s finish setting up the store to make it a fully functioning online store. Open the Settings panel from the left panel, then open the Ecommerce settings and let’s setup the following:

  • Payment settings
  • Shipping settings
  • Tax settings
  • Integrations
E-commerce settings
To set up your store, go to the (1) Settings panel then open the (2) Ecommerce settings.

Payment

Connect Stripe as your payment provider to accept credit card payments on your site. You’ll need to create and connect your Stripe account to Webflow to collect payments, process refunds, and get paid. You can do this right from the payment settings in the Designer.

Connect Stripe as your payment provider to accept credit card payments on your site.
Open the (1) Payment settings in the Ecommerce settings, then (2) connect Stripe as your payment provider to accept credit card payments on your site.

Payment FAQs

Is Stripe supported in all countries?
Note that Stripe may not be available in your country. We'll be looking to add support for other payment gateways like PayPal soon. That said, if you need to setup a store in an unsupported country, Stripe Atlas allows you to easily incorporate a U.S. company, set up a U.S. bank account, and start accepting payments with Stripe no matter what country you’re based in. Learn more about Stripe Atlas.
What payment methods are accepted through this Stripe connection?
Although Stripe supports different payment options, currently the Webflow Ecommerce checkout only supports the credit/debit card payments. Cards (Visa, Mastercard, American Express, Discover, Diners Club, JCB) are a dominant payment method globally. More payment options (such as Apple Pay and Google Pay) are coming soon. Learn more about accepting cards via Stripe.

Also check out these helpful resources:

Are there any credit card processing fees that apply?

Stripe may charge some fees like a processing fee and a percentage of the transaction amount each time you accept a credit or debit card payment. This fee varies depending on the country you're in or the card used during checkout. Learn more about Stripe fees.

Stripe processing are collected upon each successful transaction. Fees may include or may exclude taxes. Please contact Stripe to learn more.
Do transaction fees apply?
An additional 2% transaction fee applies for sites on the Standard site plan — that's the smallest Ecommerce site plan. There's no transaction fee on higher plans.
Ecommerce hosting plans. Transaction fees apply on the Standard plan
Ecommerce site plans. Transaction fees apply on the Standard plan.
Can I sell anything using this payment gateway?

By registering with Stripe, you are confirming that you will not accept payments via Stripe in connection with any prohibited businesses, business activities or business practices. Learn more about what businesses and products are not allowed by Stripe and why.

How to get my payouts?

Stripe makes deposits (payouts) from your Stripe account balance (funds received from payments, refunds, etc.) into your bank account. Payouts are processed according to your Stripe account’s payout schedule. Learn more about receiving payouts from Stripe.

To see a list of all of your payouts and the date that they are expected to be deposited into your bank account, head to your Stripe Dashboard's payout section.

How are disputes and fraud handled?

A dispute or a chargeback occurs when a cardholder questions your payment with their card issuer. The best way to manage disputes is to prevent them from happening at all. To do that, create an effective dispute and fraud prevention strategy. Learn how to best protect against disputes and fraudulent payments.

To learn more about disputes and fraud and how the process works, check out Stripe's documentation on Disputes and Fraud. To best protect against disputes and fraudulent payments, read Stripe's Preventing Disputes and Fraud guide and learn more about fraud prevention strategies.

Disputed payments incur a fee as well. If the customer’s bank resolves the dispute in your favor, this fee is fully refunded. 
Can I issue refunds?

You can issue refunds right from the Webflow Editor → Orders tab. There are no fees to refund a charge.

Refund an order right from the Editor → orders tab
‍Refund an order right from the Editor → orders tab
Troubleshooting
If you're having trouble connecting to Stripe from the Webflow Ecommerce settings panel or unable to refund orders, please contact Webflow support.

For help with any questions about Stripe, such as bank transfers, refunds, declined charges, and so on. Contact Stripe or read their documentation.

Shipping

Once you’ve decided where you’ll ship, go into Settings → Ecommerce → Shipping and choose the places you’re fulfilling orders for.

Shipping settings in the Designer

These settings can also be customized from the Editor which allows your clients to set their own shipping zones and methods.

Ecommerce settings in the Editor
‍Ecommerce settings in the Editor

Since shipping rates for different regions or zones you’re sending products to might differ, you can create different shipping methods for each of those zones, and calculate your shipping rate based on any of the following:

  • Percentage of total order cost
  • Item price
  • Item quantity
  • Item weight

You can also set a flat-rate: per-item or per-order or set free shipping.

Taxes

We’ll automatically calculate sales tax and VAT for customers ordering from the United States, Canada, the European Union, and Australia. You can turn this option on or off for those countries if you’ve set them as shipping zones in your shipping settings.

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.

Helpful resources
Even though Webflow can help you calculate taxes for supported countries automatically, however, it is your responsibility to ensure that the calculations are correct for your business, and to file and pay these taxes to the appropriate tax authorities. We recommend that you work with a tax expert who has a complete understanding of your specific business situation, to ensure that you are compliant with all applicable tax regulations.
Taxes

Some regions require that tax be included in the product price and not added as a separate line-item during checkout. So, the product price should be tax-inclusive. Enable the option labeled "include taxes in product price" in settings → Ecommerce → taxes settings so sales tax are calculated and collected from the price of the product.

Enable including taxes in product price

Integrations — Facebook

You can integrate your Webflow store with Facebook in settings (left panel) → Ecommerce →  integrations → Facebook.

Integrating Facebook with your online store

To sync new and existing products with your Facebook store:

  1. Turn sync inventory on. Publish your site first to enable this option.
  2. Copy the data feed URL and click save.
  1. Go to your Facebook Catalogue Manager and upload your data feed. Learn more about how to add products to Facebook through a data feed.
The feed will not work and will be disabled if you unpublish your site or turn the sync off.

Email

You can customize the look  of your Ecommerce emails and invoices by editing the email settings and template under Settings (left panel) → email.

Email settings

Here, you can upload your brand logo, set your brand accent color and choose the background color of your email. To remove the Webflow branding from the footer of your emails, you’ll need an Ecommerce plus or Advanced site plan

You can also customize the labels in your email template and set dynamic fields such as customer name, store name, store URL, Store owner name to populate your email subject and other variables.

Email settings

Once you’ve customized your email, send a test email to see the final look. Make sure to save your changes.

Send test email to test your email settings

Launch your store

Now that all is set, all you need to do to launch your store is set hosting, enable SSL, and enable checkout.

Ecommerce hosting + SSL

Open your project settings → hosting page. Under site plans, open the Ecommerce sites tab and add the plan you want. If you already have a site plan on your site, the plan will be upgraded to the Ecommerce plan you chose. You can downgrade the plan at any time, however, note that you'll only be able to enable checkout with one of the three Ecommerce site plans.

SSL will be automatically enabled on your site. Check to make sure SSL is on under project settings → hostingadvanced publishing options.

Checkout

Now that Hosting and SSL are set, go back to the Designer → Settings →  Ecommerce → Checkout and enable checkout. Save your changes and publish your store.

Enable checkout

Manage your 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.

Managing orders

You can also manage your orders with Zapier integrations with the brand new triggers: New paid order, new updated order — and new actions: Update Order, fulfill Order, Unfulfill Order, Refund Order.

Read more about what you can do during the Beta and what is coming next on the Webflow blog.