Alles wat je wil weten over Headless Commerce

Headless commerce, wanneer is het interessant voor jouw organisatie? En wat zijn de voor- en nadelen van een Headless CMS? In deze uitgebreide longread brengen wij je volledig op de hoogte. En ontdek je alles over een van de grootste trends op het gebied van e-commerce.

  • Wat is headless?
  • Waarom headless?
  • De voordelen van headless
  • De nadelen van headless
  • Voorbeelden van headless commerce
  • Headless versus traditioneel CMS
  • Headless versus decoupled CMS
  • Headless versus Magento
  • A guide to headless
  • Headless CMS bouwen
     

Wat is headless?

Samengevat heeft een traditioneel CMS veel standaard ingebouwde opties, die direct in te zetten zijn. Het nadeel is wel dat je wordt beperkt in je vrijheid. Maar met name kijkend naar het beheer, de verspreiding en de snelheid van je content heb je met een headless CMS veel voordelen.

We spreken van Headless commerce als de frontend en backend van een e-commerce platform ontkoppeld zijn en op het gebied van content onafhankelijk van elkaar kunnen functioneren. Er is dus sprake van een content management systeem (CMS), waarbij het vullen van content en het presenteren ervan volledig los staan van elkaar. De standaard interface waar de uiteindelijke eindgebruiker de content op te zien krijgt - het gezicht - ontbreekt.

Dankzij headless ben je dus veel minder afhankelijk van de beperkingen van CMS’en in standaard oplossingen, zoals die van de populaire e-commerce platformen Magento en Drupal, of een CMS als WordPress. Dit soort platformen hebben vaak veel beperkingen en zijn soms te complex. Headless werkt namelijk met API’s, welke de content naar de uiteindelijke interface wordt geschoten. Die interface hoeft in dit geval niet altijd standaard een webshop op een webbrowser te zijn. Dit kan ook een mobiele applicatie zijn, bijvoorbeeld.

De backend is nog steeds aanwezig, maar het begrip van frontend is in het kader van headless behoorlijk aangepast.

Waarom headless?

Sinds de opkomst van e-commerce worden webshops ontworpen vanuit de gedachte dat de consument via een desktop een digitale catalogus bezoekt en vervolgens een bestelling plaatst.

Door de explosieve groei van smartphones is deze gedachte inmiddels aangepast en ligt de focus tegenwoordig op mobile first. De grote softwarepakketten voor e-commerce zijn ooit ontwikkeld als ‘one-stop-shops’. Dit betekent dat zowel de frontend als backend zijn ondergebracht in één systeem en volledig met elkaar zijn geïntegreerd. Dat lijkt in eerste instantie erg handig, maar brengt ook beperkingen met zich mee. Veel flexibeler ben je als zowel frontend als backend losgekoppeld is. Deze beweging noemen we headless commerce.

Steeds meer bestaande e-commerce pakketten maken momenteel de beweging naar het nieuwe Headless Commerce. Het gat tussen web en native apps wordt steeds kleiner en de techniek is nog volop in ontwikkeling. Belangrijk dus om deze ontwikkeling goed in de gaten te houden en gebruik te maken van de nieuwe kansen die ontstaan.

Met headless zijn frontend en backend ontkoppeld

Een webshop bestaat altijd uit twee delen: een frontend en een backend. Frontend is het gedeelte van de website wat de bezoeker kan zien, de interface dus. En backend is het beheergedeelte van de website. Bestellingen worden via de frontend geplaatst en in de backend afgehandeld.

Binnen veel standaardoplossingen zijn de front- en backend met elkaar geïntegreerd. Populaire voorbeelden zijn onder andere Magento en Drupal. Magento is het populairste e-commerce platform in Nederland en veel andere landen. De e-commerce mogelijkheden binnen Magento zijn eindeloos. Een nadeel echter is dat afwijken van de Magento frontend, welke echt is gericht op een traditionele webshop, relatief lastig is. Aan de andere kant is Drupal hier juist weer erg sterk in, maar biedt weer minder e-commerce functionaliteiten.

De ontwikkelaar van de software schrijft op die manier de regels voor. Hierdoor is de vrijheid aan de voorkant beperkt. Softwarepakketten zoals Magento, bevatten een hoop standaard functionaliteiten en templates, waardoor het laagdrempelig is om ermee te starten. Het gevaar is wel dat er webshops ontstaan die op elkaar lijken door het gebruik van een standaard structuur of template. Vooral als je echt onderscheidend wil zijn, kan dit een probleem zijn.

Bij een Headless CMS zit dat net even anders.

Headless commerce uitgelegd

We spreken dus van Headless commerce als zowel de frontend - de interface, het gezicht - en backend - het skelet van de webshop - van een e-commerce platform ontkoppeld zijn en onafhankelijk van elkaar functioneren. Er is dus sprake van een CMS waarbij het vullen van content en het presenteren ervan volledig los staan van elkaar.

De backend is nog steeds aanwezig, maar het begrip van frontend is inmiddels aangepast.

Als je voor een traditioneel systeem zoals Magento of Drupal kiest, worden deze twee delen als één systeem opgeleverd. Bij headless wordt er vanuit het CMS alleen een API (Application Programming Interface) beschikbaar gesteld die gebruikt kan worden om een eigen frontend te ontwikkelen.

Het beheer en de database logica worden via deze API verbonden met het frontend, dat volledig wordt ingericht naar de voorkeur en behoefte van het merk of bedrijf. Dit geeft softwareontwikkelaars meer vrijheid om echt iets unieks te ontwikkelen.

API first

In headless commerce maken backend-developers dus gebruik van API’s om content te leveren aan de voorkant - de interface, of de ‘head’. Een API maakt het mogelijk voor twee systemen om met elkaar te communiceren. Via de API kunnen de benodigde gegevens worden uitgewisseld tussen verschillende applicaties, ook buiten je eigen architectuur.

Vervolgens zorgen frontend-developers ervoor dat deze informatie via ieder kanaal en device op de juiste wijze gepresenteerd wordt aan de klant. Hiervoor kiezen ze zelf de frontend-technologie. Op deze manier kunnen meerdere omgevingen, bijvoorbeeld je app en webshop, gekoppeld worden aan één e-commerce-engine.

De vrijheid voor een eigen architectuur opzet is hierdoor enorm. Belangrijk dus ook om goed te bedenken op welke wijze je waarde wil toevoegen. Die moet zich namelijk uiten in de microservices en functionaliteit die je jouw platformbezoekers en interne gebruikers aanbiedt. Deze ontwikkel je op basis van klantbehoefte en business value.

Als de volledige data uitwisseling plaatsvindt door middel van API’s, spreekt men van een API First-opzet. Dit brengt een hoop voordelen met zich mee, omdat het e-commerce platform hiermee voorbereid is op de adoptie van toekomstige ontwikkelingen en technologieën.

De voordelen van headless commerce

Een headless CMS biedt enorm veel voordelen. We zetten ze even voor je op een rijtje:

  • Next-level omnichannel strategie
  • Flexibiliteit
  • Sneller werken
  • Snellere content
  • Maatwerk en gebruiksvriendelijkheid
     

Next-level omnichannel strategie

Met headless e-commerce kan een winkel of platform de omnichannel strategie, waarbij de consument centraal staat, naar een volgend level brengen. Interfaces kunnen nu namelijk met alle vrijheid worden aangepast voor ieder kanaal. Als beheerder bepaal je nu namelijk zelf hoe en waar je content vertoond wordt. Zeker in vergelijking met een traditioneel CMS, of een decoupled CMS (waarover later meer), beschik je met een headless CMS over waanzinnig veel vrijheid.

Flexibiliteit

Een belangrijke factor bij het creëren van aangepaste software is de hoeveelheid tijd en middelen die nodig zijn om de ontwikkeling van uitgebreide bedrijfslogica en backend te realiseren. Deze ontwikkeling beslaat namelijk het grootste deel van het software ontwikkelingsproces.

Een website moet goed onderhouden worden. Over het algemeen is de frontend van een website om de vier jaar aan vervanging toe. Maar als je frontend ontkoppeld is - headless dus - is dit natuurlijk een stuk eenvoudiger. Specialistische backend development kennis wordt bij dit onderhoud overbodig. Dit versnelt het proces van het vervangen of in ieder geval up-to-date houden van het systeem aanzienlijk. Ook ben je flexibeler in het overstappen naar een ander systeem of in het kader van omnichannel, je content distributie uit te breiden naar nieuwe interfaces.

In traditionele CMS’en zijn oplossingen gekoppeld. Kijkend naar flexibiliteit vormt dit doorgaans een grote drempel voor iedere gewenste aanpassing aan de content die je wilt maken. Als er iets aangepast moet worden kan het zijn dat er een full-stack-developer of een team aan front- en backend developers nodig is, omdat er hiervoor ook bewerkingen vereist zijn in de databaselaag.

Sneller werken

Headless commerce ontkoppelt front en backend en zorgt hiermee voor flexibiliteit en dus realiseer je tijdswinst bij het updaten en distribueren van je content. Het wordt eenvoudiger om de gewenste wijzigingen aan te brengen. Door de headless structuur ontstaat er meer onafhankelijkheid en wordt het mogelijk om contentlagen bij te werken zonder het bedrijf te verstoren. Er is in dit geval slechts een frontend developer nodig om de gewenste wijzigingen door te voeren.

Sneller content

Niet alleen je werkzaamheden gaan sneller, ook je content wordt sneller. Headless systemen zijn doorgaans modern en beschikken over fantastische technische features. Traditionele CMS systemen zijn niet geoptimaliseerd om content zo snel mogelijk te maken.

Die ‘snellere content’ vindt de eindgebruiker - jouw doelgroep - natuurlijk ontzettend prettig. En die niet alleen: ook zoekmachines zoals Google herkennen snellere websites en webshops. Omdat het Google’s missie is om informatie wereldwijd te organiseren en zo snel mogelijk antwoord te geven op de vragen van haar gebruikers, krijgen snelle websites en webshops voorrang in de zoekresultaten.

Maatwerk

Traditionele oplossingen bieden een vooraf gedefinieerde ervaring voor de gebruiker. Ze staan een eenvoudige bewerking van thema’s en lettertype toe, maar zijn niet in staat om de perfecte gebruikerservaring te bieden. Headless commerce verandert de gevestigde gebruikerservaring en maakt het mogelijk om deze ervaring volledig naar wens in te richten. Op deze manier ontstaat er een ervaring die precies aansluit bij de wensen van zowel de gebruiker als beheerder.

Traditionele frontend developers zijn ook vaak beperkt in wat er daadwerkelijk kan worden bijgewerkt en bewerkt, omdat ze met een bepaalde vaste structuur rekening moeten houden. In het geval van bijvoorbeeld Magento, waarbij frontend en backend niet zijn losgekoppeld, is de vrijheid van een frontend developer beperkt. Headless commerce stelt ontwikkelaars in staat om een volledig verzorgde en unieke gebruikerservaring te creëren die precies aansluit bij de wensen van een bedrijf. De inhoud van een website kan nu volledig aangepast worden op basis van demografie en het biedt de mogelijkheid om klanten hoogst gepersonaliseerde content te tonen.

Daarnaast hoeven frontend developers zich niet langer zorgen te maken over het wijzigen van de database. Het is een kwestie van een eenvoudige API-oproep en de gegevens zijn beschikbaar in de gebruikersinterface. Door gebruik te maken van een headless oplossing kunnen frontend developers nauwer en sneller samenwerken met het het design- en marketing team. Samen bepalen ze welke integraties het meest zinvol zijn voor je bedrijf en welke daadwerkelijk financiële bedrijfsresultaten beïnvloeden. Ook zijn aanpassingen parallel uit te voeren, wat enorm veel tijdwinst oplevert.

Gebruiksvriendelijkheid

Het is tegenwoordig belangrijker dan ooit om te luisteren naar de wensen van je klanten. Amazon, misschien wel het bekendste headless commerce-platform, pusht gemiddeld elke 11,7 seconden nieuwe updates.

Een headless CMS maakt het mogelijk om omnichannel te opereren. Je bepaalt zelf welke content op welke manier wordt vertoond, waar dan ook. En het idee daarachter stem je natuurlijk af op de wensen van de klant.

De nadelen van een headless CMS

Ook een headless CMS is helaas niet perfect. Er zijn een paar nadelen waar je rekening mee moet houden bij de keuze voor een headless CMS.

  • Problemen met testen
  • Minder prettig werken voor marketeers
  • Versnipperde tech stack
     

Problemen met testen

Voor content publishers is het stukken moeilijker om de gemaakte content te previewen en te testen. Logisch, want er is niet één standaard interface waar je dit in kan testen. Je content wordt bij wijze van spreken in verschillende stukken gehakt en versnipperd over allerlei interfaces. Door die versnippering is het minder eenvoudig om in één keer te zien of de door jou gemaakte wijzigingen op iedere plek het gewenste resultaat levert.

Soms minder prettig voor marketeers

Het beheren van content in een simpele WYSIWYG-editor is in een headless CMS helaas lang niet altijd mogelijk. Bloggen wordt hierdoor een stuk minder eenvoudig. Steeds vaker is daardoor een frontender of in ieder geval codekennis nodig om gewenste wijzigingen door te voeren, of nieuwe pagina’s of blogs live te zetten.

Ook de Analytics-mogelijkheden en manieren om je content te personaliseren, zijn niet meer zo kant-en-klaar beschikbaar als in de traditionele toepassingen. Om de prestaties van je content op verschillende platformen te checken, kom je waarschijnlijk problemen tegen met betrekking tot bijvoorbeeld datatracking.

Je tech stack is versnipperd

Door het ‘head’ van je CMS weg te halen moet je een stap verder zetten in de zoektocht naar technologieën om dit te vervangen. In de meeste gevallen resulteert dit in in-house frontend development, of het aanschaffen van third-party tools. Die extra stappen die je moet zetten om een head te ontwikkelen, kosten tijd en geld.

Headless vs decoupled CMS

Buiten het verschil tussen een headless CMS en een traditioneel CMS, zoals in veel e-commerce platformen het geval is, is er ook nog een decoupled CMS. Een decoupled CMS, ook wel bekend als een hybrid headless CMS, lijkt in veel gevallen op een headless CMS. Het belangrijkste verschil is hierbij echter dat dit systeem nog steeds een ‘head’ heeft. Het ‘head’ is echter niet standaard gekoppeld aan de rest van het lichaam, ofwel de backend en de API’s waar je gebruik van maakt.

In een headless situatie moet je dus zélf het ‘head’ per apparaat of browser ontwikkelen. Een decoupled CMS heeft als het ware een paar templates voor je beschikbaar die je kunt toepassen, maar het hóeft niet. En mocht je gebruik maken van de heads die in een decoupled CMS beschikbaar zijn, vergt dit zeer waarschijnlijk extra frontend aandacht.

Een headless CMS werkt puur en alleen op basis van API’s. Er zijn dus geen frontend templates of andere regels waar je je aan dient te houden.

Headless vs Magento

Magento is momenteel druk bezig om Headless en Progressive Web Apps (PWA’s) te ondersteunen. Hiermee ben je in staat om een eigen frontend of PWA van je frontend te maken door middel van de headless techniek. Dit is één van Magento’s belangrijkste kenmerken van headless, en gaat in de toekomst alleen maar groter worden.Progressive Web Apps zijn door Google in het leven geroepen om een snellere oplossing te bieden voor mobiel gebruik. Het aantal bezoekers van webshops op smartphones neemt namelijk in rap tempo toe, terwijl het conversieratio hier nog altijd lager ligt.

A guide to headless hommerce

Er zijn twee belangrijke factoren waardoor de populariteit van headless commerce enorm toeneemt.

Toen e-commerce voor het eerst op de markt kwam, bezocht het grootste deel van het online verkeer websites via een desktop. Als gevolg hiervan ontstonden er standaard oplossingen. Naarmate de technologie groeide, veranderde het pad naar aankoop zich niet alleen naar mobiel verkeer, maar ook naar een complexe matrix van contactpunten van kopers die flexibiliteit vereisen. Dit is erg lastig voor full-stack-oplossingen om uit te voeren, omdat het frontend en backend van het systeem zijn gekoppeld.

Bijna iedere marktspeler wil inmiddels uitbreiden naar e-commerce. Vanwege de grote hoeveelheid content die al bestaat, is het vanuit implementatie standpunt veel eenvoudiger om een ​​commerce-engine te bouwen en deze aan te sluiten op de bestaande content management oplossing, in plaats van een geheel nieuwe website te bouwen en hier oude content naartoe te migreren.

Bedrijven als Coolblue, Bol.com en Zalando hebben er voor gekozen om zelf een eigen omgeving op te zetten. Ze zijn in staat de ultieme gebruikerservaring te bieden door de maximale focus op frontend flexibiliteit. Ook veel bedrijven zonder een digitale achtergrond willen investeren in een omgeving voor de toekomst en overwegen over te stappen op Headless commerce.

MyHealthCares.eu

Bluebird Day werkt sinds 2018 aan het eHealth platform, MyHealthCares.eu, dat betrouwbare gezondheidszorg toegankelijk maakt. MyHealthCares werkt als volgt: een bezoeker vraagt de behandeling van zijn of haar voorkeur aan, vult een medische vragenlijst in en deze wordt naar een gecertificeerde arts doorgestuurd. De arts beoordeelt het recept en stuurt het na goedkeuring door naar een gereguleerde apotheek.

Vanwege deze bijzondere orderflow, is er gekozen voor een combinatie van Pimcore en Vue Storefront. Bij elkaar is dit dus een headless oplossing voor de product informatie management (PIM), met een PWA als frontend. Dit levert een extreem snelle laadtijd op en zorgt voor een verbeterde customer experience.

MyHealthCares case:
Headless commerce case

Betekent dit dat het voor iedereen verstandig is om te kiezen een Headless CMS? Dat ligt eraan. Er zijn veel verschillende oplossingen die allemaal bepaalde voor- en nadelen met zich mee brengen. Houd rekening met de volgende aspecten als je overweegt de keuze te maken voor headless commerce.

1. Flexibiliteit

Headless commerce is erg flexibel en is hierdoor een hele praktische oplossing in dynamische branches. Bijvoorbeeld in de tech branche, waar regelmatig nieuwe ontwikkelingen plaatsvinden en startups in no time uitgroeien tot giganten. Het is in dat geval belangrijk dat je vernieuwingen snel kunt integreren. Door middel van API’s wordt het eenvoudig om nieuwe producten en diensten toe te voegen aan het huidige platform.

2. Integraties

Steeds meer bedrijven gaan voor een open architectuur om samenwerking eenvoudig te maken. Door de open architectuur van headless is het gemakkelijk om andere organisaties en diensten te integreren op je eigen platform. In de B2B markt vinden er regelmatig verschuivingen plaats in de rolverdeling tussen de verschillende schakels. Als er nieuwe diensten bijkomen of weggaan moeten deze veranderingen ook op het platform doorgevoerd worden. Headless commerce is dus een efficiënte keuze voor B2B bedrijven.

3 Multi- of omnichannel strategie

Headless maakt het mogelijk om backend data moeiteloos te hergebruiken op andere kanalen. Hierdoor is headless commerce geschikt voor een multi- of omnichannel strategie waar producten niet alleen via een webshop, maar ook via fysieke winkels en third parties verkocht worden.

4 Focus op personalisatie

Met een headless structuur ben je niet gebonden aan standaard templates en beperkingen in je frontend. Het stelt je in staat om je volledig te richten op unieke en persoonlijke klantervaringen. Door bezoekers te herkennen en persoonlijk te benaderen kun je als organisatie een relatie opbouwen met deze mensen. Dit kan enorm waardevol zijn om nieuwe en bestaande klanten voor lange termijn aan je te binden.

Benieuwd hoe je personaliseert met behulp van een Customer Data Platform? 

5 Developers aantrekken

Het wordt al jaren steeds moeilijker om developers aan te trekken met de juiste kennis en skills. Developers werken over het algemeen het liefste met de laatste technologie, dus het gebruik van headless is een extra motivatie voor developers om zich bij jouw organisatie te voegen. Daarnaast biedt een headless platform meer vrijheid en kunnen developers eigen technieken en frameworks kiezen.

De keuze voor headless

Zoals je waarschijnlijk hebt gemerkt, zijn de voordelen van het ene soort CMS meestal de nadelen van het andere systeem en omgekeerd. De keuze tussen een traditioneel en een headless CMS hangt dus voornamelijk af van je zakelijke behoeften. Als je een zelfstandige website voor je bedrijf bouwt, is een traditioneel CMS een praktische en snelle oplossing.

Een headless CMS is een goede optie als je project wordt beperkt door de standaardisering van een traditioneel CMS. Ook als je op zoek bent naar een unieke gebruikerservaring met complexe functies is headless de beste optie. Het stelt je in staat om een compleet systeem van apps en websites te ontwikkelen en de inhoud hiervoor efficiënt te leveren.

Zelf een headless CMS bouwen?

Beperkt een traditioneel CMS je groeimogelijkheden? Grote kans dat het dan tijd is om over te stappen naar een headless CMS. Een headless CMS geeft je veel meer vrijheid, bespaart je tijd en zorgt ervoor dat je niet wordt beperkt in je content distributie. Tijd om de klantwensen weer centraal te zetten.

Benieuwd hoe het bouwen van een headless CMS werkt? We praten je graag bij! 

Meer weten over headless commerce?

Hi! Ik ben Daniel, aangenaam! Ik ben account strategist en marketing manager bij Bluebird Day en kan je alles vertellen over headless commerce. Geef me gerust een belletje!

Neem contact op of bel me op 076 204 304 6