Loading tutorials…
Loading tutorials…
Webflow Ecommerce is the design-led alternative to Shopify — beautiful checkout, full template control, no theme-bloat. Trade-off: smaller app ecosystem and a 500-SKU sweet spot. This walks the full setup.
Who this is forWebflow site owners launching a store with under 500 SKUs, a design-led brand, and Stripe as the payment processor. If you have 500+ SKUs, multi-channel selling needs (Amazon, in-store POS), or complex inventory management, Shopify is usually the better tool.
What you'll need
Step 1
Webflow Dashboard → Site Settings → Plans → upgrade to Plus Ecommerce ($74/mo, capped at $50K/yr) or Business Ecommerce ($235/mo, no cap).
Webflow Dashboard → your project → Site Settings → Plans.
Ecommerce is a separate paid tier. Plus = $74/mo, max $50K/yr GMV, 2% Webflow transaction fee. Advanced = $235/mo, max $500K/yr GMV, 0% Webflow fee. Standard = $42/mo, max $5K/yr GMV (for tests/MVPs only).
Pick based on annual revenue projection. Standard works for under $5K/yr (rare for real stores). Plus works for most starting brands. Advanced once over $50K/yr.
Stripe fees are separate: 2.9% + 30¢ per transaction. PayPal also supported. Webflow fee + Stripe fee = ~5% effective on Plus plan.
After upgrade: Site Settings → Ecommerce → Enable. This unlocks the Ecommerce panel in the Designer.
Step 2
Ecommerce → Payments → connect Stripe. Then Shipping → zones + rates. Then Tax → enable automatic via Stripe Tax or manual rates.
Webflow Designer → Ecommerce panel (left sidebar, cart icon) → Settings → Payments.
Connect Stripe via Stripe Connect (same flow as Memberships). Complete KYC in Stripe.
Shipping: Ecommerce Settings → Shipping → add zones (e.g., USA, Canada, EU, Rest of World). For each zone, add rates (flat fee, weight-based, or per-item).
Tax: Ecommerce Settings → Tax. Two options — Stripe Tax (auto-calculates based on customer location, $30/mo for any volume) or manual rates per zone (free, but you maintain).
For US-based stores selling across multiple states, Stripe Tax is almost mandatory — sales-tax nexus rules are complex. For local-only or international brands selling B2B, manual rates may suffice.
Test currency: Webflow supports 100+ currencies via Stripe but only ONE display currency per project. For multi-currency, you need a separate Webflow site per currency or a third-party integration (Crossborderit, Reactify).
Step 3
Webflow Ecommerce auto-creates a Products Collection. Add products via Ecommerce panel → Products → New. Bulk import via CSV available.
Webflow Designer → Ecommerce panel → Products. Click "New Product."
Per product: Name, SKU, Description, Main Image, Additional Images, Categories (multi-select to a Categories Collection), Price, Compare-at Price (for sale displays).
Variants: if the product has size/color options, click "Add variants" → define option types (Size, Color) → Webflow generates a variant for each combination. Per variant: separate SKU, price (optional), inventory count, image.
Inventory tracking: per-variant inventory count. Webflow auto-decrements on sale. Set "Track inventory" to ON. When inventory hits 0, product/variant becomes unavailable for purchase.
Bulk import: Ecommerce panel → Products → Import CSV. Use the Webflow-provided template. Useful for stores with 50+ SKUs at launch.
Plan ahead: Webflow Ecommerce caps at 3,000 SKUs total (3,000 variants per product). For larger catalogs, Shopify is the more scalable choice.
Step 4
Webflow Designer → Pages → Product Template / Category Template. Style these once — every product/category inherits.
Webflow Designer → Pages panel → Ecommerce section → Product Template (the page that renders every individual product) and Category Template (the page that renders each category's product list).
Product Template typically includes: hero image carousel, name, price, variant selector, add-to-cart button, description, related products grid. All fields bound from the Products Collection.
Category Template typically includes: category name, description, product grid with filtering, pagination. Webflow Ecommerce has basic native filtering (by category, by price); for advanced filtering (multi-attribute, sort by popularity), you need custom JavaScript or a third-party tool.
Add structured data: paste JSON-LD Product schema in Product Template Page Settings → Custom Code → <head>. Bind fields. Validate in Rich Results Test.
Add breadcrumbs: Home > Category > Product. Build manually with a combination of static text and CMS field references. No native breadcrumb component.
Step 5
Ecommerce panel → Cart, Checkout, Order Confirmation. Style each. The checkout is single-page on Webflow (one of its strengths vs Shopify multi-step).
Webflow Designer → Ecommerce panel → Cart. The cart slides out from the right by default. Customize: empty-state message, line item template, totals display, "Continue to Checkout" button.
Checkout page: lives at /checkout. Single-page checkout with email, shipping address, billing address, payment (Stripe Elements embedded), order summary. Style each section.
Order Confirmation page: lives at /order-confirmation. Default shows order details and "Print Receipt" button. Customize to add: thank-you message, what-happens-next steps, social-share prompts, upsell offers.
Key tracking: paste your Purchase tracking events in Ecommerce panel → Checkout settings → Custom Code → Order Confirmation. This is where fbq('track', 'Purchase', {value: 99, currency: 'USD'}) and gtag('event', 'purchase', {...}) go. Webflow auto-populates {{order_value}} and {{order_id}} variables for you.
Add abandoned-cart triggers: Ecommerce → Settings → Email Templates → Abandoned Cart Email. Webflow sends this automatically after 1 hour. Customize the template to actually convert (subject line, discount code, scarcity messaging).
Step 6
Each Webflow Ecommerce stage (View Product, Add to Cart, Begin Checkout, Purchase) needs its own tracking event for ad-platform attribution.
Ecommerce panel → Settings → Custom Code. You have slots for: Product Page, Cart, Checkout, Order Confirmation.
Product Page (paste in this slot): fbq('track', 'ViewContent', {content_ids: ['{{product_id}}'], content_type: 'product', value: {{product_price}}, currency: 'USD'}); gtag('event', 'view_item', {currency: 'USD', value: {{product_price}}, items: [{item_id: '{{product_sku}}', item_name: '{{product_name}}'}]});
Cart (Add to Cart slot): fbq('track', 'AddToCart', {value: {{cart_value}}, currency: 'USD'}); gtag('event', 'add_to_cart', {...});
Checkout (Begin Checkout slot): fbq('track', 'InitiateCheckout', {...}); gtag('event', 'begin_checkout', {...});
Order Confirmation (Purchase slot): fbq('track', 'Purchase', {value: {{order_value}}, currency: 'USD', content_ids: [order item IDs]}); gtag('event', 'purchase', {transaction_id: '{{order_id}}', value: {{order_value}}, currency: 'USD', items: [...]});
Validate every event in Meta Test Events + GA4 DebugView. Walk a real $1 test order through the entire funnel — every event should fire exactly once at the right stage.
Step 7
Create a $1 test product, make a real purchase in incognito with real card, verify: tracking events, order in Webflow, payment in Stripe, Meta + GA4 conversion attribution.
Create a temporary $1 test product (or mark an existing product as $1 for testing).
Open incognito, walk the funnel: visit product → add to cart → checkout → complete purchase with a real credit card.
Verify in order: (a) GA4 DebugView shows all 4 ecommerce events, (b) Meta Pixel Helper shows all 4 events with values, (c) Webflow Ecommerce → Orders shows the new order, (d) Stripe Dashboard → Payments shows the charge, (e) order confirmation email arrives, (f) abandoned-cart email does NOT fire (since you completed the purchase).
Refund the test order via Webflow Ecommerce → Orders → click order → Refund.
If any of the 6 checks fail, debug NOW — every day a tracking gap exists is a day of broken ad-platform attribution.
Re-test after every significant change to the store (new template, new tracking, new payment method).
Common mistakes
Picking Webflow Ecommerce when Shopify is the right fit
What goes wrong: You launch on Webflow Ecommerce, grow past 500 SKUs or need multi-channel selling, and now face a 60-100 hour migration to Shopify. Migration in the middle of growth is the worst possible time to do it.
How to avoid: Honest pre-launch self-assessment: <500 SKUs + Stripe-only + single channel = Webflow OK. 500+ SKUs OR multi-channel OR need for the Shopify app ecosystem = Shopify. Make the call before launching, not 18 months in.
Skipping ecommerce event tracking
What goes wrong: Without ViewContent/AddToCart/InitiateCheckout/Purchase events firing, Meta and Google ads can only optimize against PageView signal. Conversion campaigns underperform by 30-50%. Lookalike audiences fail to find buyers because Meta cannot see purchase behavior.
How to avoid: Paste all 4 ecommerce events in their respective Custom Code slots (Product Page, Cart, Checkout, Order Confirmation). Validate end-to-end with a real test order.
Default abandoned-cart email left as Webflow placeholder
What goes wrong: Webflow ships a generic 'You left items in your cart' email that converts at 2-4%. A well-written abandoned-cart sequence (3 emails, time-spaced, with discount escalation) converts at 12-18%. Difference on $50K/yr GMV is $5-7K of recoverable revenue annually.
How to avoid: Customize Webflow abandoned-cart template OR sync to Klaviyo/Mailchimp via Webflow App for a multi-email sequence with better conversion.
Selling internationally without Stripe Tax (or any tax solution)
What goes wrong: Selling across US states or EU borders without proper tax calculation = tax compliance liability + customer-facing tax shock at checkout. Either you collect wrong tax (audit risk) or no tax (customers get surprise bills + bad reviews).
How to avoid: Enable Stripe Tax ($30/mo) — handles US sales-tax nexus, EU VAT, and most international tax requirements automatically. Worth every penny on stores doing $5K+ GMV.
No product image alt text or SEO fields
What goes wrong: Catalog is invisible to Google Shopping and image search. Branded product searches show your homepage instead of the product page. Google Shopping ads cannot be set up cleanly without structured product data.
How to avoid: Per product: fill SEO Title, Meta Description, OG Image. Per image: add alt text. Use the Products Collection bulk-export → spreadsheet to audit gaps quickly.
Trying to manage 1,500+ SKUs on Webflow Ecommerce
What goes wrong: Webflow Ecommerce admin UI becomes sluggish past ~500 products. Bulk operations (price changes, inventory updates) become painful. CSV import works but is slow to iterate on. Daily ops time grows 5-10x vs Shopify equivalent.
How to avoid: For 500+ SKUs, evaluate moving to Shopify. The Shopify admin UI scales better, the API is more mature, and the app ecosystem covers more inventory-management edge cases.
Recap
Done — what's next
How to install the Meta Pixel on Webflow (and why you still need CAPI)
Read the next tutorial
Hand it off
A bare-bones Webflow Ecommerce store is a 5-hour project. A production-grade store with full tracking, optimized checkout, abandoned-cart automation, and tax compliance is 25-40 hours. A vetted Webflow Ecommerce specialist on EverestX ships the production version in one week, typically $400-800 at $14-16/hr.
See specialist rates
Webflow Ecommerce wins when: you have a design-led brand under 500 SKUs, you sell via a single channel (your website only), you want full design control over checkout, and you're already using Webflow CMS for content. Shopify wins for: 500+ SKUs, multi-channel selling (Amazon, in-person POS, social commerce), subscription-heavy models, and access to the Shopify App Store ecosystem.
Yes. Ecommerce → Settings → Payments → Add PayPal. Connect your PayPal Business account. Customers see both Stripe (card) and PayPal options at checkout. Webflow handles the integration; no additional fees beyond PayPal's own.
Limited support. You can sell digital products (PDF, ebook, video access) by marking a product as 'Digital' — Webflow skips shipping. File delivery is via email link post-purchase. For larger digital catalogs or course-style content, dedicated platforms like Gumroad, Lemon Squeezy, or Teachable are more robust.
Yes, since 2023. Add a Subscription product type in Ecommerce → Products → New → Subscription. Stripe handles recurring billing. Limitations: no native pause/resume, limited upgrade/downgrade flows, no usage-based pricing. For complex subscription logic, Webflow + Stripe Billing via custom code is the workaround.
Yes — both can coexist on the same site. Each uses its own Stripe Connect setup (Ecommerce and Memberships are billed separately in Stripe). Useful pattern: free members + paid members + ecommerce products on the same Webflow site.
Three escape hatches: (1) Webflow Apps — check the Marketplace for an integration that adds the feature; (2) Custom JavaScript — modify the cart/checkout via Custom Code; (3) Headless commerce — use Webflow as the front-end and Shopify/Stripe as the back-end via API integration. Third option is engineering-heavy.
Webflow
Webflow has no server-side hook, which means the Meta Pixel alone misses 20-40% of conversions on iOS. This walks through the Pixel install AND the three legitimate Conversions API workarounds for Webflow — Zapier, Stape, or HubSpot-as-middleware.
Webflow
Webflow doesn't have a native GA4 field anymore — every install goes through Custom Code. Most DIY setups end up double-counting from the webflow.io staging subdomain or missing events from form submits. This walks the install + the filters that fix both.
Webflow
Webflow CMS is one of the best content tools on the market — until you realize your blog posts all share the same generic meta description because no one wired up dynamic SEO fields. This walks the Collection-level SEO setup that fixes it.
Webflow
Both platforms are great. Both can host the same marketing site. Pick wrong and you spend 6-12 months fighting the platform's grain. This is the honest decision framework specialists use when clients ask which to choose.
Webflow
DIY Webflow is great for the first 6 months — the visual editor really is that good. After that, the math usually flips. This is the honest framework: when self-managing costs more than hiring help.