You've probably seen the word "headless" thrown around in e-commerce circles and assumed it was something reserved for companies with six-figure dev budgets. I thought the same thing when I first started hearing it back in 2019. Then I actually priced it out — and realized a lean headless setup was cheaper than the Shopify plan I was already paying for.
If you run a small online store and you're tired of fighting your theme every time you want to move a button two inches to the left, this tutorial is for you. We're going to walk through what headless commerce actually means, why it might solve a real problem you already have, and how to get a working storefront live for under $50 a month.
What "Headless" Actually Means (Plain English)
A traditional e-commerce platform bundles two things together: the backend (your product catalog, orders, inventory, payments) and the frontend (the store your shoppers actually see). They're stitched at the hip.
Headless commerce separates them. Your backend — often called the "commerce engine" or API layer — handles all the business logic. Your frontend is a completely independent website that talks to that backend through an API. Think of it like a restaurant kitchen (backend) and a dining room (frontend). You can redecorate the dining room without touching the kitchen.
Why does that matter for you? Because when the two are decoupled, your storefront can be as fast, as custom, and as weird as you want it to be — without wrestling with a platform's template system.
Why Small Sellers Are Making the Switch
Here's the honest reason most small operators start looking at headless: speed.
Google's Core Web Vitals now directly influence search rankings, and a slow storefront costs you real money. Studies by Portent found that a page that loads in 1 second converts at 3x the rate of a page that loads in 5 seconds. Traditional theme-based stores — especially ones loaded with apps — routinely score in the 40–60 range on PageSpeed Insights. A well-built headless frontend regularly hits 90+.
The second reason is flexibility. Say you sell custom pet portraits and you want a completely bespoke product configurator — upload a photo, pick a size, preview a frame. Building that inside a standard Shopify theme means hacking Liquid templates and hoping an app covers the gap. Building it as a React component on a headless frontend takes an afternoon if you know basic JavaScript.
Third: cost control. Once you decouple the frontend, you're not locked into paying a platform's "advanced" tier just to get a feature your store actually needs. You pay for the commerce API (usually cheap at small volume) and host your frontend on a generous free or low-cost tier.
The $50/Month Stack That Actually Works
Let's get specific. Here's a real stack you can run for well under $50 a month at small-to-medium volume:
Commerce backend: Medusa.js (self-hosted) or Shopify Storefront API
- Medusa is open-source. You can host it on Railway or Render for roughly $7–$15/month depending on your traffic. At under 500 orders/month, the starter tier on Railway covers you comfortably.
- If you already have a Shopify Basic plan ($39/month), you can keep it purely as a backend and use the Storefront API to power your custom frontend. You're already paying for it.
Frontend framework: Next.js
Next.js is free and open-source. It handles server-side rendering (great for SEO) and static generation (great for speed). It's the most popular choice for headless storefronts right now, and the community support is enormous — which matters when you hit a wall at 11 p.m.
Frontend hosting: Vercel
Vercel's free "Hobby" tier handles a surprising amount of traffic — up to 100GB bandwidth per month. For most small stores, that's plenty to start. If you need more, their Pro plan is $20/month. So your frontend hosting is either $0 or $20.
Search (optional but worth it): Meilisearch on Railway
If you have more than 200 products, site search matters. Meilisearch's cloud starter is $30/month, but self-hosted on Railway runs about $5–$7/month for small catalogs.
Total realistic cost: $22–$42/month if you're self-hosting Medusa plus Vercel Pro. If you're using Shopify as the backend, add $39 and subtract the Medusa hosting cost — you're still under $60, and you get Shopify's payment infrastructure included.
Three Steps to Get Your First Headless Page Live
Okay, enough theory. Here are three concrete things you can do today to move from zero to a working headless storefront.
Step 1: Spin up a Next.js starter connected to your commerce backend
Both Medusa and Shopify publish official Next.js starter templates. For Shopify, search "Shopify hydrogen" or use the community Next.js + Shopify Storefront API starter on GitHub (search: nextjs-commerce). For Medusa, their docs have a create-medusa-app CLI that scaffolds a Next.js storefront in about 10 minutes.
Clone the repo, run npm install, add your API keys to a .env.local file, and run npm run dev. You'll have a working storefront on localhost:3000 pulling real data from your backend. That first moment when your actual products show up in a custom UI is genuinely exciting.
Step 2: Deploy your frontend to Vercel in under 5 minutes
Push your project to a GitHub repo. Go to vercel.com, click "New Project," import the repo, paste your environment variables, and click Deploy. Vercel auto-detects Next.js and handles the build. You'll get a live URL with HTTPS in about 3 minutes. Point your custom domain at it through Vercel's dashboard — it walks you through the DNS records step by step.
Here's a quick sanity check: after deploying, run your new URL through PageSpeed Insights. A bare-bones headless Next.js storefront with no extra optimization should score 85–95 on mobile out of the box. If you're coming from a theme-heavy Shopify store that scored 45, that number will feel unreal.
Step 3: Wire up checkout (don't skip this)
This is where people get stuck. Your shiny new frontend needs to hand off to a checkout flow, and that flow needs to handle payments securely.
If you're using Shopify as your backend, the easiest path is to redirect to Shopify's hosted checkout. It's not headless-pure, but it's PCI compliant, battle-tested, and takes zero extra setup. You generate a checkout URL via the Storefront API and send the customer there when they click "Checkout."
If you're on Medusa, it has Stripe built in. You'll add your Stripe publishable and secret keys to your environment variables, and Medusa handles the payment session. There's a pre-built React checkout component in the starter — you mostly just style it to match your brand.
Either way, budget 2–3 hours for this step the first time you do it. It's not hard, but there are a few environment variables and webhook endpoints to configure correctly.
A Real Example: A Candle Store That Cut Load Time by 60%
A seller I know — she runs a small soy candle brand out of Portland — was on Shopify with seven apps installed: reviews, upsells, a loyalty program, a custom font loader, a cookie banner, and two others she'd forgotten about. Her mobile PageSpeed score was 38. Her cart abandonment rate was sitting at 79%, which is high even for e-commerce.
She moved her frontend to a Next.js + Shopify Storefront API setup over a long weekend. She kept Shopify for the backend (orders, inventory, payments) and rebuilt just the product listing pages, product detail pages, and cart in Next.js. Checkout still goes to Shopify's hosted flow.
Her mobile PageSpeed score jumped to 91. Cart abandonment dropped to 68% within 60 days — still not perfect, but an 11-point improvement on a store doing $18,000/month in revenue translated to roughly $2,000 in recovered monthly sales. Her total new hosting cost was $20/month on Vercel Pro. She kept her $39/month Shopify Basic plan. Net cost increase: $20. Net revenue gain: ~$2,000.
Is every store going to see those exact numbers? No. But the direction of the outcome is consistent: faster pages convert better, and headless gives you faster pages.
Common Mistakes to Avoid Your First Time
A few things trip people up when they first go headless:
Forgetting SEO metadata. Your Next.js app needs to output proper <title> and <meta description> tags for every page. Next.js has a built-in <Head> component (and a newer metadata API in the App Router) — use it from day one, not as an afterthought.
Skipping image optimization. Next.js has a built-in <Image> component that auto-compresses and lazy-loads images. If you just drop raw <img> tags in, you'll lose half your PageSpeed gains immediately. Use next/image everywhere.
Ignoring redirects during migration. If you're moving an existing store, your old URLs (like /products/lavender-candle) need to map to your new URLs. Set up a redirects array in your next.config.js before you flip DNS. Missing this costs you SEO equity you've built up over months or years.
You Can Do This — Here's Your Next Step
Headless commerce used to be genuinely hard and genuinely expensive. The tooling has caught up. Between open-source frameworks, generous hosting free tiers, and well-documented starter templates, a solo operator with basic web skills can have a working headless storefront running in a weekend.
You don't have to migrate everything at once. Start with just your homepage and product pages. Keep your existing checkout. Prove to yourself that the stack works and that your scores improve. Then expand from there.
Your next step: pick one — Medusa or Shopify Storefront API — based on what you're already using, clone the official Next.js starter for that backend, and get it running on localhost today. That first npm run dev is the hardest part. Everything after it is just building.