Shopify Theme Development: Liquid Best Practices die je nu nodig hebt
Het platform is in 2026 snel veranderd. Dit zijn de Liquid-patronen, Horizon-inzichten en platform-updates die elke Shopify theme developer nu moet
Shopifys theme platform is in de eerste helft van 2026 sneller veranderd dan in jaren. Met de Winter '26 Editions release van 150+ updates en de Summer '26 release die het Horizon theme system introduceerde, is er veel voor developers om op te nemen. Dit artikel filtert de ruis eruit en concentreert zich op wat echt je dagelijkse Liquid werk verandert.
De Horizon verschuiving: wat dit voor je code betekent
De grootste structurele verandering in 2026 is de komst van Horizon. Uitgebracht als onderdeel van de Shopify Summer 2026 Editions, Horizon is een volledig nieuw theme system gebouwd op 10 gratis themes met namen als Fabric, Ritual en Vessel, elk ontworpen voor conversie in specifieke sectoren.
De architecturele sprong die developers moeten begrijpen is het geneste block systeem. Horizon themes ondersteunen tot 8 niveaus van geneste blocks, vergeleken met de 2-niveau beperking van Dawn en andere Online Store 2.0 themes. Dit is niet zomaar een cosmetische upgrade. Het betekent dat je section schemas veel complexer worden. Een eenvoudige hero section die vroeger ongeveer 20 regels JSON in Dawn was, kan gemakkelijk meer dan 60 regels in Horizon zijn vanwege de geneste diepte.
In Horizon zijn blocks niet zomaar placeholders voor tekst of afbeeldingen. Ze vertegenwoordigen vaak zelfstandige UI-componenten met hun eigen animatielogica, layout-gedrag en styling regels. Als je custom sections voor Horizon bouwt, behandel elk block als een zelfstandig component: geef het een duidelijke enkele verantwoordelijkheid, scope alle CSS met behulp van het unieke ID van het block in een {% style %} tag, en bied altijd on/off schakelaars voor animaties zodat merchants toegankelijkheid en performance kunnen aanpassen zonder code aan te raken.
Horizon introduceert ook group blocks, waarmee je gerelateerde elementen, zoals een header, een productgrid en een promotionele banner, in één herbruikbare eenheid kunt bundelen. Dit is echt nuttig voor teams die meerdere productlijnen of seizoensgebonden campagnes beheren.
Één praktische waarschuwing: als je core Horizon theme bestanden rechtstreeks aanpast, worden je wijzigingen overschreven bij de volgende update. Bouw altijd custom blocks in de /blocks folder en fork alleen wat je moet doen.
Horizon vs. Dawn: belangrijkste architectuurverschillen
| Feature | Dawn (Online Store 2.0) | Horizon |
|---|---|---|
| Maximale block nestingdiepte | 2 niveaus | 8 niveaus |
| Group blocks | Niet ondersteund | Ondersteund (gerelateerde elementen bundelen in herbruikbare eenheden) |
| Typische hero section schema grootte | Ongeveer 20 regels JSON | Kan meer dan 60 regels JSON overschrijden |
| Block animatielogica | Minimaal, afgehandeld op section niveau | Per-block animatie met merchant on/off schakelaars |
| Veilige aanpassingslocatie | Section en snippet bestanden | /blocks folder (core bestanden overschreven bij update) |
Platform veranderingen waarvoor je nu actie moet ondernemen
Stricter Liquid parsing (januari 2026)
Shopify begon in januari 2026 stricter Liquid parsing af te dwingen voor alle themes om betrouwbaarheid te verbeteren en toekomstige Liquid-verbeteringen mogelijk te maken. Als je oude themes hebt met slordig of technisch ongeldig Liquid syntaxis die toevallig werkte, kunnen ze nu fouten geven. Voer Theme Check uit op je codebase voordat je de volgende deployment doet.
CSS content subsetting voor {% stylesheet %} tags (april 2026)
Dit is gemarkeerd als Action Required in de Shopify developer changelog en veel te veel developers slapen hierover. Vanaf 20 april 2026 levert Shopify alleen CSS van {% stylesheet %} tags die relevant zijn voor de sections, blocks en snippets die op elke pagina worden weergegeven, in plaats van alle stylesheet CSS bij elke paginalading.
De fix is principieel eenvoudig: als het {% stylesheet %} van een bestand CSS classes definieert die gebruikt worden door HTML elementen in andere, niet-gerelateerde bestanden, kunnen die stijlen niet worden opgenomen op pagina's waar het definierende bestand niet wordt weergegeven. Controleer je themes op gedeelde CSS classes die in het ene bestand leven maar vanuit een ander bestand worden toegepast. Houd stijlen zelfstandig binnen het bestand dat de markup bezit.
Asset caching: zet naakte query strings weg (maart 2026)
Een asset caching update in maart 2026 beëindigde ondersteuning voor naakte query strings in URLs voor cache busting. Gebruik Liquid filters zoals asset_url om ervoor te zorgen dat assets correct verversen en laadtijden verbeteren. Als je handmatig ?v=123 toevoegt aan asset URLs, stop daar mee. Het asset_url filter zorgt voor versiebeheer.
App block limiet verhoogd (februari 2026)
Een kleinere maar nuttige update: je kunt nu tot 30 app blocks definiëren in je theme app extension, omhoog van 25. Als je themes bouwt die veel app-integraties moeten ondersteunen, geeft dit je meer ruimte.
Liquid performance patronen die developers nog steeds voor problemen zorgen
Ongeacht platform updates, zijn de performance fouten die ik het meest zie in client audits dezelfde die ze altijd zijn geweest. Hier is een snelle checklist.
Gebruik nooit all_products in een loop. [Het herhaaldelijk ophalen van productobjecten in een loop, bijvoorbeeld het aanroepen van all_products[item.product.handle] voor elk winkelwagen item, leidt tot één databasequery per item. Met 10 winkelwagen items kan de paginarendertijd met 2 tot 3 seconden toenemen.](https://demetio.com/en/blog/shopify-liquid-best-practices/) Toegang tot gegevens rechtstreeks vanuit het item object.
Gebruik {% render %}, niet {% include %}. De verouderde include tag deelde het variabelebereik van het parent template, wat onvoorspelbare bijwerkingen en performance degradatie veroorzaakte. De render tag isoleert het snippet bereik volledig. Geef altijd variabelen expliciet door en vertrouw nooit op parent-scope overerving.
Houd sections single-responsibility. Een hero banner section mag niet ook productaanbevelingen afhandelen. Kleine, gerichte sections zijn gemakkelijker te onderhouden en geven merchants meer layout-flexibiliteit in de theme editor.
Gebruik {{ block.shopify_attributes }} op het top-level element van elk block. Zonder dit kan de theme editor individuele blocks niet selecteren, verplaatsen of configureren. Dit is een basisvereiste maar ontbreekt in verrassend veel custom blocks in het wild.
Hardcode nooit strings. Hardcoded strings breken internationalisatie en maken het onmogelijk voor merchants om tekst aan te passen vanuit de taaloptions van de theme editor. Elke string die gebruikers zien moet door het | t filter gaan.
Laad scripts en styles voorwaardelijk. Het gebruik van Liquid om scripts en styles voorwaardelijk te laden verbetert Core Web Vitals performance en reduceert blocking resources. Combineer met async of defer strategieën waar van toepassing.
Je toolchain in 2026
Als je deze tools niet al op elk project gebruikt, begin vandaag:
- Shopify CLI voor lokale theme development en hot reloading
- VS Code met de Shopify Liquid extension voor syntax highlighting en autocomplete
- Theme Check 2.0, nu ingebouwd in de Shopify CLI, wat performance problemen, accessibility problemen en deprecated pattern gebruik opvangt voordat je deploy
- Git met branch-based workflows en nooit live themes rechtstreeks bewerken
- GitHub integration voor geautomatiseerde deployments en teamcoördinatie
De Section Rendering API verdient ook meer aandacht dan het krijgt. Sections kunnen onafhankelijk worden weergegeven via AJAX, wat snellere paginavergangen zonder volledige reloads mogelijk maakt en de basis vormt voor app-achtige ervaringen in Liquid themes.
Liquid vs. Hydrogen: maak de juiste keuze
Een paar maanden stelt iemand me de vraag of ze headless moeten gaan. Hier is het eerlijke antwoord voor 2026: voor DTC merken met significant omzet, levert Liquid met Online Store 2.0 betere ROI door snellere development, gemakkelijkere merchant editing, lagere onderhoudscosts en Shopify handelt hosting en CDN af. Hydrogen is niet automatisch sneller dan Liquid. Het geeft je meer controle over de dingen die performance beïnvloeden, maar als je bottleneck theme bloat, third-party scripts of oversized media zijn, zal verhuizen naar Hydrogen dat niet oplossen.
Ga headless wanneer je echt gegroeid bent uit wat Liquid kan doen en je hebt de engineering capaciteit om de stack te onderhouden.
Tekenen dat je klaar bent om headless te gaan
- Je team besteedt meer tijd aan het omzeilen van Liquid-beperkingen dan aan het bouwen van features
- Je hebt complexe, app-level interactiviteit nodig die de Section Rendering API niet kan dekken
- Je hebt dedicated frontend engineers die comfortabel een React of Remix stack kunnen onderhouden
- Je performance bottleneck is bevestigd als Liquid rendering, niet media of third-party scripts
- Je hebt diepe integraties nodig met externe systemen (PIM, ERP, custom checkout) die verder gaan dan Shopify Functions
Één deadline die het waard is om op te vallen
Als jij of je clients nog steeds Shopify Scripts gebruiken, zal Shopify Functions Scripts in juni 2026 vervangen met snellere execution en meer pariteit. Die migratie is niet optioneel. Controleer alle stores die Scripts gebruiken en begin nu met de transitie.
Het theme platform in 2026 beloont developers die dicht bij de changelog blijven en bouwen met schone, zelfstandige componenten. De CSS subsetting verandering alleen is al reden genoeg om een volledige stylesheet audit te doen op elk actief theme dat je onderhoudt. Horizon is de richting waarin Shopify beweegt, en de geneste block architectuur is het mentale model dat je dit jaar moet internaliseren.
Veelgestelde vragen
Wat is het grootste structurele verschil tussen Horizon themes en Dawn voor theme developers?
Horizon themes ondersteunen tot 8 niveaus van geneste blocks, vergeleken met de 2-niveau beperking in Dawn en andere Online Store 2.0 themes. Dit betekent dat je section schemas veel complexer zullen zijn en JSON template bestanden aanzienlijk langer zullen zijn, dus het plannen van je content hierarchie voordat je bouwt is essentieel.
Wat brak met de CSS content subsetting verandering van april 2026?
Vanaf 20 april 2026 levert Shopify alleen CSS van stylesheet tags die relevant zijn voor de sections en blocks die op de huidige pagina werkelijk worden weergegeven. Als je theme stylesheet regels in het ene bestand heeft die HTML elementen in een volledig ander bestand stylen, kunnen die stijlen stilzwijgend verdwijnen op pagina's waar het definierende bestand niet wordt weergegeven. Controleer je themes om ervoor te zorgen dat de stijlen van elk bestand zelfstandig zijn.
Moet ik nog steeds Liquid leren of investeer ik beter tijd in Hydrogen?
Voor de meeste Shopify stores blijft Liquid met Online Store 2.0 in 2026 de juiste keuze. Het biedt snellere development cycli, lagere onderhoudscosts en betere ROI in vergelijking met een headless Hydrogen build. Hydrogen is alleen zinvol wanneer je een dedicated frontend engineering team hebt en vereisten die Liquid echt niet kan vervullen.