Magento Headless / PWA

Honest answer: about 10% of Magento stores benefit from headless. The shortlist:

• Mobile traffic > 60% AND mobile conversion lagging desktop by 30%+
• You want a real PWA (offline / add-to-homescreen / push notifications) or native iOS/Android app sharing the storefront codebase
• Multi-region with 4+ storefronts and the marketing team wants per-region content control on the frontend
• You have an in-house Node/React/Vue team already, the infra burden is acceptable

For everyone else, speed problems, conversion lifts, Lighthouse scores, Hyvä gets you 90% of the wins at 20% of the cost. We turn down 9 in 10 headless inquiries on this basis.

Hyvä is the right answer for ~90% of Magento stores. It ships Lighthouse 95+, Core Web Vitals green by default, conversion lifts of 8-25%, and uses your existing Magento infrastructure. Project cost: $499, $999. Timeline: 2-6 weeks.

Headless is the right answer when you specifically need: real PWA (offline, install-to-homescreen, push), native iOS/Android sharing storefront code, or a frontend team that wants to ship 10x faster than Magento’s release cadence allows. Project cost: $7,999, $50k+. Timeline: 8-24 weeks. Plus ongoing Node infra ($100, $500/month).

Our headless audit ($999) gives you a written go / no-go answer. Often the recommendation is “just do Hyvä”.

Each shines in a specific situation:

• PWA Studio (React), Adobe’s official path. Best if you’re on Adobe Commerce + want vendor support + already have React expertise. Heaviest infra burden: separate Node deployment, build pipeline, separate CDN.
• Vue Storefront (Vue 3 / Nuxt 3), Best if your team already writes Vue. Strong plugin ecosystem (Algolia, Stripe, Klarna). Cleaner DX than PWA Studio. Still needs Node infra.
• Hyvä-headless (Astro / Next.js + Hyvä Storefront API), The pragmatic middle path. Get Hyvä speed, headless flexibility, but with edge-rendered HTML so SEO is bulletproof. Lower infra burden than PWA Studio. Best for content-heavy stores.

The audit picks the right one for your specific stack.

Real-world ranges (we publish honest pricing):

• Headless audit, $999 fixed. 60-min call + GraphQL coverage assessment + written report + infra cost estimate.
• Standard headless build, $7,999 fixed. 8-12 weeks. Frontend, GraphQL Mesh, up to 10 custom resolvers, payment gateways, service worker, blue-green deploy.
• Enterprise headless, Custom (typically $25k, $80k). 12-24 weeks. Multi-region, B2B, native iOS/Android via React Native or Capacitor, custom checkout.

Plus ongoing infra: Vercel/Netlify $20, $500/month + Magento backend hosting (unchanged). Be wary of agencies quoting $150k+, that’s usually scope creep, not value.

Yes, if you SSR (server-side render) the storefront. Static-site generation (SSG) or SSR via Next.js / Nuxt 3 / Astro produces fully-rendered HTML at the edge. Googlebot sees the same HTML a user does. Lighthouse scores typically improve (LCP from 2.5s → 0.8s on a good edge deploy).

The dangers:

• Pure CSR (client-side rendering only) is a SEO death warrant. Don’t.
• URL drift, if the new frontend changes URL structure, you lose rankings. We do a pre-migration crawl + 301 redirect map.
• Hreflang / canonicals must be re-implemented on the frontend. Magento’s built-in tags don’t carry over.

Every headless build we ship includes a Screaming Frog pre/post crawl + URL parity report.

For 80% of storefront features, yes. Adobe’s GraphQL covers products, categories, cart, checkout, customer, orders, search, CMS pages, URL rewrites, store config. The 20% gap typically:

• Custom EAV attributes (we add resolvers)
• B2B queries (companies, quotes, requisition lists, partial in Adobe Commerce)
• Custom checkout fields / extension data
• Third-party extension data (loyalty, reviews from non-native sources, custom recommendations)

Our audit catalogues every gap on your store and quotes the resolver work. GraphQL Mesh stitches Magento’s GraphQL with Algolia / contentful / your ERP into one schema. We document the full schema as part of every build.

You have three options:

• Build native headless checkout, Most expensive ($3k, $15k extra). Full UX control. Required for B2B / multi-step / saved-quote flows.
• Hand off to Magento checkout via SSO, Cheapest. Cart on headless, “Checkout” button redirects to Magento Hyvä Checkout (or Luma). Ugly URL transition but works in days, not weeks.
• Embed Magento checkout in iframe, Don’t. SEO mess, payment-gateway PCI complications.

For most $7,999 builds we recommend hand-off to Hyvä Checkout, it’s already 1-page and <1s, which beats most custom headless checkouts. Build native only if you’re in the Enterprise tier.

Yes, the frontend lives separately:

• Vercel, $20/month Pro tier covers most stores. Best DX. Edge runtime + automatic SSG.
• Netlify, Similar pricing. Good if you want Netlify Functions for edge resolvers.
• Self-host Node, If you have an internal ops team. Add ~$50, $200/month per region for the Node app + CDN.

Your Magento backend stays where it is. No changes needed. Magento becomes a GraphQL API + admin panel + checkout endpoint, nothing else changes server-side. We can warm-up edge caches and pre-render top-200 pages so your origin server load actually drops after going headless.

Yes, this is the strongest case for going headless.

PWA: We ship service worker + manifest + push notifications + offline support on every headless build. Users can install your store to their home screen with one tap. Looks like a native app, no app-store review.

Native iOS / Android: Two paths in our Enterprise tier:

• React Native, Share GraphQL queries + business logic with the web frontend. Separate UI components. ~30% code reuse.
• Capacitor, Wrap the PWA into a native shell. ~80% code reuse. Push notifications, deep linking, app-store distribution. Cheapest path to “real” iOS/Android.

Both ship to Apple App Store + Google Play. Apple takes ~7 business days for first review.

Headless makes multi-store easier in some ways, harder in others. The frontend can:

• Route per locale via Next.js / Nuxt i18n routing (`/en-gb`, `/de-de` etc.)
• Pull Magento store_view_id per route, clean separation
• Mix CMS content from a headless CMS (Contentful / Sanity) per region

The complications:

• Hreflang on the frontend (we handle)
• Multi-currency display needs per-route price formatting
• Per-region payment methods need conditional checkout logic (Klarna in DE, Razorpay in IN, etc.)
• Per-region inventory requires Magento MSI configured + GraphQL queries that respect source-stock per region

Our Enterprise tier ships full multi-region orchestration. 8-12 weeks typical for 4-6 stores.

Yes, this is one of the strongest cases for headless. Adobe Commerce B2B exposes most features via GraphQL: companies, company users, quote workflow (with limits), requisition lists, customer-specific pricing, shared catalogues.

The gaps you’ll fill with custom resolvers:

• Some quote-state transitions (approve / decline / counter)
• Net-30 / credit-limit balance display
• ERP-pulled tier-pricing
• Bulk CSV order upload

We’ve shipped 4 headless B2B builds (Adobe Commerce + Vue Storefront / Next.js). Typical timeline 12-16 weeks. The biggest win clients see: B2B buyers love a clean modern UX vs Magento’s default Luma B2B experience, which feels distinctly 2010s. Conversion uplift on quote-to-order conversion: typically 15-30%.

Real talk, this is where most agencies undersell the cost. Going headless adds:

• Two codebases to maintain, Magento backend AND headless frontend. Each has its own dependency tree, security patches, deployment pipeline.
• Frontend developer skillset, You need a React / Vue / Astro engineer on retainer. Magento PHP devs can’t do this work.
• GraphQL schema drift, Each Magento upgrade may change GraphQL responses. We document a regression-test suite as part of the build.
• Service worker bugs, Stale-while-revalidate logic gets tricky for cart / checkout. Plan for ~2-4 hours/month of frontend tuning.

Our retainer (~$999, $2,499/month depending on size) covers all of this. If you don’t have a frontend dev on staff and don’t want a retainer, headless is the wrong call, stay on Hyvä.