You've probably heard the word "headless" thrown around in e-commerce circles and assumed it was a thing for companies with six-figure dev budgets and a team of engineers on retainer. I made the same assumption when I was running my first store. Turns out, the gap between "enterprise headless" and "scrappy SMB headless" has quietly closed over the last two years — and you can now get a working setup running for around $50 a month.
This tutorial walks you through exactly how to do that: which pieces you actually need, which ones you can skip, and what a realistic budget looks like at each stage.
What "Headless" Actually Means (Plain English)
A traditional storefront bundles the part customers see (the front end) with the part that manages products, orders, and payments (the back end). Change one, and you're often touching the other. Headless commerce splits those two things apart. Your back end — usually called a "headless CMS" or "commerce API" — handles data. Your front end is a completely separate app that pulls that data and shows it to shoppers however you want.
Why does that matter for a small seller? Three reasons:
- Speed. Decoupled front ends, especially ones built on frameworks like Next.js, routinely score 90+ on Google's Core Web Vitals. Faster pages convert better — Google's own data puts the conversion lift at roughly 12% for every one-second improvement in load time.
- Flexibility. You're not locked into one theme marketplace. You can design exactly the shopping experience you want.
- Portability. If you decide to switch commerce back ends later, your storefront stays. You're not rebuilding from scratch.
The catch used to be cost and complexity. Let's tackle both.
The Four Building Blocks You Actually Need
Forget the enterprise diagrams with twelve boxes. For a small store doing under $500K a year, you need four things:
1. A Commerce Back End (the data layer)
This is where your products, inventory, pricing, and checkout live. Options that work well at SMB scale:
- Medusa.js — open-source, self-hostable, free to use. You pay for hosting (more on that in a moment).
- Crystallize — has a generous free tier up to 1,000 SKUs and 25,000 API calls per month.
- Swell — $99/month starter plan, but includes hosting, so the math often works out.
For this tutorial, we'll use Medusa.js because the licensing cost is $0 and the community is active.
2. A Front End Framework
Next.js is the practical choice right now. It handles server-side rendering, static generation, and client-side routing — all the things that make headless storefronts fast. It's free and has a massive ecosystem of tutorials.
3. A Hosting Platform
You need somewhere to run your Medusa back end and deploy your Next.js front end. Two-platform setup that keeps costs low:
- Railway for the Medusa API server: starts at $5/month, scales with usage.
- Vercel for the Next.js front end: free hobby tier handles most small stores; Pro is $20/month if you need team features or higher bandwidth.
4. A Payment Processor
Stripe integrates with Medusa out of the box. No monthly fee — you pay 2.9% + 30¢ per transaction, same as most platforms. If you're doing $10,000/month in sales, that's about $320 in processing fees, which is competitive with what Shopify charges on its basic plan when you factor in their 2% transaction surcharge for non-Shopify Payments.
Rough monthly total: $25–$50, depending on traffic and whether you stay on Vercel's free tier.
Step-by-Step: Getting Your First Headless Store Live
Here's a condensed version of the setup. Each step links to official docs so you're not dependent on this article staying current.
Step 1 — Spin up Medusa locally.
Run npx create-medusa-app in your terminal. The CLI walks you through the setup in about five minutes. You'll get a local admin dashboard at localhost:7001 where you can add products right away.
Step 2 — Add your products and categories. Don't skip this step before deploying. It's much easier to test your front end against real data than placeholder content. Even ten products is enough to catch layout issues early.
Step 3 — Deploy the Medusa back end to Railway. Railway has a one-click Medusa template. Connect your GitHub repo, set your environment variables (database URL, JWT secret, cookie secret), and Railway handles the rest. First deploy usually takes under ten minutes.
Step 4 — Clone a Next.js starter front end.
Medusa maintains an official Next.js starter at github.com/medusajs/nextjs-starter-medusa. Clone it, point the NEXT_PUBLIC_MEDUSA_BACKEND_URL environment variable at your Railway URL, and you have a working storefront with cart, product pages, and checkout already wired up.
Step 5 — Deploy the front end to Vercel. Push your cloned starter to a new GitHub repo, import it into Vercel, add your environment variables, and deploy. Vercel auto-detects Next.js and configures everything. Total time from clone to live URL: about 15 minutes if you've done it once before.
Step 6 — Connect Stripe.
In your Medusa admin, go to Settings → Payment Providers and add your Stripe secret key. Test a checkout with Stripe's test card (4242 4242 4242 4242). Once that works, flip to live keys.
At this point you have a headless storefront live on the internet for roughly $5/month in infrastructure.
A Real Example: How a Candle Shop Cut Page Load Time in Half
A friend of mine runs a small candle brand — about 60 SKUs, mostly direct-to-consumer. She was on a hosted Shopify theme that loaded in 4.2 seconds on mobile (measured with PageSpeed Insights). After moving to a headless setup almost identical to what I described above, her mobile load time dropped to 1.9 seconds. Her add-to-cart rate went from 3.1% to 4.4% over the following 60 days — a 42% improvement on that single metric.
Her total infrastructure spend went from $79/month (Shopify Basic + a paid theme subscription) to $44/month (Railway + Vercel Pro + her domain). She kept Stripe as her processor, same as before.
Is her setup more complex to maintain than a hosted platform? Honestly, yes — a little. She learned to run git pull and redeploy when Medusa releases updates. But she told me she feels like she actually owns her store now, which is a feeling that's hard to put a dollar value on.
Three Things That Trip People Up (And How to Avoid Them)
Mistake 1: Skipping environment variables in production.
The most common reason a headless deploy "works locally but not on Vercel" is a missing environment variable. Keep a .env.example file in your repo with every variable listed (values blank, obviously). Check it before every deploy.
Mistake 2: Forgetting about image optimization.
Next.js has a built-in <Image> component that automatically serves WebP and resizes images. Use it for every product photo. Skipping it and using plain <img> tags is the fastest way to undo all your performance gains.
Mistake 3: Going custom too early. The Medusa Next.js starter is not the prettiest thing in the world, but it works. Spend your first month selling on it before you start customizing the design. You'll learn what actually matters to your customers before you invest time in making it look perfect.
When Headless Might Not Be the Right Move Yet
I want to be straight with you here, because not every store should go headless right now.
If you're pre-revenue or still validating your product, a hosted platform gets you live faster. The flexibility of headless only pays off once you know what you're optimizing for. There's no shame in starting on a simpler setup and migrating later — that's exactly what my candle-store friend did, and the migration took her a weekend.
Also, if you have zero comfort with a terminal or GitHub, the setup above will feel steep. That's not a permanent barrier — there are great free resources for learning both — but it's worth being honest about where you are today versus where you want to be in six months.
Ask yourself: do I have a product that's selling, or am I still figuring that out? If you're still figuring it out, bookmark this article and come back. If you're selling and feeling constrained by your current platform, keep reading.
Your Do-It-Today Action List
If you want to move on this, here are three concrete steps you can take before the end of the day:
- Run
npx create-medusa-applocally and poke around the admin dashboard. You don't have to deploy anything — just get a feel for how the back end works. Takes 10 minutes. - Open PageSpeed Insights (
pagespeed.web.dev) and run your current store's URL. Screenshot the score. This is your baseline. You'll want to compare it after you launch a headless version. - Clone the Medusa Next.js starter and get it running locally pointed at your local Medusa instance. You'll see your own products in a headless storefront for the first time. That moment is genuinely exciting.
None of these steps cost money. None of them commit you to anything. They just get you from "I've heard of headless" to "I've actually touched it" — and that gap is where most people get stuck.
You Can Do This
Headless commerce on a small budget isn't a workaround or a compromise. It's a legitimate, production-ready approach that small stores are using right now to compete on page speed and user experience without paying enterprise prices.
The stack I've described here — Medusa, Next.js, Railway, Vercel, Stripe — costs less per month than most Shopify app subscriptions, and it gives you ownership that a hosted platform never will.
Your next step: run that create-medusa-app command. Seriously. Everything else follows from there.