Headless B2B Storefront

B2B buyers expect consumer-grade digital experiences, but B2B commerce has unique requirements: customer-specific pricing, approval workflows, purchase orders, and organizational hierarchies. Traditional server-rendered storefronts struggle to deliver fast, modern UIs while handling this complexity. Separating the frontend from the commerce engine lets frontend teams build with modern frameworks while the commerce platform handles business logic.

Graph provides a fast, CDN-backed query layer for product browsing. Commerce APIs handle transactional operations that require real-time data. React (or Next.js) delivers the interactive storefront experience. Together, they create a B2B storefront that is fast for browsing and reliable for transactions.

┌───────────────────────────────────────────────────┐
│               React / Next.js Frontend             │
│  Catalog browsing, search, quick order, checkout   │
└──────────┬────────────────────────┬───────────────┘
           │ GraphQL queries        │ REST API calls
           │ (read-only catalog)    │ (transactions)
           ▼                        ▼
┌─────────────────┐      ┌──────────────────────────┐
│ Optimizely Graph │      │   Commerce APIs           │
│ Products, search │      │ Cart, pricing, orders,    │
│ facets, content  │      │ approvals, inventory      │
└────────┬────────┘      └──────────┬───────────────┘
         │                          │
         └──────────┬───────────────┘
                    │
         ┌──────────┴──────────┐
         │  Commerce Configured │
         │  Catalog, pricing,   │
         │  inventory, orders   │
         └─────────────────────┘

The key architectural decision is splitting read operations (catalog browsing, search, product details) from write operations (cart management, checkout, order submission).

B2B storefronts show different prices and availability per customer. Fetch base product data from Graph, then enrich with customer-specific pricing from the Commerce API.

async function getProductWithPricing(slug, customerId) {
  // Fast catalog data from Graph
  const product = await graphFetch(PRODUCT_QUERY, { slug });

  // Customer-specific pricing from Commerce API
  const pricing = await commerceApi.getPricing(
    product.sku, customerId
  );

  return { ...product, pricing };
}

B2B buyers frequently reorder known products. Build a quick order pad that accepts SKU and quantity pairs, validates them against the Commerce API, and adds them to cart in a single operation.

Route the bulk add-to-cart through the Commerce API, which validates inventory, applies customer pricing, and enforces minimum order quantities in one round trip.

When an order requires approval, the Commerce API returns a “pending approval” status. Build a dashboard view that shows pending orders to approvers and lets them approve or reject with comments.

Use WebSocket or polling to notify buyers when their order status changes, so they know when an approval decision has been made without refreshing the page.

This architecture works best for B2B organizations that want a modern frontend experience with complex commerce logic. If your B2B requirements are straightforward (simple catalog, no approvals, standard pricing), the built-in Commerce storefront may be sufficient. The headless approach adds complexity that pays off when you need multiple frontends, fast iteration on UI, or integration with existing frontend infrastructure.