-

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.

Lyko.se

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.

Dit bericht is 91 keer gedeeld

6 Reacties

Bjørn Hascher - ecManager

Goed verhaal. Dit is sinds 2015 ook de waardepropositie van ecManager, een Nederlands headless digital commerce platform voor de midmarket. De modulaire headless technologie kun je inzetten om competitive advantage mee te creeëren. Met de meeste commerce oplossingen is dit niet mogelijk en kun je alleen binnen configuratie of content onderscheidend zijn. Vanaf januari ook als Azure hyperscale cloud variant verkrijgbaar.

Harry van Rossum - Evision

Mooi he Bjørn, dat we samen onze tijd al vooruit waren. Ook Evision, uit Denemarken, is een headless ecommerce omgeving. In tegestelling tot jullie houdt Evision zich alleen maar bezig met B2B. Op .Net gebaseerd en integratie met Dynamics NAV/AX zonder afbreuk te doen op de ERP functie van Dynamics.

Bjørn Hascher - ecManager

Ha Harry! Inderdaad, altijd al gedaan 😉
PS Onze nieuwe Azure Cloud Editie integreerd ook naadloos met Azure Dynamics ERP

Wim Van Horen - Episerver

Beste Friso,
Bedankt dat je de Episerver site van Lyko als voorbeeld neemt. Hoewel Episerver ook sterke headlesscapaciteiten biedt is het de unieke combinatie van het sterkste .net gebaseerde CMS en volledige e-commerce oplossing die deze vorm van Commerce Experience mogelijk maakt.

Dit in tegenstelling tot alle andere leveranciers (ook de bovenstaande reacties) waar je voor dergelijke functionaliteit altijd en een cms- en een e-commerce platform nodig hebt met alle beheer- en integratieperikelen van dien.

Friso Geerlings - ISAAC

Hoi Wim,

De Lyko case is inderdaad echt een mooi voorbeeld, waardoor ik het koos. Er zijn genoeg kleine headless e-commerce-voorbeelden te vinden, maar Lyko heeft ook echt substantie qua content- en productvolume. Vooral ook de PWA (Progressive Web App) front-end is iets dat zeker niet in een standaard, current-generation big-scale monolithic e-commerce-omgeving (bijv. Intershop oid) op deze manier tot zijn recht komt.

Overigens is m.i. het Episerver-aspect een beetje secundair. Je zou deze zelfde front-end experience ook kunnen creëren met meer API-First / Headless pure-players als CommerceTools en Contentful. Ja, bij Episerver zit dat dan in één pakket, maar het is ook wel een prijzige optie qua license. Als je toch verschillende teams hebt op Product en Experience-content (en een grote shop heeft dat vaak), kunnen die ook best in losse back-ends werken. Waardoor je dus ook als organisatie weer meer in de “right tool for the right job”-mindset zit. En kosten bespaart die je weer aan een nog mooier front-end kunt uitgeven.

Willem-Jan

Mooi artikel! Wel grappig is, als je Lighthouse analyse-tool loslaat op de homepage van Lyko, de homepagina pas interactief wordt na 11seconde (!!) wat natuurlijk nogal dramatisch is voor een PWA.

Plaats een reactie

Uw e-mailadres wordt niet op de site getoond