Headless commerce costs more to run than a theme because you keep your platform subscription and add hosting, monitoring, often a CMS, and, above all, developer time for upgrades and changes that a theme editor or an app would otherwise handle. Hosting is usually the smallest of those lines. Budget the running cost for 12 months before you approve a build, and compare it with what the headless store is expected to earn or save.
Build quotes get all the attention. The running cost is what decides whether a headless store was a good investment, and it is the number we most often see missing from proposals. This article lists every line we put into a 12-month estimate, a table you can fill in with your own figures, and how to budget so the site stays healthy after launch. If you are still deciding whether headless fits at all, read when headless commerce is worth it first.
What stays the same
Going headless does not remove your commerce platform. You still pay:
- The platform subscription. Shopify, BigCommerce or your WooCommerce hosting. See current tiers on Shopify’s pricing page and BigCommerce’s pricing page; they change, so check them on the day you budget.
- Payment processing. Checkout usually stays on the platform, so transaction and card fees do not change.
- Back-office apps. Apps for fulfilment, ERP sync, tax, subscriptions and so on keep running.
Some storefront apps go away, because their scripts or theme blocks do not apply to a custom front end. That is a saving, but often a replacement is needed: the same feature built in code or a headless-ready alternative with its own fee.
The new running costs
1. Front-end hosting
Your front end needs a host. On Shopify, Hydrogen can deploy to Oxygen, which Shopify’s Hydrogen docs list as included at no additional cost on most plans. Next.js is usually hosted on Vercel, whose pricing combines a per-seat plan with usage-based charges for function invocations, data transfer, image optimisation and more. The free Hobby plan is for non-commercial use, so a store needs a paid plan. Other hosts and self-hosting are possible, and they move cost from a bill to operations work.
What drives the number: traffic, how much is rendered on each request rather than cached, image optimisation volume, and the number of people who need seats.
2. Monitoring and error tracking
A theme fails in ways the platform notices. A custom front end fails in ways only your monitoring notices: a broken build, an expired API token, a slow API call, a JavaScript error on one browser. You need uptime checks, error tracking, and real-user performance data (Next.js documents reporting Web Vitals from the app). Many tools have free tiers that a small store may fit within; larger stores pay per event or per seat.
3. A CMS, if editors need one
Without a CMS, every content change is a developer task. Most headless builds add one: the platform’s own content tools (Shopify metaobjects, for example), WordPress used headlessly, or a hosted headless CMS. WordPress with WPGraphQL costs hosting plus maintenance; hosted CMSs charge per seat, per locale or per usage tier.
4. Upgrades and dependency maintenance
This is the line most often left out. Shopify releases a new API version every three months and supports each for at least 12 months, so a Shopify front end needs a version bump at least once a year. Next.js publishes upgrade guides for each major version, and every npm dependency gets security patches. Each update needs testing across cart, checkout hand-off, search and accounts.
5. Developer time for changes
On a theme, many changes happen in the editor or by installing an app. On headless, new sections, new page types, promotions logic and app replacements are development work. Most headless stores need a monthly development allowance, whether in-house or on retainer.
6. SEO and analytics upkeep
Structured data, sitemaps, redirects and tracking are part of the code. When products, categories or marketing tools change, someone updates them. Plan a small allowance for this.
12-month ownership: theme vs headless
The table below is a template. Replace each [X] range with quotes for your store. We do not publish generic figures because they vary too much with traffic, plan and team to be useful, and a confident-looking number would be worse than a blank.
| Cost line (12 months) | Theme store | Headless store | Notes |
|---|---|---|---|
| Platform subscription | [X]–[X] | [X]–[X] | Usually the same plan either way |
| Theme or front-end licence | [X] (one-off theme or none) | None | Headless replaces the theme |
| Storefront apps | [X]–[X] | [X]–[X] | Some drop out; some need headless alternatives |
| Front-end hosting and usage | None | [X]–[X] | Oxygen often adds nothing; Vercel is seats plus usage |
| Monitoring and error tracking | None | [X]–[X] | Free tiers may cover small stores |
| CMS | None | [X]–[X] | Platform content tools, WordPress or a hosted CMS |
| Upgrades (framework, API versions, dependencies) | [X] hours | [X]–[X] hours | At least one API version bump a year on Shopify |
| Development for changes | [X] hours | [X]–[X] hours | Headless turns editor tasks into code |
| SEO and analytics upkeep | [X] hours | [X] hours | Schema, sitemaps, redirects, tracking |
| Total | [X] | [X] | Compare with the expected gain, not just each other |
Costs people miss
These rarely appear in a first estimate, and each one has surprised a client of ours at least once:
- Preview and staging environments. Editors and QA need somewhere to see changes before they go live. Some hosts include preview deployments; others charge for extra environments or seats.
- Search. Platform search may not carry over to a custom front end in the form you want. A hosted search service adds a monthly fee based on records and queries.
- Image delivery. Optimising product images on the fly is billed by volume on some hosts. A large catalogue with many sizes adds up.
- Bot traffic. Crawlers and scrapers trigger renders and function calls just like customers. On usage-based hosting, they cost money unless pages are cached.
- Knowledge transfer. If the agency that built it leaves, the next team needs time to learn the codebase. Documentation written during the build is far cheaper than rediscovery later.
How to budget it
Start from what headless is meant to earn
Write down the problem headless solves and what it is worth: conversion on slow templates, a content experience that sells, a second storefront without a second theme, retired apps. If you cannot put even a rough value on it, the running cost will always look too high, and it may be.
Price the team, not just the hosting
Hosting is easy to quote and usually small. The development allowance is what keeps the site healthy. Agree up front how many hours a month go to upgrades, fixes and small changes, and who does them.
Choose the stack with running cost in mind
On Shopify, Hydrogen on Oxygen avoids a separate hosting bill; Next.js gives more flexibility at a hosting cost. We compare them in Hydrogen vs Next.js on the Storefront API.
Cache to cut usage
Usage-based hosting charges follow how much work the servers do. Pages rendered on every request cost more than cached ones. Static generation with on-demand revalidation (see Next.js ISR) keeps product and content pages fast and cheap. Our Next.js performance guide covers the common ways caching gets switched off by accident.
Schedule upgrades
Book a quarterly maintenance window: dependency updates, the API version bump when it is due, and a regression pass on cart, checkout hand-off, search and accounts. Small, regular upgrades cost less than one large catch-up every two years.
Running-cost checklist
- Platform plan confirmed, and whether it includes Oxygen if you use Hydrogen.
- Hosting plan and seats chosen; usage estimated from current traffic.
- Monitoring: uptime, errors and real-user Web Vitals in place before launch.
- CMS chosen, with seat and locale counts.
- Every storefront app reviewed: keep, replace or drop, with costs.
- Monthly development allowance agreed, with an owner.
- Quarterly upgrade window in the calendar.
- 12-month total compared with the expected gain.
Prices to confirm on the day
Platform and hosting prices change. Before you sign off a budget, check the live pages for Shopify, BigCommerce and Vercel, and the plan list for Oxygen in Shopify’s docs.
We quote the running cost alongside the build on every headless ecommerce project. If the numbers do not work, we say so and suggest the cheaper route, often speed work on the existing theme, or a better theme on Shopify or WooCommerce.