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ä.