Liquid snippets schrijven met ChatGPT (zonder je theme te breken)

Liquid is de templating-taal van Shopify-thema’s. Het ziet eruit als HTML met {% if %} en {{ product.title }} ertussen, dus veel marketeers en shop-owners durven er wel zelf in te kicken. Met ChatGPT erbij gaat het nog sneller — totdat je een snippet plakt dat niet werkt en je hele theme een 500-error gooit.

Dit artikel: wat ChatGPT goed kan in Liquid, waar het hallucineert, en hoe je AI als pair-programmer inzet zonder je live theme te breken.

Wat ChatGPT in Liquid wél kan

Voor de standaard 80% van Liquid-werk is ChatGPT (Claude doet ‘t ook prima) een sterke partner:

• Loops en if/else. Standaard {% for product in collection.products %} met conditionele logica wordt vrijwel altijd correct gegenereerd.
• Filters. {{ product.price | money }} en de meest gebruikte filters (upcase, truncate, default, replace) zitten goed in z’n training-data.
• Globale objecten. product, collection, cart, customer — de standaard-velden weet hij goed.
• Snippet-structuur. Een nieuw bestand in snippets/, hoe je het aanroept met {% render 'mijn-snippet' %}, hoe je variabelen meegeeft via {% render 'mijn-snippet', product: product %}.
• Translation tags. {{ 'general.shipping' | t }} met instructies hoe je de translation in locales/nl.json zet.

Voor deze use-cases is ChatGPT echt productief.

Waar ChatGPT in Liquid hallucineert

Liquid is een kleine, specifieke taal. Daar tegenover staat dat ChatGPT veel andere templating-talen kent (Jinja, Twig, Handlebars), en die liggen close maar zijn anders. Hallucinaties die ik in productie heb gezien:

1. Filters die niet bestaan

Ik heb meerdere keren gezien dat ChatGPT {{ product.title | capitalize_words }} schreef. Bestaat niet in Liquid. Je hebt capitalize (eerste letter) of een handmatige split-en-rejoin. Ander voorbeeld: {{ collection | size | format_number }} — die laatste filter bestaat niet.

Hoe te detecteren: check elke filter in shopify.dev/docs/api/liquid/filters. Als je ‘m daar niet vindt, bestaat hij niet.

2. Object-properties die niet bestaan

product.is_in_stock lijkt logisch maar bestaat niet (in Liquid is het product.available of een loop over varianten). customer.last_login bestaat niet in de Storefront-context.

Hoe te detecteren: Shopify’s Liquid-objecten staan op shopify.dev/docs/api/liquid/objects. Properties die niet in de docs staan, bestaan niet.

3. Liquid-tags uit andere templating-engines

Ik heb {% set variable = "value" %} gezien (Twig/Jinja). In Liquid is het {% assign variable = "value" %}. Of {% include %} zonder dat ChatGPT weet dat dit deprecated is sinds 2020 ten faveure van {% render %}.

4. Async-functionaliteit die er niet is

Liquid is server-side, synchrone templating. Geen await, geen async, geen Promises. ChatGPT schrijft soms een snippet die “alleen werkt na de cart-update” alsof er een client-side update plaatsvindt — dat is JavaScript-territorium, niet Liquid.

5. Section schemas die niet kloppen

Voor Online Store 2.0-sections heeft elk section-bestand een {% schema %} JSON-blok. ChatGPT kan dit goed schrijven, maar mist soms verplichte velden (type, name, presets) of gebruikt setting-types die niet bestaan (“dropdown” in plaats van “select”).

Mijn workflow: ChatGPT als pair-programmer in Liquid

Hoe ik dit aanvlieg zonder mijn theme te breken:

Stap 1: vraag eerst de strategie, dan de code

Slecht: “Schrijf een Liquid-snippet die producten met meer dan 5 reviews highlight.”

Goed: “Ik wil producten met meer dan 5 reviews highlighten op de productpagina. Welke Shopify-objecten heb ik daarvoor nodig, en zit de review-count standaard op product of moet ik het uit metafields halen? Daarna schrijven we de Liquid.”

Door eerst de strategie uit te schrijven, dwing je ChatGPT om over de juiste objecten na te denken in plaats van een gokje te schrijven.

Stap 2: vraag om de Shopify-doc-link bij elke filter en property

Bijvoorbeeld:

Schrijf een Liquid-snippet die de top 3 best-selling products toont. Vermeld bij elke gebruikte property en filter de Shopify-documentatie-link of zeg “uncertain” als je niet zeker weet dat het bestaat.

Dit dwingt ChatGPT om hallucinaties te markeren in plaats van ze te verstoppen.

Stap 3: test in een staging theme of een development store

Nooit direct in je live theme plakken. Shopify heeft drie opties:

1. Theme duplicaat: maak in Shopify Admin → Themes een duplicaat van je live theme, plak de snippet daar, klik “Preview”.
2. Development store: gratis development store via je Shopify Partners-account, met dezelfde theme erop.
3. Shopify CLI met shopify theme dev voor lokale development.

Een fout in een snippet kan een hele pagina white-screenen of een Liquid-syntax-error op je hele theme veroorzaken. Test eerst.

Stap 4: lees de Liquid-error-message als die komt

Shopify’s Liquid-errors zijn redelijk leesbaar. Als je hem ziet:

Liquid error (line 23): undefined filter: capitalize_words

Dat is letterlijk het issue: een filter die niet bestaat. Plak die error terug naar ChatGPT met de regel uit je code: “Deze fout krijg ik, hoe los ik het op binnen Liquid?”. Vaak komt dan de juiste oplossing.

Stap 5: vraag om explicit comments

Goede prompt-toevoeging:

Voeg {% comment %}-tags toe boven elke logische stap, in het Nederlands, zodat ik later begrijp wat de code doet zonder Liquid-expert te zijn.

Resultaat is leesbare Liquid die je over een half jaar nog snapt.

Concrete voorbeelden

Voorbeeld 1: dynamic shipping-message op productpagina

{% comment %}
  Toon shipping-bericht: gratis verzending boven €50,
  anders het bedrag dat nog ontbreekt.
{% endcomment %}
{% assign threshold = 5000 %} {% comment %} 50 euro in cents {% endcomment %}
{% if cart.total_price >= threshold %}
  <p class="shipping-msg">Je hebt gratis verzending unlocked.</p>
{% else %}
  {% assign remaining = threshold | minus: cart.total_price %}
  <p class="shipping-msg">
    Voeg {{ remaining | money }} toe voor gratis verzending.
  </p>
{% endif %}

Standaard ChatGPT-output, deze werkt out-of-the-box.

Voorbeeld 2: conditional rendering op metafield

Hier hallucinneerde ChatGPT:

{% if product.metafields.custom.size_chart %}
  {% render 'size-chart', chart: product.metafields.custom.size_chart %}
{% endif %}

Probleem: de metafield-key heet niet size_chart maar wat jij hebt geconfigureerd in Settings → Custom data. ChatGPT gokte een naam. Altijd je echte metafield-key meegeven in de prompt:

Mijn metafield zit op product.metafields.custom.maattabel (Type: Single line text). Schrijf een snippet die het toont als het bestaat.

Voorbeeld 3: seizoens-banner via Schema

Voor Online Store 2.0 sections is dit waar ChatGPT vaak struikelt op section schemas. Mijn fix:

Schrijf een section met de naam ‘Seizoens-banner’ met deze settings: heading (text), subheading (text, optional), background-color (color), button-link (url), button-text (text). Volg exact de Shopify-section-schema-spec voor Online Store 2.0.

Door expliciet de spec te noemen, krijg je veel beter resultaat.

Wat ik ChatGPT NIET laat doen in Liquid

• Performance-optimalisatie zonder verificatie. ChatGPT raadt soms naar {% paginate %} of {% liquid %}-blocks alsof ze altijd helpen — ze zijn context-dependent.
• Async API-calls. Storefront API of fetch-calls horen in JavaScript, niet in Liquid. Als ChatGPT een fetch in Liquid voorstelt, stop.
• Custom-payment-flows. Daar zit serieuze complexiteit in (en compliance). Voor checkout-aanpassingen op Plus zit je sowieso in Checkout Extensibility-territory met andere tools.
• Complete theme-conversies. Een Vintage-theme migreren naar OS 2.0 is geen ChatGPT-taak. Daar is een Shopify-developer voor.

Conclusie

ChatGPT als pair-programmer in Liquid is reëel productief — voor de standaard 80% van werk dat een marketeer of shop-owner zelf kan doen. Voor de 20% complexere zaken (echte custom logic, performance, security) blijft een Shopify-developer onmisbaar.

Sleutel: vraag de strategie voor de code, vraag om documentatie-links, test in een duplicaat-theme, en lees Liquid-errors als ze komen. Dan is AI in Liquid een tool die uren per week scheelt zonder je theme te breken.

Wil je sparren over slimme Liquid + AI-snippets voor jouw shop? Dat doen we in een gratis Shopify AI-audit.