E-commerce

Headless E-commerce Architecture

Full headless commerce stack: decoupled storefront, API-first commerce engine, global CDN, and composable services for content, search, and media.

Engineering teams building custom storefronts for mid-market or enterprise brands that need performance, flexibility, and multi-channel capabilities beyond what hosted themes allow. $500–$8,000 depending on Shopify plan tier (Basic $39 → Plus $2,300), Algolia record/search volume, Cloudinary transformations, and Vercel bandwidth. Pure open-source path (Medusa + Typesense + self-hosted) can start at $100/mo on a single VPS. 📦 12 tools

A headless commerce architecture separates the frontend presentation layer from backend commerce logic. You pick an API-first commerce platform (Shopify, commercetools, Medusa, or Saleor) as the system of record, then compose best-of-breed services for search, content, media, payments, and CDN. This stack is ideal for teams that need custom storefronts, multi-channel selling (web, mobile, kiosk), and sub-100ms page loads via edge rendering. The tradeoff is integration complexity: every service requires careful data sync, and inventory consistency across channels is a recurring challenge.

The Stack

Shopify

— Commerce engine (SaaS option) optional

Shopify Storefront API and Hydrogen framework provide a battle-tested, fully hosted commerce backend with payments, inventory, and fulfillment built in. Lowest operational overhead for headless.

Alternatives: medusa, saleor, vendure, elastic-path, crystallize

Medusa

— Commerce engine (self-hosted option) optional

Open-source, Node.js-based headless commerce platform. Full control over data, no per-transaction fees, and a modular plugin system. Best for teams that need deep customisation without vendor lock-in.

Saleor

— Commerce engine (GraphQL-first option) optional

Python/Django headless commerce with a powerful GraphQL API, built-in multi-channel and multi-currency support, and a React Dashboard. Strong choice for marketplaces and B2C.

Elastic Path

— Commerce engine (enterprise composable option) optional

MACH-certified composable commerce platform with flexible catalog, promotions, and cart APIs. Suits complex product models (configurable products, bundles) at enterprise scale.

Next.js

— Storefront framework

Next.js with React Server Components is the de-facto standard for headless storefronts. Shopify's Hydrogen is built on it; Medusa and Saleor ship official Next.js starter templates.

Alternatives: remix, nuxt, astro, sveltekit

Vercel

— Edge hosting and CDN optional

Instant edge deployments, ISR/On-demand revalidation for product pages, and a global CDN optimised for Next.js. Reduces storefront TTFB to <50ms worldwide.

Algolia

— Product search and discovery

Sub-10ms search, AI-powered ranking, and merchandising rules. Algolia's InstantSearch UI library accelerates PLP and autocomplete implementation.

Alternatives: typesense, meilisearch, elasticsearch, constructor

Contentful

— Headless CMS for editorial content optional

Manages landing pages, banners, blog posts, and campaign content independently of the commerce platform. Marketers can publish without engineering deploys.

Alternatives: sanity, storyblok, prismic, tina-cms

Cloudinary

— Image and video management

On-the-fly image transformation, responsive srcsets, and automatic format optimisation (WebP/AVIF). Critical for product imagery performance on PDPs.

Alternatives: imgix, cloudinary-sdk

Stripe

— Payments

Stripe Payment Intents API handles cards, wallets, and local payment methods globally. Pairs cleanly with headless checkout flows.

TaxJar

— Sales tax calculation and remittance optional

Real-time tax calculation at checkout for US nexus and Canada. TaxJar AutoFile handles remittance, removing the biggest compliance headache for US merchants.

Alternatives: avalara

Klaviyo

— Email and SMS marketing optional

Deep Shopify/custom event integration for cart abandonment, post-purchase flows, and segmented campaigns. Klaviyo's CDP capabilities reduce the need for a separate analytics tool.

Gotchas

⚠️ Inventory sync lag: product availability shown in the storefront can be stale by seconds to minutes when using CDN caching. Implement real-time availability checks on add-to-cart, not just on PLP renders.
⚠️ International tax complexity: TaxJar covers US/Canada well but EU VAT (OSS regime) and UK VAT require Avalara or a merchant-of-record solution like Paddle to avoid manual VAT registration in 27+ countries.
⚠️ Storefront cache invalidation: ISR revalidation works well for product pages but flash-sale price changes or flash-out-of-stock events require on-demand revalidation webhooks from the commerce platform.
⚠️ Checkout redirect vs. embedded: Shopify's hosted checkout cannot be fully embedded in a custom storefront (Shopify Plus unlocks some customisation). Medusa/Saleor allow fully custom checkout but increase PCI scope.
⚠️ Bundle complexity: a composable stack of 8-12 services means 8-12 vendor contracts, SLA negotiations, and potential cascade failures. Start with a minimal stack and add services only when the pain is clear.