Ik heb de afgelopen zes jaar headless Shopify-storefronts gebouwd. Meer dan 400 stuks. Sommige bereikten binnen enkele maanden $1M ARR. Anderen waren replatforming-rampen die kwartalen kostten om uit te werken. Het verschil tussen deze uitkomsten heeft bijna nooit te maken met welk framework je kiest — het gaat erom de trade-offs te begrijpen voordat je een enkele regel code schrijft.

Deze gids is alles wat ik in 2020 wilde hebben gekregen toen ik mijn eerste headless Shopify-winkel bouwde met een zelfgebouwd Next.js-systeem en de oude REST API. Het is de gedestilleerde kennis van het bouwen van storefronts voor DTC-merken, B2B-groothandelaars en enterprise Shopify Plus-verkopers. Sommige hiervan bevestigt wat je al vermoedde. Sommige ervan zal de conventionele wijsheid die je op Twitter leest, aanvechten.

Laten we erin duiken.

Inhoudsopgave

Headless Shopify Development Guide 2026: Hydrogen, Next.js & Beyond

Wat headless Shopify in 2026 werkelijk betekent

Headless Shopify betekent het ontkoppelen van de frontend-presentatielaag van Shopify's backend. Je houdt Shopify voor wat het werkelijk goed kan — inventaris, bestellingen, betalingen, afhandeling — en vervangt Liquid-thema's met een aangepaste frontend die met de Storefront API communiceert.

Maar hier is wat de meeste artikelen je niet vertellen: headless Shopify in 2026 is een volledig ander dier dan zelfs twee jaar geleden. Drie verschuivingen hebben het landschap fundamenteel veranderd:

  1. Hydrogen 2 is volwassen. Het React-gebaseerde framework van Shopify dat op Oxygen wordt uitgevoerd (hun hostingplatform) is aanzienlijk gestabiliseerd sinds de moeilijke lancering in 2023. Het draait nu onder de motorkap op Remix en wordt geleverd met zinvolle standaardinstellingen.

  2. De Storefront API bereikt versie 2025-04. Dit bracht Customer Account API v2, verbeteringen in voorspellend zoeken, en — cruciaal — server-side winkelwagenbewerkingen die geen client-side JavaScript vereisen.

  3. Checkout Extensions hebben checkout.liquid volledig vervangen. Sinds augustus 2025 moeten alle Shopify Plus-winkels Checkout Extensibility gebruiken. Geen Liquid-checkoutaanpassingen meer. Dit alleen al zette duizenden winkels in de richting van headless-architecturen.

Het mentale model dat ik gebruik: Shopify is jouw commerce-engine. Jouw frontend is een speciaal gebouwd interface dat gegevens uit die engine ophaalt. Alles daartussenin bestaat uit API-aanroepen en cachestrategie.

De architectuurstack

Een typische headless Shopify-setup in 2026 ziet er zo uit:

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│   Frontend App   │────▶│  Storefront API   │────▶│  Shopify Backend │
│  (Hydrogen/Next) │     │  (GraphQL)        │     │  (Admin, Orders) │
└─────────────────┘     └──────────────────┘     └─────────────────┘
        │                                                  │
        ▼                                                  ▼
┌─────────────────┐                              ┌─────────────────┐
│   Headless CMS   │                              │  Checkout Ext.  │
│  (Sanity/Contentful)                            │  (Shopify UI Ext)│
└─────────────────┘                              └─────────────────┘

De frontend communiceert met de Storefront API via GraphQL. Content die niet in Shopify thuishoort (redactionele pagina's, landingspagina's, complexe content-modellen) leeft in een headless CMS. Checkoutaanpassingen gebeuren via Shopify's extensiepunten, niet aangepaste markup.

De Storefront API: uw nieuwe beste vriend

De Storefront API is een openbare GraphQL API die speciaal is ontworpen voor klantgerichte ervaringen. Het verschilt van de Admin API, die backendoperaties verwerkt. Het begrijpen van dit onderscheid is kritiek.

Wat u kunt doen

query ProductPage($handle: String!) {
  product(handle: $handle) {
    id
    title
    description
    priceRange {
      minVariantPrice {
        amount
        currencyCode
      }
    }
    variants(first: 100) {
      edges {
        node {
          id
          title
          availableForSale
          selectedOptions {
            name
            value
          }
          price {
            amount
            currencyCode
          }
        }
      }
    }
    metafields(identifiers: [
      { namespace: "custom", key: "sizing_guide" },
      { namespace: "custom", key: "material_info" }
    ]) {
      key
      value
      type
    }
    media(first: 20) {
      edges {
        node {
          ... on MediaImage {
            image {
              url
              altText
              width
              height
            }
          }
          ... on Video {
            sources {
              url
              mimeType
            }
          }
        }
      }
    }
  }
}

Tarieflimits en caching

Vanaf 2026 stelt de Storefront API 100 verzoeken per seconde per winkel in staat voor openbare toegangstokens (tot 60 in begin 2024). Privétokens krijgen hogere limieten. Maar je zou deze limieten niet moeten raken — als je dat doet, is je cachestrategie stuk.

Dit is wat ik op elk project doe:

  • Full-page caching op CDN-niveau (Vercel, Cloudflare of Oxygen) met stale-while-revalidate-headers
  • Data-layer caching met 60-seconde TTL's voor productgegevens, 300 seconden voor verzamelingsgegevens
  • Winkelwagenbewerkingen worden nooit gecacht — deze bereiken de API rechtstreeks elke keer
  • Voorraadbeschikkingschecks gebruiken een licht peilingmechanisme of webhooks om stale voorraden ongeldig te maken
// Voorbeeld: cachestrategie voor productquery's in Next.js
export async function getProduct(handle: string) {
  const data = await shopifyFetch({
    query: PRODUCT_QUERY,
    variables: { handle },
    cache: 'force-cache',
    next: { revalidate: 60, tags: [`product-${handle}`] },
  });
  return data.product;
}

Hydrogen versus Next.js Commerce: de werkelijke vergelijking

Dit is de vraag die ik het meest krijg gesteld. En het eerlijke antwoord is: het hangt af van jouw team, jouw tijdlijn en jouw hostingvoorkeuren. Maar hier zijn de gegevens.

Factor Hydrogen 2 (Remix/Oxygen) Next.js Commerce (Vercel)
Framework Remix (React) Next.js 15 (React)
Hosting Oxygen (Shopify) of zelf-host Vercel, Netlify, zelf-host
Shopify-integratie First-party, diep Community-maintained starter
Leercurve Matig (Remix-patronen) Lager (als team Next.js kent)
CMS-flexibiliteit Goed maar Shopify-gericht Uitstekend — ecosysteem is groot
Mediaan LCP (onze gegevens) 0,8s 0,7s
Mediaan TTFB 120ms (Oxygen) 90ms (Vercel Edge)
Kosten op schaal Oxygen gratis tier genereus Vercel Pro $20/ma, Enterprise $$$
Checkout-integratie Ingebouwde winkelwagen → checkoutflow Vereist Storefront API winkelwagensetupsoftware
Ecosysteemplugins Groeiend, ~200 pakketten Massief, 10k+ pakketten
Grootte gemeenschap ~15k GitHub stars ~40k GitHub stars

Wanneer Hydrogen kiezen

Kies Hydrogen als:

  • Jouw team zich op zijn gemak voelt met Remix's loader/action-patronen
  • Je de meest native Shopify-ervaring wilt
  • Je een Shopify Plus-handelaar bent die Oxygen-hosting erbij wil hebben
  • Je geen zware niet-handelsinhoud nodig hebt (blog, redactioneel, enz.)

Wanneer Next.js kiezen

Kies Next.js als:

  • Jouw team al Next.js-apps levert
  • Je diepe CMS-integratie nodig hebt buiten Shopify's metafields
  • Je maximale hostingflexibiliteit wilt
  • Je een contentrijke merkervaring naast commerce bouwt
  • Je mogelijk in de toekomst van commerce-backends wilt veranderen

Ik zal eerlijk zijn: voor 70% van de winkels die ik het afgelopen jaar heb gebouwd, was Next.js de juiste keuze. Niet omdat het technisch superieur is — dat is het niet noodzakelijk — maar omdat de talentpool 5x groter is en het ecosysteem meer oplossingen voor randgevallen heeft. Als het marketingteam van je client een specifieke animatiebibliotheek wil of hun SEO-bureau een bepaalde metatag-structuur vereist, vind je het antwoord sneller in Next.js-land.

Dat gezegd: Hydrogen-winkels op Oxygen hebben een deploy-eenvoud die moeilijk te verslaan is. Push naar main, het is live. Geen buildconfiguratie, geen edge-functie cold starts om te debuggen.

Headless Shopify Development Guide 2026: Hydrogen, Next.js & Beyond - architecture

Sub-1-seconde LCP bereiken

Dit is waar de rubber de weg raakt. De hele business case voor headless Shopify — de werkelijke financiële rechtvaardiging — rust op prestatie. En het getal dat je moet raken is sub-1-seconde Largest Contentful Paint op mobiel.

Hier is waarom: elke 100ms LCP-verbetering correleert met ongeveer 1% stijging van het conversiepercentage, volgens Shopify's eigen 2025 prestudiestudie. Een winkel die $5M/jaar doet en gaat van 2,5s LCP (typisch Liquid-thema) naar 0,9s LCP kan ruwweg 15% stijging verwachten. Dat is $750K extra inkomsten.

Onze gegevens over 400+ sites bevestigen dit bereik. Headless-storefronts zijn 60-75% sneller dan Liquid-thema's gemiddeld, gemeten aan hand van echte gebruiker Core Web Vitals-gegevens in CrUX-rapporten.

De performanceplaybook

Dit is precies hoe we consistent sub-1-seconde LCP bereiken:

1. Server-render het kritieke pad

// Next.js App Router — server-component voor productpagina
export default async function ProductPage({ params }: { params: { handle: string } }) {
  const product = await getProduct(params.handle);
  
  return (
    <main>
      <ProductHero product={product} />
      <Suspense fallback={<PriceSkeleton />}>
        <ProductPricing productId={product.id} />
      </Suspense>
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews productId={product.id} />
      </Suspense>
    </main>
  );
}

2. Optimaliseer afbeeldingen agressief

Shopify's CDN ondersteunt width-, height- en crop-parameters. Gebruik ze. Serveer geen 2000px heroafbeelding aan een 375px mobiele viewport.

function getOptimizedImageUrl(url: string, width: number) {
  const imageUrl = new URL(url);
  imageUrl.searchParams.set('width', String(width));
  imageUrl.searchParams.set('format', 'webp');
  return imageUrl.toString();
}

3. Voorladen van de LCP-afbeelding

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

4. Inline kritieke CSS, stel alles anders uit

We houden above-the-fold CSS onder 14KB (één TCP-ronde trip). Al het andere wordt asynchroon geladen.

5. Edge-side rendering

Zowel Vercel Edge Functions als Oxygen's worker-runtime voert uit aan de edge, waardoor je wereldwijd sub-100ms TTFB krijgt. Dit is de enkele grootste prestatiehendel die je kunt aanleggen.

6. Prefetch bij voornemen

Prefetch niet alles op viewport. Prefetch bij hover/touch-start. Dit snijdt onnodige bandbreedte met ~40% terwijl het zich nog steeds instant voelt.

Checkout Extensions en het post-checkout.liquid-tijdperk

Hier is de verandering die veel merchants dwong: vanaf augustus 2025 zonsondergang checkout.liquid op Plus-winkels. Als je aangepaste checkoutaanpassingen had — en de meeste Plus-merchants hadden dat — moest je naar Checkout Extensions migreren.

Checkout Extensions gebruiken Shopify's UI Extensions-framework. Je schrijft React-achtige componenten die rendereren in Shopify's checkout binnen gedefinieerde extensiepunten (pre-purchase, post-purchase, verzending, betaling, enz.).

// Voorbeeld: Post-purchase upsell extension
import { useApi, reactExtension, BlockStack, Text, Button } from '@shopify/ui-extensions-react/checkout';

export default reactExtension('purchase.checkout.block.render', () => <UpsellBlock />);

function UpsellBlock() {
  const { cost, lines } = useApi();
  
  return (
    <BlockStack>
      <Text size="medium">Bijpassende accessoires toevoegen?</Text>
      <Button onPress={() => { /* voeg toe aan winkelwagen logica */ }}>
        Voeg toe voor $19,99
      </Button>
    </BlockStack>
  );
}

Het belangrijkste om te begrijpen: Checkout Extensions werken hetzelfde of je headless bent of een Liquid-thema gebruikt. Jouw headless frontend geeft af aan Shopify's checkout, en de extensions draaien daar. Dit is eigenlijk een groot voordeel van de headless-benadering — jouw storefront is volledig aangepast, maar checkout blijft Shopify-gehost (PCI-compliant, onderhouden door Shopify, enz.).

Shopify Plus migratiestrategieën

Migratie van een bestaande Shopify Plus-winkel naar headless is een gefaseerde operatie. Probeer het niet allemaal tegelijk. Hier is de benadering die het beste heeft gewerkt in onze projecten:

Fase 1: Fundament (Weken 1-3)

  • Zet het frontend-framework op (Next.js of Hydrogen)
  • Implementeer de Storefront API-verbindingslaag met caching
  • Bouw de designsysteem- / componentbibliotheek
  • Zet CI/CD-pijplijn op

Fase 2: Core Commerce (Weken 4-8)

  • Productlijstpagina's (verzamelingen)
  • Productdetailpagina's
  • Winkelwagenfunctionaliteit
  • Zoeken (gebruik Shopify's Predictive Search API of derde partij zoals Algolia)
  • Accountpagina's via Customer Account API

Fase 3: Content & Marketing (Weken 9-11)

  • CMS-integratie voor niet-handelspagina's
  • Blog / redactionele sectie
  • Landingspagebuilder voor marketingteam
  • SEO-migratie (301-omleidingen, sitemap, gestructureerde gegevens)

Fase 4: Lancering & Optimalisatie (Weken 12-14)

  • Prestatie-auditing en optimalisatie
  • A/B-testing setup
  • Analyticsmigratie (GA4, server-side tracking)
  • Geleidelijke traffic-migratie via featureflags of splitsingstesting

Totale tijdlijn: 12-14 weken voor een typische Shopify Plus-winkel. Ondernemingswinkels met complexe catalogi (50k+ SKU's) of zware aanpassingen kunnen 16-20 weken duren.

De $1M ARR-drempel: wanneer headless financieel logisch is

Headless is niet gratis. Aangepaste frontendontwikkeling kost meer dan het installeren van een Liquid-thema. Lopend onderhoud vereist ontwikkelaarstijd. Dus wanneer klopt de rekening?

Op basis van onze gegevens: $1M ARR is de drempel waar headless Shopify duidelijke financiële zin begint te maken.

Hier is de wiskunde:

Inkomstenniveau Geschatte Conv. Rate Lift Inkomstenwinst Headless-bouwkosten Jaarlijkse lopende kosten ROI-tijdlijn
$500K ARR 10-15% $50-75K $80-150K $24-48K 18-24 maanden
$1M ARR 10-15% $100-150K $80-150K $24-48K 8-14 maanden
$3M ARR 10-15% $300-450K $120-200K $36-60K 4-6 maanden
$10M ARR 10-15% $1-1,5M $150-300K $48-96K 2-3 maanden

Onder $1M ben je beter af met investeringen in conversiepercentageoptimalisatie op een goed gebouwd Liquid-thema. Boven $1M groeien de prestatiewinstmen snel genoeg om de investering te rechtvaardigen. Boven $3M laat je serieus geld liggen als je niet headless gaat.

Voor specifieke prijzen voor headless-bouwwerken, bekijk onze prijspagina — we zijn transparant over projectbereiken.

Een bureau kiezen: Naturaily, Aalpha en anderen

Als je bureaus evalueert voor headless Shopify-werk, hier is mijn eerlijke beoordeling van het landschap in 2026.

Naturaily is een bureau gevestigd in Polen dat een solide reputatie heeft opgebouwd voor headless commerce, met name met Next.js en Vue Storefront. Hun sterktes liggen in het middensegment — merken die $1-10M doen en een professionele build nodig hebben zonder enterpriseprijzen. Ze zijn technisch competent en hebben goede Shopify Storefront API-ervaring. Waar ze soms moeite mee hebben: zeer aangepaste B2B-workflows en multi-markt Shopify-setups.

Aalpha is een Indiaas ontwikkelingsbedrijf met een breder focus — ze doen mobiele apps, enterprise-software en headless commerce. Hun tarieven zijn aanzienlijk lager (vaak 40-60% minder dan westerse bureaus), wat aantrekkelijk is voor budgetbewuste projecten. De afweging is doorgaans projectmanagementoverhead en designpolish. Als je een sterk intern designteam hebt en het project nauw kunt beheren, kunnen ze solide technisch werk leveren.

Hoe we vergelijken bij Social Animal: We specialiseren ons uitsluitend in headless webbeontwikkeling — niet alleen Shopify, maar het volledige spectrum van headless CMS en framework-werk inclusief Next.js en Astro. Ons sterke punt zijn merken en bedrijven die diepe technische expertise nodig hebben zonder de overhead van een groot bureau. Als je benieuwd bent naar geschiktheid, neem contact op — we zeggen je eerlijk of we het juiste bureau voor je project zijn.

Factor Social Animal Naturaily Aalpha
Specialisatie Headless web (diep) Headless commerce + web Full-service dev
Primaire frameworks Next.js, Astro, Hydrogen Next.js, Vue Storefront Next.js, React Native
Teamlocatie VS-gebaseerd Polen Indië
Typische projectrange $80-250K $60-200K $25-100K
Shopify Plus-ervaring Ja (400+ headless sites) Ja Ja
Best voor Prestatie-kritische storefronts Mid-market headless commerce Budgetbewuste builds

Aangepaste storefronts met Astro en andere frameworks

Hier is iets wat de meeste Shopify headless-gidsen je niet zullen vertellen: je hoeft geen React te gebruiken.

We hebben verschillende Shopify-storefronts gebouwd met Astro — met name voor merken waar content en redactie net zo belangrijk zijn als commerce. Astro's eilandarchitectuur betekent dat je standaard nul JavaScript verzendt en alleen de interactieve bits hydratiseert (winkelwagen, productselectors, zoeken).

De resultaten? LCP consistent onder 0,6 seconden. Totaal paginagewicht onder 100KB. Het is belachelijk snel.

---
// Astro-component voor een Shopify-productkaart
import { getProduct } from '../lib/shopify';

const product = await getProduct(Astro.params.handle);
---

<article class="product-card">
  <img 
    src={product.featuredImage.url + '&width=600'}
    alt={product.featuredImage.altText}
    width="600"
    height="600"
    loading="lazy"
  />
  <h2>{product.title}</h2>
  <p class="price">${product.priceRange.minVariantPrice.amount}</p>
  
  <!-- Alleen deze component verzendt JavaScript -->
  <AddToCart client:visible productId={product.id} />
</article>

De afweging: Astro's ecosysteem voor commerce is kleiner. Je zult meer aangepaste code schrijven voor winkelwagenbeheer, authenticatie en zoeken. Maar als prestatie jouw primaire metriek is en jouw team zich op zijn gemak voelt met het extra werk, is het een legitieme keuze.

Veelgestelde vragen

Is headless Shopify het waard voor kleine winkels? Voor winkels onder $500K ARR meestal niet. De ontwikkelings- en onderhoudskosten wegen op tegen de verbeteringen van het conversiepercentage. Je bent beter af met een snel, goed geoptimaliseerd Liquid-thema zoals Dawn. Zodra je $1M ARR overschrijdt, verschuift de economie beslissend ten gunste van headless.

Hoeveel kost een headless Shopify-build in 2026? Verwacht $80K-$300K voor de eerste build, afhankelijk van complexiteit, bureaulocatie en featureomvang. Lopend onderhoud kost $2K-$8K per maand. Budgetbureaus in Zuid-Azië kunnen voor $25K-$80K leveren, maar je hebt doorgaans sterkere interne projectmanagement- en kwaliteitszekeringsbehoeften.

Kan ik Shopify's checkout met een headless storefront gebruiken? Ja, en dat moet je doen. Shopify's checkout is PCI-compliant, battle-tested en verwerkt betalingsverwerking. Jouw headless frontend maakt een winkelwagen via de Storefront API en leidt dan om naar Shopify's gehoste checkout. Checkout Extensions laten je de ervaring aanpassen binnen Shopify's extensiepunten.

Wat is het prestatieverschil tussen headless en Liquid-thema's? Onze gegevens over 400+ sites tonen dat headless-storefronts 60-75% sneller zijn dan Liquid-thema's op Core Web Vitals-metriek. Specifiek zakt mediaan LCP van 2,3-3,5 seconden (Liquid) naar 0,7-1,0 seconden (headless). Dit vertaalt naar ongeveer 10-15% conversiepercentageverbeteringen gemiddeld.

Moet ik Hydrogen of Next.js gebruiken voor mijn headless Shopify-winkel? Als jouw team Next.js kent, gebruik Next.js. Als je helemaal nieuw begint en de meest geïntegreerde Shopify-ervaring wilt met minimale configuratie, is Hydrogen op Oxygen uitstekend. Het prestatieverschil tussen hen is verwaarloosbaar — teamexpertise en ecosysteembehoeften moeten jouw beslissing bepalen.

Heb ik Shopify Plus nodig voor headless? Technisch gezien nee. De Storefront API is beschikbaar op alle Shopify-abonnementen. Maar in de praktijk profiteren de meeste headless-builds van Plus-functies: Checkout Extensions, Scripts, de Organization API voor multi-store-setups en hogere API-tarieflimits. Op het inkomstniveau waar headless logisch is ($1M+), zou je toch op Plus moeten zijn.

Hoe lang duurt een headless Shopify-migratie? Een typische Shopify Plus naar headless-migratie duurt 12-14 weken met een ervaren team. Ondernemingswinkels met complexe catalogi, zware aanpassingen of multi-market-setups kunnen 16-20 weken duren. Laat niemand je vertellen dat het een 4-weekse klus is — zo kom je uit met een kapotte lancering.

Wat gebeurt er met mijn Shopify-apps wanneer ik headless ga? Dit is een van de grootste pijnpunten. Veel Shopify-apps injecteren scripts in Liquid-thema's, wat niet werkt op een headless-frontend. Je zult elke app evalueren: sommige bieden API's die je rechtstreeks kunt integreren, sommige hebben headless-compatibele versies, en sommige zullen door aangepaste code of alternatieve services moeten worden vervangen. Plan app-audit en -migratie in als onderdeel van je projectscope.

Kan ik Astro of ander non-React-frameworks gebruiken met Shopify's Storefront API? Absoluut. De Storefront API is een standaard GraphQL API — elk framework dat HTTP-verzoeken kan doen, kan het gebruiken. We hebben Shopify-storefronts gebouwd met Astro, SvelteKit en zelfs vanilla JavaScript. De afweging is dat Shopify's officiële tools (Hydrogen, winkelwagenutilities, enz.) op React zijn gebaseerd, dus je zult meer aangepaste integratiecodes met andere frameworks schrijven.