---
title: "Theme app extension: app block e app embed spiegati semplice"
seo_title: "Theme app extension Shopify: app block e app embed"
description: "Cosa sono le theme app extension di Shopify: app block e app embed, come si attivano dall'editor, come si sviluppano e perché non lasciano codice nel tema."
url: "https://salvatorepitone.it/theme-app-extension-shopify/"
type: "BlogPosting"
language: "it-IT"
published: "2026-10-26T17:23:56+01:00"
updated: "2026-10-26T19:03:56+01:00"
author: "Salvatore Pitone"
categories:
  - "Shopify"
tags:
  - "Shopify"
  - "theme app extension"
image: "https://salvatorepitone.it/wp-content/uploads/2026/10/theme-app-extension-shopify-copertina.webp"
---

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](https://help.shopify.com/it/manual/apps/uninstalling-apps) 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](https://salvatorepitone.it/aggiornare-tema-shopify-online-store-2-0/): gli app block richiedono template JSON e sezioni che li accettino.

## App block e app embed: differenze

![Differenze tra app block e app embed nelle theme app extension di Shopify: posizione, attivazione e target](https://salvatorepitone.it/wp-content/uploads/2026/10/theme-app-extension-shopify-block-embed.webp)

_App block e app embed: dove compaiono e come si attivano._

Una theme app extension può contenere due tipi di blocchi, descritti nella [documentazione di configurazione](https://shopify.dev/docs/apps/build/online-store/theme-app-extensions/configuration):

|  | 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](https://salvatorepitone.it/cookie-banner-shopify-gdpr/).

## 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](https://help.shopify.com/it/manual/online-store/themes/theme-structure/extend/apps):

1. **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.
2. **App embed**: clicca l’icona **App embed** nella barra laterale, attiva l’interruttore dell’app e, se serve, apri le sue impostazioni.
3. **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](https://salvatorepitone.it/app-shopify-personalizzata/).

### Generare l’estensione

Si lavora dalla cartella dell’app con [Shopify CLI](https://shopify.dev/docs/apps/build/online-store/theme-app-extensions/build):

`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 deploy
```

La 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):

![Codice di un app block con lo schema di una theme app extension Shopify: target, template e impostazioni](https://salvatorepitone.it/wp-content/uploads/2026/10/theme-app-extension-shopify-schema.webp)

_Un app block con il suo schema: il target content lo rende un blocco da inserire nelle sezioni._

`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](https://salvatorepitone.it/velocizzare-negozio-shopify/); i principi generali sono quelli che descrivo in [come velocizzare un sito web in 5 step](https://salvatorepitone.it/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:

1. **copia del tema**: duplico il tema e lavoro sulla copia;
2. **elenco delle app**: confronto le app installate con quelle che hanno lasciato tracce (nomi negli snippet, script esterni, commenti);
3. **ricerca nel codice**: cerco in `layout/theme.liquid`, negli `snippets` e nei template i riferimenti alle app rimosse, come `render` di snippet o script caricati da domini esterni;
4. **rimozione e prova**: tolgo un pezzo alla volta e verifico in anteprima che nulla si rompa, compresi carrello e pagina prodotto;
5. **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

### Perché dopo aver disinstallato un’app il sito è ancora lento?

Probabilmente perché il codice che l’app aveva aggiunto al tema è ancora lì: script e stili che continuano a caricarsi anche se l’app non c’è più. Succede con le app che modificavano direttamente i file del tema. La soluzione è trovare e togliere quei residui su una copia del tema, poi misurare di nuovo la velocità.

### Un app embed funziona con tutti i temi?

Sì: secondo la documentazione di Shopify gli app embed funzionano sia nei temi vintage sia in quelli Online Store 2.0, perché si caricano nel head o nel body della pagina, che ogni tema ha. Gli app block invece richiedono template JSON e sezioni che accettino blocchi di tipo @app.

### Posso spostare un app block nella pagina?

Sì, è proprio il loro vantaggio. Dall’editor del tema lo trascini in un’altra posizione della sezione, oppure lo aggiungi come sezione a sé, e ne cambi le impostazioni. Lo sviluppatore dell’app può però limitarlo ad alcuni template, per esempio solo alla pagina prodotto, con l’opzione enabled\_on.

### Un app embed può caricare script prima del consenso cookie?

Tecnicamente sì: un app embed carica il suo JavaScript come qualsiasi altro script, e sta all’app rispettare le scelte del visitatore, per esempio con la Customer Privacy API di Shopify. Per questo, prima di attivare app di tracciamento, verifico come gestiscono il consenso. Ti spiego la parte tecnica: per le scelte sui dati confrontati con il tuo consulente privacy.

## 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](https://salvatorepitone.it/realizzazione-e-migrazione-shopify/). Per la pulizia e il mantenimento nel tempo c’è l’[assistenza e manutenzione del negozio online](https://salvatorepitone.it/assistenza-e-manutenzione-negozio-online/).

Il tuo tema è pieno di codice di app che non usi più? [**Scrivimi**](https://salvatorepitone.it/contatti/): faccio io la pulizia, e ti rispondo io.