A sablonnyelv: layout, oldalsablonok, szekciók és az elérhető adatok
Liquid-sablonok a témában: a layout, a templates JSON-ok, a szekciók és a schema-leíró, a snippetek, a szűrők és szótárak, és hogy melyik oldalon milyen adatot kap a sablon.
Frissítve: 2026. október 6.
A téma sablonjai Liquid nyelven készülnek (a Shopify-témákéhoz hasonló szintaxis), és zárt környezetben futnak: csak a téma saját fájljait látják, minden kiírt érték automatikusan escape-elt, és a futásnak idő- és memóriakorlátja van. Az oldalt a platform rakja össze: a layout minden oldal körül, a layouton belül a content_for_layout helyén az adott oldal sablonjának szekciói.
A layout
A layout/theme.liquid a teljes oldalkeret: fejléc, a tartalom helye, lábléc. Ide kerül kötelezően, feltétel nélkül a jogi sáv platform-helye. Példa (az Üres alapból):
<header class="s-header">
{% render 'brand', shop: shop %}
<nav aria-label="{{ 'nav.main' | t }}">{% platform 'nav' %}</nav>
{% platform 'account_link' %}
{% platform 'cart_link' %}
{% platform 'mobile_menu', categories: 30 %}
</header>
{% content_for_layout %}
<footer>
{% platform 'footer_columns' %}
{% platform 'legal_links' %}
</footer>
A content_for_layout helyére a platform egy #tartalom azonosítójú keretben teszi az oldal tartalmát (ide ugrik az „Ugrás a tartalomra” link). A layouton kívül, a platform teszi ki: a közlemény- és alvó-mód-sávot, a süti-sávot, a „Powered by” jelölést, az előnézeti sávot és az ugró linket. A html és body elemet nem a téma adja; a body osztálya th-<téma-azonosító>, a data-theme attribútuma ugyanez.
Oldalsablonok (templates) és szekciók
A templates/<oldal>.json mondja meg, melyik szekciók és milyen sorrendben adják az oldalt:
{ "sections": { "main": { "type": "main-product", "settings": {} } }, "order": ["main"] }
A sections és az order kötelező; a type a sections/<type>.liquid fájlra mutat, és annak léteznie kell. Az order-ben csak a sections-ban megadott azonosító szerepelhet. Egy szekció opcionálisan blocks és block_order kulcsot is kaphat; a szekció a section.id, section.settings és section.blocks értékeket látja. Minden szekció egy data-section-id attribútumú div-be kerül.
| Sablon | Oldal | Az oldal saját adata |
|---|---|---|
| templates/index.json | kezdőlap | home (lent); a kereskedő blokkjai a home_sections platform-helyen |
| templates/product.json | termékoldal | product, related |
| templates/collection.json | kategóriaoldal | listing |
| templates/search.json | keresés és „Összes termék” | listing (listing.is_search igaz) |
Hibatűrés. Ha egy szekció hibás vagy túl lassú (1 másodperc), az a szekció kimarad, a többi megjelenik, a hibát a bolt naplózza. Ha maga a layout vagy a template hibás, a bolt a platform alaptémájával jelenik meg, és az admin Megjelenés oldala figyelmeztet (a tulajdonos naponta legfeljebb egy e-mailt is kap róla).
Schema. Minden szekció végére kerülhet (saját blokknál kell) egy leíró, amit a szerkesztő olvas; a kimenetben nem jelenik meg:
{% schema %}{"name": "Termékoldal"}{% endschema %}
Snippetek, saját kártya
Újrahasznosítható részlet: snippets/<nev>.liquid, meghívása {% render 'nev', kulcs: ertek %}. A hivatkozott snippetnek léteznie kell (a feltöltés ellenőrzi), a név csak betű, szám, kötőjel, aláhúzás lehet, és nem lehet változóból képezni. A render tag új változókört nyit: a snippet csak azt látja, amit átadsz neki (ezért adja át az Üres alap a shop változót is: {% render 'brand', shop: shop %}).
Külön szerepe van két snippetnek:
- snippets/card.liquid – a termékkártya. A platform ezt használja a saját blokkjaiban (kiemelt termékek, kapcsolódó termékek stb.); a product és a level (címsorszint, 2 vagy 3) változót kapja.
- snippets/blocks.liquid – ha van, ez keretezi a kereskedő blokklistáját a kezdőlapon és a saját oldalakon; nélküle a blokkok önállóan jelennek meg.
Tagek és szűrők
| Mi | Mit tud |
|---|---|
| {% platform 'nev', kulcs: ertek %} | Platform-elem helye (külön cikk). Ismeretlen név: hiba már a feltöltésnél. |
| {% content_for_layout %} | Az oldal tartalma a layoutban. |
| {% schema %} … {% endschema %} | A szekció leírója (JSON); a kimenetben nem jelenik meg. |
| {% render 'nev', … %} | Snippet beillesztése. |
| if, unless, case, for, assign, capture, comment… | A Liquid alap tagjei működnek. |
| include, layout, block | Tiltott: a feltöltés hibát ad. |
| {{ 'kulcs.alkulcs' | t }} | Felirat a szótárból; paraméterrel: {{ 'product.image_n' | t: title: product.title, n: forloop.index }} → a szótárban „{title} – {n}. kép”. |
| {{ 'hatter.webp' | asset_url }} | Az assets/ mappa fájljának nyilvános címe (ismeretlen fájl: üres string). |
| {{ szoveg | paragraphs }} | Üres sorral elválasztott bekezdések listája (hosszú szöveges beállítás tördeléséhez). |
| raw | Nem kapcsolja ki az escape-et: minden kiírt érték escape-elt marad. |
Ismeretlen szűrő hibát ad (szigorú szűrő-mód). A szótárkulcsokat a feltöltés összegyűjti a sablonokból, és mindhárom nyelvben (hu, en, de) ellenőrzi a meglétüket; hiányzó kulcs → hiba a szótárfájl nevével. Beégetett felirat ne legyen a sablonban: minden szöveg a locales alá kerül.
Globális adatok (minden sablonban)
| Név | Mezők |
|---|---|
| shop | name, logo (a logó címe vagy null), url (/) |
| settings | a theme.json settings mezői a kereskedő értékeivel |
| collections | felső szintű kategóriák: id, name, handle, url, image (vagy null) |
| cart | count |
| site | newsletter_id (a kezdőlap hírlevél-blokkjának azonosítója vagy null) |
Oldalfüggő adatok
| Név | Mezők |
|---|---|
| product | id, handle, title, url, image (vagy null), has_alt_image, images (lista: url), description, description_short (160 karakter), description_paragraphs (lista), sku (egy változatnál), variant_count, discount (akciós %, csak Omnibus-szerinti valódi csökkentésnél), category (name, url) vagy null |
| related | termékek listája, mezői mint a product |
| listing | title, url, count_text, is_search, terms (keresőszó), chips (lista: name, url – alkategóriák vagy főkategóriák), children (lista: name, url), products (lista, mezői mint a product) |
| home | has_hero_heading, first_type, has_stage, preview, sections (lista: id, type, live, count), first_settings |
| section | szekción belül: id, type, settings, blocks; a platform-blokk saját sablonjában az adat is (lent) |
Árat, készletet, változatot a sablon nem kap: ezek a platform-helyeken jelennek meg (price, buy_form, card_buy), a sablon csak a product.id-t adja át nekik. Így az ár és az Omnibus-ár mindig a platform szabályai szerint jelenik meg.
Saját blokktípusok és platform-blokkok saját sablonja
A sections/x-<nev>.liquid fájl a téma saját blokkja: a kereskedő a kezdőlapra és a saját oldalaira teheti, a mezőit a szerkesztő a fájl végi schema-leíróból építi. A fájlnév x- előtaggal kezdődik (kisbetű, szám, kötőjel), legfeljebb 40 saját blokk lehet, blokkonként legfeljebb 30 mező:
<div class="x-banner x-banner--{{ section.settings.tone }}">{{ section.settings.heading }}</div>
{% schema %}
{"name": "Saját sáv", "settings": {
"heading": {"kind": "text", "label": "Cím", "max": 80, "required": true},
"tone": {"kind": "select", "label": "Szín", "options": {"a": "Világos", "b": "Sötét"}}
}}
{% endschema %}
A name 1–60 karakter; a mezőtípusok a theme.json settings típusai, plusz image (a bolt médiatárából) és list (max 1–24 elem, item: egyszerű mezők és kép).
A platform blokktípusaihoz (pl. hero, featured-products, category-grid, product-spotlight) is adhatsz saját sablont sections/<tipus>.liquid néven – ilyenkor a mezők a platformé, és a szekció adatot is kap: featured-products esetén section.products (lista, mint a product) és section.more_url; product-spotlight esetén section.product; category-grid esetén section.categories (name, url, image); hero esetén kép nélkül section.fallback_images. A main- előtagú szekciók (az oldalak fő szekciói) nem válthatók ki így.