storehabit.com

E-commerce tutorials, Shopify alternatives, headless commerce for SMBs

Set Up a Headless Storefront Without a Dev Team

by Emma Rodriguez
Set Up a Headless Storefront Without a Dev Team

You've probably heard the word "headless" tossed around in e-commerce circles and assumed it was something only Allbirds or a VC-funded startup could afford. A dedicated front-end team, a six-figure agency retainer, months of build time — no thanks.

But here's what's changed: the tooling has gotten quiet-good for solo operators and tiny teams. Right now, a one-person shop can wire up a headless storefront over a long weekend, spend under $50/month on infrastructure, and end up with page-load speeds that a standard theme-based store simply can't match. I've watched stores cut their Time to First Byte from 1.8 seconds down to 280 milliseconds after making this switch — and that speed shows up directly in conversion rates.

This tutorial walks you through the practical path: what "headless" actually means for a small store, which tools to pick, and three concrete steps you can start today.

What "Headless" Actually Means (Plain English)

A traditional Shopify or WooCommerce store bundles everything together — the product database, the checkout logic, and the visual storefront all live in the same system. Change one piece and you're touching the others.

Headless splits those layers apart. Your commerce backend (inventory, orders, payments) stays in one place. Your storefront — the pages your shoppers actually see — lives somewhere else entirely and talks to the backend through an API. Think of it like a restaurant kitchen versus the dining room. The kitchen doesn't care what the dining room looks like; it just sends out plates when orders come in.

For you as an operator, that separation means:

  • Faster pages. Your front end can be a static site served from a CDN, so there's no server rendering HTML on every request.
  • Full design control. You're not fighting a theme's CSS or waiting for a plugin update to break your layout.
  • Flexibility. Swap your commerce backend later without rebuilding your storefront, or vice versa.

The trade-off is real: you're stitching two systems together instead of one. But in 2024, the stitching is a lot simpler than it used to be.

Picking Your Two Core Tools

You need two things: a commerce backend and a front-end framework. Don't overthink this — the goal is to ship, not to architect.

Commerce backend options for small stores:

  • Medusa.js — open-source, self-hostable, free at the core. Good if you want zero vendor lock-in and are comfortable with a Node.js app on a $6/month VPS.
  • Shopify Storefront API — if you already have a Shopify plan, you already have API access. You keep Shopify's checkout (which converts well) and replace only the front end.
  • Crystallize — generous free tier up to 1,000 SKUs, built around a content-rich catalog model. Worth a look if your products need a lot of storytelling.

Front-end framework options:

  • Next.js — the most popular choice, huge community, deploys to Vercel's free hobby tier in minutes.
  • Astro — newer, ships less JavaScript by default, genuinely fast out of the box. Great if your catalog is mostly static (i.e., you're not doing real-time inventory countdowns on every page).
  • Nuxt — if you or your one freelance developer friend already know Vue, this is your path of least resistance.

For this tutorial, I'll use Shopify Storefront API + Next.js because it's the combination with the most community templates and the lowest "I'm stuck" risk for a first build.

Step 1: Enable the Storefront API and Grab Your Token

Log into your Shopify admin. Go to Settings → Apps and sales channels → Develop apps. Create a new app — call it something like "Headless Front End" so you remember what it's for.

Under API credentials, scroll to the Storefront API section and click Configure Storefront API scopes. At minimum, enable:

  • unauthenticated_read_product_listings
  • unauthenticated_read_collection_listings
  • unauthenticated_write_checkouts

Save and install the app. Shopify will give you a Storefront API access token — a long string that looks like shpat_abc123.... Copy it somewhere safe. This is how your Next.js front end will authenticate every request to your store data.

Quick sanity check: open a terminal and run this curl command (swap in your store URL and token):

curl -X POST \
  https://your-store.myshopify.com/api/2024-01/graphql.json \
  -H 'X-Shopify-Storefront-Access-Token: YOUR_TOKEN' \
  -H 'Content-Type: application/json' \
  -d '{"query": "{ shop { name } }"}'

If you get back {"data":{"shop":{"name":"Your Store Name"}}}, you're connected. That's your commerce backend talking to you.

Step 2: Spin Up Your Next.js Front End in Under 20 Minutes

Shopify maintains an official starter called Hydrogen — but Hydrogen is React-based and has its own deployment opinions that can feel heavy for a first project. Instead, use the community-maintained nextjs-commerce template, which is leaner and more flexible.

In your terminal:

npx create-next-app@latest my-storefront
cd my-storefront
npm install @shopify/hydrogen-react

hydrogen-react is a library of pre-built React hooks and components that handle the Storefront API GraphQL queries for you — things like fetching product data, managing cart state, and initiating checkout. You don't have to write raw GraphQL if you don't want to.

Create a .env.local file in your project root:

NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=YOUR_TOKEN

Now open app/page.tsx (or pages/index.js if you chose the Pages Router) and drop in a dead-simple product fetch to prove the connection works end-to-end. The hydrogen-react docs have a useProducts example you can copy in about two minutes.

Run npm run dev, open localhost:3000, and you should see your product names rendering from your live Shopify catalog. No theme. No Liquid. Just your data, your markup.

At this point you have a working headless storefront skeleton. Everything from here is styling and adding pages — which is normal web development, not e-commerce magic.

Step 3: Deploy for Free (or Close to It)

Push your project to a GitHub repo (private is fine). Head to vercel.com, connect your GitHub account, and import the repo. Vercel will detect Next.js automatically.

Under Environment Variables in the Vercel project settings, add the same two variables from your .env.local file. Hit Deploy.

Vercel's free Hobby plan covers:

  • 100 GB bandwidth per month
  • Unlimited deployments
  • Automatic HTTPS
  • Global CDN

For a store doing under roughly $30K/month in revenue, that bandwidth ceiling is almost certainly enough. When you cross it, the Pro plan is $20/month — still a fraction of what a Shopify theme app stack costs.

Your storefront is now live at a *.vercel.app URL. Point your custom domain at it through Vercel's domain settings (takes about 5 minutes and a DNS change), and you're live.

A Real Example: How a Candle Brand Shaved 1.4 Seconds Off Page Load

A small candle brand I know — 8 SKUs, one founder, no developer on staff — was running a heavily-customized Shopify theme with 11 apps installed. Their home page took 3.1 seconds to load on a mobile connection. Google's Core Web Vitals score was in the red.

They spent one Saturday following roughly these steps, using Shopify as the backend and a minimal Next.js front end deployed on Vercel. They cut app count to 3 (reviews, email capture, and a size guide pop-up that couldn't be replaced). Their home page load dropped to 1.7 seconds. Mobile conversion rate went up 18% in the following 30 days.

They didn't write a custom checkout. They didn't rebuild their product database. They just moved the storefront layer — the part shoppers see — to a faster delivery system.

Is 1.7 seconds still slow by headless standards? Yes. But it was a first weekend build, and they had a clear path to optimize further without starting over.

Could you get similar results? If your store has a bloated theme and a pile of conflicting apps, almost certainly yes.

Three Things You Can Do Today

You don't have to build the whole thing this week. Here's how to get started without overwhelm:

  1. Run a speed audit right now. Go to pagespeed.web.dev and enter your store URL. Screenshot the results. That's your baseline. If your mobile score is below 50, headless is worth serious consideration.

  2. Enable the Storefront API and run the curl test from Step 1. Seriously, it takes 10 minutes and costs nothing. Seeing your store data come back through an API makes the whole concept click in a way that reading about it doesn't.

  3. Clone the nextjs-commerce repo locally and poke around. You don't have to deploy anything. Just reading the file structure for 20 minutes will show you how thin the layer between "API data" and "rendered page" actually is.

You Don't Need a Dev Team — You Need a Weekend

Headless commerce has a reputation for being a big-brand, big-budget project. That reputation is about three years out of date. The tools have matured, the templates exist, and the hosting is nearly free at small scale.

You're not going to build a perfect, fully optimized headless storefront in one weekend. But you can absolutely build a working one — fast enough to measure, simple enough to maintain, and flexible enough to grow with you.

The next step is the speed audit. Run it, look at the number, and then decide if the weekend project is worth it. I'd bet it is.