The Three Commerce Architectures, Defined Clearly
The commerce platform debate has gotten muddier every year as vendors blur their positioning. Before you can choose the right architecture for your business, you need a clean definition of what each one actually is, not what a sales deck claims.
Traditional Shopify is a fully managed platform where the storefront, cart, checkout, and backend are all delivered by Shopify. You customize through themes (Liquid templates), apps from the App Store, and limited API access. The storefront and commerce engine are tightly coupled. Shopify handles hosting, security, PCI compliance, and CDN. You pay monthly fees and transaction fees in exchange for not managing infrastructure. Shopify Basic starts at $39 per month; Shopify Plus starts at $2,300 per month for high-volume brands.
Headless commerce decouples the frontend (what customers see) from the backend commerce engine (cart, checkout, inventory, orders). The backend could be Shopify Plus used as a headless API, or a purpose-built headless platform like Medusa, Saleor, or Commerce.js. Your team builds the frontend independently using Next.js, Nuxt, Astro, or any framework you choose, then connects it to the commerce backend via APIs. Shopify Hydrogen is Shopify's own headless framework built on Remix, designed to give you a custom frontend while keeping Shopify as the commerce engine.
Fully custom commerce means you build both the frontend and the backend commerce logic from scratch. No off-the-shelf platform powers your cart or checkout. Your engineering team implements product catalogs, pricing engines, cart logic, payment processing (via Stripe or Braintree), order management, and inventory from the ground up. This is rare and expensive, but it is the only approach that gives you complete control over every business rule.
Most of the confusion in this debate comes from vendors marketing headless capabilities that are actually just API access bolted onto a coupled platform. True headless means your frontend has zero dependency on the platform's rendering layer. If swapping your frontend does not require touching the backend, you are headless. If the two are entangled, you are not.
When Shopify Wins: Speed, Simplicity, and Under $5M Revenue
Shopify is the right choice for far more businesses than the headless hype would have you believe. There is no prize for building a complex architecture when a simpler one meets your needs. Here is when Shopify wins outright.
You are launching in under 90 days. A well-configured Shopify store using a premium theme like Prestige or Symmetry can go from zero to live in 4 to 8 weeks. A headless build takes 3 to 6 months minimum. If time to market is your priority and you are not yet doing $1M in revenue, Shopify's speed advantage is enormous. Every week in development is a week you are not selling.
Your catalog is standard. Shopify's product model handles variants (size, color, material) cleanly up to 100 variants per product. If your catalog fits that structure, you get all of Shopify's checkout optimization, inventory management, and analytics without building any of it. For apparel, home goods, beauty, and most DTC categories, this is plenty.
You are under $5M in annual revenue. Below this threshold, the engineering investment required for headless or custom commerce rarely pays off. You are better off allocating budget to marketing, inventory, and customer acquisition than to infrastructure that will not meaningfully move conversion rates at your volume.
You want predictable costs. Shopify's pricing is fixed and transparent. At $79 per month (Shopify plan), you get hosting, CDN, security, and a checkout that converts. Compare that to the ongoing engineering costs of maintaining a headless stack. For lean teams, Shopify's opinionated constraints are a feature, not a bug.
- Shopify Basic: $39 per month, 2% transaction fee without Shopify Payments, best for sub-$100K revenue
- Shopify: $79 per month, 1% transaction fee, best for $100K to $1M revenue
- Shopify Advanced: $299 per month, 0.5% transaction fee, best for $1M to $5M revenue
- Shopify Plus: $2,300 per month minimum, 0.15% transaction fee, custom checkout Scripts and Functions, best above $5M
Shopify's ecosystem is also underrated. Over 8,000 apps cover subscriptions (Recharge), reviews (Okendo), loyalty (LoyaltyLion), upsells (CartHook), and virtually every commerce use case. Before building custom functionality, check the App Store. Chances are good that a $30 per month app solves your problem faster than a 3-week engineering sprint.
When Headless Commerce Wins: Multi-Channel, Custom UX, Performance
Headless commerce is not for everyone, but for the right brands, the performance and flexibility gains are substantial. The key is understanding which specific problems headless solves that Shopify cannot.
You sell across multiple channels with a single backend. If your commerce operations span a web storefront, a mobile app, physical kiosks, voice interfaces, and a B2B portal, headless is the architecture that makes this manageable. You maintain one backend (Medusa, Saleor, or Shopify Plus as API) and build tailored frontends for each channel. This is the core value proposition of headless, and it is genuinely powerful for omnichannel brands.
Your design and UX requirements are non-standard. Shopify themes have real constraints. Liquid templates are not React. If your brand requires a heavily animated, immersive product discovery experience, a 3D product configurator, or real-time personalization at the component level, you will spend enormous effort fighting Shopify's rendering layer. With Shopify Hydrogen or a fully headless Next.js frontend, you build exactly what you need using modern tooling.
Page speed is a competitive advantage. Shopify's Liquid-rendered storefronts typically score 60 to 80 on Google PageSpeed Insights (mobile). A Next.js headless storefront deployed on Vercel, with static generation and edge caching, routinely scores 90 to 100. The conversion impact is real: Google's research shows that a 0.1-second improvement in mobile load time increases conversion rates by 8% for retail sites. If you are doing $10M in revenue and your site converts at 2.5%, getting to 90-plus PageSpeed scores is worth a lot.
Specific tools that work well in a headless stack:
- Shopify Hydrogen: Best for brands already on Shopify Plus who want a custom frontend without changing their commerce engine. Built on Remix, hosted on Shopify's Oxygen infrastructure. Fastest way to go headless from Shopify.
- Medusa: Open source, Node.js-based commerce engine. Extensible, self-hosted or cloud-hosted via Medusa Cloud. Best for teams comfortable with JavaScript who want full control over the backend.
- Saleor: Open source, Python/Django backend with GraphQL API. Excellent for complex B2B scenarios, multi-currency, and custom pricing models. Stronger in Europe, well-documented.
- Commerce.js: Headless commerce API focused on developer experience. Good for smaller teams who want a managed backend without Shopify's constraints.
- Next.js on Vercel: The dominant frontend stack for headless storefronts. Server components, edge rendering, and built-in image optimization make it the default choice for performance-critical frontends.
For more on building the frontend layer, the ecommerce app development guide covers component architecture, cart state management, and checkout integration patterns in detail.
When Fully Custom Wins: Unique Business Logic and Complex Pricing
Fully custom commerce is genuinely rare, and most businesses that think they need it do not. But there are real scenarios where no off-the-shelf platform handles your requirements, and building from scratch is the only path forward.
Your pricing model does not fit standard commerce patterns. Subscription boxes with usage-based components, B2B contracts with negotiated line-item pricing and approval workflows, dynamic pricing that reacts to inventory levels and customer tier in real time, marketplaces where commission structures vary by seller and category. If your pricing logic requires more than 5 pages to document, you are likely beyond what even Shopify Functions can handle cleanly.
You operate a marketplace, not a single-brand store. Multi-vendor marketplaces with complex seller onboarding, split payments, and separate inventory management per vendor are hard to implement on Shopify. The App Store has marketplace tools, but they introduce limitations that compound over time. Building on a custom backend gives you full control over the seller-buyer relationship. Our multi-vendor marketplace development guide covers the architectural decisions in detail.
You have regulatory or compliance requirements that platform vendors cannot meet. Healthcare commerce, defense contractors, government procurement, financial services with specific audit trail requirements. These cases require infrastructure control that SaaS platforms cannot offer.
What fully custom actually costs:
- Initial build: $200,000 to $800,000 depending on scope, team location, and complexity
- Timeline: 6 to 18 months from kickoff to production-ready
- Ongoing engineering: 2 to 4 full-time engineers minimum to maintain and improve the platform
- Infrastructure: $3,000 to $15,000 per month depending on traffic and architecture choices
- Security and compliance: add 20 to 30% to any estimate for PCI DSS compliance, penetration testing, and audit tooling
The total cost of ownership for a custom commerce platform over 3 years often exceeds $1.5M when you include engineering salaries, infrastructure, and the opportunity cost of engineers building platform features instead of growth features. This is only rational if the platform differentiation directly drives revenue that exceeds that cost.
Cost Comparison Across All Three Approaches
Cost comparisons for commerce platforms are almost always misleading because they compare platform fees without including the true total cost of ownership. Here is an honest breakdown across all three approaches over a 3-year horizon for a mid-market brand doing $5M to $20M in annual revenue.
Traditional Shopify (Shopify Plus)
- Platform fee: $2,300 to $2,500 per month ($83,000 to $90,000 over 3 years)
- Theme and initial customization: $15,000 to $40,000 one-time
- Apps (subscriptions, reviews, loyalty, upsells): $500 to $2,000 per month ($18,000 to $72,000 over 3 years)
- Developer retainer for ongoing changes: $3,000 to $8,000 per month ($108,000 to $288,000 over 3 years)
- Transaction fees (0.15% on Plus, assuming $10M revenue per year): $15,000 per year ($45,000 over 3 years)
- Total 3-year cost: $269,000 to $535,000
Headless Commerce (Shopify Plus as Backend, Next.js Frontend)
- Shopify Plus platform fee: $2,300 to $2,500 per month ($83,000 to $90,000 over 3 years)
- Initial headless build (Next.js storefront, API integration, CI/CD): $80,000 to $200,000 one-time
- Vercel hosting: $150 to $500 per month ($5,400 to $18,000 over 3 years)
- Engineering team (1 to 2 frontend engineers, retainer or in-house): $8,000 to $20,000 per month ($288,000 to $720,000 over 3 years)
- Transaction fees: same as Shopify Plus, $45,000 over 3 years
- Total 3-year cost: $501,000 to $1,073,000
Fully Custom Commerce
- Initial build: $300,000 to $600,000 one-time
- Engineering team (3 to 5 engineers in-house or contract): $25,000 to $60,000 per month ($900,000 to $2,160,000 over 3 years)
- Infrastructure (AWS or GCP, databases, CDN, search): $3,000 to $12,000 per month ($108,000 to $432,000 over 3 years)
- Payment processing (Stripe: 2.9% plus $0.30 per transaction, negotiable above $1M): $290,000 per year at $10M volume ($870,000 over 3 years)
- Security, compliance, audits: $30,000 to $80,000 per year ($90,000 to $240,000 over 3 years)
- Total 3-year cost: $2,298,000 to $4,332,000 (not including payment processing, which Shopify also passes through)
The cost difference between traditional Shopify and headless is significant but often worth it for brands above $10M with performance and flexibility requirements. The gap between headless and fully custom is enormous. Choose fully custom only when the platform differentiation creates a measurable, quantifiable revenue advantage that justifies the delta.
Performance Benchmarks and Conversion Impact
Performance is where headless commerce makes its strongest case, and the data is concrete enough to build a business case around. Here is what you can realistically expect from each architecture.
Traditional Shopify (Liquid-rendered storefront)
PageSpeed Insights scores of 55 to 75 on mobile are typical for Shopify stores, even with aggressive optimization. Shopify's CDN is good, but Liquid rendering and the weight of third-party scripts from apps drag scores down. Core Web Vitals: Largest Contentful Paint typically lands at 2.5 to 4 seconds on mobile, Total Blocking Time at 300 to 600ms. These are not disqualifying numbers for most brands, but they leave performance on the table.
Headless with Next.js and Vercel (static generation plus edge functions)
PageSpeed scores of 88 to 98 on mobile are achievable and realistic for well-built headless storefronts. Static generation pre-renders product and collection pages at build time. Edge functions serve personalized content from Vercel's 100-plus edge locations with sub-50ms response times. Largest Contentful Paint at 1.2 to 1.8 seconds on mobile. Total Blocking Time under 100ms.
The conversion impact math: if your Shopify store converts at 2.3% and you are doing $8M in revenue, improving mobile LCP from 3.5 seconds to 1.5 seconds has a documented 15 to 20% conversion lift potential. At $8M revenue, a 15% conversion improvement is $1.2M in additional annual revenue. That easily justifies a headless migration investment of $100,000 to $200,000.
Fully custom commerce
Performance is entirely in your hands. Done well, custom commerce can match or exceed headless Next.js performance. Done poorly, it can perform worse than Shopify. Unlike Shopify or headless with Vercel, you own the infrastructure decisions. Teams that invest in edge caching, image optimization pipelines, and database query optimization achieve excellent results. Teams that do not often see degraded performance over time as technical debt accumulates.
Beyond page speed: checkout conversion rates
Shopify's checkout is one of its strongest arguments. It converts at 15 to 36% above industry average according to Shopify's own research, backed by years of optimization and Shop Pay's one-click experience. Headless frontends that replace Shopify's native checkout with a custom implementation typically see lower checkout conversion unless they invest heavily in checkout UX optimization. The best headless setups keep Shopify's native checkout (hosted at checkout.shopify.com) while customizing the pre-checkout storefront experience.
Migration Paths Between Approaches
Few brands make an irreversible architecture decision. The reality is that most businesses start on Shopify, graduate to headless when their requirements outgrow the platform, and very occasionally move to fully custom when headless becomes a constraint. Understanding the migration path before you start saves enormous cost and pain.
Traditional Shopify to headless Shopify (Hydrogen)
This is the lowest-friction migration path available. Your Shopify backend, products, orders, customers, and checkout stay exactly where they are. You build a new Next.js or Hydrogen frontend, connect it to the Shopify Storefront API, and migrate traffic over in stages. A typical phased migration: build the new headless frontend (8 to 14 weeks), run both frontends in parallel with an A/B split (4 weeks), cut over fully once the headless frontend demonstrates equal or better conversion. Total timeline: 3 to 5 months. Cost: $80,000 to $180,000 depending on team and complexity.
Traditional Shopify to headless with a different backend (Medusa or Saleor)
This is more involved because you are also migrating the commerce engine. You need to export products, customers, orders, and historical data from Shopify and import into the new platform. Payment methods, tax rules, shipping zones, and discount logic all require remapping. Plan for 4 to 8 months and $150,000 to $350,000. The benefit is escaping Shopify's pricing and transaction fees permanently, which matters at high revenue volumes.
Headless to fully custom
This migration is rare and expensive. If you find yourself needing it, the most common reason is that your pricing or order management logic has grown beyond what any backend platform handles cleanly. The migration strategy: build the custom backend alongside the existing headless backend, migrate functionality module by module (pricing first, then cart, then checkout, then order management), and maintain the existing frontend throughout. This avoids rewriting everything at once and keeps the business running during the transition. Expect 9 to 18 months and $400,000 to $800,000 in engineering costs.
What to preserve across any migration
- URL structure: redirects kill SEO if not handled carefully. Map every product and collection URL to its equivalent in the new system before launch.
- Customer accounts: password-less login migration via email magic links reduces churn from forgotten passwords during account system transitions.
- Order history: customers expect to see past orders regardless of platform changes. Build a migration script that imports historical orders into the new system before cutover.
- Metafields and custom data: Shopify metafields that power custom product information need to be exported and remapped to the equivalent data structures in the new backend.
Decision Framework: Revenue and Complexity Thresholds
Every architecture decision conversation eventually needs to produce an answer. Here is the framework we use with clients to move from analysis to decision.
Start with revenue and growth trajectory, not features.
- Under $1M annual revenue or pre-launch: use traditional Shopify, no exceptions. Speed to market and cost efficiency matter more than architecture purity at this stage.
- $1M to $5M annual revenue: use Shopify Advanced or Plus. Invest savings in marketing and product. Only consider headless if you have a genuinely specific UX or multi-channel requirement that Shopify demonstrably cannot meet.
- $5M to $20M annual revenue: headless Shopify (Hydrogen or Next.js with Storefront API) becomes worth evaluating seriously if mobile performance is a conversion bottleneck or if multi-channel distribution is a core part of your growth strategy.
- Above $20M annual revenue: headless is almost always justified. The performance improvements, the ability to build custom buying experiences, and the reduction in Shopify's percentage-based fees all have measurable impact at this scale. Evaluate fully custom only if your business model genuinely requires backend logic that no platform supports.
Then apply the complexity test.
Score your requirements across four dimensions: catalog complexity (standard variants score 1, complex configurable products score 3, fully custom product logic scores 5), pricing complexity (fixed pricing scores 1, tiered B2B pricing with approval workflows scores 5), channel complexity (single storefront scores 1, three or more channels with unified inventory scores 5), and UX uniqueness (standard product pages score 1, heavily custom immersive experience scores 5).
Total score 4 to 8: traditional Shopify is likely sufficient. Total score 9 to 14: headless commerce is worth serious evaluation. Total score 15 to 20: either headless with significant custom backend extensions or fully custom commerce is warranted.
Finally, validate against your team's capabilities.
Headless commerce requires engineers who are comfortable with React or Next.js, GraphQL or REST API integration, CI/CD pipelines, and edge deployment. If your current team is primarily Shopify theme developers, headless will require either hiring or partnering with a development shop that has built headless storefronts in production. Underestimating the engineering lift is the most common reason headless migrations go over budget and over timeline.
The architecture that wins is not the one with the most features or the most impressive technical specifications. It is the one that matches your team's capabilities, your budget reality, your growth trajectory, and your customers' actual needs. Build what your business requires today with a clear path to where you will need to be in 24 months. Do not over-engineer for a scale you have not yet reached, and do not under-build for a scale you are approaching fast.
We help brands choose and build the right commerce architecture. Book a free strategy call to evaluate your options.
Need help building this?
Our team has launched 50+ products for startups and ambitious brands. Let's talk about your project.