.png?width=2000&height=862&name=Headless%20blog%20image%200%20(1).png "Headless Commerce on Shopify with Hydrogen and Remix")
Wat is Headless Commerce?
Voor degenen die een recap nodig hebben: headless commerce houdt in dat je de eventuele beperkingen van je e-commerce platform omzeilt door de frontend los te koppelen van de backend en te vervangen door een ander framework. Dit levert een heleboel flexibiliteit op qua design, terwijl je nog steeds de functionaliteit van de backend kunt gebruiken waar nodig.
Belangrijker nog - en dit is HET grote voordeel van headless architecturen, vinden wij: headless gaan betekent een grote verbetering wat betreft laadsnelheden en prestaties. Waarom is dit belangrijk? Omdat, zoals iedereen in de e-commerce weet: meer snelheid is meer conversie is meer omzet. Een minieme verbetering van je conversie met 0,1% betekent al heel veel meer omzet.
Die snelheid heeft echter een prijs. Wouter legt uit: “Headless gaan is een beetje als een Ferrari kopen. De auto is al duur, en als je de competitie bij wilt houden heb je ook monteurs nodig om hem te onderhouden. Het is niet slim om headless te gaan als de investering zichzelf niet terugbetaalt, als je dit soort snelheden helemaal niet nodig hebt, of als je je het onderhoud niet kunt veroorloven.”
Headless met Shopify: Hydrogen en Oxygen
Evengoed is headless de absolute top in e-commerce performance. En Shopify is een grote speler aan het worden in het mainstream maken van headless architecturen.
Met de lancering van Hydrogen en Oxygen in 2022 introduceerde Shopify een eigen
React-based headless commerce stack (Hydrogen) en een eigen hosting platform (Oxygen), waarmee Shopify merchants headless kunnen gaan zonder de risico’s die bij een zelfgebouwde headless set-up hoorden, zoals eindeloos framework onderhoud en agency lock-in.
Met Hydrogen en Oxygen wordt de code base doorlopend onderhouden en ge-update door Shopify zelf. Daarmee is compatibiliteit met de Shopify backend ten allen tijde gegarandeerd, en worden de kosten voor het onderhoud van een headless architectuur (zoals framework updates m.b.t performance en security, hosting onderhoud, SEO verbeteringen, en zorgen dat je Shopify analytics kloppen) significant lager. Zoveel lager zelfs dat headless gaan voor veel meer merken een haalbare optie wordt.
Shopify’s headless toolkit: Hydrogen powered by Remix
Shopify lanceerde Hydrogen en Oxygen in de zomer van 2022, en heeft sindsdien continu verbeteringen doorgevoerd. De belangrijkste daarvan is de overname van Remix, een supersnel, high-end web framework dat Shopify heeft gebruikt om de engine van Hydrogen een flinke upgrade te geven.
Remix heeft in de tech-wereld sterrenstatus: hun briljante team heeft een elite framework voor developers gebouwd dat ongelooflijk goed presteert. Het is een alles-in-een oplossing waarmee het bouwen van webapplicaties sneller, makkelijker en efficiënter kan. Met deze slimme move heeft Shopify zijn headless oplossing dus in een klap naar enterprise level getild.
In 2024 ziet de tech stack voor headless architecturen met Shopify er dus zo uit:
-
Back-end: Shopify (Plus);
-
Front-end: Hydrogen als het headless framework, onderhouden door Shopify;
-
Content management: Een third-party, API-based CMS, zoals Builder.io, Storyblok, Contentful of Sanity;
-
Hosting: Oxygen als het hosting & deployment platform, ook onderhouden door Shopify.
Bij Code streven we er altijd naar om zo dicht mogelijk bij Shopify te blijven, en met deze tech stack kunnen wij onze klanten vanaf nu een toekomstbestendige headless oplossing bieden.
4 redenen om voor Headless Commerce te kiezen
1. Site snelheid
Wouter: “Een traditionele (Liquid) store kan in theorie alles wat headless kan. Maar een headless architectuur geeft je een veel snellere frontend, wat voor een betere conversie ratio kan zorgen.”
2. Flexibiliteit
Voor merchants die volledige controle over hun website en content willen, kan headless gaan een fantastische oplossing zijn. Het gemak van Shopify’s ‘Sections Everywhere’ ben je daarmee wel kwijt, wat voor sommige merchants een zorg is. Gelukkig bieden headless CMS opties als Builder.io vergelijkbare functionaliteit.
Voor enterprise klanten met een complexe set-up kunnen Contentful, Sanity of een andere headless CMS oplossing de controle bieden die ze nodig hebben om content te beheren over meerdere (multi-language) stores. Headless CMS oplossingen blinken hierin uit, en geven merchants de flexibiliteit en controle die ze nodig hebben om gelokaliseerde online ervaringen te creëren. De flexibiliteit van headless architecturen maakt het ook makkelijk om verschillende verkoopkanalen te integreren en zo een naadloze omnichannel ervaring te kunnen bieden.
3. Snellere integratie
Met headless is niet alleen je frontend sneller: het zal ook veel makkelijker en sneller gaan om nieuwe tech te integreren, zodat je soepel aan kunt haken op consumententrends en doorlopend kunt blijven innoveren.
Senior Frontend developer Remco legt uit: “Alles wat een API heeft kan in principe aan Shopify gekoppeld worden - maar het is makkelijker en beter te integreren in een headless set-up. Als je met een paar apps uit de Shopify app store kunt bereiken wat je wilt, kun je beter bij Liquid blijven - dan gaat het de extra kosten waarschijnlijk niet waard zijn. Maar als je merk een ERP gebruikt, een legacy loyalty systeem, een PIM, een WMS, noem maar op: dan wordt het een stuk lastiger en bewerkelijker om dat allemaal met Liquid te integreren. Hetzelfde geldt voor een naadloze omnichannel ervaring.”
4. Development capaciteit
Tenslotte is het goed om te onthouden dat headless architecturen meestal op React bouwen. Remco: “React is de heilige graal voor veel developers. Terwijl Liquid een beetje een niche taal is, zijn de meeste developers bekend met modern web development en tools als React. Daarom is het voor een merk vaak lastig om bijvoorbeeld op korte termijn in een keer twintig ‘klassieke’ Shopify storefronts uit te rollen - omdat developers die gespecialiseerd zijn in Shopify en Liquid relatief schaars zijn. Je bent dus flexibeler als je die storefronts headless maakt en ze laat bouwen door React developers.”
De headless business case: bereken je ROI
Zoals we al eerder zeiden is laadsnelheid de voornaamste USP van headless. Wouter: “Met Liquid krijgen onze developers laadsnelheden richting de 2 seconden. Met headless gaat dat naar 1.2, 1.3 seconden of zelfs minder dan een seconde - dat is een snelheidsverbetering van meer dan 40%. Dat klinkt misschien verwaarloosbaar maar het voelt veel sneller, vooral bij feature-rich sites met product configurators en dergelijke. Je kunt feature-rich sites bouwen die nog steeds heel ‘crispy’ voelen - dat is veel moeilijker voor elkaar te krijgen met een Liquid set-up. Je moet het zelf eens ervaren, op Shopify’s demo-site bijvoorbeeld. Het is een totaal andere beleving.”
→ Check hier Shopify’s Hydrogen demo store 🏎
Al die extra snelheid opent veel mogelijkheden voor een echt unieke gebruikerservaring. Maar het is belangrijk om de balans tussen kosten en snelheid goed in de gaten te houden. Laten we eens kijken hoe we dit kunnen analyseren met behulp van de e-com formule voor omzet:
Omzet = Traffic * Conversion Rate (CR) * Average Order Value * Retention Rate
Een hogere laadsnelheid leidt tot een stijging van CR, waarmee je direct omzetgroei realiseert. Als je dankzij hogere laadsnelheden je conversie verhoogt van 1% naar 1,1%, bijvoorbeeld, betekent dit een omzetgroei van maar liefst 10%:
Omzetgroei headless = Omzet * CR verbetering %
Als je dit vervolgens vermenigvuldigt met je winstmarge (om te corrigeren voor de kosten van productie, logistiek, marketing en sales) zie je hoeveel headless gaan, en de bijbehorende page speed, je zou opleveren:
Voordeel van headless gaan = Omzet * CR verbetering % * winstmarge %
We geven een voorbeeld. Als je per jaar een miljoen omzet draait met een winstmarge van 25%, dan zal een conversie stijging van 5% je het volgende opleveren:
Voordeel van headless gaan = €1M * 5% * 25% = €12,5k per jaar
Dat is natuurlijk bij lange na niet genoeg om de extra kosten van een headless set-up te dekken. Maar met hogere omzetten en een verwachte conversie stijging van 10% (bijvoorbeeld omdat je een langzame, feature-rich store migreert naar een headless architectuur) begint het er allemaal al veel zonniger uit te zien:
Voordeel van headless gaan = €50M * 10% * 25% = €1,25M per jaar
Nu begint het een heel logische investering te worden. Deze voorbeelden laten goed zien dat headless niet voor iedereen is: je moet een bepaald omzetniveau bereikt hebben om de extra kosten van headless te kunnen compenseren.
Wat zijn de kosten van een headless store met Shopify?
De kosten voor het (her-)bouwen van een headless store op Shopify hangen erg af van je behoeften, en van zaken als hoe complex je architectuur is, hoe feature-rich je site, en van je design. Wil je graag een snelle inschatting en kosten-bandbreedte ontvangen voor jouw situatie? Vul ons contactformulier in, dan komen we zo snel mogelijk bij je terug.
Checklist: Welke e-commerce merken profiteren het meest van headless gaan met Shopify?
Welk type merken heeft nu het meeste voordeel van een headless set-up met Hydrogen, en wanneer is het beter om je ‘traditionele’ Shopify store te behouden? Wij helpen je graag om uit te vinden of headless de juiste beslissing is voor jouw merk. Is een van de onderstaande kenmerken van toepassing op jouw situatie? Dan denken wij dat het de moeite waard is om een headless set-up te researchen:
- Grote, gevestigde merken op (of richting) enterprise level;
- Merken die voldoende conversie verbetering verwachten uit hogere laadsnelheden om de kosten te dekken van het bouwen en onderhouden van een headless set-up;
- Merken die feature-rich storefronts willen bieden met een spectaculaire gebruikerservaring, zonder in te leveren op performance;
- Merken die hun klanten een naadloze omnichannel ervaring willen bieden;
- Merken die hun e-commerce platform willen integreren met een tech stack die regelmatig aangepast wordt;
- Merken met complexe, internationale multi-language storefronts die een efficiënte content management oplossing nodig hebben;
- Merken die snelle omlooptijden nodig hebben qua tech en die niet afhankelijk willen zijn van de beschikbaarheid van Shopify Liquid developers.
Wat adviseert Code aan e-commerce merken die headless overwegen?
Remco: “Als er ooit een goed moment was om aan te haken op de headless trend, dan is het nu wel. Headless gaan stelt bedrijven in staat om de laatste technologieën en design trends in te zetten om een e-commerce ervaring te creëren die opvalt in een overvolle markt. En met Code als partner kun je op het hoogst mogelijke niveau instappen in de headless trend.”
Headless Commerce implementeren met Shopify en Code
Ben je er zeker van dat headless laadsnelheden en extra flexibiliteit een duidelijk verschil gaan maken voor jouw omzet? Dan is je volgende stap om een betrouwbare Shopify (Plus) agency te vinden die je headless store voor je kan bouwen en onderhouden.
Zoals onze huidige klanten al weten, bouwt Code een store nooit vanaf de grond op. Wij werken met ons eigen Code Base Theme, waar we jaren aan ervaring en best practices in gestopt hebben en dat naar de hoogste standaarden gebouwd is.
Ons Code Base Theme integreert naadloos met Shopify's React-based Hydrogen en Oxygen technologieën, en is ontworpen om regelmatig updates van Shopify te krijgen. Dit betekent dat je de concurrentie voor kunt blijven met de laatste innovaties en features, zonder dat je je headless set-up zelf hoeft te updaten.
Headless kan je de snelheid, flexibiliteit en innovatiekracht geven om je doelen te bereiken en de competitie in te halen. Benieuwd of headless gaan met Code en Shopify (Plus) bij jouw merk past? Vul ons contactformulier in en we komen binnen 24 uur bij je terug.
