CSS subsetting Shopify: cosa cambia dal 20 aprile 2026

Cos'è il CSS subsetting automatico di Shopify

Dal 20 aprile 2026 Shopify cambierà il modo in cui distribuisce i fogli di stile nei temi Liquid. Attraverso il meccanismo di CSS subsetting automatico, la piattaforma analizzerà quali sezioni, blocchi e snippet vengono effettivamente renderizzati su ciascuna pagina e consegnerà al browser solo le regole CSS associate a quegli elementi.

Fino a oggi, ogni {% stylesheet %} presente in un tema veniva incluso integralmente a ogni caricamento di pagina, indipendentemente dal fatto che le classi definite al suo interno fossero utilizzate o meno in quella specifica view. Con il nuovo comportamento, le regole non pertinenti alla pagina corrente verranno semplicemente omesse.

Questa non è la correzione di un bug: è una scelta architetturale deliberata di Shopify, documentata nel changelog ufficiale della piattaforma.

Perché è un rischio di regressione visiva, non solo di performance

Il punto critico non riguarda le prestazioni del sito. Il rischio reale è che il CSS che funziona correttamente in sviluppo smetta di essere consegnato in produzione, causando regressioni visive difficili da diagnosticare.

Il problema si manifesta in uno scenario preciso: una sezione definisce delle classi CSS all'interno del proprio {% stylesheet %}, ma quelle classi vengono applicate a elementi generati da file completamente separati, non collegati alla sezione tramite {% render %}.

In questo caso, se la sezione che "possiede" il foglio di stile non viene renderizzata su una determinata pagina, le regole CSS che contiene non raggiungeranno il browser. Il risultato è un layout rotto o elementi privi di stile, visibile solo in produzione e spesso solo su specifiche combinazioni di template e contenuto.

Quali temi sono a rischio

Non tutti i temi sono ugualmente esposti. I temi con architettura pulita e ben separata, in cui ogni file Liquid gestisce i propri stili in modo autonomo, non subiranno alcun impatto.

I temi a maggior rischio sono:

• Temi custom sviluppati nel tempo con logica CSS distribuita in modo non sistematico
• Fork di temi di terze parti modificati per aggiungere funzionalità senza rispettare la struttura originale
• Temi Shopify Plus con sezioni avanzate che condividono classi tra componenti non correlati
• Qualsiasi tema in cui le classi CSS di una sezione vengono riutilizzate in snippet o layout globali senza una dipendenza esplicita tramite {% render %}

Come auditare i tuoi temi prima del 20 aprile

L'audit deve essere condotto pagina per pagina, non solo sul codice sorgente in modo statico. Ecco i controlli da eseguire.

Verificare la coerenza degli stylesheet

Per ogni tag {% stylesheet %} nel tema, occorre rispondere a questa domanda: le classi definite in questo blocco vengono applicate esclusivamente a elementi generati dallo stesso file o dai suoi figli diretti via {% render %}?

Se la risposta è no, quella regola CSS è potenzialmente a rischio di non essere consegnata su alcune pagine.

Identificare le classi condivise tra file non correlati

Un audit efficace prevede di mappare tutte le classi CSS definite nei {% stylesheet %} e incrociarle con i file Liquid che le utilizzano. Qualsiasi classe presente in più file tra loro non collegati da una relazione {% render %} diretta rappresenta un punto critico.

Testare in staging, non in produzione

Il testing va eseguito in un ambiente di staging che rispecchi la configurazione di produzione, includendo:

• Tutte le tipologie di pagina: home, PDP, PLP, carrello, checkout, pagine CMS
• Varianti di template con contenuti diversi
• Sezioni attive e disattive nelle diverse pagine

Testare solo dopo il 20 aprile significa gestire un'emergenza live con clienti già impattati.

Priorità per chi gestisce più merchant

Chi gestisce portfolio di merchant su Shopify Plus deve considerare che ogni store potrebbe avere un tema con configurazione diversa. L'audit non può essere centralizzato su un unico tema: va replicato store per store, con attenzione alle personalizzazioni applicate nel tempo.

Se vuoi una stima dell'effort necessario per mettere in sicurezza i tuoi temi, consulta i nostri piani per sviluppatori Shopify per capire come strutturare il lavoro.

Cosa fare subito

Le azioni concrete da avviare oggi:

• Inventariare tutti i {% stylesheet %} presenti nei temi attivi
• Per ciascuno, verificare che stili solo elementi del proprio file o dei figli diretti
• Identificare qualsiasi classe condivisa tra file non correlati e refactorizzare
• Configurare un ambiente di staging aggiornato e testare tutte le tipologie di pagina
• Documentare le modifiche per evitare che il problema si ripresenti con sviluppi futuri

Una verifica tecnica condotta adesso richiede ore. La stessa verifica condotta dopo una regressione in produzione può richiedere giorni, con costi diretti per il merchant in termini di vendite perse e interventi urgenti.