Shopify Liquid: introduzione al linguaggio

Liquid è il linguaggio di templating di Shopify, creato dal CEO Tobi Lütke nel 2006. È simile a Jinja (Python) o Twig (PHP) e permette di generare HTML dinamico dai dati store. Per personalizzare un tema o costruirne uno custom è essenziale conoscerlo. In questa guida vediamo sintassi base, oggetti e best practice.

Sintassi base

Liquid ha 3 costrutti: output con doppie graffe per stampare valori (es. {{ product.title }}), tags con graffe e percento per logica (es. {% if product.available %}...{% endif %}), filters con pipe per trasformare valori (es. {{ product.price | money }}). I tag più usati: if/else/elsif/endif, for/endfor, assign, capture, case/when, render (per includere snippets), section, schema.

Oggetti globali

Shopify espone oggetti globali in ogni template: product, collection, cart, customer, shop, request, template, linklists, settings. Ogni oggetto ha proprietà: product.title, product.variants, product.images, cart.items, cart.item_count, customer.email, shop.name.

Esempio pratico

Snippet per stampare titolo, prezzo e immagine di un prodotto: {{ product.title }}
{{ product.price | money }}
<img src="{{ product.featured_image | image_url: width: 600 }}" alt="{{ product.title }}">. Loop sulle varianti: {% for variant in product.variants %}{{ variant.title }} - {{ variant.price | money }}{% endfor %}.

Procedura passo-passo per imparare

1. Studia la documentazione ufficiale su shopify.dev/docs/api/liquid.
2. Esercitati con il Liquid Cheat Sheet (ottimi su web).
3. Crea un tema development da Theme > Customize: clona Dawn.
4. Modifica una sezione semplice: per esempio cambia il footer.
5. Sperimenta con filters: money, capitalize, date, truncate, image_url.
6. Aggiungi una condizione: mostra badge SOLD OUT se product.available == false.
7. Crea uno snippet riutilizzabile in snippets/product-card.liquid e includilo con {% render 'product-card', product: product %}.
8. Usa Shopify CLI per development locale: shopify theme dev.

Filtri più utili

money: formatta prezzo nella valuta store. image_url: genera URL CDN con resize. truncate: taglia testo. handle: trasforma in slug. upcase/downcase: maiuscolo/minuscolo. date: formatta data. asset_url: URL asset tema. t: traduzione internazionalizzazione.

Errori comuni e come risolverli

• Confondere {{ }} con {% %}: {{ }} stampa, {% %} logica; non sono intercambiabili.
• Liquid in JavaScript: Liquid è server-side, non si può usare in JS files; passa valori via data attributes.
• Loop infiniti: usa limit nei for: {% for item in collection.products limit: 12 %}.
• Performance: render ricorsivi o loop annidati profondi rallentano il rendering.

Domande frequenti

D: Liquid è uguale a Jinja o Twig?
R: Sintassi simile ma non identica; non si possono usare template Jinja direttamente.

D: Posso fare API call da Liquid?
R: No, Liquid è server-side template engine, non runtime; per API usa JavaScript lato client.

D: Quanti file Liquid ha un tema?
R: Tipicamente 50-150 file: templates, sections, snippets, layout.

Sections e metafields

Le sections sono blocchi configurabili da theme editor. Ogni section ha schema JSON con settings (text, image, color, range) e blocks (sub-elementi ripetibili). Esempio: una hero section con settings heading, subheading, image, button_text, button_link. I metafields sono campi custom su prodotti/clienti/ordini; accessibili in Liquid come product.metafields.custom.ingredienti. Combinati permettono temi data-driven senza app esterne.

Performance e best practice

Per temi performanti: limita render includes a 3-4 livelli max, cache via fragment caching (Shopify lo gestisce nativamente), preload assets critici, minimizza loop annidati (collection.products dentro collection causa N+1 query), usa image_url con dimensioni adatte. Strumenti debug: {{ shop | json }} stampa l'oggetto, {% assign var = obj %} ispeziona valori. Verifica con Shopify Theme Inspector (Chrome ext).

Checklist operativa

Prima di considerare l'argomento implementato correttamente, verifica questa checklist sintetica: configurazione tecnica testata in ambiente di staging o development store, backup attivo prima di ogni modifica critica, documentazione interna aggiornata per il team operativo, training agli operatori che useranno la funzionalità, monitoraggio di metriche chiave (conversion rate, AOV, ticket support) per 30 giorni post-implementazione, revisione legale se l'implementazione tocca aspetti GDPR, fiscali o di pagamento, piano di rollback chiaro nel caso di problemi imprevisti, comunicazione ai clienti se il cambiamento influenza la loro esperienza (es. nuovo checkout, nuovi metodi di pagamento, nuovi tempi di spedizione). Una implementazione tecnica senza queste fasi di accompagnamento spesso non produce i risultati attesi e genera attriti interni o sui clienti.

Risorse utili e community

Per approfondire ulteriormente: la documentazione ufficiale Shopify su shopify.dev e help.shopify.com aggiorna costantemente le guide; il Shopify Community Forum ha thread attivi su quasi ogni argomento con risposte da Shopify Experts; Shopify Partner Academy offre corsi gratuiti per merchant e sviluppatori; YouTube channel ufficiale Shopify pubblica walkthrough delle nuove feature. Per il mercato italiano cerca community come Shopify Italia su Facebook o gruppi LinkedIn dedicati a e-commerce manager italiani: il confronto con altri merchant che vivono problemi simili è una scorciatoia preziosa rispetto a documentazione internazionale generica.

Hai bisogno di aiuto?

Se vuoi un Shopify ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.