1. What "Webflow headless" actually means
Webflow has two distinct products you might want to use headlessly: the CMS (custom collections, structured content) and Webflow Ecommerce (products, categories, orders). Headless usage differs significantly between the two.
For the CMS, Webflow is one of the strongest visual content tools available. A non-developer marketer can fill in structured collection items via Webflow's editor, and your custom frontend reads them via the Data API v2. This pattern (Webflow as headless CMS) is genuinely production-ready and used by hundreds of agencies.
For Ecommerce, Webflow exposes products + categories through the same API but cart and checkout are weaker. You have three choices: use Webflow's native cart (redirect-based, like Wix), use Snipcart/Foxy as a client-side cart overlay, or pair Webflow CMS with a separate commerce backend (Shopify, Medusa, custom). We'll cover all three patterns.
2. Two paths: CMS-only vs full ecommerce
The decision tree is unusually clean for Webflow:
- Content-driven site (no commerce or low-volume). Use Webflow Designer for design, Webflow CMS for content, render via Data API in Next.js / Astro. This is the 80% case and works beautifully.
- Ecommerce-driven site (mid-to-high volume). Use Webflow CMS for product content (better for SEO and editing UX), but use a real commerce backend (Shopify, BigCommerce, Medusa) for cart/checkout/inventory. Your frontend pulls from both APIs.
- Lightweight ecommerce (under 100 SKUs, simple cart). Webflow Ecommerce headless is acceptable. Add Snipcart for a better cart UX. Total monthly cost: ~$50.
3. The architecture, end to end
┌─────────────────────────────────────────┐
│ Custom React frontend │ ← Next.js / Astro / Remix
└────────────────┬────────────────────────┘
│ Build-time + runtime fetches
▼
┌─────────────────────────────────────────┐
│ Webflow Data API v2 │ ← REST, Site Token or OAuth
│ api.webflow.com/v2/* │ 60 rpm rate limit
└─────────────────────────────────────────┘
For full ecommerce, add either:
┌─────────────────────────────────────────┐
│ Snipcart / Foxy.io │ ← Client-side cart overlay
└─────────────────────────────────────────┘
OR
┌─────────────────────────────────────────┐
│ Separate commerce backend │ ← Shopify / Medusa / Stripe
│ (cart + checkout + inventory) │
└─────────────────────────────────────────┘4. What the Data API exposes
| Capability | Available? | Notes |
|---|---|---|
| CMS Collections (custom types) | ✓ Full | Read + write, with publishing workflow |
| CMS Items (rows in a collection) | ✓ Full | CRUD, reference fields, multi-image |
| Products + variants | ✓ Full | SKUs (variants), pricing, inventory |
| Product categories | ✓ Full | Treated as separate from CMS collections |
| Inventory | ~ Per-variant | Quantities tracked via SKUs; no real-time |
| Cart CRUD | ~ Limited | Cart endpoints exist but UX is tied to native checkout |
| Orders (read) | ✓ Full | List, retrieve, fulfill, refund |
| Webhooks | ✓ Full | CMS publish, ecommerce events |
| Custom checkout UI | ✗ | Native checkout is template-only; use Snipcart for custom |
5. Performance: real benchmarks
Same-store benchmark (32 products, standard images, mobile 4G throttled, median of six rounds):
| Setup | Lighthouse | TTFB | LCP | JS shipped |
|---|---|---|---|---|
| Webflow native (with Ecommerce add-on) | 76 | 410 ms | 1.9 s | 580 KB |
| Headless Next.js + Webflow Data API | 92 | 160 ms | 1.0 s | 68 KB |
| Next.js + Trama bridge + Webflow | 95 | 95 ms | 0.8 s | 62 KB |
Webflow native is the fastest of the three platforms (Wix, Webflow, Shopify) at native rendering — they invest heavily in CDN and image optimization. The headless gap is smaller than for Wix. Where headless wins on Webflow is design flexibility and combining content sources, not raw speed.
6. Step-by-step: minimal headless Webflow site
Step 1 — Get a Site API token
In Webflow Designer: Site Settings → Apps & Integrations → API access → Generate API token. Scope it to read your collections + ecommerce. Copy the token; treat it as server-only.
Step 2 — Install + provider
npm install trama-sdk @tanstack/react-query
// app/layout.tsx
import { TramaProvider } from 'trama-sdk';
export default function RootLayout({ children }) {
return (
<html><body>
<TramaProvider
apiKey={process.env.NEXT_PUBLIC_TRAMA_KEY!}
projectId="proj_your_webflow_id"
platform="webflow"
>{children}</TramaProvider>
</body></html>
);
}Step 3 — Render content + products
'use client';
import { useProducts, useCmsItems, useCart } from 'trama-sdk';
export default function Page() {
const { items: blogPosts } = useCmsItems('blog-posts');
const { products } = useProducts({ limit: 12 });
const { addItem, goToCheckout } = useCart();
return (
<div>
<section>
{blogPosts.map((post) => <article key={post.id}>{post.title}</article>)}
</section>
<section>
{products.map((p) => (
<div key={p.id}>
<h3>{p.name}</h3>
<button onClick={() => addItem(p.variants[0]!.id)}>Add</button>
</div>
))}
<button onClick={goToCheckout}>Checkout</button>
</section>
</div>
);
}Note Webflow-specific detail: useCmsItems takes a Webflow collection ID (or slug). For products, addItem takes a SKU ID — Webflow products are containers for SKUs, similar to Shopify variants.
7. Authentication: tokens vs OAuth
Two types of credentials, different use cases:
- Site API token. A single shared secret per site. Generated in Designer. Scoped to one site. No expiration. Use this when the headless frontend is for your own site.
- OAuth 2.0. User-authorizes-your-app flow. Returns per-user access tokens. Use this when you're building a product (like Trama) that operates on behalf of multiple users' sites.
Webflow tokens don't expire and don't need refresh — simpler than OAuth-with-refresh schemes (Wix, Shopify), but means a leaked token is dangerous indefinitely. Rotate every 90 days; store encrypted at rest.
8. Pattern A: CMS-only (most common)
The dominant pattern: Webflow as a headless CMS, no commerce. Used by agencies for client sites, by SaaS companies for marketing pages, by anyone who wants Webflow Designer as the content-team interface.
Build pattern:
- Define collections in Webflow Designer (Blog Posts, Authors, Case Studies, etc.).
- Content team fills items via Webflow's familiar editor.
- Next.js fetches via Data API at build time (for static pages) or with ISR for fresh content.
- Webhook from Webflow → trigger a redeploy on content publish (or use ISR with shorter revalidate).
Total setup: ~4 hours for a working blog. The reason this pattern is so popular: Webflow Designer is the only CMS where non-developers actively enjoy creating content. Sanity has better APIs; Webflow has better content-team UX.
9. Pattern B: full ecommerce on Webflow
Smaller ecommerce stores (under 100 SKUs, simple variants) can use Webflow Ecommerce end-to-end. The setup:
- Products and SKUs managed in Webflow Designer.
- Custom React frontend reads products via Data API.
- Cart uses Webflow's API endpoints + native checkout (redirect, like Wix).
- Orders flow through Webflow's order management.
Limits: Webflow Ecommerce's checkout is template-only — you can't inject custom UI, conditional logic, or third-party payment processors. For most sub-$100K/year stores this is fine. Above that scale, Pattern C (Snipcart) or migrating cart logic elsewhere is usually better.
10. Pattern C: Webflow CMS + Snipcart cart
The unofficial-but-widely-used pattern: Webflow CMS for products (best content team UX) + Snipcart or Foxy.io for cart/checkout (full client-side customization). Snipcart adds a JavaScript snippet that turns any element with data-item-* attributes into a buy button.
<button
className="snipcart-add-item"
data-item-id={product.id}
data-item-price={product.price.amount / 100}
data-item-url={`/products/${product.slug}`}
data-item-name={product.name}
data-item-image={product.mainImage?.url}
>
Add to cart
</button>Snipcart costs $20–$50/month + 2% transaction fee for stores over $500/month in volume. For ~$50/month total you get Webflow CMS's editing experience, full checkout customization, and a cart UX that competes with Shopify. This is the sweet spot for design-led brands selling 20–200 SKUs.
11. Caching strategy
Webflow's 60 rpm rate limit is the lowest of the three platforms — caching matters more here. The TTL ladder:
| Resource | TTL | Notes |
|---|---|---|
| CMS items | 15 min | Editorial content; webhook on publish |
| Products | 5 min | webhook on inventory + price change |
| Categories | 15 min | Rarely change |
| Cart (Pattern B only) | 30 sec | Per-cart |
12. When NOT to use Webflow headless
- Real-time inventory sync across multiple sales channels.
- Subscription products / recurring billing with custom logic.
- B2B catalogs with tiered pricing rules.
- High-traffic sites that exceed 60 rpm without aggressive edge caching.
- Requiring custom checkout UI without paying Snipcart fees.
For these cases, look at Shopify (better commerce APIs, higher rate limits, Plus tier for full custom checkout) or Medusa (open-source, fully customizable, more engineering investment).
13. Frequently asked questions
Can you use Webflow as a headless CMS?
Yes. Webflow exposes a Data API v2 for reading and writing CMS collections. You can manage content in Webflow's visual editor and render it in any frontend — Next.js, Remix, Astro, etc. This is one of the most common ways agencies use Webflow.
Does Webflow Ecommerce support headless?
Partially. Products and categories are exposed through the Data API. Cart and checkout require either Webflow's native checkout (redirect-based, like Wix) or a third-party processor. Most production headless Webflow stores use Webflow for content + Snipcart, Shopify, or Stripe for cart/checkout.
How is Webflow different from Wix headless?
Webflow has a stronger CMS API and weaker commerce API than Wix. Wix has more polished checkout APIs but a weaker CMS. Most headless Webflow setups treat Webflow as a designer-friendly CMS and pair it with another commerce backend; most headless Wix setups use Wix's commerce APIs end-to-end.
What is the Webflow Data API v2?
A REST API at api.webflow.com/v2/* that exposes Sites, Pages, CMS Collections, Items, and Ecommerce. Authentication is via Site API token (per-site) or OAuth (for marketplace apps). Rate limit: 60 requests per minute per token, with bursts to 120.
Can I customize the Webflow checkout?
Webflow's native checkout is template-customizable but not API-customizable in the Wix/Shopify sense. For full control, most teams use Snipcart or Foxy.io overlaid on Webflow CMS — your products live in Webflow, the cart/checkout is a third-party widget. This is officially supported by Webflow.
How do you deploy a headless Webflow site?
Build your frontend in Next.js or similar, fetch data from the Webflow Data API at build time (for static pages) or runtime (for dynamic content). Deploy to Vercel/Netlify/Cloudflare. The Webflow-hosted site at .webflow.io is unused; your custom domain points to your hosting provider.
When should I NOT use Webflow headless?
If you need real-time inventory across multiple channels, complex cart logic (subscriptions, B2B), or very high traffic with sub-200ms TTFB requirements. Webflow's rate limit (60 rpm) is generous for content but constraining for high-traffic dynamic pages without aggressive caching.
How does authentication work for Webflow headless?
For your site's own content: Site API token (single shared secret, server-side only). For marketplace apps: OAuth 2.0 — users authorize your app, you get a per-user access token. Webflow tokens don't expire and don't need refresh, which simplifies implementation but means you must securely store and rotate them.
Can I use the Webflow Designer with a headless site?
You can still design pages in the Designer for visual mockups, but they won't be served — only the CMS content is consumed by your frontend. Most teams use Webflow Designer for content-team UX (filling in collection items) rather than for live page rendering.
How fast is a headless Webflow site vs native Webflow?
Native Webflow hosting is reasonably fast (Lighthouse 70-85 typical). A headless Next.js + Webflow Data API setup with edge caching reaches 90+. The bigger win is design/code flexibility, not raw speed — Webflow's native hosting is closer to acceptable than Wix's.
See your Webflow site rendered headless.
Paste your Webflow site URL on the homepage. We'll render your CMS content + products through a custom React frontend in three seconds. No signup needed.