Shopify headless: wat is het en voor welke webshop is het zinvol?

Shopify headless betekent dat je Shopify alleen gebruikt als systeem achter de schermen (producten, voorraad, betalingen, bestellingen) en de voorkant van je webshop los daarvan bouwt. Je zit dus niet meer vast aan Shopify-thema’s en kunt elk ontwerp en elke techniek gebruiken. Het geeft veel vrijheid, maar vraagt ook ontwikkelaars, een groter budget en meer onderhoud. Voor de meeste kleine webshops is een gewoon Shopify-thema de betere keuze.

Wat betekent headless?

Een webshop bestaat uit twee delen:

• De voorkant (frontend, de “head”): wat bezoekers zien. Pagina’s, productfoto’s, het menu, de winkelwagen.
• De achterkant (backend): waar je producten, prijzen, voorraad, klanten en bestellingen beheert, en waar betalingen worden verwerkt.

Bij een gewone Shopify-winkel zijn die twee aan elkaar vast. Je kiest een thema, past het aan in de thema-editor en Shopify toont het aan je bezoekers. Bij headless haal je het hoofd eraf: Shopify levert alleen de data, en een losse website (gebouwd door een ontwikkelaar) haalt die data op en toont ze.

Hoe werkt headless Shopify technisch?

De losse voorkant praat met Shopify via de Storefront API, een koppeling waarmee je producten, collecties, de winkelwagen en het afrekenproces kunt opvragen. Voor de voorkant heb je grofweg twee routes.

Route 1: Hydrogen en Oxygen

Shopify heeft een eigen framework voor headless winkels: Hydrogen. Dat is gebouwd op React Router en bevat kant-en-klare onderdelen voor winkelwagens, productvarianten en meer. Je kunt een Hydrogen-winkel hosten op Oxygen, de hosting van Shopify zelf. Volgens de documentatie van Shopify is Oxygen bij vrijwel alle betaalde abonnementen inbegrepen, zonder extra kosten.

Route 2: een ander framework

Je kunt ook een ander framework gebruiken, zoals Next.js of Nuxt, en dat hosten bij een partij naar keuze. Dat geeft nog meer vrijheid, bijvoorbeeld als je ontwikkelaars al met die techniek werken of als je de webshop wilt combineren met een los contentsysteem (CMS) voor blogs en landingspagina’s.

Headless versus een gewoon Shopify-thema

Voordelen van headless Shopify

• Volledige vrijheid in ontwerp en beleving. Interactieve productconfigurators, bijzondere animaties of een site die meer op een magazine lijkt: alles kan.
• Snelheid. Een goed gebouwde headless winkel kan heel snel laden, wat goed is voor conversie en SEO.
• Meerdere kanalen uit één bron. Dezelfde productdata voeden je website, een app, een kassasysteem of schermen in een winkel.
• Combineren met andere systemen. Bijvoorbeeld een los CMS voor content, zodat je marketingteam pagina’s kan maken zonder de webshop aan te raken.

Nadelen en valkuilen

• Je bent afhankelijk van ontwikkelaars. Een tekst of banner aanpassen kan ineens een ticket voor een developer worden, tenzij je een CMS koppelt.
• Apps werken niet vanzelf. Reviews, upsells, filters en veel andere apps zijn gemaakt voor thema’s. In een headless winkel moet je ze vaak zelf koppelen of vervangen.
• SEO is jouw verantwoordelijkheid. Metadata, structured data, redirects en sitemaps die Shopify normaal regelt, moet je zelf goed inrichten. Meer daarover in SEO voor webshops.
• Hogere totale kosten. Niet alleen de bouw, ook updates, beveiliging en doorontwikkeling kosten structureel geld. Zie ook wat Shopify echt kost.

Voor wie is headless Shopify zinvol?

Headless is meestal pas logisch als meerdere van deze punten op je van toepassing zijn:

1. Je webshop draait al goed en loopt aantoonbaar tegen de grenzen van thema’s aan.
2. Je hebt een eigen ontwikkelteam of een vaste technische partner met budget voor doorlopend werk.
3. Je verkoopt via meerdere kanalen en wilt die uit één bron voeden.
4. De merkbeleving is een groot deel van je propositie, bijvoorbeeld in mode of design.

Herken je jezelf hier niet in, dan haal je met een snel thema, goede productfoto’s en sterke productteksten meestal meer resultaat voor minder geld.

Praktijkvoorbeeld: een meubelwebshop

Stel: een webshop in maatwerk tafels wil dat klanten zelf houtsoort, maat en poten kiezen en direct een 3D-voorbeeld zien. Met een standaardthema lukt dat maar half; de configurator voelt traag en de prijs past zich niet goed aan.

De eigenaar laat eerst onderzoeken of een configurator-app of een aangepast thema-onderdeel volstaat. Dat blijkt voor zijn situatie genoeg te zijn, voor een fractie van de kosten van een volledig headless winkel. Pas als hij later ook een app en winkelschermen wil voeden, wordt headless een serieuze optie.

Dat is meestal de juiste volgorde: eerst kijken wat binnen Shopify kan, dan pas de stap naar headless.

Zelf doen of uitbesteden?

Zelf doen is bij headless alleen realistisch als je zelf ontwikkelaar bent en ervaring hebt met React of een vergelijkbaar framework. Ook dan is het verstandig om eerst een kleine proefversie te bouwen.

Uitbesteden is voor bijna elke ondernemer de route. Laat dan ook eerlijk beoordelen of headless nodig is, of dat een goed ingericht thema je doel ook haalt. Twijfel je nog over het platform zelf, lees dan Shopify of WooCommerce. Ga je van een ander systeem naar Shopify, kijk dan naar overstappen naar Shopify zonder SEO-verlies.

Tot slot

Headless Shopify geeft je maximale vrijheid, maar je betaalt ervoor in ontwikkeltijd, onderhoud en afhankelijkheid van techniek. Voor de meeste mkb-webshops is een snel, goed ingericht thema de slimste keuze. Wil je weten wat bij jouw winkel past, of wil je dit liever uitbesteden? Bekijk dan onze aanpak voor een webshop laten maken.

Veelgestelde vragen