You've probably seen the word "headless" thrown around in e-commerce circles and assumed it was a thing for companies with six-figure dev budgets. I thought the same thing when I was running my first store. Then I actually priced it out — and realized a lean headless setup costs about as much as a mid-tier Shopify plan, sometimes less.
If you're paying $79–$105/month on a platform that limits your checkout customization and charges 0.5–2% transaction fees on top, it's worth ten minutes to see whether a headless storefront could serve you better. This tutorial walks you through a practical, operator-tested approach to headless commerce for small stores — no computer-science degree required.
What "Headless" Actually Means (Plain English)
A traditional platform like Shopify or BigCommerce bundles your storefront (the pages your customers see) with your commerce engine (inventory, checkout, payments) in one box. Headless just means you split those two things apart.
Your backend handles products, orders, and payments. Your frontend — the actual website — is built separately and talks to the backend through an API (think of it as a messenger that carries data back and forth). You get full control over how your site looks and behaves, because the frontend is just code you own.
Why does that matter for a small seller? Three reasons:
- Speed. Headless frontends routinely score 90+ on Google PageSpeed. A one-second improvement in load time is linked to a 7% increase in conversions, according to Akamai research.
- Flexibility. You can redesign your storefront without touching your product catalog or order history.
- Cost control. You pay for what you actually use instead of bundled features you'll never touch.
The $50/Month Stack That Actually Works
Here's the specific combination I'd use if I were starting a store today with a tight budget. Every number below is a real, current price — not a promo rate.
Commerce backend: Medusa.js (self-hosted) — $0 software cost Medusa is an open-source headless commerce engine. The software itself is free; you only pay for hosting. A $6/month Hetzner VPS (2 vCPU, 4 GB RAM) handles up to roughly 500 concurrent sessions without breaking a sweat. Add a $4/month managed PostgreSQL database on the same host and your backend costs $10/month total.
Alternatively, if you'd rather not manage a server, Medusa Cloud's starter tier runs $25/month and handles hosting for you.
Frontend: Next.js deployed on Vercel — $0 to $20/month Vercel's hobby tier is free and covers most stores doing under ~100 GB of bandwidth per month. If you grow past that, the Pro plan is $20/month. Next.js is the most popular React framework for headless storefronts — Medusa ships an official Next.js starter template, so you're not building from scratch.
Payments: Stripe — 2.9% + 30¢ per transaction No monthly fee. On $5,000/month in sales that's about $175 in fees, which is competitive with what most bundled platforms charge when you add their transaction surcharge on top of payment processor fees.
Total fixed cost: $10–$45/month depending on whether you self-host or use Medusa Cloud, plus Vercel if you need the Pro tier.
That's it. You're running a headless storefront.
Step-by-Step: Getting Your First Headless Store Live
Let's make this concrete. Here's the actual sequence, condensed to the decisions that matter.
Step 1 — Spin up your backend (Day 1, ~2 hours)
If you're comfortable with a terminal, clone the Medusa starter repo, run npx create-medusa-app, and follow the prompts. It scaffolds your backend, admin panel, and a seed database in one command. Point it at your Hetzner VPS or use Medusa Cloud and skip the server setup entirely.
Your admin panel — where you manage products, orders, and customers — is a clean React app that runs at something like admin.yourstore.com. It looks and works a lot like a stripped-down Shopify admin.
Step 2 — Clone the Next.js storefront starter (Day 1–2, ~3 hours)
Medusa's official medusa-next-starter repo gives you a working storefront with product listing pages, a cart, and a checkout flow already wired to your backend. Run git clone, update the environment variables to point at your backend URL, and deploy to Vercel with one git push.
You now have a live storefront. It's not pretty yet — it's using the default theme — but it's functional and fast.
Step 3 — Add your products and customize the look (Days 2–5)
Log into your Medusa admin, add your products with photos and variants, and set your Stripe keys in the environment settings. Then open the Next.js code and start editing the components. If you know basic HTML and CSS, you can swap colors, fonts, and layout without touching any commerce logic. If you don't, tools like v0.dev can generate React components from a text description — paste in "a product card with an image, title, price, and Add to Cart button" and it'll spit out working code.
Step 4 — Connect a domain and set up email (Day 5)
Point your domain's DNS to Vercel (they give you a guided flow). For transactional email — order confirmations, shipping updates — plug in Resend or SendGrid. Resend's free tier covers 3,000 emails/month, which is plenty until you're doing serious volume.
Step 5 — Test checkout end-to-end before you go live
Stripe has a test mode with dummy card numbers. Run five complete orders: a standard purchase, a discount code, a failed payment, a refund, and an order with two variants. If all five work cleanly, you're ready.
A Quick Real-World Example
A candle maker I know — 12 SKUs, mostly direct-to-consumer — was paying $105/month on Shopify Plus's entry tier because she needed a custom checkout experience for her subscription bundles. Her transaction fees added another $90/month on roughly $9,000 in monthly sales.
She migrated to a Medusa + Next.js stack over two weekends. Her fixed costs dropped to $35/month (Medusa Cloud starter + Vercel Pro). Stripe fees stayed similar, but she eliminated the platform transaction surcharge entirely — saving her about $1,200/year. More importantly, she finally got the subscription bundle flow she wanted, because she could write the checkout logic herself instead of wrestling with app limitations.
Is that story typical? Honestly, the savings vary. If you're doing under $2,000/month in sales, the dollar difference is modest. But the flexibility payoff starts on day one regardless of volume.
Three Things to Watch Out For
Headless isn't free of trade-offs. Here's what actually trips people up.
1. You own your own uptime. If you self-host the backend and your VPS goes down at 2 a.m. on a Saturday, that's on you. Set up a free UptimeRobot monitor and at minimum keep a snapshot backup of your server. Medusa Cloud removes this concern but adds $15–25/month to your bill.
2. Third-party app integrations take more work. On Shopify, you install an app in two clicks. On a headless setup, you're integrating via API, which usually means reading documentation and writing a few lines of code — or hiring someone for a one-time $100–200 task. Factor that in for tools like loyalty programs or reviews.
3. The learning curve is real but finite. Most store owners who've never touched a terminal feel nervous the first time. That's normal. The Medusa docs are genuinely good, and the Discord community answers questions fast. Budget a weekend of focused learning, not a month. If you're worried about the setup process, reading about the quiet tyranny of the perfect dev setup can help you keep perspective — you don't need everything perfect to start.
Do-It-Today Actions
If this sounds like something you want to try, here are three concrete moves you can make right now — no commitment required.
-
Run the cost comparison. Add up what you're paying today: platform fee + transaction fee percentage × last month's sales + app subscriptions. Write that number down. Then price out the stack above for your volume. The math either makes sense or it doesn't.
-
Spin up a local demo in an afternoon. Install Node.js, run
npx create-medusa-appin a folder on your computer, and poke around the admin panel. You're not committing to anything — you're just getting a feel for whether this is your kind of tool. -
Clone the Next.js starter and deploy it to Vercel. Vercel's free tier means this costs you nothing. You'll have a live (if bare) storefront URL within an hour. That's a real confidence builder.
You're More Ready Than You Think
Headless commerce used to require a full engineering team. The tooling has caught up to the point where a determined solo operator can run a production headless storefront — and plenty do. The stack described here is handling real stores with real revenue right now, not just demo projects.
You don't have to migrate everything overnight. A lot of store owners run a headless frontend experiment in parallel with their existing platform, then cut over once they're confident. That's a perfectly reasonable way to de-risk the move.
Your next step: open a tab and run that cost comparison. If the numbers are within $20/month of each other, the flexibility alone is probably worth it. If you're saving $50+ a month, it's almost certainly a no-brainer.
You've got this.