Shopify headless of native Shopify: wat heeft jouw merk echt nodig?

ShopifyHeadless commerceNext.jsE-commerce

Shopify headless of native Shopify (Plus)? Een beslismodel met afwegingen, echte Core Web Vitals van Orangefit en een checklist voor EU-merken.

In het kort: voor de meeste merken is een goed gebouwd native Shopify (Plus)-theme de beste keuze. Je bent sneller live, het is goedkoper en alle apps werken gewoon. Shopify headless wordt interessant als je veel content publiceert, in meerdere landen verkoopt met eigen content per land, veel systemen koppelt of een design wilt dat een theme niet aankan. Reken dan wel op hogere bouw- en onderhoudskosten.

Merken die een nieuwe webshop laten maken, vragen vaak of ze headless moeten gaan. Meestal is het antwoord: nog niet. In dit artikel lees je wanneer het wél de moeite waard is.

Wat is headless Shopify?

Bij een native Shopify-webshop doet Shopify alles: producten, bestellingen, checkout én de website die je klanten zien. Die website is een theme, gebouwd in Liquid.

Bij headless Shopify haal je de website los van Shopify. Shopify beheert nog steeds producten, voorraad en checkout, maar de website zelf is een aparte app, meestal gebouwd met Next.js of Hydrogen (Shopify's eigen framework). Die app haalt producten en prijzen op via de Storefront API. Content zoals blogs en landingspagina's beheer je vaak in een apart CMS, zoals DatoCMS.

Dat is ook wat headless e-commerce in het algemeen betekent: je website en je webshopsysteem zijn twee losse onderdelen die via een API met elkaar praten.

Shopify noemt zelf drie manieren om headless te bouwen:

  • Hydrogen: Shopify's eigen framework, gebouwd op React Router, met hosting op Oxygen.
  • Hydrogen React: Shopify's componenten in een ander React-framework.
  • Headless channel: elk framework dat je wilt (wij gebruiken meestal Next.js op Vercel), gekoppeld via de Storefront API.

Headless vs native Shopify in één overzicht

Native Shopify (Plus)-themeShopify headless
WebsiteLiquid-theme met secties en app-blokkenEigen app in Next.js of Hydrogen
OntwerpvrijheidGroot, binnen de grenzen van het themeOnbeperkt
Content beherenIn de Shopify-editorIn een CMS (bijv. DatoCMS) + Shopify
AppsDe meeste werken directApps die iets in het theme tonen, moet je apart koppelen
CheckoutShopify-checkoutShopify-checkout (hetzelfde)
SnelheidGoed, hangt af van theme en appsZeer snel, als het goed gebouwd is
Tijd tot livegangKorterLanger
Vaste kostenLagerHoger: hosting, CMS en onderhoud
Past bijDe meeste D2C-merkenMerken met veel content, meerdere landen of een eigen design

Wanneer native Shopify de juiste keuze is

Kies native, eventueel Shopify Plus met een maatwerk-theme, als:

  • Je webshop past in wat Shopify standaard kan. Productpagina's, collecties, een blog en een paar landingspagina's. Moderne themes kunnen daar prima mee overweg.
  • Je veel apps gebruikt. Reviews, upsells, bundels, loyalty en abonnementen installeer je in een theme meestal met een paar klikken. Bij headless moet je elke app apart koppelen.
  • Je snel live wilt. Een theme is sneller gebouwd, en je team kan zelf dingen aanpassen in de Shopify-editor.
  • Niemand de website na livegang onderhoudt. Een headless website is software. Die heeft updates en onderhoud nodig.

Een snel, goed gebouwd theme met een paar apps is voor de meeste merken het beste startpunt. Dat is ook de kern van onze native Shopify-aanpak.

Wanneer Shopify headless de moeite waard is

Headless verdient zich terug als een of meer van deze punten voor jou gelden:

  1. Content helpt bij jou verkopen. Je publiceert artikelen, recepten of lookbooks naast je producten, en je team wil dat zonder developer doen.
  2. Je verkoopt in meerdere landen met eigen content. Niet alleen vertaald, maar per land andere pagina's, campagnes en zoekresultaten.
  3. Je merk vraagt om een eigen design. Interacties, animaties of layouts die je met een theme niet goed kunt bouwen.
  4. Je koppelt veel systemen. Abonnementen, loyalty, memberships en zoeken door producten én content moeten als één website werken.
  5. Snelheid is een harde eis. Je wilt zelf bepalen wat er geladen wordt en hoe.

Snelheid telt. Deloitte zag dat een 0,1 seconde snellere mobiele site bij retailers 8,4% meer conversie en een 9,2% hogere gemiddelde orderwaarde opleverde (Deloitte, 2020). Een slank theme kan ook snel zijn, maar met headless heb je er de meeste controle over.

Twijfel je? Na een intake krijg je een voorstel met een vaste prijs. Soms is het advies gewoon: blijf native. Vertel ons over je webshop.

De nadelen van headless

  • Apps werken niet vanzelf. Veel Shopify-apps gaan uit van een theme. Bij headless moet je reviews, upsells en tracking via de API of SDK van elke leverancier koppelen. Check van tevoren of je belangrijkste apps dat ondersteunen.
  • Je hebt software in beheer. Framework-updates, nieuwe versies van de Storefront API, hosting en monitoring: iemand moet dat bijhouden, jij of je partner.
  • Twee systemen in plaats van één. Producten beheer je in Shopify, content in het CMS. Met een goed opgezet CMS merk je daar weinig van. Met een slecht opgezet CMS doe je dubbel werk.
  • SEO-basics moet je zelf bouwen. Een theme regelt sitemaps, canonical tags, structured data en redirects voor je. Bij headless moet dat opnieuw gebouwd worden, net als previews.
  • De checkout blijft van Shopify. Dat is goed voor betrouwbaarheid en betalingen. Maar je kunt de checkout bij headless niet meer aanpassen dan bij native.

Hydrogen of Next.js?

Hydrogen is Shopify's eigen framework, gebouwd op React Router. Hosting op Oxygen zit zonder extra kosten in alle betaalde Shopify-abonnementen, van Starter tot en met Plus (behalve Agentic). Handig als je website vooral een winkel is.

Wij kiezen vaak voor Next.js op Vercel als de website net zoveel content als producten heeft. Het is niet aan Shopify gebonden, heeft een groot ecosysteem en werkt goed samen met een CMS als DatoCMS. Beide gebruiken dezelfde Storefront API, dus de koppeling met Shopify is hetzelfde.

Verkopen in meerdere EU-landen

Verkoop je in Nederland, België, Duitsland of verder? Dan werken headless en Shopify Markets goed samen. Met de @inContext-directive van de Storefront API haal je prijzen op in de juiste valuta per land en productinformatie in de juiste taal. In het CMS beheer je de pagina's en campagnes per land.

Twee dingen die we bij EU-projecten altijd regelen:

  • Cookietoestemming. Bij headless laad je zelf elke pixel en elk script. Consent (AVG) moet je dus vanaf het begin inbouwen.
  • SEO per land. hreflang, URL's per taal en sitemaps per land moet de website zelf maken.

Checklist: heb jij Shopify headless nodig?

Tel een punt voor elke "ja":

  • We publiceren elke week content die producten moet verkopen.
  • We verkopen in 3 of meer landen, met andere content per land.
  • Ons huidige theme houdt ons designteam vaker dan eens per kwartaal tegen.
  • We gebruiken 3 of meer systemen naast Shopify (abonnementen, loyalty, memberships, ERP) die als één website moeten werken.
  • Onze belangrijkste apps hebben een API of headless SDK.
  • We hebben budget voor doorlopend onderhoud, intern of via een partner.
  • We hebben ons native theme al geoptimaliseerd en lopen tegen grenzen aan.

0–2: blijf native en investeer in een goed, slank theme. 3–4: blijf nu native, maar zet je content zo op dat je later headless kunt. 5 of meer: headless is waarschijnlijk de moeite waard.

Onze aanpak

Elk project volgt hetzelfde proces: intake, een schriftelijke scope met vaste prijs, bouwen, feedback verwerken, opleveren, en daarna onderhoud en support zonder dure retainer. Native of headless: je team moet de webshop zelf kunnen beheren, met bouwblokken in je huisstijl, zodat marketing pagina's maakt zonder developer.

Veelgestelde vragen

Wat is headless Shopify?

Shopify regelt producten, winkelwagen en checkout. De website die je klanten zien is een aparte app (bijvoorbeeld Next.js of Hydrogen) die zijn gegevens via de Storefront API uit Shopify haalt.

Wat is headless e-commerce?

Je website en je webshopsysteem zijn twee losse onderdelen die via een API met elkaar praten. Je bouwt de website zoals je wilt, terwijl een platform als Shopify producten, bestellingen en betalingen regelt.

Is headless Shopify het waard?

Ja, als je veel content hebt, in meerdere landen verkoopt met eigen content, veel systemen koppelt of een eigen design nodig hebt, en je het onderhoud kunt betalen. Voor de meeste kleine en middelgrote D2C-webshops levert een goed native theme meer op.

Is Shopify Hydrogen headless?

Ja. Hydrogen is Shopify's eigen framework voor headless webshops, gebouwd op React Router. Hosting op Oxygen zit zonder extra kosten in de betaalde Shopify-abonnementen.

Gebruikt headless Shopify nog de Shopify-checkout?

Ja. De winkelwagen wordt via de Storefront API opgebouwd en klanten betalen in de checkout van Shopify. Je kunt de checkout niet meer aanpassen dan bij een native webshop.

Werken Shopify-apps met een headless webshop?

Apps die in de Shopify-admin draaien meestal wel. Apps die iets in je theme tonen (reviews, upsells, sommige tracking) moet je via hun API of SDK koppelen. Check je belangrijkste apps voordat je kiest.

Klaar om te kiezen?

Twijfel je tussen headless en een native Shopify Plus-theme? We kijken naar je producten, content, landen en apps, en zeggen eerlijk wat past. Je krijgt altijd een voorstel met een vaste prijs. Neem contact op, mail naar info@petercoolen.com of bel +31 6 57 54 60 27.

Bronnen