Why Commerce-UI went headless
Commerce-UI, the boutique agency behind brands like Magda Butrym and Lift Foils, builds ecommerce experiences for design-led labels. Its approach pairs Shopify's commerce engine with a Next.js frontend deployed on Vercel — separating the presentation layer from backend functionality to sidestep what the agency calls the “platform ceiling” of templated solutions.
“One way of doing things means simplicity—it’s foolproof, and things are well integrated with each other. It’s a huge part of Shopify's success. But let’s not forget the fact that closed architecture also means less flexibility. It's natural that if you limit options, you accidentally lose some good options in the process. Headless, on the other hand, is ‘open architecture’. Endless options.”
Commerce-UI
That flexibility shows up in how Commerce-UI handles design, international growth, and performance — all areas where the agency needs more control than a conventional platform affords.
Engineering brand expression
Commerce-UI pairs engineers with handpicked designers from proof-of-concept through release, aiming to translate a brand's in-person presence — such as Magda Butrym's showroom style — into the online storefront.
This collaboration has produced features that would be difficult to ship on a closed platform:
- Custom URL structures: Instead of letting backend inventory dictate public-facing URLs, Next.js on Vercel allows customized, localized routes for every brand.
- Internationalization: When Lift Foils went viral and doubled site traffic overnight, Commerce-UI used Edge Middleware to spin up dedicated, localized pages per region. The setup handled traffic spikes of 200% while keeping the experience fast for customers worldwide.
- A tailored CMS experience: A headless CMS lets Commerce-UI curate editorial capabilities specific to a client's needs, capabilities that wouldn't exist without an open platform.
“Headless allowed us to build all the things that weren't possible in Liquid four years ago, without much effort. But more importantly, it makes us calm that it will handle new things in the future. With a native approach, you never know when you hit the platform ceiling.”
Commerce-UI
Putting developers in charge of performance
The core advantage of headless, according to Commerce-UI, is developer control over optimization. With full authority over caching and rendering decisions, teams can build pages that load quickly and transition smoothly.
Next.js provides three capabilities the agency leans on:
- Advanced performance optimization — with granular control over the server environment and cache layer.
- Fast custom integrations — API routes and route handlers are quick to spin up without added complexity.
- Third-party widget optimization — for design-heavy projects that need fine-grained control over every UI element.
Out of the box, Next.js supports server-side rendering, static site generation, and API routes, letting Commerce-UI build dynamic yet fast sites that deliver a static-like user experience.
Moving fast without redeploys
The Next.js, Vercel, and Shopify combination lets Commerce-UI iterate with speed. Vercel's Draft Mode and Incremental Static Regeneration (ISR) enable content creation and updates without requiring a full site redeploy.
Automatic Preview Deployments generate a live preview for every Git branch, with true-to-production URLs that anyone on the team can visit. This gives Commerce-UI and external designers a single source of truth for reviewing changes in real time.
Figma-style comments can be placed directly on those preview deployments, so team members can flag exactly what needs attention instead of trading screenshots. GitHub and Slack integrations keep the feedback loop actionable.
Serving dynamic data at static speeds
Personalized ecommerce requires processing large amounts of dynamic data while maintaining static-like performance for users. Vercel's Framework-defined Infrastructure (FdI) automatically handles app delivery with each Next.js build, removing infrastructure concerns from the team's workflow.
Vercel's Edge Network caches content at the edge, with automatic static file caching for every deployment. Commerce-UI also caches dynamic content — including server-side rendered pages — allowing the agency to serve sites with thousands of product subpages without performance degradation.
The Vercel Data Cache is a globally distributed, ephemeral cache accessible from serverless and edge runtimes. It allows granular data caching in the region where the function executes, with different treatment based on response type. The result: Commerce-UI handles dynamic data such as personalized recommendations and real-time inventory updates at static-like speeds.
Enhanced reporting and insights help the agency monitor real user behavior and adjust accordingly. Platform scalability removes concerns about traffic surges, and because infrastructure management is integrated into the developer workflow, Commerce-UI doesn't need a separate dev-ops team to keep projects accessible worldwide.
