Contentful Ecommerce: Build a Content-Driven Commerce Stack with Spree Commerce

Contentful handles content. Spree Commerce handles commerce. Together with Next.js, they form a composable ecommerce architecture where editors and developers work independently, without platform fees or vendor lock-in.

Key Takeaways

Last verified: April 2026

The problem: Monolithic platforms force you to choose between rich content management and flexible commerce, and most headless CMS setups pair Contentful with proprietary commerce backends that charge transaction fees on every sale.

The approach: Use Contentful for editorial content, Spree Commerce’s REST API for catalog, pricing, checkout, and order management, and a shared Next.js frontend that pulls from both.

Why it matters: You get full ownership of your commerce layer (BSD 3-Clause), zero platform fees, zero transaction fees, and a content-commerce architecture that scales across regions, languages, and business models.

Why Content and Commerce Keep Getting Pulled Apart

Most ecommerce platforms ship a built-in content management system, and most of them are terrible at it. A skincare brand running ingredient guides, seasonal campaigns, and educational content alongside product pages hits the ceiling fast. The blog editor feels like an afterthought. Rich media layouts require developer time. Localization means duplicating entire pages instead of managing translations at the field level.

That is why teams adopt Contentful in the first place. Contentful gives editors real control over structured content across channels and locales, with an API-first architecture that developers actually want to work with. According to Contentful’s own data, the platform serves over 4,000 customers including brands like Staples, Vodafone, and Urban Outfitters.

Beyond basic content management, Contentful provides enterprise editorial workflows that monolithic commerce platforms cannot match:

None of this touches transactions. Contentful does not manage products, prices, inventory, carts, or orders. That is by design, and it is exactly why you need a dedicated commerce layer.

What Contentful Brings to a Commerce Stack

Contentful is a structured content platform, not a page builder. That distinction matters for ecommerce teams because it means content is stored as structured data (fields, references, assets), not as rendered HTML blobs. A product story, a buying guide, or a compliance notice is a reusable content object that can appear on a product page, a landing page, and a mobile app without being duplicated.

For ecommerce specifically, Contentful offers three capabilities that most platform-native CMS tools struggle with:

The problem starts when those same teams need commerce capabilities. Product catalogs, variant management, pricing rules, inventory, checkout, and payment processing live in a different world than editorial content. The default answer has been proprietary headless commerce SaaS. Every one of them charges platform fees, transaction fees, or both.

There is a better architecture. One where Contentful owns content, an open-source commerce engine owns transactions, and a shared frontend pulls from both APIs on equal terms.

Where Contentful Stops and a Commerce Backend Takes Over

The boundary between content and commerce is clean when you draw it right.

Contentful owns everything a human writes, curates, or designs:

The commerce backend owns everything transactional:

The product page is where both systems meet. A product page for a premium furniture retailer might pull the product name, price, variant options, and stock status from the commerce API, while pulling the designer profile, room-inspiration gallery, care instructions, and sustainability story from Contentful. The frontend assembles both into a single page. Neither system needs to know about the other.

This separation solves a real operational problem. Content editors publish without waiting for developer deploys. Commerce teams update pricing or inventory without touching content. A seasonal campaign in Contentful goes live at midnight without any changes to the commerce backend. A flash sale in the commerce engine changes prices without touching a single Contentful entry.

How Does Spree Commerce Fit as the Commerce Backend for Contentful?

Spree Commerce is an open-source, API-first headless commerce platform with production-grade REST APIs documented in OpenAPI 3.0 format. It handles everything Contentful does not: product catalog management, variant configuration, multi-currency pricing with market-specific price lists, cart and checkout, payment processing, tax calculations, and order fulfillment.

Three things make Spree Commerce a particularly strong fit alongside Contentful.

REST, not GraphQL. Contentful’s own SDK is TypeScript-based and works over REST. Spree Commerce’s Store API follows the same pattern: flat JSON responses with OpenAPI 3.0 specs that your team can use to auto-generate TypeScript types. If your developers already work with Contentful’s API, the Spree Commerce API feels immediately familiar. Some headless commerce platforms default to GraphQL, which adds query complexity and tooling requirements that REST-first teams would rather avoid.

No platform fees and no payment provider penalties. Spree Commerce is released under the BSD 3-Clause license. You own the code, deploy it on your infrastructure, and connect any payment gateway (Stripe, Adyen, Worldpay, or regional processors) without penalty.

Proprietary platforms charge a surcharge on every transaction processed through non-preferred payment providers. At $10M+ in annual volume, that penalty alone costs $50K+ per year. With Spree Commerce, you negotiate directly with the processor that fits your business, your markets, and your volume.

Shared frontend architecture. Spree Commerce ships a production-ready Next.js storefront built on Next.js 16, React 19, and Tailwind CSS 4. This is the same framework Contentful recommends for headless projects. Both systems feed into one Next.js application through their respective TypeScript SDKs, using Server Components and ISR for performance.

What Does the Contentful + Spree Commerce + Next.js Architecture Look Like?

The architecture has three layers, each with a clear responsibility.

LayerSystemResponsibilityAPI
ContentContentfulEditorial pages, brand stories, localized copy, mediaContentful Delivery API (REST + GraphQL)
CommerceSpree CommerceProducts, pricing, cart, checkout, payments, ordersSpree Commerce Store API (REST, OpenAPI 3.0)
FrontendNext.jsServer-rendered pages pulling from both APIsTypeScript SDKs for both platforms

In practice, the Next.js frontend fetches content from Contentful and commerce data from Spree Commerce in parallel during server-side rendering. A product detail page pulls pricing and variants from Spree Commerce and editorial content, care guides, and related stories from Contentful. Both calls resolve before the page renders, giving visitors a fast, unified experience.

Webhook-based synchronization handles the cases where one system needs to react to changes in the other. Contentful’s webhooks can trigger cache invalidation in your Next.js deployment when an editor publishes content changes. Spree Commerce’s native webhook system can notify external services when orders are placed, inventory changes, or prices update.

For multi-region deployments, the architecture maps cleanly: Contentful locales align with Spree Commerce’s multi-region commerce capabilities. A French visitor sees French content from Contentful and EUR pricing with French VAT from Spree Commerce. The frontend simply passes the locale to both APIs.

Who Should Build a Contentful + Spree Commerce Stack?

This architecture fits four situations particularly well.

Content-driven brands already on Contentful. A specialty food brand managing 500+ recipes, ingredient guides, and seasonal content on Contentful needs commerce that keeps up with their content velocity. Adding Spree Commerce means product pages with rich editorial content, recipe-to-cart flows, and subscription options, all pulling from the same Next.js frontend.

Enterprise teams scaling across regions. A European consumer electronics company with Contentful serving product documentation in 12 languages needs per-market pricing, local payment methods, and regional shipping rules. Spree Commerce’s Markets and per-country storefronts handle the commerce side of localization while Contentful handles the content side. GoDaddy runs over 10,000 stores on Spree Commerce at this kind of scale.

Agencies standardizing on composable stacks. Digital agencies building for mid-market retail clients need an open-source commerce backend that does not eat into project margins with platform licensing. Spree Commerce’s TypeScript SDK and Next.js commerce starter kit mean faster time-to-production and lower client costs compared to proprietary alternatives.

Teams migrating away from SaaS constraints. A health supplements brand processing $5M annually through a proprietary platform pays a surcharge on every transaction not routed through the platform’s preferred payment provider. With Spree Commerce, there is no penalty for connecting any payment gateway. The team gets full ownership over their enterprise ecommerce infrastructure, negotiates directly with the processors that serve their markets, and eliminates the vendor dependency that comes with renting access to a commerce API.

Want to See How Spree Commerce Compares to Other Contentful Commerce Backends?

The most significant difference between Spree Commerce and proprietary headless commerce backends is ownership. With Spree Commerce, you audit every line of commerce code, deploy on infrastructure you control, and switch payment providers without asking permission. With SaaS commerce backends, you rent access to an API that can change pricing or terms at any time.

If you are evaluating commerce backends for your Contentful stack, here is what sets Spree Commerce apart:

Want a detailed side-by-side comparison for the specific commerce platforms you are evaluating? Start a conversation with our team and we will walk you through exactly how Spree Commerce fits alongside your Contentful setup.

Start Building

The Contentful + Spree Commerce + Next.js stack gives you a composable ecommerce architecture where each layer does what it was designed for. Content stays in the hands of editors. Commerce stays in the hands of operators. And the frontend brings both together without either system becoming the bottleneck.

Start building your commerce stack and connect it to your Contentful content in a single Next.js application.

Frequently Asked Questions

How do I connect Contentful to an ecommerce backend like Spree Commerce?

Both systems expose REST APIs that your frontend consumes independently. Your Next.js application calls the Contentful Delivery API for editorial content and the Spree Commerce Store API for commerce data (products, pricing, cart, checkout). No direct Contentful-to-Spree Commerce integration is needed because the frontend orchestrates both. Spree Commerce ships an official TypeScript SDK and a production-ready Next.js storefront that you can extend to include Contentful content.

Can I use Contentful for product descriptions and Spree Commerce for pricing?

Yes, and this is one of the strongest patterns for the combined stack. Store the product’s marketing copy, lifestyle images, ingredient lists, or sizing guides in Contentful where editors manage them. Keep the product’s SKU, price, inventory, and variant configuration in Spree Commerce where the commerce logic and pricing rules live. The frontend merges both on the product detail page.

Does this architecture work for multi-language, multi-currency stores?

It is designed for exactly that scenario. Contentful locales handle content translation at the field level. Spree Commerce Markets handle per-country currencies, payment methods, tax rules, and shipping zones. Your Next.js frontend passes the visitor’s locale to both APIs and renders the correct content and pricing for their region.

Do I need to build the frontend from scratch?

No. Spree Commerce ships a Next.js commerce starter kit built with Next.js 16, React 19, Tailwind CSS 4, and an official TypeScript SDK. You extend this starter to pull content from Contentful using their SDK. The storefront already handles product listing, search, cart, checkout, and account management out of the box.

Is Spree Commerce the right choice if I need B2B features alongside Contentful?

Spree Commerce is one of the few open-source commerce platforms with native B2B ecommerce capabilities: buyer organizations, approval workflows, customer-specific price lists, and gated storefronts. If your Contentful site serves both wholesale buyers (who see negotiated pricing and bulk ordering) and retail customers (who see standard pricing and marketing content), Spree Commerce handles both from one backend.

What does the total cost of ownership look like?

Contentful’s paid plans start at $300/month. Spree Commerce is free (BSD 3-Clause open source), so your costs are hosting ($200-800/month on AWS, GCP, or similar) plus any Enterprise Edition features you need. Unlike proprietary alternatives, there are no transaction fees and no payment provider penalties.

Let's use Spree to build exactly what your business needs

Let's use Spree to build exactly what your business needs

facebook