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: het React-framework van Shopify voor eigen storefronts
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-projecten die we opleverden
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.
