Headless is niet automatisch sneller
Een headless storefront haalt de beperkingen van het thema weg en voegt een buildpijplijn, een hostingverhaal, een previewomgeving en een team toe dat die drie moet onderhouden. Het betaalt zich terug als de front-end echt een product is. Als het werkelijke probleem een traag template of een opgeblazen appstack is, is dat oplossen goedkoper en sneller dan de front-end vervangen.
BEWEZEN
RESULTATEN
TOTALE OMZET T.O.V. VORIGE PERIODE
De headless-stack van Shopify
In een headless opzet blijft Shopify de commerce-motor en wordt de front-end je eigen applicatie. Shopify levert de bouwstenen. De checkout blijft van Shopify en pas je aan met checkout extensibility, in plaats van hem opnieuw te bouwen. Dat beperkt het risico in de betaalflow, maar het betekent ook dat een deel van de klantreis buiten je eigen front-endcode blijft.
Hydrogen: de bibliotheek van Shopify voor eigen storefronts, te gebruiken in React Router, Next.js, Nuxt, Astro of SvelteKit (sinds versie 2026-10)
Oxygen: de hosting van Shopify voor Hydrogen, met een preview per wijziging
Storefront API: producten, collecties, winkelwagen, zoeken en marktcontext via GraphQL
Customer Account API: inloggen, orderhistorie en accountgegevens in een headless storefront
Checkout: gehost door Shopify, uit te breiden met checkout UI extensions (in de checkoutstappen alleen op Plus) en Shopify Functions
Metaobjects of een headless CMS voor redactionele content
Hydrogen is niet de enige optie. Een framework als Next.js op de Storefront API past soms beter, bijvoorbeeld als je team er al mee werkt of als andere applicaties dezelfde front-end delen. We kiezen de stack op basis van team, contentmodel en hostingeisen, niet op voorkeur.
Wat headless van je vraagt
Een theme doet dingen die je pas opmerkt als ze weg zijn. In een headless build vervallen de theme-editor, veel apps die op het theme leunen en een deel van het standaardgedrag van de Shopify-winkel. Voor elk daarvan is een alternatief nodig, en elk alternatief is code of een dienst die iemand moet onderhouden.
Apps die op theme app extensions draaien, hebben een API-alternatief of maatwerk nodig
Merchandisers werken in een CMS of met metaobjects in plaats van de theme-editor
Hydrogen levert hulpmiddelen voor sitemap, robots.txt en redirects; canonicals, structured data en de rest bouw en test je zelf
Analytics, consent en tracking worden in de front-end ingebouwd en opnieuw getest
Markten en talen lopen via de context van de Storefront API en routing
Previews, deployments en monitoring worden onderdeel van je releaseproces
Voordat de bouw begint, toetsen we elke app en koppeling in de huidige winkel aan de headless architectuur. Zo blijkt niet halverwege het project dat reviews, zoekfunctie, personalisatie of loyalty alleen in een theme werken. De kosten om ze te vervangen horen bij de beslissing, niet bij de verrassingen achteraf.
Wanneer een theme beter is
Moderne Shopify-themes zijn flexibeler dan hun reputatie. Secties op elke pagina, metafields en metaobjects voor gestructureerde content en theme app extensions dekken een groot deel van wat merken met headless willen oplossen. Snelheidsproblemen komen vaker door apps, scripts en zware beelden dan door de architectuur van het theme zelf.
Is het doel een onderscheidend ontwerp, dan is een goed gebouwd custom theme via webshopdesign voor Shopify meestal sneller live en goedkoper in onderhoud. Is het doel conversie, dan geeft CRO op het bestaande theme sneller antwoord. Headless is zinvol als de front-end zelf het product is en het team om hem te onderhouden er al is.
Ook productdata kan de doorslag geven. Moet content uit een PIM, een CMS en Shopify op één pagina samenkomen op een manier die een theme niet kan modelleren, dan wordt headless aantrekkelijker. We wegen dat af tegen de extra verantwoordelijkheid en zetten de onderbouwing op papier.
Zo verloopt een headless project
Architectuurreview. We beoordelen de huidige winkel, apps, contentbronnen en het team, en leggen vast of headless gerechtvaardigd is of dat een theme het probleem met minder risico oplost.
Stack en contentmodel. We kiezen framework, hosting en CMS, en modelleren content in metaobjects of het CMS, zodat redacteuren pagina’s beheren zonder voor elke wijziging een developer nodig te hebben.
Ontwerp en componenten. We ontwerpen een componentenbibliotheek rond echte templates, van product- en collectiepagina’s tot content- en accountpagina’s, met performancebudgetten die vastliggen voordat de ontwikkeling start.
Bouw en koppelingen. We bouwen de storefront op de Storefront API en Customer Account API, vervangen apps die van het theme afhangen en koppelen zoekfunctie, reviews, CMS en tracking.
SEO- en pariteitstests. We mappen elke URL, redirect en elk type structured data, testen analytics en consent, en vergelijken de nieuwe front-end met de oude winkel voordat we overschakelen.
Lancering en eigenaarschap. We lanceren met monitoring en een terugvalplan. Daarna dragen we documentatie en pipelines over, of ontwikkelen en onderhouden we de storefront verder samen met je team.
Headless Shopify in cijfers (stand oktober 2026)
De cijfers die een headless Shopify-build bepalen, zoals Shopify en Google ze publiceren. We hebben ze in oktober 2026 nagelopen. Limieten veranderen; de actuele documentatie op shopify.dev is leidend.
Oxygen-hosting zit zonder meerprijs in de betaalde abonnementen: Starter, Basic, Grow, Advanced, Plus en Pause and build. Op Agentic-abonnementen is het niet beschikbaar. Host je op Oxygen, dan is hosting geen aparte post in je begroting.
Publieke storefronts: 1 op Starter tot en met Advanced, 25 op Plus. Wil je een aparte storefront per merk of land, dan kom je bij Shopify Plus.
Hydrogen 2026-10: Hydrogen is nu een library die je aan je eigen framework toevoegt, zoals React Router, Next.js, Nuxt, Astro of SvelteKit, met bindings voor React en Vue. Versies 2026-04 en ouder zijn legacy, en Shopify raadt migreren aan. Draait je storefront al op Hydrogen, zet die migratie dan op de roadmap.
Oxygen-limieten: 30 seconden CPU-tijd en 128 MB geheugen per request, en een worker van maximaal 10 MB die binnen 400 ms start. Oxygen ondersteunt geen proxy vóór de deployments. Zwaar werk, zoals PIM-data synchroniseren of configuraties doorrekenen, hoort in een aparte service.
Storefront API: echte kopers hebben geen vaste limiet op requests per minuut. Bots en geautomatiseerd verkeer worden wel begrensd, het aanmaken van checkouts wordt per minuut afgeremd, en toegang zonder token heeft een query-complexiteitslimiet van 1.000. Pieken in de uitverkoop worden niet afgeknepen; koppelingen gebruiken een token en de juiste API.
API-versies: Shopify brengt elke drie maanden een nieuwe uit, op de eerste dag van het kwartaal. Elke stabiele versie wordt minstens 12 maanden ondersteund. Plan minimaal één versie-upgrade per jaar.
Customer Account API: vereist Shopify-klantaccounts, het Headless- of Hydrogen-kanaal en HTTPS op een echte hostnaam. Inloggen loopt via Shopify, dus je klant blijft ingelogd van storefront tot checkout.
Checkout UI extensions in de stappen informatie, verzending en betaling: alleen op Plus. Je headless frontend stopt waar de checkout begint. Die stappen aanpassen doe je met Plus en extensions, niet met frontendcode.
Core Web Vitals (Google): LCP binnen 2,5 seconden, INP hooguit 200 ms, CLS hooguit 0,1, gemeten op het 75e percentiel van de paginaladingen op mobiel en desktop. Wij zetten die in de acceptatiecriteria, want headless haalt ze niet vanzelf.
Een thema is genoeg als de frontend niet het product is. Horizon, het eigen thema van Shopify, is gebouwd op theme blocks: herbruikbare blokken die je kunt nesten en in elke sectie kunt gebruiken. Met metafields en metaobjects dekt dat de meeste wensen voor design en content, zonder eigen hosting of jaarlijkse upgrades. Begin dan met Shopify store design or CRO. Headless loont als meerdere contentbronnen, storefronts of configuraties samen moeten komen, zoals bij Urban Arrow.
Headless-projecten die we opleverden
Urban Arrow: Shopify, Storyblok en een Vue.js-frontend
Voor Urban Arrow bouwden we een headless platform waarin Shopify de commerce verzorgt en Storyblok de content beheert. De Vue.js-frontend ondersteunt productconfiguraties, slimme SKU-structuren en gelokaliseerde prijzen, met koppelingen naar HubSpot en andere API's. Bekijk de Urban Arrow-case
Overweeg je headless Shopify?
Vertel ons wat je huidige storefront niet kan. We geven je een eerlijk eerste beeld of headless zich terugbetaalt, of dat een theme het met minder risico oplost.
