A Liquid a Shopify saját sablonnyelve, és mindössze három építőelemből áll: {{ }} kiírja az adatot, {% %} logikát ad hozzá, a | pedig átalakítja a kimenetet. A téma nyolc mappából épül fel, amiből egyetlenegy kötelező: a layout/theme.liquid. Aki írt már HTML-t, az alapokat egy hétvégén megtanulja. A szintaxis a könnyebbik fele. A neheze az, hogy melyik fájlban mihez férsz hozzá.
| Jel | Neve | Mit csinál | |
|---|---|---|---|
{{ }} |
output | Kiírja egy objektum értékét a HTML-be | |
{% %} |
tag | Logikát ad: feltétel, ciklus, változó, beillesztés | |
| `\ | ` | filter | Átalakítja a kimenetet, balról jobbra láncolható |
A három jel, amiből minden más következik
Kezdjük a legegyszerűbbel. A dupla kapcsos zárójel kiír valamit, a benne lévő objektum értékét beteszi a HTML-be:
{{ product.title }}A kapcsos-százalék páros az utasításoké. Feltétel, ciklus, változó-létrehozás, fájl beillesztése. A Shopify hivatalos példája ennél nem is lehetne beszédesebb:
{% if product.available %}
Price: $99.99
{% else %}
Sorry, this product is sold out.
{% endif %}A harmadik elem a filter, ami a függőleges vonal után jön, és átalakítja a kimenetet. Több filter is fűzhető egymás után, ilyenkor balról jobbra hajtódnak végre:
{{ product.title | upcase | remove: 'HEALTH' }}Ha a terméknév „Health potion", ebből „POTION" lesz. Előbb nagybetűsít, aztán kivágja belőle a „HEALTH" szót. A sorrend számít: ha fordítva írod, a remove még a kisbetűs változatot keresné, és nem találná meg.
Egy negyedik dolog, ami nem építőelem, de a kódod olvashatóságát eldönti: a whitespace-vezérlés. A kötőjel a delimiter belső oldalán levágja a felesleges szóközöket és sortöréseket.
{% if page_description -%}
<meta name="description" content="{{ page_description | truncate: 150 }}">
{%- endif %}Enélkül a generált HTML tele lesz üres sorokkal. Nem hiba, de rondán néz ki, és kereséskor zavaró.
Honnan jönnek az adatok?
A product, a collection, a cart és a többi objektum a bolt adatait hozza. Ezekből van a legtöbb, és a teljes listát senki nem tanulja meg fejből, nem is kell.
Amit viszont érdemes érteni, az a hozzáférés három szintje, mert a leggyakoribb kezdő hibaüzenet ebből fakad:
- Globális: bármelyik Liquid-fájlban elérhető. Kivétel a
checkout.liquidés a Liquid asset-fájlok. - Sablonon belül: csak az adott sablonban és annak szekcióiban vagy blokkjaiban. A
productobjektum például a termék-sablonban él. - Szülőobjektumon keresztül: más objektum tulajdonságaként kapod meg. Egy
articleablog-on keresztül jön.
Ezért fordul elő, hogy ugyanaz a sor a termékoldalon kiír valamit, a főoldalon meg üresen marad. Ilyenkor nincs elírás a kódban. Rossz helyen kérted az adatot.
Saját változót az assign vagy a capture taggel készítesz, és a Liquid ezután pontosan úgy bánik vele, mint bármelyik objektummal:
{% assign kedvezmeny = product.compare_at_price | minus: product.price %}
{% if kedvezmeny > 0 %}
Megtakarítás: {{ kedvezmeny | money }}
{% endif %}A money filter az egyik legtöbbet használt darab magyar boltban, mert a bolt pénznem-beállítása szerint formáz. Nyers számot kiírni ár helyett kezdő hiba, és azonnal látszik a fronton.
Hol lakik a kód?
Itt jön az a rész, amit a szintaxisnál sokkal többen szúrnak el. A Shopify-téma kötött mappaszerkezetet használ, és a felsoroltakon kívül más almappát nem támogat:
.
├── assets
├── blocks
├── config
├── layout
├── locales
├── sections
├── snippets
└── templatesEbből mindössze egy kötelező: a layout mappa a theme.liquid fájllal. Enélkül a téma fel sem tölthető. Minden más elhagyható, csak épp nem lesz mit megjeleníteni.
A hat komponens egymásra épül, és ezt a hierarchiát érdemes fejben tartani, mielőtt bármit átírsz.
A layout a keret: ide kerül a <head>, a fejléc és a lábléc. A template dönti el, mi jelenjen meg az adott oldaltípuson. A section újrafelhasználható, a kereskedő által szerkeszthető tartalomblokk. A block a szekción belüli, sorrendezhető elem. A snippet pedig újrafelhasználható kóddarab, ami a téma bármely pontján renderelhető.
Egy fontos különbség a sablonoknál: a JSON-sablon csak burok a szekciók köré, kódot nem tartalmaz. A Liquid-sablonban van tényleges kód. Ha megnyitasz egy templates/product.json fájlt, és nem találsz benne markupot, nem hiányzik semmi, egyszerűen nem ott van.
A snippetekkel kapcsolatban van még egy dolog, ami elsőre meglepő: a kereskedő nem látja őket a téma-szerkesztőben. Ami snippetbe kerül, az a szerkesztő felületén láthatatlan. Ha azt szeretnéd, hogy az ügyfél maga tudja állítani, szekcióba vagy blokkba tedd, ne snippetbe.
Az assets mappánál van egy trükk, amiről kevesen tudnak. A nem bináris fájlok kaphatnak .liquid kiterjesztést, például style.css.liquid vagy app.js.liquid, és ettől korlátozott Liquid-képességet kapnak: a settings objektumot és a filtereket érik el, mást nem. A témabeállításból jövő színt így teheted CSS-be anélkül, hogy inline stílust írnál.
Nem minden Liquid ugyanaz a Liquid
Most jön a rész, ami miatt ezt a cikket megírtam.
Megtanulod a három jelet, átlátod a mappaszerkezetet, megírod az első szekciódat, és működik. Magabiztos leszel. Aztán megnyitod a rendelés-visszaigazoló e-mail sablonját, mert a kolléga azt kérte, hogy bolti átvételnél más szöveg menjen ki. Ott is Liquid van. Beírod ugyanazt, amit a témában használtál, és nem történik semmi.
A Shopify ugyanis több, egymástól eltérő Liquid-változatot használ, és a hivatalos Liquid-referencia kizárólag a témákra vonatkozik. A dokumentáció négy másik változatot sorol fel külön, saját referenciával: az értesítési e-mail sablonokat, a Shopify Flow-t, az Order Printer sablonokat és a szállítólevél-sablonokat.
Ez a saját ügyfélbeszélgetéseinkben is előjött. 2026 áprilisában az a tanács hangzott el, hogy az e-mailek tartalma Liquid sablonokban személyre szabható, tehát bolti átvételnél más üzenet küldhető. A tanács igaz. Csak épp az a Liquid, amit ott használsz, nem az a Liquid, amit a téma-referenciából megtanultál. Más objektumok, más változók, más dokumentáció.
Van ebben valami kellemetlenül tanulságos. A Liquid azért érzi könnyűnek magát, mert a szintaxisa tényleg triviális. A nehézség mindvégig abban állt, hogy megtudd, éppen melyik környezetben vagy, és ott mihez férsz hozzá. Aki csak a szintaxist tanulja meg, az pontosan addig jut, ameddig a szintaxis elég.
Két hely, ahol ugyanez a szűkítés a témán belül is elkap: a checkout.liquid és a Liquid asset-fájlok nem látják a globális objektumokat. Ha ott hivatkozol valamire, ami máshol működik, csendben üres marad.
Amire 2026-ban érdemes figyelni
Két dolog mozog most a Liquid körül, és érdemes tudni róluk, mielőtt régi útmutatóból dolgoznál.
Az egyik a Horizon, a Shopify 2025 nyarán kiadott téma-keretrendszere, ami a Dawn utódja. Teljesen blokk-alapú, a blokkok nyolc szintig ágyazhatók egymásba, és a Dawn új funkciókat már nem kap. A nyelvi alap viszont nem változott: Horizon alatt is Liquidet, HTML-t, CSS-t és JavaScriptet írsz, tehát amit itt olvasol, az ugyanúgy érvényes.
A másik frissebb, és egyelőre csak előzetes. A „Liquid July '26" fejlesztői előzetes két új taget hozott: a {% block %} közvetlenül a sablonból renderel theme blockot, a {% partial %} pedig egy megnevezett, szerveroldalon renderelt HTML-régiót definiál, amit a JavaScript teljes oldalújratöltés nélkül frissíthet. Kosárfrissítésre és szűrőkre ez pont a hiányzó darab. A júliusi frissítés-összefoglalónkban végigvettük a részleteket, a Theme Check új szabályaival együtt.
Egy dolgot viszont tegyél hozzá: ez előzetes. Éles ügyfélprojektre most még korai.
Mivel folytasd
Ha a fentiek megvannak, a következő lépés a munkakörnyezet. A böngészőben szerkesztett téma-kód visszavonhatatlan, verziókövetés nélkül dolgozol, és egyetlen elgépelés az élő boltot viszi. A theme fejlesztés CLI-val cikkben végigvettük, hogyan húzd le a témát, hogyan futtass helyi előnézetet, és hogyan tedd vissza úgy, hogy közben ne az éles verzió menjen.
Aki pedig még azt mérlegeli, egyáltalán melyik irányba induljon, annak a fejlesztői roadmap adja meg a sorrendet, a programozási nyelvek cikk pedig azt, hol helyezkedik el a Liquid a Shopify többi technológiája között.
A Liquid nem nehéz nyelv, és pont ez a veszélyes benne. Két óra alatt olyan érzésed lesz, hogy tudod, és három hét múlva jössz rá, hogy a nyelvet valóban tudtad, csak azt nem, hol állsz vele. A dokumentációt ezért érdemes minden alkalommal elővenni, amikor új fájlt nyitsz meg.
GYIK
Programozási nyelv a Liquid?
Sablonnyelv. HTML-t egészít ki logikai elemekkel: feltételekkel, ciklusokkal és a bolt adatainak behúzásával. Nyílt forráskódú, a Shopify fejlesztette, és más szoftverek is használják. Aki írt már HTML-t, az alapokat gyorsan megtanulja.
Melyik fájl kötelező egy Shopify-témában?
Egyetlenegy: a layout/theme.liquid. Enélkül a téma fel sem tölthető. A többi mappa és fájl elhagyható, de értelemszerűen nem lesz mit megjeleníteni. A támogatott mappák: assets, blocks, config, layout, locales, sections, snippets, templates. Más almappát a rendszer nem támogat.
Mi a különbség a szekció, a blokk és a snippet között?
A szekció a kereskedő által szerkeszthető, újrafelhasználható tartalommodul. A blokk a szekción belüli, hozzáadható és sorrendezhető elem. A snippet újrafelhasználható kóddarab, ami bárhol renderelhető, viszont a kereskedő nem látja a téma-szerkesztőben. Ha azt akarod, hogy az ügyfél maga állíthassa, ne snippetbe tedd.
Miért nem működik a témában tanult Liquid az e-mail sablonban?
Mert az másik Liquid-változat. A hivatalos Liquid-referencia a témákra vonatkozik, és a Shopify külön, saját referenciával kezeli az értesítési e-maileket, a Shopify Flow-t, az Order Printert és a szállítólevél-sablonokat. Más objektumok, más változók.
Miért marad üres egy objektum a főoldalon, ha a termékoldalon működik?
Mert az objektumok hozzáférése háromféle lehet: globális, sablonon belüli, vagy szülőobjektumon keresztüli. A product például a termék-sablonhoz kötött. Minden objektum dokumentációja kiírja, melyik érvényes rá.
Használhatok Liquidet CSS- vagy JavaScript-fájlban?
Igen, korlátozottan. Ha a fájl .css.liquid vagy .js.liquid kiterjesztést kap, eléri a settings objektumot és a filtereket. Globális objektumokat viszont nem lát.
Hasznos linkek
- Shopify theme fejlesztés CLI-val – a munkakörnyezet, amivel biztonságosan nyúlsz a kódhoz
- Shopify fejlesztői roadmap – milyen sorrendben érdemes haladni
- Milyen nyelven programozhatsz Shopify-ra? – hol helyezkedik el a Liquid a többi technológia között
- Shopify frissítések 2026 júliusban – a
blockéspartialtagek előzetese - Shopify Liquid referencia – a hivatalos alapdokumentáció, tagek, filterek, objektumok
- Shopify Dev: téma-architektúra – a mappaszerkezet és a komponensek hivatalos leírása
Gyuri
Hugyecz György – keresőoptimalizálási szakértő és a TotalStudio egyik tulajdonosa. Weboldalaknál és webáruházaknál elsősorban SEO-val, tartalomfejlesztéssel és technikai auditokkal foglalkozik, emellett fizetett hirdetésekkel (Google Ads, Meta), szövegírással és általános tanácsadással is; aktívan érdeklődik és használja a különböző AI-megoldásokat.
Profil
