Ik heb in de afgelopen drie jaar meer dan een dozijn Shopify-winkels gemigreerd naar headless architecturen. Sommige verliepen soepel. Een paar waren nachtmerries. Het verschil kwam bijna altijd neer op planning — specifiek, of het team echt begreep waar ze zich in begaven voordat ze de eerste regel code schreven.

Deze gids behandelt alles wat ik had willen weten voordat ik mijn eerste headless Shopify-migratie deed: welk frontend framework je moet kiezen, hoe je je SEO-rankings behoudt, hoe je nul downtime bereikt tijdens de cutover, wat het werkelijk kost, en realistische tijdlijnen op basis van winkelcomplexiteit. Geen onzin. Geen "het hangt ervan af" zonder uitleg.

Inhoudsopgave

Shopify naar Headless Migratie: Next.js, Hydrogen & Remix Gids

Waarom Migreren van Shopify naar Headless?

Laten we dit meteen ter sprake brengen: standaard Shopify is geweldig voor de meeste winkels. Als je minder dan $2M per jaar omzet en je thema doet wat je nodig hebt, heb je waarschijnlijk geen headless nodig. Echt waar. Ik heb mensen meer van deze migratie afgeraden dan ik ze ervan heb overtuigd.

Maar er zijn legitieme redenen om naar headless te gaan:

  • Prestatieplafond: Liquid-thema's hebben een rendering bottleneck. Zelfs met Online Store 2.0 en Dawn ben je beperkt door Shopify's server-side rendering pipeline. Headless-winkels behalen consistent sub-1-seconde LCP-scores.
  • Aangepaste ervaringen: Product configurators, AR-aanpassingen, complex filteren, personalisatie-engines — deze zijn moeilijk te bouwen in Liquid.
  • Multi-storefront: Eén backend die je DTC-site, wholesale-portaal, mobiele app en internationale winkels aandrijft.
  • Contentrijke merken: Als je merk sterk afhankelijk is van redactionele inhoud, lookbooks en storytelling, geeft het koppelen van een headless CMS met Shopify's commerce engine je het beste van beide werelden.
  • Ontwikkelaarservaring: Je team wil in React/TypeScript werken, niet in Liquid. Dit is belangrijker dan mensen toegeven.

De prestatiewinsten zijn reëel en meetbaar. In 2025 beïnvloeden Google's Core Web Vitals direct je zoekrangschikking. Winkels die ik naar headless heb gemigreerd zien doorgaans een 30-50% verbetering in LCP en een 40-60% verbetering in Total Blocking Time. Dit vertaalt zich in meetbare conversieverbeteringen — Shopify's eigen gegevens suggereren dat een 1% verbetering in paginasnelheid de conversie met tot 0,7% kan verhogen.

Headless Shopify Architectuur Uitgelegd

Wanneer mensen "headless Shopify" zeggen, bedoelen ze de frontend (wat klanten zien) loskoppelen van de backend (Shopify's commerce engine). Je houdt Shopify voor producten, inventaris, bestellingen, checkout en betalingen. Je bouwt een aangepaste frontend die via de Storefront API met Shopify communiceert.

Hier is de typische architectuur:

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│  Aangepaste     │────▶│  Storefront API   │────▶│  Shopify Backend │
│  Frontend       │     │  (GraphQL)        │     │  (Producten,    │
│  (Next.js/H2/  │     │                  │     │   Winkelwagen,  │
│   Remix)        │     │                  │     │   Bestellingen) │
└─────────────────┘     └──────────────────┘     └─────────────────┘
        │
        ▼
┌─────────────────┐
│  Headless CMS   │
│  (Sanity,       │
│   Contentful,   │
│   Storyblok)    │
└─────────────────┘

Shopify Plus-handelaren hebben toegang tot de Checkout Extensibility API, waarmee je checkout kunt aanpassen zonder omleiding naar Shopify's gehoste checkout. Voor niet-Plus-winkels worden klanten nog steeds omgeleid naar checkout.shopify.com voor de daadwerkelijke aankoop — wat eerlijk gezegd geen verschrikkelijke ervaring is, maar het is wel een UX-onderbreking.

De Storefront API

Alles loopt via Shopify's Storefront API, een GraphQL-endpoint die handelt:

  • Productquery's en collecties
  • Winkelwagenbeheer (maken, bijwerken, line items verwijderen)
  • Klantauthenticatie
  • Inhoud (metavelden, metaobjecten)
  • Winkellocalisatie en valuta

De API heeft tarieflimits — 50 kostpunten per seconde voor een enkele app. In de praktijk is dit zelden een probleem als je goed cached, maar het kan je bijten tijdens flash sales als je dit niet hebt gepland.

# Voorbeeld: Een product ophalen met varianten
query ProductQuery($handle: String!) {
  product(handle: $handle) {
    id
    title
    descriptionHtml
    priceRange {
      minVariantPrice {
        amount
        currencyCode
      }
    }
    variants(first: 100) {
      edges {
        node {
          id
          title
          availableForSale
          price {
            amount
          }
          selectedOptions {
            name
            value
          }
        }
      }
    }
    images(first: 10) {
      edges {
        node {
          url
          altText
          width
          height
        }
      }
    }
  }
}

Je Frontend Kiezen: Next.js vs Hydrogen vs Remix

Hier raken de meeste teams vast. Hier is mijn eerlijke mening na het bouwen van productiewinkels met alle drie.

Functie Next.js 15 Hydrogen 2024.10+ Remix (Shopify)
Framework volwassenheid Zeer volwassen, enorm ecosysteem Groeiend, Shopify-specifiek Volwassen (samengevoegd in React Router 7)
Shopify-integratie Handmatig via Storefront API First-party, ingebouwde hooks Goed via Hydrogen UI
Hosting Vercel, Netlify, zelf gehost Oxygen (Shopify) of zelf gehost Overal, maar geoptimaliseerd voor Oxygen
Leercurve Matig Matig-Hoog Matig
Community/werving Enorm Klein maar groeiend Gemiddeld
SSR/SSG flexibiliteit Uitstekend (App Router) SSR-gericht (streaming) SSR-gericht (loaders)
Caching-beheer ISR, on-demand revalidatie Oxygen sub-request caching Standaard HTTP caching
Beste voor Teams met React-ervaring, complexe contentbehoeften Shopify-native teams, eenvoudig tot gemiddeld grote winkels Teams die Shopify's aanbevolen pad willen volgen

Next.js: De Veilige Keuze

Next.js is wat ik voor de meeste teams aanbeveel, vooral als je Shopify combineert met een headless CMS zoals Sanity of Contentful. Het ecosysteem is enorm, werving is gemakkelijker, en je krijgt ongelooflijke flexibiliteit met de App Router's server components.

Het nadeel? Je moet de Shopify-integratie zelf opzetten. Er is geen officiële Shopify SDK voor Next.js (hoewel community packages zoals @shopify/hydrogen-react je cart hooks en utilities geven). Je zult meer tijd aan boilerplate besteden.

Wij bouwen veel headless Shopify-winkels met Next.js bij Social Animal — het is onze meest gevraagde stack voor e-commerce projecten.

Hydrogen: Shopify's Eigen Framework

Hydrogen is Shopify's officiële headless framework, gebouwd bovenop Remix (nu React Router 7). Het komt met voorgebouwde componenten voor producten, winkelwagens en SEO — plus nauwe integratie met Oxygen, Shopify's edge hosting platform.

De aantrekkingskracht is duidelijk: minder boilerplate, Shopify-geoptimaliseerde caching en een deployment story die gewoon werkt op Oxygen. De release van 2024.10 bracht aanzienlijke verbeteringen, inclusief betere TypeScript-ondersteuning en optimistische UI-updates voor winkelwagenbewerkingen.

De nadelen? Kleinere community, minder resources als je vast zit, en je bent enigszins aan Shopify's ecosysteem gebonden. Als je ooit commerce backends wil wisselen, herschrijf je veel meer code dan je met Next.js zou doen.

Remix / React Router 7

Hier is het verwarrende gedeelte: Remix is samengevoegd in React Router 7. Hydrogen is gebouwd op Remix. Dus "Remix voor Shopify" betekent in de meeste contexten Hydrogen.

Als je React Router 7 wil gebruiken zonder Shopify's specifieke abstracties van Hydrogen, kun je dat. Je krijgt dezelfde loader/action patterns, dezelfde streaming SSR en volledige controle over je Shopify-integratie. Dit heeft zin als je al een Remix-team bent en maximale flexibiliteit wilt.

Mijn Aanbeveling

Voor contentrijke merken met complexe paginalayouts: Next.js + headless CMS. Voor eenvoudige DTC-winkels die het snelste pad naar productie willen: Hydrogen op Oxygen. Voor teams die al in het Remix-ecosysteem zijn geïnvesteerd: React Router 7 met Hydrogen UI-componenten.

Shopify naar Headless Migratie: Next.js, Hydrogen & Remix Gids - architectuur

Het Migratieproces Stap voor Stap

Hier is het proces dat ik voor elke migratie volg. Het is saai. Het werkt.

Fase 1: Audit en Planning (2-3 weken)

  1. Crawl de bestaande site — Gebruik Screaming Frog of Sitebulb om elke URL, omleiding, canonicale tag en structured data blok in kaart te brengen. Exporteer dit. Je hebt het later nodig.
  2. Documenteer alle integraties — Klaviyo, Yotpo reviews, loyaliteitsprogramma's, abonnement-apps (Recharge, Loop), payment gateways. Allemaal.
  3. Wijs URL-structuren in kaart — Matchen je nieuwe URL's de oude? Shopify gebruikt /products/product-handle en /collections/collection-handle. Als je deze wijzigt, heb je omleidingen nodig.
  4. Identificeer aangepaste functionaliteit — Alles voorbij standaard browse-en-koop. Cadeaubonnen, bundels, wholesale-prijzen, multi-currency, B2B.
  5. Kies je stack — Frontend framework, CMS, hosting, CDN.

Fase 2: Bouw de Frontend (6-12 weken)

Dit is waar de daadwerkelijke ontwikkeling gebeurt. Belangrijke gebieden:

  • Productpagina's met variant selectie, afbeeldingsgalerijen, review-integratie
  • Collectiepagina's met filtering, sortering, paginering
  • Winkelwagen met real-time voorraadbeheer en upsells
  • Zoeken — Shopify's Predictive Search API of een derde partij zoals Algolia
  • Klantenaccounts — inloggen, bestellingsgeschiedenis, adresbeheer
  • CMS-aangestuurde pagina's — startpagina, over, landingspagina's
  • Checkout omleiding — afhandeling van overdracht naar Shopify checkout
// Voorbeeld: Next.js productpagina met ISR
import { getProduct } from '@/lib/shopify'
import { ProductDetails } from '@/components/product-details'

export async function generateStaticParams() {
  const products = await getAllProductHandles()
  return products.map((handle) => ({ handle }))
}

export default async function ProductPage({ 
  params 
}: { 
  params: { handle: string } 
}) {
  const product = await getProduct(params.handle)
  
  if (!product) notFound()

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(generateProductJsonLd(product)),
        }}
      />
      <ProductDetails product={product} />
    </>
  )
}

export const revalidate = 60 // ISR: revalideren om de 60 seconden

Fase 3: Integratie en QA (2-4 weken)

Verbind alle services van derden. Test alles. Ik bedoel alles:

  • Plaats testbestellingen via alle betaalmethoden
  • Test kortingscodes, cadeaubonnen, automatische kortingen
  • Verifieer analytics tracking (GA4, Meta Pixel, TikTok Pixel)
  • Belastingstest de Storefront API aanroepen onder verwachte verkeer
  • Test op daadwerkelijke apparaten, niet alleen Chrome DevTools

Fase 4: Cutover (1-2 dagen)

De werkelijke wissel. Meer hierover in de zero-downtime sectie hieronder.

SEO-behoud Tijdens Migratie

Hier gaan migraties fout. Ik heb winkels 40% van hun organische verkeer zien verliezen omdat iemand URL-omleidingen vergat. Wees niet dat team.

URL-mapping

Maak een volledige URL-mappingdocument voordat je een enkele redirect rule schrijft. Elke URL op de oude site moet naar een bestemming op de nieuwe site gaan.

OUD: /collections/summer-2024
NIEUW: /collections/summer-2024  ← Hetzelfde? Prima, geen omleiding nodig.

OUD: /blogs/news/our-story
NIEUW: /journal/our-story  ← Anders? 301 omleiding vereist.

OUD: /pages/about-us
NIEUW: /about  ← Anders? 301 omleiding vereist.

Structured Data

Shopify-thema's bevatten basisstructuurgegevens. Wanneer je naar headless gaat, ben jij verantwoordelijk voor de implementatie. Minimaal:

  • Product schema met offers, aggregateRating
  • BreadcrumbList voor navigatie
  • Organization voor je merk
  • WebSite met SearchAction voor sitelinks zoeken
  • FAQPage waar van toepassing

Meta Tags en Canonicals

Elke pagina heeft de juiste <title>, <meta description>, canonicale URL en Open Graph tags nodig. In Next.js, gebruik de Metadata API:

export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await getProduct(params.handle)
  
  return {
    title: product.seo.title || product.title,
    description: product.seo.description || product.description,
    openGraph: {
      images: [product.featuredImage?.url],
    },
    alternates: {
      canonical: `https://yourstore.com/products/${params.handle}`,
    },
  }
}

XML Sitemap

Genereer je sitemap dynamisch van Shopify's gegevens. Voeg producten, collecties en CMS-pagina's in. Dien het onmiddellijk na migratie in bij Google Search Console.

Pre-Migratie SEO-checklist

  • Volledig URL-mappingdocument
  • 301 omleidingen geconfigureerd en getest
  • Structured data geïmplementeerd en gevalideerd
  • Meta tags worden opgehaald van Shopify SEO-velden
  • XML sitemap gegenereerd dynamisch
  • robots.txt correct geconfigureerd
  • Google Search Console geïnformeerd over domeinwijziging (indien van toepassing)
  • Interne links bijgewerkt naar nieuwe URL-structuur
  • Afbeeldingsalt-teksten behouden van Shopify

Zero Downtime Migratiestrategie

Zero downtime is geen magie. Het is DNS-beheer en voorbereiding.

De Blauw-Groen Implementatiebenadering

  1. Bouw en implementeer de nieuwe site op een staging domein (bijv. new.yourstore.com)
  2. Voer beide sites gelijktijdig uit gedurende minstens een week, test de nieuwe site grondig
  3. Configureer je CDN/DNS voor onmiddellijke switching (Cloudflare, Vercel of Netlify ondersteunen dit allemaal)
  4. Wissel DNS om naar de nieuwe frontend — TTL moet van tevoren op 60 seconden zijn ingesteld
  5. Monitor alles: foutpercentages, 404's, conversiepercentages, Core Web Vitals

De Proxy-benadering (Nog Veiliger)

Voor winkels die meer dan $1M/maand verdienen, verkies ik een op proxy gebaseerde migratie:

  1. Plaats een reverse proxy (Cloudflare Workers, Vercel Edge Middleware) voor beide oude en nieuwe sites
  2. Route verkeer pagina voor pagina — begin met een laag-risicopagina zoals /about
  3. Verplaats geleidelijk pagina's naar de nieuwe frontend gedurende 2-4 weken
  4. Monitor elke pagina's prestaties voordat je de volgende batch verplaatst
  5. Product- en collectiepagina's gaan als laatste (hoogste inkomstenrisico)

Deze benadering voegt complexiteit toe maar laat je problemen opvangen voordat ze je hele winkel beïnvloeden.

// Vercel Edge Middleware voorbeeld voor geleidelijke migratie
import { NextResponse } from 'next/server'

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl
  
  // Pagina's die al naar nieuwe frontend zijn gemigreerd
  const migratedPaths = ['/about', '/contact', '/journal']
  
  if (migratedPaths.some(path => pathname.startsWith(path))) {
    return NextResponse.next() // Serveer van nieuwe frontend
  }
  
  // Alles anders proxies naar oude Shopify winkel
  return NextResponse.rewrite(
    new URL(pathname, 'https://old-store.myshopify.com')
  )
}

Prijzen en Tijdlijnoverzicht

Laten we het over echte nummers hebben. Deze zijn gebaseerd op projecten die ik in 2025 heb gezien, variërend van eenvoudige DTC-winkels tot complexe multi-market operaties.

Winkelcomplexiteit Tijdlijn Agentschapskosten Freelancer Kosten
Eenvoudig (< 50 producten, basispagina's, standaard checkout) 8-12 weken $40.000 - $75.000 $20.000 - $40.000
Gemiddeld (50-500 producten, CMS, abonnementen, multi-currency) 12-20 weken $75.000 - $150.000 $40.000 - $80.000
Complex (500+ producten, B2B+DTC, aangepaste checkout, meerdere integraties) 20-32 weken $150.000 - $300.000+ $80.000 - $150.000

Lopende Kosten

Vergeet niet de herhaalde uitgaven:

  • Shopify Plus: $2.300/maand (vereist voor checkout extensibility, aanbevolen voor headless)
  • Hosting: $20-500/maand (Vercel Pro is $20/gebruiker, Oxygen is inbegrepen bij Shopify)
  • Headless CMS: $0-500/maand (Sanity, Contentful, Storyblok hebben allemaal gratis tiers)
  • Zoeken: $0-500/maand als je Algolia of vergelijkbaar gebruikt
  • Onderhoud: Budget 10-15% van initiële bouwkosten jaarlijks

Voor teams die onderzoeken wat een headless Shopify-migratie voor hun specifieke situatie zou kosten, breken we onze prijsbenadering hier op. We helpen ook graag zaken in te kaderen over een snelle oproep.

Veelvoorkomende Migratiefouten

1. De Winkelwagen Onderschatten

De winkelwagen lijkt eenvoudig tot je rekening houdt met: kortingscodes, automatische kortingen, cadeaubonnen, line item properties, winkelwagennota's, geschatte verzending, belastingberekeningen en winkelwagenniveau-metavelden. Budget twee keer zoveel tijd als je denkt dat je nodig hebt voor winkelwagenfunctionaliteit.

2. Apps Vergeten

Dat Shopify app-ecosysteem waar je op vertrouwt? De meeste apps injecteren JavaScript in je Liquid-thema. Door naar headless te gaan, heb je op API gebaseerde alternatieven nodig of aangepaste implementaties voor reviews, wenslijsten, loyaliteitsprogramma's en meer.

3. Checkout Aanpassing

Zonder Shopify Plus ($2.300/maand) kun je de checkout ervaring niet aanpassen. Klanten worden omgeleid naar Shopify's gehoste checkout, wat een visuele verbreking veroorzaakt. Plus handelaren kunnen Checkout Extensibility gebruiken, maar het is nog steeds beperkter dan een volledig aangepaste checkout.

4. Niet Vroeg Prestatietesten

De Storefront API voegt latentie toe. Als je 8 API-aanroepen doet om een productpagina weer te geven, zul je dit voelen. Cache agressief, gebruik GraphQL fragmenten om over-fetching te minimaliseren en implementeer streaming SSR waar mogelijk.

5. Het Content Team Negeren

Je marketing team beheerde inhoud in Shopify's admin. Nu hebben ze een headless CMS nodig. Budget tijd voor training en het bouwen van een content-editing ervaring die echt aangenaam is om mee te werken.

Wanneer Headless Niet de Juiste Keuze Is

Ik ben eerlijk met je: headless Shopify is niet voor iedereen. Migreer niet als:

  • Je winkel minder dan $1M per jaar verdient en je hebt geen complexe aanpassingsbehoeften
  • Je geen budget hebt voor doorlopende ontwikkeling en onderhoud
  • Je team geen React-ontwikkelaars heeft (of budget om ze in te huren/uit te besteden)
  • Je tevreden bent met je huidige thema's prestaties en functies
  • Je primair op zoek bent naar een "cool tech" verhaal in plaats van echte bedrijfsproblemen op te lossen

Shopify's Online Store 2.0 met een goed geoptimaliseerd thema kan 90+ op Lighthouse scoren. Soms is het juiste antwoord om wat je hebt te optimaliseren in plaats van helemaal opnieuw op te bouwen.

Als je twijfelt, overweeg dan een hybride benadering: houd je Shopify-thema maar bouw specifieke impactvolle pagina's (zoals je startpagina of landingspagina's) als headless. Je kunt Shopify's Storefront API naast je bestaande thema gebruiken. Dit laat je waarde bewijzen voordat je je aan een volledige migratie committeert.

Veelgestelde Vragen

Hoe lang duurt het migreren van Shopify naar headless? Voor een typische winkel met gemiddelde complexiteit, verwacht 12-20 weken van kickoff tot lancering. Eenvoudige winkels met minder producten en basisfunctionaliteit kunnen in 8-12 weken uitkomen. Complexe multi-market winkels met aangepaste checkout en uitgebreide integraties nemen vaak 20-32 weken in beslag. De audit- en planningsfase alleen moet al 2-3 weken zijn — sla dit niet over.

Verlies ik mijn SEO-rangschikking bij migratie naar headless Shopify? Niet als je het goed doet. De sleutels zijn: handhaaf dezelfde URL-structuur (of stel de juiste 301-omleidingen in), implementeer structured data op elk paginatype, behoud meta tags en canonicale URL's, en dien onmiddellijk na lancering een bijgewerkt sitemap in bij Google Search Console. Ik zie doorgaans een 1-2 weken fluctuatie in rangschikkingen na migratie, gevolgd door verbetering zodra Google de betere Core Web Vitals scores herkent.

Heb ik Shopify Plus nodig voor headless? Technisch niet. De Storefront API is beschikbaar op alle Shopify-plannen. Shopify Plus geeft je echter Checkout Extensibility (pas de checkout ervaring aan), hogere API-tarieflimits en toegang tot Oxygen hosting. Voor serieuze headless projecten is Plus op $2.300/maand bijna altijd het waard.

Wat is het verschil tussen Hydrogen en Next.js gebruiken met Shopify? Hydrogen is Shopify's officiële headless framework gebouwd op Remix/React Router 7. Het bevat Shopify-specifieke componenten, hooks en utilities uit de doos, plus geoptimaliseerde implementatie op Oxygen. Next.js vereist dat je de Shopify-integratie zelf bouwt maar geeft je een groter ecosysteem, meer hosting opties en betere ondersteuning voor complexe content-architecturen. De meeste bureaus hebben sterke meningen hierover op basis van de specifieke projectvereisten.

Kan ik met zero downtime naar headless Shopify migreren? Ja, met behulp van een blauw-groene implementatie (DNS switch) of een geleidelijke proxy-gebaseerde migratie. De blauw-groene benadering schakelt al het verkeer tegelijk via DNS om, terwijl de proxy-benadering pagina's geleidelijk over weken migrates. Beide werken. De proxy-benadering is veiliger voor winkels met hoge inkomsten maar voegt complexiteit toe.

Hoeveel kost een headless Shopify-migratie? Agentschapskosten liggen doorgaans tussen de $40.000 voor een eenvoudige winkel en $300.000+ voor complexe multi-market operaties. Freelancer-tarieven zijn ongeveer 50-60% van de agentschapskosten maar kunnen minder projectmanagementstructuur en minder specialisten meebrengen. Lopende kosten omvatten Shopify Plus ($2.300/maand), hosting ($20-500/maand), CMS ($0-500/maand) en onderhoud (10-15% van bouwkosten jaarlijks).

Moet ik Astro gebruiken in plaats van Next.js of Hydrogen voor headless Shopify? Astro is een geweldige keuze voor contentrijke sites met eilanden van interactiviteit. We hebben verschillende Astro-aangestuurde storefronts gebouwd. Het werkt goed voor katalogus-stijl winkels waar de meeste pagina's statisch zijn en je alleen React (of Svelte, Vue) voor interactieve componenten zoals de winkelwagen nodig hebt. Voor winkels met zware client-side interactiviteit — real-time inventaris, complex filteren, instant zoeken — zijn Next.js of Hydrogen's volledig React runtime meestal beter.

Wat gebeurt er met mijn Shopify-apps na migratie naar headless? De meeste Shopify-apps die frontend-code injecteren (popups, widgets, review-displays) werken niet out of the box. Je zult ofwel de app's API rechtstreeks gebruiken, een headless-compatible alternatief zoeken, of aangepaste implementaties bouwen. Apps die alleen op de backend werken (inventory management, shipping, ERP-integraties) blijven doorgaans zonder wijzigingen werken. Audit je app stack altijd tijdens de planningsfase.