Sviluppo di temi Shopify: le best practice di Liquid che devi conoscere adesso

La piattaforma dei temi Shopify si è mossa più velocemente nella prima metà del 2026 che in anni interi. Tra il rilascio Winter '26 Editions con 150+ aggiornamenti e il rilascio Summer '26 che ha introdotto il sistema Horizon, c'è molto da assorbire per gli sviluppatori. Questo articolo taglia il rumore di fondo e si concentra su ciò che cambia veramente il tuo lavoro quotidiano con Liquid.

Il cambio Horizon: cosa significa per il tuo codice

Il più grande cambiamento strutturale del 2026 è l'arrivo di Horizon. Rilasciato come parte di Shopify Summer 2026 Editions, Horizon è un sistema di temi completamente nuovo basato su 10 temi gratuiti con nomi come Fabric, Ritual e Vessel, ciascuno progettato per la conversione in settori specifici.

Il salto architettonico che gli sviluppatori devono comprendere è il sistema di blocchi annidati. I temi Horizon supportano fino a 8 livelli di blocchi annidati, rispetto al limite di 2 livelli di Dawn e altri temi Online Store 2.0. Non è solo un aggiornamento estetico. Significa che i tuoi schemi di sezione cresceranno in complessità. Una semplice sezione hero che un tempo occupava circa 20 righe di JSON in Dawn può facilmente superare 60 righe in Horizon a causa della profondità di annidamento.

In Horizon, i blocchi non sono semplici segnaposti per testo o immagini. Spesso rappresentano componenti UI autonomi con propria logica di animazione, comportamento di layout e regole di styling. Se stai costruendo sezioni personalizzate per Horizon, tratta ogni blocco come un componente indipendente: assegnagli una chiara responsabilità singola, raggruppa tutto il suo CSS usando l'ID univoco del blocco dentro un tag {% style %}, e fornisci sempre toggle per attivare/disattivare le animazioni in modo che i merchant possano ottimizzare accessibilità e performance senza toccare il codice.

Horizon introduce anche i blocchi di gruppo, che ti permettono di raggruppare elementi correlati, come un header, una griglia di prodotti e un banner promozionale, in un'unità riutilizzabile. Questo è genuinamente utile per i team che gestiscono più linee di prodotti o campagne stagionali.

Un avviso pratico: se modifichi direttamente i file core del tema Horizon, le tue modifiche verranno sovrascritte al prossimo aggiornamento. Costruisci sempre blocchi personalizzati nella cartella /blocks e fai un fork solo di quello che è necessario.

Horizon vs. Dawn: differenze architettoniche chiave

Cambiamenti della piattaforma che richiedono azione adesso

Parsing Liquid più rigoroso (gennaio 2026)

Shopify ha iniziato a forzare un parsing Liquid più rigoroso per tutti i temi a gennaio 2026 per migliorare l'affidabilità e abilitare futuri miglioramenti a Liquid. Se hai temi vecchi con sintassi Liquid disordinata o tecnicamente invalida che per caso funzionava prima, ora potrebbero generare errori. Esegui Theme Check su tutta la tua codebase prima del prossimo deploy.

Sottoinsiemistica del contenuto CSS per i tag {% stylesheet %} (aprile 2026)

Questo è marcato come Azione richiesta nel changelog dello sviluppatore Shopify e troppi sviluppatori lo stanno ignorando. A partire dal 20 aprile 2026, Shopify fornisce solo il CSS dai tag {% stylesheet %} che sono rilevanti per le sezioni, i blocchi e gli snippet renderizzati su ogni pagina, invece di servire tutto il CSS dei stylesheet ad ogni caricamento pagina.

La soluzione è semplice in linea di principio: se il {% stylesheet %} di un file definisce classi CSS utilizzate da elementi HTML in altri file non correlati, quegli stili potrebbero non essere inclusi sulle pagine dove il file che li definisce non viene renderizzato. Verifica i tuoi temi per le classi CSS condivise che vivono in un file ma vengono applicate da un altro. Mantieni gli stili autonomi all'interno del file che possiede il markup.

Cache degli asset: abbandona le query string bare (marzo 2026)

Un aggiornamento della cache degli asset a marzo 2026 ha terminato il supporto per le query string bare negli URL per l'invalidazione della cache. Usa i filtri Liquid come asset_url per assicurarti che gli asset si aggiornino correttamente e migliori i tempi di caricamento. Se stai manualmente aggiungendo ?v=123 agli URL degli asset da qualche parte, smettila. Il filtro asset_url gestisce il versioning per te.

Aumento del limite di App Block (febbraio 2026)

Un aggiornamento più piccolo ma utile: ora puoi definire fino a 30 app block nella tua estensione app tema, rispetto ai 25 precedenti. Se costruisci temi che devono supportare un'ampia varietà di integrazioni di app, questo ti dà più spazio.

Pattern di performance Liquid che continuano a confondere gli sviluppatori

Indipendentemente dagli aggiornamenti della piattaforma, gli errori di performance che vedo più spesso negli audit dei client sono gli stessi di sempre. Ecco un elenco rapido.

Non usare mai all_products dentro un ciclo. Il recupero ripetuto di oggetti prodotto dentro un ciclo, ad esempio chiamando all_products[item.product.handle] per ogni articolo del carrello, attiva una query al database per elemento. Con 10 articoli nel carrello, il tempo di rendering della pagina può aumentare di 2-3 secondi. Accedi ai dati direttamente dall'oggetto item invece.

Usa {% render %}, non {% include %}. Il tag include deprecato condivideva lo scope delle variabili del template padre, causando effetti collaterali imprevisti e degradazione delle performance. Il tag render isola completamente lo scope dello snippet. Passa sempre le variabili esplicitamente e non fare mai affidamento sull'ereditarietà dello scope padre.

Mantieni le sezioni a responsabilità singola. Una sezione hero banner non dovrebbe anche gestire i consigli di prodotto. Sezioni piccole e focalizzate sono più facili da mantenere e danno ai merchant più flessibilità di layout nell'editor del tema.

Usa {{ block.shopify_attributes }} sull'elemento di livello superiore di ogni blocco. Senza di esso, l'editor del tema non può selezionare, spostare o configurare i singoli blocchi. Questo è un requisito basilare ma è assente da un numero sorprendente di blocchi personalizzati in circolazione.

Non codificare mai stringhe. Le stringhe codificate infrangono l'internazionalizzazione e rendono impossibile per i merchant personalizzare il testo dalle impostazioni della lingua dell'editor del tema. Ogni stringa rivolta all'utente dovrebbe passare attraverso il filtro | t.

Carica script e stili in modo condizionale. Usare Liquid per caricare condizionalmente script e stili migliora le performance Core Web Vitals e riduce le risorse bloccanti. Abbina con strategie async o defer dove appropriato.

Il tuo toolchain nel 2026

Se non stai già usando questi strumenti su ogni progetto, inizia oggi:

• Shopify CLI per lo sviluppo locale dei temi e hot reloading
• VS Code con l'estensione Shopify Liquid per l'evidenziazione della sintassi e l'autocomplete
• Theme Check 2.0, ora integrato in Shopify CLI, che rileva problemi di performance, problemi di accessibilità e utilizzo di pattern deprecati prima del deploy
• Git con workflow basati su branch e non modificare mai direttamente i temi live
• Integrazione GitHub per deploy automatizzati e coordinamento del team

La Section Rendering API merita più attenzione di quella che riceve. Le sezioni possono essere renderizzate in modo indipendente via AJAX, abilitando transizioni pagina più veloci senza ricariche complete e formando la base per esperienze simili ad app dentro i temi Liquid.

Liquid vs. Hydrogen: fai la scelta giusta

Ogni pochi mesi qualcuno mi chiede se dovrebbe andare headless. Ecco la risposta onesta per il 2026: per i brand DTC che generano ricavi significativi, Liquid con Online Store 2.0 fornisce un ROI migliore attraverso sviluppo più veloce, editing più facile per i merchant, costi di manutenzione inferiori e Shopify che gestisce hosting e CDN. Hydrogen non è automaticamente più veloce di Liquid. Ti dà più controllo sulle cose che influenzano la performance, ma se il tuo collo di bottiglia è il bloat del tema, script di terze parti o media sovradimensionato, passare a Hydrogen non lo risolverà.

Vai headless quando hai davvero superato quello che Liquid può fare e hai la capacità di ingegneria per mantenere lo stack.

Segni che sei pronto per andare headless

• Il tuo team spende più tempo a fare workaround delle limitazioni di Liquid che a costruire features
• Richiedi interattività complessa a livello di app che la Section Rendering API non può coprire
• Hai ingegneri frontend dedicati a loro agio nel mantenere uno stack React o Remix
• Il tuo collo di bottiglia di performance è stato confermato come rendering di Liquid, non media o script di terze parti
• Hai bisogno di integrazioni profonde con sistemi esterni (PIM, ERP, checkout personalizzato) che vanno oltre Shopify Functions

Una scadenza che vale la pena segnalare

Se tu o i tuoi client state ancora usando Shopify Scripts, Shopify Functions sostituirà Scripts a giugno 2026 con esecuzione più veloce e compatibilità aumentata. Quella migrazione non è opzionale. Verifica gli store che usano Scripts e inizia la transizione adesso.

La piattaforma dei temi nel 2026 premia gli sviluppatori che rimangono vicini al changelog e costruiscono con componenti puliti e autonomi. Il cambio della sottoinsiemistica CSS da solo è ragione sufficiente per fare un audit completo dei stylesheet su ogni tema attivo che mantieni. Horizon è la direzione verso cui si sta muovendo Shopify, e l'architettura dei blocchi annidati è il modello mentale da interiorizzare quest'anno.