Ecommerce Overview

This content was generated with the assistance of AI and should be verified against the official Webflow documentation before being relied on in production.

This sub-section’s Webflow bibliography lists the reference material consulted while preparing these pages.

This page describes Webflow Ecommerce as it was on 2026-10-28, the date on which its facts were checked against the official Help Center, the pricing page and the Data API reference. Webflow is a software-as-a-service product without version numbers, so every statement below is dated and the Product Changes and Deprecations page tracks later changes. Ecommerce is sold as a Site plan in three tiers named Standard, Plus and Advanced; this page names the tiers and their limits and never quotes prices, which are on the pricing page and change. Ecommerce plans were not changed by the May 2026 plan update that merged the CMS and Business plans into Premium; the Standard, Plus and Advanced names and their item limits are the ones on the pricing page on the check date. The Plans, Workspaces, Seats and Roles page explains how Site plans, Workspace plans and add-ons relate.

The running example is Fernbrook Gardens, the fictitious botanical garden of this sub-section. Besides the Plants collection and the Garden Journal, the garden runs a small Fernbrook Gardens Shop that sells seed packets, hand tools, a gift membership and a printed garden guide. The site has Spanish (es) and German (de) locales for content, and the shop is the one area that stays English-only, for a reason explained in What does not work with localization, code export and DevLink.

What Ecommerce is and who it is for

Webflow Ecommerce adds a store to a Webflow site. It is not a separate product with its own admin: it is a set of system Collections (products, SKUs, categories), a set of elements (Add to cart, Cart, Checkout form, Order summary), a set of utility pages (Checkout, Order Confirmation, and the PayPal checkout), and a back-office (the Ecommerce panel in the Designer and the Ecommerce area of the Dashboard). Because products are CMS-style items, everything learned about the CMS applies: fields, template pages, Collection lists, filters and sorting, and the way a site is published. The shop pages are ordinary Webflow pages that the designer styles with classes, and the transaction itself is handled by a payment provider.

Person What they do with Ecommerce

Site owner

Chooses the Ecommerce tier, connects Stripe or PayPal, decides on taxes and shipping, and watches the transaction fee on the Standard tier

Designer

Builds the product template page, the product Collection lists, the cart and the checkout pages, and styles them at every breakpoint

Content editor

Creates products, variants, categories, images and descriptions, and updates inventory; see Content Editing on the Canvas

Shop operator

Reviews orders, fulfils them, adds tracking information, issues refunds and answers disputes

Marketer

Sets product SEO titles and descriptions, adds Open Graph data and structured data (see SEO and AEO), and measures the funnel

Developer

Reads orders and writes products, SKUs and inventory with the Data API (see Data API: Ecommerce and Localization), subscribes to order and inventory webhooks, and adds custom code to the shop pages

Source: Connect a payment provider, Data API: List Products and SKUs.

Ecommerce plans and item limits

An Ecommerce Site plan includes the CMS and the standard Site-plan features (custom domain, hosting, forms, site search) and adds the ability to accept payments, with a ceiling on the number of Ecommerce items. On 2026-10-28 the pricing page lists these tiers:

Tier Ecommerce item limit Notes

Standard

500 items

Adds a transaction fee of 2% on each sale on top of the fees of the payment provider

Plus

5,000 items

No Webflow transaction fee

Advanced

15,000 items

No Webflow transaction fee; the tier for the largest catalogs

Four rules matter when sizing a shop.

  • The limit counts items, not products. According to the Help Center article on product options, each product variant counts toward the item limit of the plan, so a catalog of 100 products with five variants each uses several times more of the allowance than 100 products with one variant. Categories are stored in their own Collection and are items too.

  • Variants are capped per product. A product can have up to three option sets (for example, Packet size, Packaging and Pollinator mix) and up to 50 variants in total. A larger matrix needs several products, or a shop built on another platform; the E-commerce comparison page of this documentation set compares such platforms.

  • Ecommerce plans still follow the Site-plan rules. An Ecommerce Site plan is a Site plan, so it is bought per site, and a Workspace plan is still needed for building features such as staging, code export and shared libraries.

  • The store can be designed before it is bought. A site can be designed with Ecommerce enabled before any plan is bought; payments need an Ecommerce Site plan and checkout turned on. A site without Ecommerce enabled answers Data API ecommerce calls with the status code 409.

The Standard transaction fee

The Standard tier charges a transaction fee of 2% of each sale. It is charged by Webflow and is separate from the fees that Stripe or PayPal charge for processing the payment. Plus and Advanced charge no Webflow transaction fee. The order object returned by the Data API reports it in the fields applicationFee (the fee assessed by the platform), netAmount (what remains after the application fee) and customerPaid (the total paid by the customer), so a reconciliation script can check the fee against the tier.

A rough rule for Fernbrook Gardens: the garden expects a few hundred orders in spring, mostly seed packets of small value. On Standard, the 2% fee applies to every order on top of the card fee, and the 500-item limit is enough for about twenty products with a handful of variants each. If the garden adds a printed guide in four formats and several tool sets, the variant count grows and Plus becomes the sensible tier, both for the larger limit and because it removes the Webflow fee.

Source: Webflow pricing, Data API: List Orders.

Products, SKUs and variants

The Webflow product model has three layers.

Layer Meaning

Product

What the visitor sees on a product page: name, slug, description, images, category, whether it needs shipping, tax category and the option sets (sku-properties)

SKU

One purchasable combination of options. It carries the price, an optional compare-at price, the SKU code, the main image, weight and dimensions for shipping, and inventory

Variant

The Designer term for a SKU other than the default: a product with the option sets Packet size (Small and Large) has a SKU for each combination

Every product has a default SKU, the combination of the first value of each option set. A product without options has exactly one SKU. Products have a product type that decides which fields appear: physical, digital, a service, or an Advanced type that shows every product and SKU field; creating SKUs through the API sets the product type to Advanced so that all fields are shown in the Designer. Digital products carry download files, and subscription billing is a property of the SKU (ec-sku-billing-method is one-time or subscription, and a subscription SKU has an ec-sku-subscription-plan with an interval of day, week, month or year, a frequency and an optional trial).

Fernbrook Gardens sells four products:

Product Option sets Notes

Foxglove seed packet

Packet size: Small, Large

Two SKUs; stock tracked per SKU

Hand trowel

None

One SKU; weight set for shipping

Gift membership

Duration: 6 months, 12 months

Digital, shippable false; a service sold through the shop

Printed garden guide

Language: English, Spanish, German

Three SKUs; the language options are product data, not locales

The last row is worth a remark: the three language editions of the printed guide are variants, not localized content. Localization cannot translate Ecommerce items, so a shop that must be multilingual treats languages as variants or runs separate sites; see What does not work with localization, code export and DevLink.

Categories

Categories group products. They are a system Collection with a name, a slug and optional extra fields, a product can belong to several categories, and a category template page lists the products in each category with a Collection list bound to the Products Collection and filtered by the category. Categories are the usual navigation of a shop (Seeds, Tools, Memberships, Books) and, like any template page, they are the place for the category SEO title and description. See Collection Template Pages and Collection Lists for the shared mechanics.

Product pages in the Designer

A product template page is a template page for the Products Collection. It holds the product name, images, price, description, the Add to cart form with its option dropdowns, and optional related-products lists. The design rules of the rest of the CMS apply: the price uses a Collection-bound text element, conditional visibility hides the compare-at price when it is empty (see Conditional Visibility and Dynamic Embeds), and the page is tested at every breakpoint (see Responsive Design and Breakpoints).

Product import and export use a CSV file. The export contains all products with their variants and categories, including archived items; import creates products, and updating existing Ecommerce items through CSV is not supported. The CSV Import and Export page covers the format, and the Data API is the route for bulk updates.

Source: Create product options and variants, Data API: Create Product and SKU.

Cart and checkout customization

Webflow customizes the shopping experience with elements and utility pages rather than a separate theme.

Piece What it is

Add to cart

A form element with option dropdowns, a quantity field and a button. It sits on a product template page or in any Collection list bound to the Products Collection

Cart

A cart icon with a count, plus either a dropdown, a modal or a right-hand sidebar. The Cart element settings choose the type, the opening and closing animation (easing and duration) and the number of items in the preview

Checkout page

A utility page, reorderable and restylable. It contains the customer information, shipping address, shipping method, payment and order summary blocks

Checkout (PayPal)

A second checkout utility page, relevant only if PayPal is enabled

Order Confirmation

The page shown after payment, with the order summary and a link back to the shop

Order and email templates

The emails sent to customers and the store owner, with a logo and a colour

The designer may restyle and rearrange these pages, but required form components must stay. The Help Center warns that deleting or hiding a component that contains a required field can break the checkout form. If the checkout page becomes unusable, a new Checkout form element can be dropped on the page to restore the default layout.

What Webflow generates

Webflow outputs the Add to cart form and the Cart as ordinary HTML with Webflow classes and data-node-type attributes, and the behaviour is provided by the webflow.js runtime. The markup below is abbreviated and illustrative; the exact output changes with the elements and settings chosen and is not a stable interface.

<form data-node-type="commerce-add-to-cart-form" data-commerce-sku-id="SKU_ID_PLACEHOLDER"
      class="w-commerce-commerceaddtocartform default-state">
  <label for="quantity-1">Quantity</label>
  <input type="number" pattern="^[0-9]+$" inputmode="numeric" id="quantity-1" name="commerce-add-to-cart-quantity-input"
         min="1" class="w-commerce-commerceaddtocartquantityinput" value="1">
  <input type="submit" data-node-type="cart-add-to-cart-button" class="w-commerce-commerceaddtocartbutton"
         value="Add to cart">
  <div data-node-type="commerce-add-to-cart-out-of-stock" class="w-commerce-commerceaddtocartoutofstock">
    <div>This product is out of stock.</div>
  </div>
</form>

<div data-node-type="commerce-cart-wrapper" data-open-product="" data-wf-cart-type="rightSidebar"
     data-wf-cart-query="" data-wf-page-link-href-prefix="" class="w-commerce-commercecartwrapper">
  <a href="#" data-node-type="commerce-cart-open-link" class="w-commerce-commercecartopenlink">
    <div>Cart</div>
    <div class="w-commerce-commercecartopenlinkcount">0</div>
  </a>
  <div data-node-type="commerce-cart-container-wrapper" class="w-commerce-commercecartcontainerwrapper">
    <form data-node-type="commerce-cart-form" class="w-commerce-commercecartform">
      <a href="/checkout" value="Continue to Checkout" data-node-type="cart-checkout-button"
         class="w-commerce-commercecartcheckoutbutton">Continue to Checkout</a>
    </form>
  </div>
</div>

The classes starting with w-commerce- carry the default CSS that Webflow ships in its shared stylesheet; the designer’s own classes (for example shop-button) are generated next to them.

.shop-button {
  background-color: #2f5d3a;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
}

.shop-button:hover {
  background-color: #244a2e;
}

@media screen and (max-width: 479px) {
  .shop-button { width: 100%; }
}

Cart and checkout behaviour cannot be replaced by arbitrary custom code: the cart state, the totals and the payment form belong to Webflow. Custom code can add behaviour around them, for example analytics events when a visitor clicks an Add to cart button. Place such code in the page’s custom code or in Site settings, and wrap it so that a missing element does not throw.

document.addEventListener('click', function (event) {
  var button = event.target.closest('.w-commerce-commerceaddtocartbutton');
  if (!button) return;
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ event: 'fernbrook_add_to_cart' });
});

The snippet reads no personal data. A cookie-consent policy still has to cover any analytics tool that receives the event; see Custom Code in the Head, Footer and Embeds.

Source: Customize the shopping cart and checkout experience.

Stripe and PayPal

Webflow Ecommerce supports two payment providers, Stripe and PayPal, and a site can connect both. The provider is connected in Site settings, Ecommerce, Payment by choosing Connect Stripe or Connect PayPal and then signing in to an existing account or creating one. Connecting a provider does not start sales: the site also needs an Ecommerce Site plan and checkout switched on.

  • Stripe handles card payments and web payments such as Apple Pay and Google Pay.

  • PayPal handles PayPal payments and card payments through PayPal, and the Help Center lists PayPal Pay Later among its methods. Merchant accounts in Turkey are not supported by the Webflow PayPal integration.

  • Availability. Neither provider is offered in every country. For an unsupported country, the Help Center points to Stripe Atlas as a way to set up a United States company that can accept payments through Stripe.

  • Fees. Each provider charges its own fee per transaction. Together with the 2% fee of the Standard tier, a Standard shop can pay two fees on a sale.

  • Other providers are not available. A merchant that needs another gateway uses a third-party commerce platform or a hosted checkout; compare the options on the E-commerce comparison page.

Payment details are entered on the provider’s secure components or redirected pages, so card numbers never reach the Fernbrook Gardens site code. Webflow’s order object keeps only provider identifiers (stripeDetails, paypalDetails) and the last digits and brand of the card (stripeCard), which is enough to look up a payment in the provider dashboard.

Source: Connect a payment provider.

Taxes and shipping

Taxes. The Ecommerce settings contain a Taxes area. Taxes can be set manually per country or region, or calculated automatically through Stripe Tax when Stripe is the payment provider. Each product has a tax category field (tax-category) used by automatic calculation. A shop must register for tax in each jurisdiction that requires it: automatic calculation depends on the registrations configured in the provider account, as the Stripe documentation describes. Check the tax settings and a test receipt before launching in a new country.

Shipping. Shipping is configured per shipping zone, a set of countries or regions, and each zone has one or more shipping methods. The method types in the Help Center article are price-based (rates by order total), quantity-based (rates by total item count), weight-based (rates by total weight) and flat-rate (one amount for the whole order or per item, or free). The weight of each SKU therefore has to be entered correctly when weight-based rates are used. The shippable field of a product turns shipping off for digital items, which is how the gift membership of Fernbrook Gardens is sold without a shipping address.

Fernbrook zone Method Rule

Domestic

Weight-based

Seed packets ship under a small rate; the tools use a higher weight band

Europe

Flat rate

One amount per order, so that the Spanish and German visitors see a single predictable cost

Digital items

None

The product is not shippable and no address is requested

Source: Configure shipping methods for different shipping zones, Stripe Tax: Set up.

Orders and inventory

When a visitor pays, Webflow creates an order. The Orders area of the Dashboard and the Ecommerce panel list orders with their status, and the Data API exposes the same information. The statuses are pending, unfulfilled, fulfilled, refunded, disputed and dispute-lost.

flowchart LR V["Visitor"] --> C["Cart and Checkout page"] C --> P["Stripe or PayPal"] P -->|paid| O["Order: unfulfilled"] P -->|not completed| N["Order: pending"] O --> F["Fulfilled, with tracking"] O --> R["Refunded"] F --> D["Disputed"] D --> L["Dispute lost"] O --> I["Inventory decreases"]

The operator can fulfil an order, optionally sending the Order Fulfilled email, add a shipping provider and tracking information, refund it fully or partly through the payment provider, and answer a dispute in the provider dashboard. Customer emails (confirmation, fulfilment and refund) are templates edited in the Ecommerce settings.

Inventory is tracked per SKU. A SKU is either infinite or finite; for a finite SKU the quantity decreases as orders are placed, and a SKU that reaches zero shows the out-of-stock state of the Add to cart form. The Data API can read the quantity and update it either absolutely (quantity) or incrementally (updateQuantity, which may be negative), and the ecomm_inventory_changed webhook announces a change.

Reading and changing orders and inventory with the Data API

The examples use a Developer workspace site with Ecommerce enabled, because the ecommerce endpoints answer 409 on a site without it. The token comes from the environment; the value shown is a placeholder.

export WEBFLOW_API_TOKEN="your-site-token-with-ecommerce-read-and-write"
export WEBFLOW_SITE_ID="your-site-id"

# List the products and their SKUs (scope ecommerce:read)
curl --request GET \
  --url "https://api.webflow.com/v2/sites/${WEBFLOW_SITE_ID}/products?limit=100" \
  --header "Authorization: Bearer ${WEBFLOW_API_TOKEN}" \
  --header "accept: application/json"

Source: Data API: List Products and SKUs.

The response contains an items array; each element has a product object with fieldData (name, slug, description, shippable, sku-properties, category, tax-category, default-sku, ec-product-type) and a skus array whose fieldData holds the price, the compare-at price and the sku code. The limit, offset and total values of the pagination object count products only, never SKUs, and limit has a maximum of 100.

{
  "product": {
    "fieldData": {
      "name": "Foxglove seed packet",
      "slug": "foxglove-seed-packet",
      "description": "Digitalis purpurea seeds from the Fernbrook meadow.",
      "shippable": true,
      "sku-properties": [
        {
          "id": "packet-size",
          "name": "Packet size",
          "enum": [
            { "id": "small", "name": "Small", "slug": "small" },
            { "id": "large", "name": "Large", "slug": "large" }
          ]
        }
      ]
    }
  },
  "sku": {
    "fieldData": {
      "name": "Foxglove seed packet - Small",
      "slug": "foxglove-seed-packet-small",
      "price": { "value": 399, "unit": "USD", "currency": "USD" },
      "sku": "FG-FOX-S"
    }
  },
  "publishStatus": "staging"
}

Source: Data API: Create Product and SKU.

The body above is posted to the same products path with ecommerce:write. Webflow creates the default SKU from the first value of each option set; the other combinations (here the Large packet) are added with the Create SKUs endpoint on /sites/{site_id}/products/{product_id}/skus. The publishStatus field defaults to staging, so the product is not live until it is published.

curl --request POST \
  --url "https://api.webflow.com/v2/sites/${WEBFLOW_SITE_ID}/products" \
  --header "Authorization: Bearer ${WEBFLOW_API_TOKEN}" \
  --header "Content-Type: application/json" \
  --data @foxglove-seed-packet.json

Source: Data API: Create Product and SKU.

Orders can be listed, filtered by status, and updated with shipping information.

# Unfulfilled orders (scope ecommerce:read; status is one of
# pending, refunded, dispute-lost, fulfilled, disputed, unfulfilled)
curl --request GET \
  --url "https://api.webflow.com/v2/sites/${WEBFLOW_SITE_ID}/orders?status=unfulfilled&limit=100" \
  --header "Authorization: Bearer ${WEBFLOW_API_TOKEN}"

# Add tracking information (scope ecommerce:write)
curl --request PATCH \
  --url "https://api.webflow.com/v2/sites/${WEBFLOW_SITE_ID}/orders/${ORDER_ID}" \
  --header "Authorization: Bearer ${WEBFLOW_API_TOKEN}" \
  --header "Content-Type: application/json" \
  --data '{"shippingProvider":"Correos","shippingTracking":"TRACKING-PLACEHOLDER","shippingTrackingURL":"https://tracking.example.com/TRACKING-PLACEHOLDER"}'

# Mark the order fulfilled without emailing the customer
curl --request POST \
  --url "https://api.webflow.com/v2/sites/${WEBFLOW_SITE_ID}/orders/${ORDER_ID}/fulfill" \
  --header "Authorization: Bearer ${WEBFLOW_API_TOKEN}" \
  --header "Content-Type: application/json" \
  --data '{"sendOrderFulfilledEmail": false}'

Source: Data API: List Orders, Data API: Update Order, Data API: Fulfill Order.

The order object includes orderId, status, customerPaid, netAmount, applicationFee, customerInfo, purchasedItems, shippingAddress, billingAddress, totals, paymentProcessor and the provider details. Orders contain personal data (names, addresses, emails), so a script that reads them runs on trusted infrastructure with a token that has only the needed scopes. The x-webflow-signature header of webhooks created through the API lets the receiver verify that a request came from Webflow; webhooks created in the Dashboard do not carry the header.

Inventory is read and written on the SKU Collection:

export SKU_COLLECTION_ID="your-sku-collection-id"
export SKU_ID="your-sku-id"

# Read the stock (scope ecommerce:read)
curl --request GET \
  --url "https://api.webflow.com/v2/collections/${SKU_COLLECTION_ID}/items/${SKU_ID}/inventory" \
  --header "Authorization: Bearer ${WEBFLOW_API_TOKEN}"

# Set the stock to 120 (absolute), or use updateQuantity with a signed number for a delta
curl --request PATCH \
  --url "https://api.webflow.com/v2/collections/${SKU_COLLECTION_ID}/items/${SKU_ID}/inventory" \
  --header "Authorization: Bearer ${WEBFLOW_API_TOKEN}" \
  --header "Content-Type: application/json" \
  --data '{"inventoryType":"finite","quantity":120}'

Source: Data API: List Inventory, Data API: Update Inventory.

The SKU Collection ID comes from the site’s list of Collections. Rate limits apply as for the rest of the Data API (60 requests per minute on Starter and Basic, 120 per minute on paid plans and the Developer workspace) and a failed request should be retried with back-off; see Data API: SDKs, Limits and Errors. Ecommerce webhooks are ecomm_new_order, ecomm_order_changed and ecomm_inventory_changed; see Webhooks.

What does not work with localization, code export and DevLink

Several Webflow features that work for ordinary pages do not cover Ecommerce on the check date.

Area What to know

Localization

Localization does not support the features of an Ecommerce Site plan. Products, categories and the Ecommerce pages of a shop cannot be localized, so Fernbrook Gardens keeps the shop in English while Spanish and German visitors use the localized Plants, Journal and static pages. Languages of a physical product (such as the printed guide) become variants. See Localization.

Code export

Exported code includes the static front end only. The CMS (lists render empty), Ecommerce, form processing and reCAPTCHA, site search, password protection, localized content and code components are not part of the export, so a store cannot be moved to another host by exporting code. Products and orders can be exported as CSV instead. See Code Export and Portability.

DevLink

The DevLink documentation describes exporting Webflow components as React components and importing React components into Webflow, with an Ecommerce Site plan listed only as one of the qualifying plans. It documents no cart, checkout or product support, so the shop pages stay in Webflow and DevLink is used for static design components such as the garden header. See DevLink Export.

Backups

Restoring a backup made before 2024-03-25 resets Collection and item IDs, which also affects Ecommerce integrations. When a backup is restored on a store, Webflow asks whether to include inventory; declining resets inventory and turns off inventory tracking. See Backups and Recovery.

CSV update

Importing a CSV into the Ecommerce panel creates products; it does not update existing Ecommerce items. See CSV Import and Export.

Pitfalls

  • Counting only products against the limit. Variants count too; a growing matrix of options reaches 500 items on Standard sooner than expected.

  • Starting on Standard without modelling the fee. The 2% fee plus the provider fee reduces the margin on low-priced items; compare it with the Plus tier before the first launch.

  • Deleting required checkout fields. Hiding the email or address component breaks the checkout form; restyle, do not remove.

  • Treating the shop as translatable. Localization does not cover Ecommerce, so plan languages as separate variants or separate sites.

  • Expecting export to carry the store. Exporting code drops the CMS and Ecommerce; keep a CSV export and a documented Data API routine.

  • Using the dev site for real money. Test the checkout with the provider’s test mode and a staging domain before enabling live payments.

  • Sending order data to unsafe places. Orders contain customer data; keep the token in an environment variable, scope it to ecommerce, and never log full order bodies.

  • Forgetting 409. A call on a site without Ecommerce enabled fails with that status code, which looks like a permissions error but is not.

History and where older material is wrong

Webflow introduced Ecommerce in 2018 with Standard-like tiers and has since added product variants, digital products, and subscriptions, PayPal as a second provider, and a version-two Data API for products, SKUs, orders and inventory. The earlier Data API (version one) was deprecated on 2025-03-31. In 2026 the CMS and Business Site plans were merged into Premium, but the Ecommerce tiers kept their names. Details are on Product Changes and Deprecations.

The requester-provided book, Webflow by Example (2021), promises Ecommerce on page 37 but does not cover it, so nothing in it describes products, checkout, payments, taxes, shipping or orders. Its plan descriptions (Lite, Pro and Team account plans; Basic, CMS and Business site plans with 2,000 and 10,000 item limits) predate the current tiers and do not describe the Ecommerce item limits above. Where the book and the official documentation differ, this sub-section follows the official documentation. See Where Older Books and Tutorials Are Outdated.

Where to go next

References