Liquid di Shopify: guida pratica per chi parte da zero

Cos’è Liquid e dove si trova nel tema

• layout/: la cornice di tutte le pagine, di solito theme.liquid;
• sections/: i “mattoni” che sposti dall’editor del tema (banner, prodotti in evidenza, testo con immagine);
• blocks/: nei temi più recenti, i blocchi riutilizzabili dentro le sezioni;
• snippets/: pezzi di codice richiamati da altri file;
• templates/: nei temi Online Store 2.0 sono quasi tutti file JSON, cioè l’elenco delle sezioni che compaiono in una pagina.

Le due “parentesi”: output e logica

{{ }} per stampare

{% %} per decidere

<h1 class="titolo-prodotto">{{ product.title | escape }}</h1>
{%- if product.available -%}
  <p class="prezzo">{{ product.price | money }}</p>
{%- else -%}
  <p class="prezzo">Esaurito</p>
{%- endif -%}

Il trattino che toglie gli spazi

Gli oggetti che userai sempre

product e variant

{%- assign variante = product.selected_or_first_available_variant -%}
<p>{{ variante.title }}: {{ variante.price | money }}</p>

collection

cart

section, block e settings

{%- for block in section.blocks -%}
  <div class="vantaggio" {{ block.shopify_attributes }}>
    {{ block.settings.testo }}
  </div>
{%- endfor -%}

Tag: condizioni, cicli e snippet

if, unless, case

{%- case product.type -%}
  {%- when 'Scarpe' -%}
    {% render 'guida-taglie-scarpe' %}
  {%- when 'Maglie', 'Felpe' -%}
    {% render 'guida-taglie-maglie' %}
  {%- else -%}
    <p>Scrivici per sapere le misure.</p>
{%- endcase -%}

for e paginate

{%- paginate collection.products by 24 -%}
  {%- for product in collection.products -%}
    <a href="{{ product.url }}">{{ product.title | escape }}</a>
  {%- else -%}
    <p>Nessun prodotto in questa collezione.</p>
  {%- endfor -%}
  {{- paginate | default_pagination -}}
{%- endpaginate -%}

render (e perché non include)

{% render 'card-prodotto', product: product, mostra_prezzo: true %}
{% render 'card-prodotto' for collection.products as product %}

Filtri: i 10 più utili

1. money: formatta un prezzo nella valuta del cliente (money_with_currency aggiunge il codice, es. EUR);
2. image_url: crea l’indirizzo di un’immagine alla misura che chiedi (sostituisce il vecchio img_url, deprecato);
3. image_tag: crea il tag <img> completo a partire da image_url;
4. t: prende un testo dai file di traduzione in locales/;
5. escape: rende sicuro un testo dentro l’HTML;
6. default: usa un valore di riserva se quello principale è vuoto;
7. date: formatta una data;
8. strip_html: toglie i tag HTML, per esempio dalla descrizione del prodotto;
9. truncate: accorcia un testo a un numero di caratteri;
10. json: trasforma un valore in JSON valido, indispensabile quando passi dati a JavaScript o scrivi dati strutturati.

{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy' }}
{{ product.description | strip_html | truncate: 140 }}
{{ article.published_at | date: format: 'abbreviated_date' }}
{{ section.settings.titolo | default: 'Novità' | escape }}
{{ 'products.product.add_to_cart' | t }}

Gli errori più comuni

• Tag non chiusi: un if senza endif o un for senza endfor. L’editor del codice ti segnala l’errore di sintassi: leggilo, indica la riga.
• Prezzi senza filtro: {{ product.price }} stampa 4900, non 49,00 €.
• Testi vuoti trattati come falsi: {% if section.settings.titolo %} è vero anche con il campo vuoto; usa != blank.
• Codice copiato da guide vecchie: include, img_url e i template .liquid al posto dei JSON sono segnali di un tutorial superato.
• Variabili che “spariscono” negli snippet: con render vanno passate come parametri.
• Modifiche fatte sul tema pubblicato: un errore lo vedono subito i clienti. Si lavora sempre su una copia del tema.

Domande frequenti

Conclusione