Hai disinstallato un’app mesi fa, ma nel codice del tema trovi ancora i suoi script? Oppure stai sviluppando un’app che deve mostrare qualcosa nel negozio? In entrambi i casi la risposta passa dalle theme app extension.
Una theme app extension è il modo in cui un’app aggiunge elementi a un tema Shopify senza modificarne i file. Gli app block si inseriscono nelle sezioni dall’editor; gli app embed si attivano con un interruttore e caricano codice nel head o nel body. Il codice resta nell’app, non nel tema, e il negozio non deve toccare Liquid.
Vediamo il problema del codice incollato, le differenze tra app block e app embed, come si attivano, come ne sviluppo uno e come pulisco un tema dai resti delle vecchie app.
Il problema del codice incollato nel tema
Prima di Online Store 2.0 molte app si integravano così: ti chiedevano (o facevano in automatico) di incollare uno snippet in theme.liquid, nel template prodotto o nel carrello. Funzionava, ma lasciava il codice dell’app mescolato a quello del tema.
Il guaio arriva quando l’app non serve più. Il Centro assistenza di Shopify lo scrive chiaramente: alcune app aggiungono al tema codice che non viene rimosso in automatico quando le disinstalli. Risultato: script che chiamano un servizio che non esiste più, errori nella console, richieste inutili che rallentano le pagine.
Se il tuo tema è ancora vintage, questo è uno dei motivi per fare il passaggio a Online Store 2.0: gli app block richiedono template JSON e sezioni che li accettino.
App block e app embed: differenze
Una theme app extension può contenere due tipi di blocchi, descritti nella documentazione di configurazione:
| App block | App embed | |
|---|---|---|
| Dove compare | Dentro una sezione, o come sezione a sé, nel punto che scegli | Nel <head> o in fondo al <body> |
| Esempi tipici | Stelle delle recensioni, tabella taglie, badge sotto il prezzo | Chat, pop-up, script di tracciamento, banner dei cookie |
| Come si attiva | Aggiungi blocco > App, nell’editor | Interruttore nel pannello App embed dell’editor |
| Target nello schema | content (prima si usava section) | head, compliance_head o body |
| Temi compatibili | Online Store 2.0, con sezioni che accettano @app | Anche i temi vintage |
Il target compliance_head merita una nota: si carica per primo ed è pensato per casi come i banner di consenso ai cookie. Ne parlo anche nella guida al cookie banner su Shopify a norma del Garante.
Come si attivano dall’editor del tema
Dal punto di vista di chi gestisce il negozio tutto avviene nell’editor (Negozio online > Temi > Personalizza), come spiega la guida di Shopify sulle app nel tema:
- App block: apri la pagina, scegli la sezione, clicca Aggiungi blocco e nella parte App scegli il blocco. Poi lo trascini dove vuoi e lo configuri.
- App embed: clicca l’icona App embed nella barra laterale, attiva l’interruttore dell’app e, se serve, apri le sue impostazioni.
- Salva e controlla l’anteprima.
Le app fatte bene ti portano direttamente al punto giusto con un link: l’editor si apre con l’embed pronto da attivare, o con il blocco da aggiungere nella sezione principale. Sono i “deep link” previsti da Shopify, con parametri come activateAppId e addAppBlockId.
Se vendi in più paesi, gli app embed si possono impostare anche per mercato: scegli il mercato nell’editor prima di cambiarli.
Svilupparne uno
Quando un’app deve mostrare qualcosa nel negozio, la theme app extension è la strada giusta. Se stai ancora valutando se ti serva un’app tutta tua, ne parlo nell’articolo sull’app Shopify personalizzata.
Generare l’estensione
Si lavora dalla cartella dell’app con Shopify CLI:
terminale
# crea l'estensione: scegli "Theme app extension" e dai un nome
shopify app generate extension
# anteprima sul negozio di sviluppo, con ricarica automatica
shopify app dev
# pubblica una nuova versione dell'app con l'estensione
shopify app deployLa CLI crea la cartella extensions/<nome>/ con blocks (app block ed embed), snippets, assets (CSS, JavaScript, immagini), locales e il file di configurazione shopify.extension.toml.
Due note sull’anteprima: se non indichi un tema con --theme, shopify app dev usa Dawn come tema di prova, e la documentazione indica che l’anteprima funziona solo in Google Chrome.
Lo schema del blocco
Ogni file in blocks è un blocco con il suo schema. Questo app block mostra le stelle della valutazione media, letta da un metafield del prodotto (lo stesso demo.avg_rating che usa l’esempio generato da Shopify):
extensions/stelle/blocks/stelle.liquid
{%- assign voto = block.settings.product.metafields.demo.avg_rating.value -%}
<div class="stelle" role="img" aria-label="{{ voto | default: 0 }} su 5">
{%- for i in (1..5) -%}
<span class="stella{% if i <= voto %} piena{% endif %}"></span>
{%- endfor -%}
</div>
{% schema %}
{
"name": "Stelle recensioni",
"target": "content",
"enabled_on": { "templates": ["product"] },
"stylesheet": "stelle.css",
"settings": [
{ "type": "product", "id": "product", "label": "Prodotto", "autofill": true }
]
}
{% endschema %}Il punto chiave è "target": "content", che lo rende un app block: section è il valore storico, ancora accettato e con lo stesso effetto. Con enabled_on lo limito alla pagina prodotto, e l’impostazione product con autofill usa in automatico il prodotto mostrato dalla sezione. Per un app embed basta "target": "body" o "head".
Asset e prestazioni
CSS e JavaScript si dichiarano nello schema con stylesheet e javascript. Shopify li carica solo nelle pagine in cui il blocco è presente, una volta sola anche se i blocchi sono più di uno, e li serve dalla sua CDN.
I limiti, verificati a ottobre 2026: 10 MB per tutti i file dell’estensione, 100 KB di Liquid in totale, massimo 30 blocchi. Shopify suggerisce anche di restare sotto i 10 KB di JavaScript e i 100 KB di CSS compressi. Sono numeri bassi apposta: un’app non dovrebbe pesare sul negozio.
Se il negozio è già lento, il punto di partenza è la guida per velocizzare il negozio Shopify; i principi generali sono quelli che descrivo in come velocizzare un sito web in 5 step.
Pulire il tema dalle app disinstallate
Il codice di app block e app embed sta nell’app, non nei file del tema: quando la disinstalli, i suoi blocchi smettono di essere mostrati e non lasciano righe da cancellare a mano. Il codice incollato nel tema dalle vecchie app, invece, resta. Ecco come lo tolgo:
- copia del tema: duplico il tema e lavoro sulla copia;
- elenco delle app: confronto le app installate con quelle che hanno lasciato tracce (nomi negli snippet, script esterni, commenti);
- ricerca nel codice: cerco in
layout/theme.liquid, neglisnippetse nei template i riferimenti alle app rimosse, comerenderdi snippet o script caricati da domini esterni; - rimozione e prova: tolgo un pezzo alla volta e verifico in anteprima che nulla si rompa, compresi carrello e pagina prodotto;
- misura: confronto velocità e richieste di rete prima e dopo.
Prima di disinstallare un’app che ha modificato il tema, controlla la sua documentazione o chiedi allo sviluppatore se esiste una procedura di rimozione: è anche il consiglio del Centro assistenza di Shopify, e ti risparmia la caccia ai residui.
Domande frequenti
Conclusione
Le theme app extension hanno risolto un problema vecchio: le app non sporcano più il tema, si attivano e si spostano dall’editor e caricano solo ciò che serve. Il lavoro che resta riguarda i negozi che si portano dietro anni di codice incollato.
Se ti serve un’app con la sua estensione per il tema, trovi come lavoro in realizzazione e migrazione Shopify. Per la pulizia e il mantenimento nel tempo c’è l’assistenza e manutenzione del negozio online.
Il tuo tema è pieno di codice di app che non usi più? Scrivimi: faccio io la pulizia, e ti rispondo io.
