Skip to content
Mayrian

Headless ecommerce

Fast, fully custom storefronts, decoupled from the commerce engine through its APIs.

Start a Project Ask a question
CDN image service
Dining / TablesOak dining tableHeadless CMS
$1,2494 in stockStorefront API
Add to basketCart API
Start a project

What we build

Headless storefronts we build

We build fast, fully custom storefronts on Next.js, Shopify Hydrogen or BigCommerce Catalyst, reading your commerce engine and CMS through their APIs.

  • Performance-led storefronts

    Fast product listing and product pages that improve Core Web Vitals and conversion.

  • Content and commerce

    Editorial content and shoppable stories managed in a headless CMS.

  • Multiple storefronts

    Several brands or regions on one commerce back end.

  • New channels

    The same APIs serve apps, kiosks, marketplaces and in-store screens.

  • Progressive web apps

    App-like storefronts that load fast on mobile and work on poor connections.

  • Composable commerce

    Search, content and promotions from specialist services, connected by APIs.

Someone browsing an online store on a laptop
Your team, and ours

How to get started

Three steps to a plan for headless ecommerce

  1. 1Tell us what you needUse the project form or book a call. A few sentences about the goal is enough to start.
  2. 2Free technical consultationWe go through your goals, users, existing systems and constraints with you.
  3. 3Your planA detailed plan covering the right tech stack, architecture, timeline and budget. Then you decide.
Start a project Ask a question first

How it works

A product page, taken apart

Choose an architecture, then select any part of the page to see which system serves it.

store.example.com/products/oak-dining-table-180cm
OAK & CO.Basket (0)

Dining / Tables

Oak dining table, 180 cm

Price is served by

Commerce engine

Fetched through the Storefront API with the product, in the shopper's currency.

Behind the page

Commerce engineCMSApps

The storefront (Hydrogen, Catalyst, Next.js) renders on the server and caches pages at the edge.

Select any part of the page.

Watch the page load

A product page loading on a phone, frame by frame. Switch on each fix to see the Core Web Vitals change.

  1. 0.5s

  2. 1.0s

  3. 1.5s

  4. 2.0s

  5. 2.5s

  6. 3.0s

  7. 3.5s

  8. 4.0s

  9. LCP

    4.5s

Largest Contentful Paint

Good up to 2.5s

4.2s

Interaction to Next Paint

Good up to 200ms

320ms

Cumulative Layout Shift

Good up to 0.1

0.22

Doesn't pass Core Web Vitals yet

Our approach

How the work runs

  1. Architecture

    Commerce engine, CMS, search and front-end framework chosen together.

  2. Design system

    Templates and components for listing, product, cart and content pages.

  3. Build the front end

    Server-rendered and cached pages reading commerce and content APIs.

  4. Integrate

    Search, reviews, payments, analytics and personalization.

  5. Launch

    Redirects, SEO checks, performance testing and monitoring.

What we'll need from you

Having these ready keeps the work moving.

  • Platform access

    Admin and API access to the commerce platform.

  • Brand and design

    Guidelines or a design budget for templates.

  • Merchandising team

    People who'll run the store, for CMS design and training.

  • Analytics and SEO data

    Traffic, rankings and conversion by page type.

Who's on the project

Our team, working with merchandising team from yours.

Commerce architect

Chooses the platforms and designs the architecture.

Front-end engineers

Build the storefront and components.

Designer

Designs templates and the component library.

SEO specialist

Plans rendering, structured data and redirects.

With, from your team

Merchandising team

Shapes the CMS and runs the store.

Services

Headless commerce services

  • Headless architecture

    Commerce engine, CMS, search and front-end framework chosen together.

  • Storefront development

    Templates, components and server-rendered pages on Next.js, Hydrogen or Catalyst.

  • CMS and search integration

    Contentful, Sanity or Storyblok for content, and Algolia or Bloomreach for search.

  • Launch, SEO and performance

    Redirects, structured data, load testing and Core Web Vitals monitoring.

Deliverables

What you receive

Launch checklist

2/6

Tick each item as it's handed over

In your hands

What the documentation looks like

Every project ends with documents your team can run with. Here is an excerpt of one of them.

Storefront performance

Core Web Vitals by template

75th percentile of real mobile visits · before and after launch

TemplateLCPINPCLS
Home3.9s → 1.7s290 → 140ms0.21 → 0.03Pass
Category4.4s → 2.1s340 → 160ms0.18 → 0.05Pass
Product4.1s → 1.9s310 → 150ms0.24 → 0.04Pass
Cart3.2s → 2.6s260 → 180ms0.06 → 0.02LCP

Measuring success

How success is measured

What we report on in headless ecommerce projects. Which measures apply, and their targets, are agreed with you at the start.

Core Web Vitals

LCP, INP and CLS on listing, product and cart pages, from real visits.

A campaign page, without a developer

We set up the headless CMS so merchandisers build pages from components. Add, reorder, then schedule or publish.

Components

Summer sale page

Draft
  1. 1Hero banner
  2. 2Product grid

Changes are in draft. Preview them before publishing.

Preview

OAK & CO.
Summer sale · up to 30% off

Readiness check

Are you ready for
headless ecommerce?

Five questions, about a minute. You'll see what to settle first and a sensible starting point.

  1. Is there a clear reason to go headless, such as speed, design freedom or multiple storefronts?

    Is there a clear reason to go headless, such as speed, design freedom or multiple storefronts?

  2. Is the commerce platform chosen?

  3. Do you have a team to run a custom front end, in-house or supported?

  4. Do merchandisers need to build pages themselves?

  5. Is SEO traffic important to revenue?

Readiness summary

Step 1 of 5

  • Is there a clear reason to go headless, such as speed, design freedom or multiple storefronts?—
  • Is the commerce platform chosen?—
  • Do you have a team to run a custom front end, in-house or supported?—
  • Do merchandisers need to build pages themselves?—
  • Is SEO traffic important to revenue?—
Ready0/5

Complete each step to see your first step. Nothing is sent until you choose to.

How to start

From first call to production

Start where you are. Each step ends with a decision, so you commit to the next one only when it makes sense.

Your project, tracked

Choose a stop

Stop 1 of 5

Free technical consultation

Talk through the goal, the users, the systems involved and any deadlines.

Book the consultation
PACKING SLIPOne or two sessions
  • 1×A clear view of scope and priorities
  • 1×A recommended next step
  • 1×A plan covering stack, architecture, timeline and budget

Each step ends with a decision before the next one ships.

Estimate the value

What it could be worth to you

Enter your own figures. The formula is shown, and the estimate can go with your enquiry.

Revenue from a faster storefront

$5,000,000
5%

ESTIMATE

Headless ecommerce

Online revenue a year$5,000,000
Relative conversion improvement from speed and UX5%
ADDITIONAL REVENUE$250,000
Perioda year

Online revenue × relative conversion improvement

Add to my enquiry

Build or buy

When you don't need
a custom build

Part of the free technical consultation: when an existing product covers the need, we recommend it instead of a custom build. These are the options we weigh, alongside the tools you already have.

Custom storefront

Theme

A custom storefront fits when

  • Design and experience set your brand apart
  • Speed targets beyond what themes achieve
  • Several storefronts or channels on one back end
  • Rich content mixed with commerce

In your industry

Where it applies

What this work delivers in the industries we serve.

Technologies and standards

Chosen for your project

Assemble a headless stack: the commerce engine sets the storefront framework and hosting; content and search are chosen separately. We recommend the stack for your project in the free technical consultation.

Commerce engine

Headless CMS

Search

Checkout stays on Shopify, customized with checkout extensions.

Your stack

  1. StorefrontHydrogen (React)
  2. HostingOxygen
  3. ContentSanity
  4. SearchAlgolia
  5. Commerce engineShopify Plus

Front end

  • Next.js
  • Shopify Hydrogen
  • BigCommerce Catalyst
  • Astro

Commerce engines

  • Shopify Plus
  • BigCommerce
  • commercetools
  • Salesforce Commerce Cloud

CMS and search

  • Contentful
  • Sanity
  • Storyblok
  • Algolia
  • Bloomreach

Built to

  • MACH principles
  • Core Web Vitals
  • Schema.org Product markup

Questions

Common questions
about headless ecommerce

Do we need headless?

Not always. We recommend a well-built theme on a SaaS platform for many stores, and headless for brands that need custom experiences, very fast pages, multiple storefronts or content-heavy commerce.

Do you build composable commerce?

Yes. Beyond a headless front end, we replace parts of the back end, such as search or content, with specialist services connected by APIs where they earn their place.

Will it hurt SEO?

No. We build server-rendered pages, structured data, clean URLs and 301 redirects, and faster pages help rankings.

How is an ecommerce project priced?

Audits, proofs of concept and well-defined builds are delivered as fixed-price engagements; ongoing optimization and larger programmes use a dedicated team. The free consultation ends with a plan covering platform, architecture, timeline and budget.

More in Ecommerce Solutions

How it connects

All of Ecommerce Solutions

Planning headless ecommerce work?

Start with a free technical consultation: a detailed plan covering the right tech stack, architecture, timeline and budget for your project.

Start a project
A photographer shooting product images
Plan your store