Hydrogen of Liquid: welke Shopify-storefront past bij jouw webshop?

Je hebt voor Shopify gekozen. Dan komt meteen de volgende vraag: welke storefront past bij je webshop? Shopify geeft je twee routes. Liquid, het vertrouwde werken met thema’s, en Hydrogen, het headless framework op React. Allebei praten ze via API’s met hetzelfde Shopify-platform, maar ze vragen ander werk, andere mensen en passen bij andere plannen. We zetten ze naast elkaar.

De route via Liquid: beproefd en direct inzetbaar

Liquid is de eigen templatetaal van Shopify. In .liquid-bestanden komen HTML, CSS en de instellingen uit je Shopify-admin bij elkaar. Onder de motorkap draait Ruby on Rails, gebouwd op gemak en snelheid.

• Snel live, lage kosten
  Je zet een thema op en past het aan vanuit de Shopify-admin. Voor kleine en middelgrote webshops is dat genoeg.
  
  

• Alles uit het Shopify-ecosysteem werkt
  Apps, visuele builders en templates uit de Theme Store sluiten zonder omweg aan.
  
  

• Ook aan te passen zonder developer
  Marketeers en designers wijzigen secties, indelingen en instellingen zelf in het Shopify-dashboard.
  
  

De documentatie is uitgebreid en elke Shopify-developer kent de taal. Voor de meeste webshops is Liquid daarom het startpunt.

Het Hydrogen-framework: je bepaalt alles zelf

Hydrogen is het framework van Shopify op basis van React, bedoeld voor headless storefronts. Het draait om controle: over de bouw, over het ontwerp en over de snelheid van je site.

• Eigen interface & interactie
  Je bouwt componenten, animaties en persoonlijke elementen precies zoals je merk ze nodig heeft.
  
  

• Buiten Shopify gehost = headless storefront
  Je zet hem live op Oxygen, Vercel of Netlify en koppelt er een headless CMS en API’s aan.
  
  

• Gebouwd op snelheid
  Je stuurt zelf op laadtijd, Lighthouse-scores en TTFB. Daar staat een zwaardere technische inrichting tegenover.
  
  

Deze route past bij merken die een eigen interface willen en op meerdere kanalen tegelijk verkopen.

Wat er technisch onder je Shopify-storefront zit

Shopify host je webshop zelf. In de kern zit een backend op Ruby on Rails die je producten, prijzen, bestellingen en klantgegevens bijhoudt. Alles daarvan bedien je via de Shopify-admin, en daar heb je geen technische achtergrond voor nodig. Vanuit dat ene dashboard regel je je content, je assortiment en het uiterlijk van je storefront.

Het belangrijkste gereedschap in dat systeem is Liquid, de eigen themataal van Shopify. Daarmee leg je de structuur en het ontwerp van de voorkant vast. Liquid lijkt op HTML, maar heeft een eigen syntax om inhoud op het moment zelf in te laden. Het loopt gewoon door HTML en CSS heen, zodat je de winkel naar je hand zet zonder aan de backend te komen. Elk Shopify-thema is in Liquid gebouwd, of je het nu koopt in de Theme Store of helemaal zelf laat maken. Installeren doe je vanuit het dashboard, gratis of betaald. De backend beheert Shopify, dus jij en je developer houden je alleen met de voorkant bezig.

Hydrogen werkt anders. Het is een frontend-framework van Shopify waarmee developers een eigen storefront in React bouwen. Liquid is een taal voor templates, Hydrogen is een framework op JavaScript. Developers schrijven componenten in JSX, een mengvorm van JavaScript en HTML, en dat maakt interactieve onderdelen en snelle rendering mogelijk. Die andere architectuur opent ontwerpen die je met een gewoon thema niet voor elkaar krijgt.

Die controle heeft een prijs: het bouwproces verloopt anders. Een Hydrogen-storefront draait niet op de servers van Shopify zelf. Shopify voert geen JavaScript-frameworks zoals React uit, dus zet je de site elders live: op Oxygen, de hosting die Shopify voor Hydrogen levert, op Vercel of in een andere omgeving die met JavaScript overweg kan. De koppeling met de backend van Shopify loopt via API’s, en voor content komt er vaak een headless CMS zoals Storyblok bij. Producten en voorraad blijven synchroon met je Shopify-admin, maar het geheel is technischer en vraagt doorlopend een developer.

De keuze tussen Liquid en Hydrogen hangt af van wat het project vraagt. Voor de meeste webshops is Liquid het antwoord: snel live, betrouwbaar en makkelijk te onderhouden. Het kost minder en je hebt er geen vast developmentteam voor nodig. Hydrogen geeft je meer vrijheid en meer grip op snelheid, maar het kost meer en het is ingewikkelder. Dat loont bij snelgroeiende merken en enterprise-webshops met een eigen UI/UX, meerdere verkoopkanalen en harde eisen aan laadtijd. De vraag is uiteindelijk niet wat beter is, maar wat past bij je doelen, je mensen en je planning.

De juiste Shopify-frontend kiezen

Wanneer je Liquid kiest

• Je wilt snel live en de kosten laag houden.

• Je team werkt niet dagelijks met JavaScript of React.

• Je leunt op Shopify-apps en thema’s uit de Theme Store.

• Je wilt weinig onderhoud en alles binnen één systeem.
  
  

Wanneer je voor Hydrogen gaat

• Je hebt een eigen React-team en kennis van API’s in huis.

• Je project vraagt een interactieve, headless interface op meerdere kanalen.

• Je stuurt op technische prestaties en wilt alles zelf bepalen.

• Je bent bereid infrastructuur en content via een headless CMS te beheren.
  
  

Kosten & complexiteit op een rij

• Liquid: lagere kosten, minder onderhoud en het sluit aan op de manier waarop Shopify-teams gewend zijn te werken.

• Hydrogen: meer geld naar development, infrastructuur en doorlopende ondersteuning, en daarvoor krijg je vrijheid in ontwerp en techniek terug.

Tot slot

Voor de meeste webshops is Liquid de verstandige keuze. Snel live, breed ondersteund en betaalbaar.

Denk aan Hydrogen als je React-kennis in huis hebt, een eigen interface nodig hebt of op meerdere kanalen verkoopt. Het kan veel, maar zonder die concrete behoefte schiet je jezelf voorbij.

Als eCommerce-bureau bouwen we allebei de varianten. Ons advies volgt daarom uit wat jouw webshop nodig heeft, niet uit wat wij het liefst bouwen.

Neem contact op, dan zoeken we het samen uit.

Veelgestelde vragen

Werken Shopify-apps ook in een Hydrogen-winkel?
Veel apps niet. Een headless opzet met Hydrogen ondersteunt niet alle UI-hooks waar klassieke Shopify-apps op leunen. Via API’s is een koppeling wel mogelijk.

Remt Liquid de snelheid van je site?
Liquid presteert prima. Draait je omzet op scherpe cijfers voor TTFB en Lighthouse, dan geeft Hydrogen je meer knoppen om aan te draaien, tegen hogere ontwikkelkosten.

Welke hostingopties zijn er voor Hydrogen?
Shopify levert Oxygen, maar je kunt ook terecht bij Vercel, Netlify of een server in eigen beheer.

Mijn webshop groeit hard, moet ik over naar Hydrogen?
Alleen als er een echte aanleiding is: een headless architectuur, een interactieve interface of harde eisen aan laadtijd. Zo niet, steek je geld dan in het optimaliseren van je Liquid-thema.

Kan ik later van Liquid naar Hydrogen overstappen?
Ja, maar dan bouw je de voorkant opnieuw. Kijk daarom vooruit: zijn headless en laadtijd nu al belangrijk, begin dan met Hydrogen. Zo niet, groei door op Liquid en beoordeel het later opnieuw.