Medusa.js has no built-in storefront. That is not a limitation — it is the architecture. Medusa handles your product catalog, cart, checkout, orders, and customer data through an API. The storefront that customers see is a separate frontend application you build and own. Here is what each option looks like, what each costs to build, and what the client experience is on both sides of the admin screen.
Why Medusa Ships Without a Storefront
This is a deliberate design decision, not an oversight. By separating the commerce backend from the presentation layer, Medusa gives you full control over the frontend without the constraints of a built-in theme system.
Shopify gives you a storefront — but you work within Liquid templates and Shopify’s rendering pipeline. Your ability to optimize Core Web Vitals, customize checkout UX, or build non-standard page structures is limited by what Shopify allows. With Medusa, the backend API returns data and the frontend renders whatever HTML, CSS, and JavaScript it wants. No platform constraints on the presentation layer.
The trade-off is that you have to build the storefront. That is additional development work and cost. But it is work you pay once, and the result you own completely.
Option 1: Medusa Storefront (The Reference Implementation)
Medusa maintains an open-source reference storefront called Medusa Storefront (previously called Next.js Starter). It is built in Next.js, uses the App Router, and is pre-wired to the Medusa backend API. Product listing, product detail, cart, checkout, account management — all the standard pages are implemented out of the box.
What it gives you: A functional storefront that you can fork, customize, and deploy. The Medusa team keeps it updated alongside the backend. It is a real production-ready codebase, not a barebones demo.
What it does not give you: A polished, brand-differentiated design. Out of the box it looks minimal — intentionally so, since it is meant to be a starting point, not a finished product. Real clients need a designer to apply brand identity, custom typography, custom section layouts, and conversion-focused UI patterns before it looks like a real store.
Build cost to reach production-ready: Starting from Medusa Storefront and applying a proper custom design — brand identity, custom product page layouts, homepage, and conversion-optimized checkout flow — typically runs $15,000–$35,000. Less if the design work is already done; more if you are building complex page types (bundle builders, configurators, subscription flows).
Who it is right for: Businesses that want a functional headless store quickly, at lower cost, and are willing to accept that the design is a skin over the reference implementation rather than ground-up custom. Appropriate for MVPs and early-stage headless deployments where speed-to-market matters more than bespoke UX.
Option 2: Custom Next.js Storefront
Next.js is the dominant choice for Medusa storefronts, and for good reason. The combination of static generation (for fast product listing pages), server-side rendering (for personalized or dynamic pages), and the Vercel deployment ecosystem gives you best-in-class performance with a mature ecosystem of tools.
A custom Next.js storefront means you start from scratch — or from a minimal boilerplate — and build exactly what the project requires. Custom design system, custom component library, custom checkout flow, custom product page layouts.
Performance: A well-built Next.js storefront with static generation for product pages and edge caching on Vercel or Cloudflare delivers LCP under 1.5 seconds for most product pages. That is genuinely fast — meaningfully faster than any Shopify theme, and fast enough to stop performance from being a conversion bottleneck.
Build cost: $35,000–$90,000 depending on the number of page types, the complexity of the design, and how many custom interactions are required (product configurators, bundle builders, subscription UX). This is the most common choice for production Medusa builds that need a fully custom front end.
Deployment: Next.js deploys cleanly to Vercel (the company that builds Next.js), Netlify, Cloudflare Pages, or a custom Node.js server. Vercel is the default choice — zero-config deployments, automatic preview environments per branch, and edge caching globally. Cost for a production Next.js storefront on Vercel runs $20–$100/month depending on traffic.
Who it is right for: Any store that needs a genuinely custom UX — unique brand identity, non-standard product page structure, complex filters and faceted navigation, or checkout flows that do not fit a standard template. This is the right choice for most serious headless builds.
Option 3: Remix Storefront
Remix is a full-stack React framework built for progressive enhancement and fast server rendering. Unlike Next.js’s hybrid static/server model, Remix is server-first — every page is server-rendered by default, with smart data loading and form handling built in.
For ecommerce, Remix’s server-first model has a specific advantage: cart and checkout interactions are handled as standard HTML form submissions with server-side validation, rather than JavaScript-dependent fetch calls. This makes the checkout more resilient — it works even with JavaScript disabled or blocked.
Performance: Remix storefronts typically deliver excellent Time to First Byte because every request is server-rendered with efficient data fetching. LCP competes with Next.js when deployed on a low-latency host. The trade-off is that static generation is less central to Remix’s model, so high-traffic product listing pages require more careful caching configuration to match Next.js’s static performance.
Build cost: $40,000–$100,000 for a custom Remix storefront on Medusa. Slightly higher than Next.js due to smaller developer pool and fewer pre-built patterns.
Who it is right for: Teams with existing Remix expertise, or projects where the progressive enhancement model (resilient checkout without JS) is a specific requirement. Also a strong choice when the development team prefers Remix’s data loading model to Next.js’s App Router.
Option 4: Gatsby Storefront
Gatsby is a static site generator built on React. It pre-builds all pages at deploy time, which means product pages are served as pre-built HTML from a CDN. Performance is extremely fast for page loads.
The limitation is build time and real-time data. Every time you update a product price or add a product, you need to trigger a new build. For stores with large catalogs (10,000+ SKUs), Gatsby build times can be significant. For stores with real-time inventory requirements (product availability shown live), Gatsby’s static-first model requires a hybrid approach — static page shells with client-side inventory fetches.
Build cost: $30,000–$70,000 for a custom Gatsby storefront. The Gatsby ecosystem has matured and has good ecommerce tooling, but Next.js has surpassed Gatsby as the default choice for headless commerce storefronts.
Who it is right for: Stores with stable catalogs (under 5,000 SKUs, infrequent product changes) where pure static performance is the priority. Less common as a new project choice in 2026 — Next.js handles the same use cases with more flexibility.
Comparing Storefront Performance
Here is what each option delivers in real-world performance benchmarks, assuming a well-built implementation:
| Storefront | LCP (typical) | INP | Deployment complexity |
|---|---|---|---|
| Medusa Storefront (customized) | 1.2–2.0s | <100ms | Low |
| Custom Next.js | 1.0–1.8s | <80ms | Low–Medium |
| Custom Remix | 1.1–2.0s | <80ms | Medium |
| Custom Gatsby | 0.8–1.5s | <80ms | Medium (builds) |
All options outperform a typical Shopify theme (LCP 3.5–6.0s with standard app load) by a significant margin. The differences between headless storefront options are smaller than the gap between any headless option and a traditional ecommerce platform.
The Admin Side: Managing the Store
The storefront is what customers see. The admin side — where you manage products, orders, and customers — is a separate concern.
Medusa ships with Medusa Admin, a React-based admin dashboard. Product management, order processing, customer lookup, discount configuration, and region management are all handled through it. It is not Shopify’s admin — the UI is functional but minimal compared to Shopify’s years of UX investment — but it covers standard day-to-day store operations.
For non-developer business owners, Medusa Admin is where you live after launch. Product catalog updates, order management, discount codes, and customer service lookups all happen there. Most clients find it manageable with 30–60 minutes of onboarding. It is not as polished as Shopify, but it is not intimidating either.
If you need a custom admin interface — specific reporting dashboards, inventory management workflows that go beyond Medusa’s defaults — that is a custom build project. Budget $10,000–$30,000 for a meaningful custom admin extension.
What the Full Build Looks Like
A complete Medusa store includes:
- Medusa API backend — configured with your products, pricing, regions, payment provider, and shipping provider
- Medusa Admin — for day-to-day store management
- Storefront — Next.js, Remix, or Gatsby, custom-designed and built
The storefront and the backend deploy independently. The backend runs on a Node.js host (Railway, AWS EC2, Google Cloud Run). The storefront deploys to Vercel or Cloudflare Pages. They communicate via API.
This separation means you can update the storefront design without touching the backend, and you can upgrade the backend without redeploying the frontend. It also means two deployment environments to manage — which is the right trade-off for a serious production store, but adds operational overhead compared to a single-platform Shopify store.
What Each Option Costs End-to-End
To make this concrete, here is what a complete production-ready Medusa store costs across each storefront option, including backend setup, design, and deployment configuration:
- Medusa Storefront (customized) + Medusa API: $35,000–$60,000
- Custom Next.js + Medusa API: $55,000–$100,000
- Custom Remix + Medusa API: $60,000–$110,000
- Custom Gatsby + Medusa API: $50,000–$90,000
Ongoing hosting: $250–$700/month across all infrastructure (backend + frontend + database).
Compare this to Shopify Plus at $2,300/month ($27,600/year) plus transaction fees. At $2M GMV, Shopify Plus costs roughly $40,000/year in platform fees. A Medusa build on the higher end ($100,000) pays for itself within 2.5 years — and after that, you are paying $3,000–$8,400/year in hosting rather than $40,000+ in platform fees.
For more detail on how the math compares against Shopify at different GMV levels, see our post on the true cost of Shopify at scale. For a broader look at the headless vs traditional trade-off, see headless ecommerce vs traditional.
Building a Medusa Storefront Through Designodin
We build headless stores on Medusa.js with custom Next.js storefronts. Every build is hand-coded — no theme files, no page builder, no templated design. We scope based on the number of page types, the complexity of the design, and the integrations required.
See our WooCommerce development service for context on our ecommerce build approach, or go to fixed-price packages to understand what is included and what it costs before committing to a conversation.
Frequently Asked Questions
Does Medusa.js come with a default storefront? No. Medusa is a backend API — it handles product data, cart, orders, and checkout. It ships with a reference storefront (Medusa Storefront, built in Next.js) that you can use as a starting point, but it is not bundled into the platform. You build and own the storefront separately.
Is Next.js the only option for a Medusa storefront? No. Medusa’s backend exposes a REST API (and optional GraphQL) that any frontend framework can consume. Next.js is the most common choice because of its performance characteristics and ecosystem maturity, but Remix, Gatsby, Vue.js (via Nuxt), and plain HTML with vanilla JavaScript are all technically valid options.
How long does it take to build a Medusa storefront? A basic store using the Medusa Storefront reference implementation, customized with a brand design: 6–10 weeks. A fully custom Next.js storefront built from scratch: 12–20 weeks depending on the number of page types and complexity of custom interactions.
Can I use a headless CMS with a Medusa storefront? Yes, and for most production stores you should. Medusa stores product data (prices, variants, inventory). A headless CMS like Contentful, Sanity, or Storyblok stores marketing content (homepage hero, landing page copy, blog posts, legal pages). The Next.js storefront fetches from both sources and renders them together. This separation makes content updates possible without developer involvement.
What is the difference between Medusa Storefront and building a custom Next.js storefront? Medusa Storefront is an open-source reference implementation that covers the standard ecommerce page types. It is pre-built and functional but designed as a starting point, not a finished product. A custom Next.js storefront is built specifically for your brand — unique design system, custom page layouts, bespoke interactions. The custom build costs more and takes longer but produces a more distinctive result.
Does the Medusa backend and storefront have to be hosted together? No. They are separate applications that communicate via API. The Medusa API backend typically runs on a traditional cloud host (Railway, AWS, GCP). The Next.js storefront deploys to Vercel or Cloudflare Pages for edge performance. They can be on completely different infrastructure — which is the architecture’s point.
Can non-developers manage a Medusa store after launch? Yes, through Medusa Admin. Product management, order processing, customer records, and discount management are all accessible through the admin UI without writing code. The experience is more bare-bones than Shopify’s admin, but covers standard store operations. For stores with complex operational requirements, a custom admin extension can add any workflow the business needs.