Shopify Liquid: Het definitieve naslagwerk voor kooplieden en ontwikkelaars

Shopify Liquid is de open-source templating taal die elke Shopify storefront aandrijft. Het verbindt je winkeldata (producten, collecties, winkelwagen, klant) met de HTML die je klanten zien, met behulp van drie basisprincipes: objecten, tags en filters. Deze drie goed implementeren is het verschil tussen een thema dat converteert en een thema dat je maandelijks geld kost in app-abonnementen en ontwikkelaarstickets.

Belangrijkste punten

• Liquids drie basisprincipes zijn objecten {{ }}, tags {% %} en filters |. Elke aanpassing die je doet op een Shopify thema gaat door deze drie.
• De {% render %} tag verving {% include %} in 2019 en is de enige inclusietag die Online Store 2.0 ondersteunt. Het verwisselen van de twee is nog steeds de snelste prestatiewinst op legacy themes.
• Nieuwe filters die in 2025-2026 zijn toegevoegd, bevatten image_tag met fetchpriority en sizes attributen, en metafield_tag voor gestructureerde metafield rendering.
• Een ongeoptimaliseerde collectie loop met geneste tag checks kan 2-4 seconden toevoegen aan LCP en kost ongeveer 7% van mobiele omzet per seconde trager.
• Het vervangen van 3-5 mid-tier apps met native Liquid secties scheelt meestal 100-300 dollar per maand en verwijdert 150-600 KB JavaScript van derden per pagina.

Wat is Shopify Liquid?

Liquid is een template taal waarmee je een enkele template kunt maken voor vaste content en dynamisch informatie kunt invoegen afhankelijk van wat wordt weergegeven. Een producttemplate bevat bijvoorbeeld al je standaard productattributen en voegt dynamisch de juiste content in voor elke product URL.

Shopifys versie van Liquid breidt de open-source versie uit met winkelspecifieke objecten (product, collection, cart, customer, shop) en filters ontworpen voor commerce (money, image_url, metafield_tag). Met ingang van 13 januari 2026 heeft Shopify ook bijgewerkt hoe het Liquid code intern verwerkt om theme rendering betrouwbaarder te maken, zonder actie vereist van kooplieden.

De drie basisprincipes

1. Objecten

Objecten voeren dynamische data uit met dubbele accolades:

{{ product.title }}
{{ product.price | money }}
{{ shop.name }}

Belangrijkste globale objecten die je op elke theme build gebruikt:

Objecten kunnen een enkele waarde vertegenwoordigen of meerdere eigenschappen blootstellen. Het request object is bijzonder nuttig voor voorwaardelijke rendering op basis van paginatype.

2. Tags

Tags voegen logica en flow control toe met {% %} syntax. De categorieën die je moet kennen:

Controlestroom liquid {% if product.available %} <button>Add to cart</button> {% else %} <button disabled>Sold out</button> {% endif %}

Iteratie liquid {% for product in collection.products limit: 24 %} {% render 'product-card', product: product %} {% endfor %}

Variabeletoewijzing liquid {% assign sale_price = product.compare_at_price | minus: product.price %} {% capture button_label %}Add {{ product.title }}{% endcapture %}

Theme tags (sections, snippets, layouts) liquid {% render 'product-card', product: product, show_vendor: true %} {% section 'announcement-bar' %} {% layout 'checkout' %}

3. Filters

Filters wijzigen output met het pijpkarakter |. Meerdere filters kettenen van links naar rechts:

{{ product.title | upcase | truncate: 50 }}
{{ product.price | money }}
{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy', widths: '200,400,600,800' }}

Kritieke filtercategorieën:

• Geldfilters: | money, | money_with_currency, | money_without_trailing_zeros. Hardcodeer nooit valutasymbolen. Het | money filter respecteert je winkelvaluta, taal en opmaakingsinstellingen. Een hardgecodeerd $ symbool breekt op het moment dat je multi-currency inschakelt in Shopify Markets.
• Afbeeldingsfilters: | image_url: width: X gevolgd door | image_tag. De moderne image_url en image_tag filters vervangen de oudere img_url en img_tag en leveren responsieve afbeeldingen met juiste srcset, sizes, lazy loading en fetchpriority attributen in een enkele ketting.
• Arrayfilters: | where, | map, | sort, | uniq, | join, | concat. Gebruik | where om arrays te filteren zonder loops.
• Stringfilters: | upcase, | downcase, | truncate, | strip_html, | escape, | split.
• Wiskundefilters: | plus, | minus, | times, | divided_by, | ceil, | floor, | round.
• Kleurfilters: | color_lighten, | color_darken, | color_mix, | color_contrast. Het color_contrast filter geeft de contrastverhouding tussen twee kleuren terug, essentieel voor toegankelijk badge- en knopontwerp.
• Lokalisatiefilters: | t (vertaling), | format_address, | currency_selector.

Een opmerking over de | where valkuil: het filter is hoofdlettergevoelig. | where: 'tags', 'Sale' zal niet overeen komen met een tag van 'sale'. Gebruik | downcase voor vergelijking.

Secties en de {% schema %} tag

Online Store 2.0 maakte secties overal beschikbaar, niet alleen op de startpagina. Elke sectie die je bouwt, moet een volledig {% schema %} blok hebben zodat kooplieden content kunnen bewerken vanuit de theme editor zonder een codebestand te openen.

Elke sectie kan slechts een enkele {% schema %} tag hebben, die geldige JSON moet bevatten. Meer dan een tag hebben, of het nesten in een andere Liquid tag, geeft een syntaxfout.

Een minimaal maar volledig sectie schema:

{% schema %}
{
  "name": "Feature banner",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Our promise"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Background image"
    }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Feature item",
      "settings": [
        { "type": "text", "id": "feature_text", "label": "Feature", "default": "Free shipping" }
      ]
    }
  ],
  "max_blocks": 4,
  "presets": [{ "name": "Feature banner" }]
}
{% endschema %}

Kritieke regel: behandel setting id waarden als databasekolomnamen. Ze worden permanente sleutels in template JSON voor elke winkel die je sectie installeert. Een id hernoemen veroorzaakt verloren waarden. Een text setting wijzigen in image_picker migreert geen data. Voeg prefixen toe als secties groeien: gebruik hero_heading in plaats van heading als je ook card_heading in blocks hebt.

Secties met presets mogen niet statisch worden weergegeven. Statisch weergegeven secties kunnen niet worden verwijderd of opnieuw gerangschikt door kooplieden.

De {% render %} tag (en waarom {% include %} dood is)

De {% render %} tag is de enige manier om snippets in moderne Shopify themes op te nemen. {% include %} deelde variabelebereik tussen snippets, wat naamconflicten veroorzaakte en prestatieprofilering onbetrouwbaar maakte. {% render %} creert een geïsoleerd bereik: snippets kunnen geen bovenliggende variabelen lezen tenzij ze als benoemde parameters worden doorgegeven.

{# DEPRECATED - shares parent scope #}
{% include 'product-card' %}

{# CORRECT - isolated scope, explicit inputs #}
{% render 'product-card', product: product, show_vendor: true %}

{# Loop form #}
{% render 'product-card' for collection.products as product %}

Geïsoleerd bereik betekent dat snippets veilig herbruikbaar zijn op productdetailpagina's, zoekresultaten, AJAX-winkelwagenreacties en Section Rendering API-verzoeken zonder herschrijving. Het vervangen van {% include %} door {% render %} wist ook elke Theme Check fout die Shopify Theme Store indiening blokkeert.

Metafields in Liquid

Metafields laten je Shopifys gegevensmodel uitbreiden met aangepaste data (maatkaarten, ingrediënten, zorgbeschrijvingen, specificaties) zonder apps. De krachtigste metafield types voor Liquid development zijn:

• JSON voor gestructureerde data (render met | metafield_tag of parse de waarde)
• Rijke tekst voor koopman-editable HTML body copy
• Bestandsreferentie voor afbeeldingen en video's gekoppeld aan producten
• Product/collectiereferentie voor expliciete relaties tussen middelen

Toegangspatroon:

{% assign size_chart = product.metafields.custom.size_chart %}
{% if size_chart != blank %}
  {{ size_chart.value | metafield_tag }}
{% endif %}

De != blank bewaker is niet onderhandelbaar. Sla het over en producten zonder maatkaart geven een lege <table> weer die layout op mobiele Safari crasht.

Maak altijd metafield definities aan via Settings > Custom data in de Shopify admin, nooit ad hoc via de API. Definities geven je typeverificatie, koopman-vriendelijke labels en admin zichtbaarheid. Apps van derden zoals Yotpo en Klaviyo lezen deze definities, dus een schoon schema voede de rest van je stack.

Prestatiepatronen die echt uitmaken

Loop optimalisatie

Geneste loops zijn de meest voorkomende prestatievermoorder in de Liquid themes die ik audit. Een buitenlus over 50 producten gecombineerd met een binnenmaas over 20 tags per product voert 1.000 iteraties per page render uit. Gebruik in plaats daarvan de contains operator:

{# BAD: O(n*m) - 50 products x 20 tags = 1,000 iterations #}
{% for product in collection.products %}
  {% for tag in product.tags %}
    {% if tag == 'featured' %}...{% endif %}
  {% endfor %}
{% endfor %}

{# GOOD: one pass, contains check is O(1) #}
{% for product in collection.products limit: 24 %}
  {% if product.tags contains 'featured' %}...{% endif %}
{% endfor %}

Voeg altijd limit: toe aan collectie loops. Een ongeoptimaliseerde loop kan 2-4 seconden toevoegen aan LCP op mobiel.

Afbeeldingsrendering

{# BAD: no dimensions, no srcset, browser cannot reserve space (CLS) #}
<img src="{{ product.featured_image | img_url: 'master' }}">

{# GOOD: srcset, lazy loading, explicit width hint #}
{{ product.featured_image
  | image_url: width: 800
  | image_tag:
      loading: 'lazy',
      widths: '200,400,600,800',
      sizes: '(min-width: 768px) 400px, 100vw',
      alt: product.title }}

Het image_tag filter doet in een regel wat voorheen drie regels HTML vereiste met handmatige srcset constructie.

Witruimte controle

Liquid voert witruimte uit rond elke tag. Op grote templates bloat dit HTML en vertraagt TTFB. Gebruik de - modifier om het te verwijderen:

{%- for product in collection.products -%}
  {{- product.title -}}
{%- endfor -%}

Section Rendering API

De Section Rendering API maakt het mogelijk secties onafhankelijk via AJAX weer te geven, wat snellere paginavergangen en dynamische winkelwagenupdates mogelijk maakt zonder volledige pagina herlaadingen. Dit is de basis voor app-achtige ervaringen binnen standaard Liquid themes, zonder de overhead van headless gaan.

Theme Check en tooling

Theme Check 2.0 is nu ingebouwd in de Shopify CLI en vangt prestatieprobleempjes, toegankelijkheidsproblemen en verouderde patroongebruik op voordat je implementeert. Voer het op elke commit uit. Het markeert:

• {% include %} calls (verouderd)
• Ontbrekende alt attributen op image tags
• img_url gebruik (vervangen door image_url)
• Loops zonder limit:
• Ontbrekende content_for_header in theme.liquid

De Theme Inspector overlay toont Liquid renderingtijden direct op je storefront, zodat je kunt zien welke secties, snippets en loops langzaam zijn voordat je optimaliseert.

Vanaf 2026 laat Shopifys Dev MCP ook AI-agents gevalideerde Liquid code genereren en section schemas steigeren, wat boilerplate werk versnelt. Behandel AI-uitvoer als een eerste concept en controleer altijd op Shopify-specifieke randgevallen.

App vervanging: wat Liquid nief kan doen

Het vervangen van 3-5 apps per theme met native Liquid secties scheelt meestal 100-300 dollar per maand en verwijdert 150-600 KB JavaScript van derden. App bloat kost 40-200 ms per JavaScript van derden op mobiel, wat precies het bereik is dat Lighthouse mobiele scores van 80 naar 60 laat dalen.

Functies die Liquid nief verwerkt (geen app vereist):

• Countdown banners met schema gecontroleerde einddatums
• FAQ accordeons met blok-per-vraag architectuur
• Testimonial grids met sterrenbeoordeling en metafield-opgeslagen recensies
• Sticky add-to-cart bars via IntersectionObserver plus een Liquid product sectie
• Vergelijking van functies tabellen met JSON metafields
• Voor/na afbeeldingssliders met vanilla JS en twee image-picker instellingen

Secties verslaan apps op drie assen: ze renderen voor paint (geen layout shift), ze leven in je theme repo (versiebeheer is triviaal) en ze blootstellen schema instellingen zodat kooplieden content bewerken zonder een ontwikkelaar.

Liquid vs. Hydrogen: het eerlijke antwoord

Liquid blijft de juiste keuze voor de overgrote meerderheid van Shopify winkels omdat het snellere development, lagere onderhoudskosten levert en volledige toegang tot Shopifys CDN en hostinginfrastructuur. Headless (Hydrogen/Oxygen) is logisch voor merken met dedicated frontend engineering teams en complexe multi-storefront architecturen.

Ga headless wanneer je een dedicated frontend team hebt, drie of meer storefronts die een backend delen, of een interactiemodel dat Liquid werkelijk niet kan bereiken. Voor iedereen anders is de vraag niet "Liquid of Hydrogen" maar "hoe schrijf ik Liquid dat me niet beschaamt over twee jaar?"

Als je hulp nodig hebt bij het auditeren of bouwen van een theme volgens deze standaarden, zie de Shopify theme developer servicespage, of verken Shopify speed optimization als performance het specifieke knelpunt is.

Snelverwijzingsspiekbriefje

Outputsyntax

{{ product.title }}              {# string output #}
{{ product.price | money }}      {# filtered output #}
{{- product.title -}}            {# whitespace stripped #}

Controlestroom

{% if %} / {% elsif %} / {% else %} / {% endif %}
{% unless %} / {% endunless %}
{% case product.type %}{% when 'Apparel' %}...{% endcase %}

Loops

{% for item in array limit: 24 offset: 0 %}
  {{ forloop.index }} of {{ forloop.length }}
{% else %}
  No items found.
{% endfor %}

Meest gebruikte filters in een oogopslag

| money               {# currency-safe price output #}
| image_url: width: X {# CDN-resized image URL #}
| image_tag           {# full responsive <img> tag #}
| metafield_tag       {# renders metafield value with correct HTML #}
| where: 'key', val   {# filter array without a loop #}
| map: 'property'     {# pluck a property from array of objects #}
| json                {# safe JSON output for script tags #}
| t                   {# translation key lookup #}
| handleize          {# string to URL-safe handle #}
| date: '%B %d, %Y'  {# formatted date output #}

Bookmark het officiële Liquid naslagwerk naast deze post. De officiële docs behandelen elke objecteigenschap en filterparameter volledig.