Hoe headless e-commerce een einde maakt aan online eenheidsworst

Traditionele e-commerce- en portalpakketten zijn vooral gebaseerd op het tonen van een productcatalogus. Daardoor zien webwinkels en portals er allemaal min of meer hetzelfde uit, terwijl fysieke winkels zich juist proberen te onderscheiden met een bijzondere vormgeving en hippe indelingen. Headless e-commerce is de oplossing voor iedereen die van het knellende front-end korset af wil.

De grote softwarepakketten voor e-commerce zijn ooit ontwikkeld als ‘one-stop-shops’ – zowel de voorkant als de commerce engine en het beheer zijn ondergebracht in één systeem. Dat klinkt heel handig maar brengt ook veel beperkingen met zich mee. Daardoor is er een tegenbeweging ontstaan in de vorm van headless e-commerce.

Headless e-commerce is een platform of oplossing zonder front-end userinterface. Het beheer en de databaselogica worden via een API verbonden met het front-end, dat volledig wordt ingericht naar de smaak en behoefte van het merk of bedrijf. Zo hebben softwareontwikkelaars meer vrijheid om echt iets bijzonders te doen.

Een bedrijf dat gespecialiseerd is in een paar producten (denk aan een traiteur die dagelijks drie maaltijden aanbiedt of een partij als Bugaboo, met vier verschillende typen kinderwagens) moet in een totaalpakket altijd een lijstje met productopties laten zien. Met headless kun je die items veel mooier presenteren met beeld of een video. Je bouwt een eigen voorkant met moderne techniek en gebruikt de kracht van de e-commerce API’s. Het bestellen verloopt vervolgens gewoon via het backend zoals dat altijd al gebeurde. Qua content kun je bovendien eenvoudig verschillende bronnen combineren. Een modeshop kan bijvoorbeeld op één pagina de vier meest geselecteerde looks, modenieuws uit het CMS plus Instagram-posts van klanten tonen.

Een mooi voorbeeld van een website die gebruikmaakt van de mogelijkheden van headless is die van het Zweedse beautymerk Lyko. De front-end is gebaseerd op de API die de klassieke CMS- en e-commercespeler Episerver aanbiedt. Avensia tekende voor het design van de shop, die onder andere is uitgeroepen tot Best Nordic Website. Wat is er nu bijzonder aan dit front-end? De mix van productdata, sfeerbeelden en acties, de snelle laadtijd van de site (17 ms, wat positief is voor de conversie) en het feit dat het een Progressive Web App (PWA) is, waardoor het front-end tegelijkertijd een app is.

Nieuwe kanalen aansluiten

Naast het feit dat je jezelf als bedrijf beter kunt onderscheiden in het design heeft headless e-commerce ook als voordeel dat je er gemakkelijk nieuwe kanalen op kunt aansluiten. De traditionele pakketten zijn ontwikkeld voor webshops die op desktop of mobiel worden bezocht. Verkoopkanalen als apps, chatbots op messaging platformen of social media, voice, marktplaatsen, Internet of Things of verkoopschermen in de winkel, om er maar eens een paar te noemen, kun je echter niet makkelijk integreren met platformen als Magento, Intershop of Hybris. Voor Amazon waren spraakassistent Alexa en de bestelknop Dash dan ook belangrijke redenen om over te stappen op een headless systeem.

Vanuit de developer bezien is het veel simpeler om wijzigingen door te voeren in headless e-commerce oplossingen dan bij de bekende pakketten, of het nu gaat om iets simpels als een nieuw invulveld bij een klantaccount of een grote wijziging zoals een maatwerk check-out flow. De architectuur is immers niet gekoppeld. Als je iets in de database verandert, hoef je bij headless niet ook de code en het front-end aan te passen. Je roept de API aan en de data zijn beschikbaar in de userinterface. Bij traditionele oplossingen is er een directe link tussen het front-end en de backend code en infrastructuur. Als je dus aanpassingen wilt doen, moet dat tot in de database-laag gebeuren.

Kostenplaatje

Zitten er dan geen nadelen aan headless e-commerce? Het kostenplaatje kan een reden zijn om er niet aan te beginnen. Je hebt minimaal een front-end developer met verstand van HTML, Javascript en CSS nodig om de voorkant te bouwen, een vormgever voor het ontwerp en een UX designer voor de juiste flow. Dat brengt kosten met zich mee. Maar daar staat tegenover dat er voor front-end ontwikkeling steeds meer mooie frameworks ontstaan zoals Vue.js; prima gereedschapskisten die het ontwikkelen van een maatwerkinterface minder arbeidsintensief maken.

Toegegeven, je moet je front-end zelf onderhouden, veilig maken en debuggen, maar daardoor kies je ook zelf je cyclus en ben je niet afhankelijk van een jaarlijkse mega-release van de grote traditionele e-commercepakketten. Je bepaalt dus zelf wanneer je een nieuwe look maakt, terwijl je anders vastzit aan de jaarlijkse upgrade, waar ook nog eens van alles bij zit dat je niet nodig hebt.

Meer opties is geen verbetering

De traditionele spelers voelen de bui natuurlijk al hangen en bieden daarom ter compensatie een front-end aan met steeds meer configuratiemogelijkheden om zichzelf flexibeler te maken. Dat is wat mij betreft geen positieve ontwikkeling. Je bent veel te veel tijd kwijt met al die opties en dan heb je nog niet de volledige vrijheid die headless wel biedt. Andere klassieke spelers maken wel echt de switch en bieden zelf headless API’s aan, zoals Episerver bij Lyko. Als ze daarnaast echter een eigen, geïntegreerd front-end blijven aanbieden, dan is de aandacht van zo’n speler verdeeld. En dat komt de innovatie weer niet ten goede.

De behoefte aan meer vrijheid biedt kansen voor hele nieuwe spelers die wel volledig gericht zijn op API-first en headless, zoals commercetools, Contentful, enzovoorts. Dergelijke oplossingen zijn heel populair in nieuwe architecturen, omdat je vanaf het begin heel veel flexibiliteit hebt. En omdat het kleinere spelers met een nog overzichtelijk product zijn, zijn hun tools veel goedkoper dan de pakketten van de gevestigde orde. Headless e-commerce is dus niet alleen interessant voor bedrijven met een unieke huisstijl die in meer kanalen actief zijn, maar kan uit budgettaire overwegingen ook voor een ‘gewone’ webshop een goede oplossing zijn.