Il segreto di un buon tema su misura è che, dopo la consegna, lo modifichi tu, senza chiamarmi per spostare un pulsante. I theme blocks di Shopify sono lo strumento che lo rende possibile, insieme a impostazioni scelte con criterio.
I theme blocks sono componenti riutilizzabili salvati nella cartella blocks del tema: un testo, un pulsante, una scheda. Le sezioni li accettano nello schema e li mostrano con il tag content_for; dall’editor il cliente li aggiunge, li riordina e li annida uno dentro l’altro, fino a otto livelli. Così il tema resta modificabile senza toccare il codice.
Ti spiego la differenza tra impostazioni, blocchi di sezione e theme blocks, quali impostazioni dare (e quali no), come scrivo un theme block, come uso blocchi statici e preset, e i limiti da tenere a mente.
Impostazioni, blocchi di sezione e theme blocks
In un tema Online Store 2.0 ci sono tre livelli di personalizzazione, ognuno con il suo scopo. Se il concetto di sezione ti è nuovo, parti dall’esempio su come creare una sezione personalizzata in Shopify.
- Impostazioni: i campi che il cliente compila nell’editor (un testo, un colore, un’immagine). Esistono a livello di tema, di sezione e di blocco.
- Blocchi di sezione: definiti dentro lo schema di una sezione e usabili solo lì. È il modello classico, quello di Dawn.
- Theme blocks: file a sé nella cartella
blocks, riutilizzabili in più sezioni e annidabili. È l’architettura dei temi della famiglia Horizon.
Una regola importante, dalla documentazione sui theme blocks: una sezione può definire blocchi propri oppure accettare theme blocks, non tutte e due le cose insieme. Gli app block (@app) invece si possono affiancare a entrambi.
Le impostazioni giuste (e quelle da non dare)
Shopify offre molti tipi di impostazione: quelli di base (text, textarea, checkbox, select, radio, range, number) e quelli specializzati, come image_picker, product, collection, color_scheme, richtext, url, metaobject. L’elenco completo è nella pagina sulle impostazioni di input.
Il rischio non è averne poche, ma troppe. Quaranta opzioni per sezione non rendono il tema flessibile: lo rendono difficile da usare e facile da rovinare graficamente. Le regole che seguo:
- do il contenuto, tengo lo stile: testi, immagini, link e prodotti si scelgono dall’editor; margini al pixel e dimensioni dei caratteri no, li decide il sistema grafico del tema;
- scelte chiuse invece di valori liberi: un
selectcon “piccolo, medio, grande” invece di unnumberin pixel. Con due-cinque opzioni l’editor le mostra come pulsanti affiancati; - schemi di colore, non colori sparsi: con
color_schemeil cliente sceglie tra combinazioni già accostate bene; - i dati del prodotto nei metafield: se un’informazione appartiene al prodotto (materiali, allergeni, misure) non la scrivo in una sezione, la metto in un metafield e la sezione la legge. Ne ho parlato nella guida a metafield e metaobject;
- etichette chiare in italiano:
labelbrevi e uninfodove serve una spiegazione.
Un editor ordinato non è un dettaglio. Un’interfaccia chiara fa lavorare meglio chi gestisce il negozio, così come una pagina chiara fa comprare di più, come racconto in UX e UI: perché il design influisce sulle conversioni.
Creare un theme block
Il file nella cartella blocks
Un theme block è un file Liquid nella cartella blocks: il nome del file diventa il tipo del blocco. Contiene il markup, facoltativamente lo stile in un tag {% stylesheet %}, e lo schema. Come esempio, un blocco per una testimonianza:
blocks/testimonianza.liquid
<figure class="testimonianza">
<blockquote>{{ block.settings.testo }}</blockquote>
<figcaption>{{ block.settings.autore }}</figcaption>
</figure>
{% schema %}
{
"name": "Testimonianza",
"settings": [
{ "type": "richtext", "id": "testo", "label": "Testo" },
{ "type": "text", "id": "autore", "label": "Autore" }
],
"presets": [{ "name": "Testimonianza" }]
}
{% endschema %}Lo schema del blocco
Lo schema di un theme block accetta name, settings, blocks, presets, tag e class. I dettagli che fanno la differenza:
- il
nameha un massimo di 25 caratteri; - se il blocco ha un’impostazione con id
heading,titleotext, l’editor usa il suo valore come titolo del blocco nella barra laterale: comodo per riconoscerli; - senza
presetsil blocco non compare nel menu “Aggiungi blocco”; - Shopify avvolge il blocco in un
<div>con gli attributi per l’editor; con"tag": nulllo togli, ma allora l’elemento principale deve avere{{ block.shopify_attributes }}; - con
"blocks": [{ "type": "@theme" }]il blocco accetta altri blocchi al suo interno, e li stampa con{% content_for 'blocks' %}.
I blocchi il cui file inizia con un trattino basso, come _slide.liquid, sono “privati”: non compaiono tra i blocchi generici e si usano solo nelle sezioni che li nominano. Li uso per i pezzi che hanno senso in un solo contesto, come le slide di uno slideshow.
Usarlo in una sezione con content_for
La sezione dichiara nello schema quali blocchi accetta e li stampa nel punto giusto con {% content_for 'blocks' %}. Ecco una sezione “testimonianze”:
sections/testimonianze.liquid
<div class="testimonianze">
<h2>{{ section.settings.titolo | escape }}</h2>
<div class="testimonianze__elenco">
{% content_for 'blocks' %}
</div>
</div>
{% schema %}
{
"name": "Testimonianze",
"settings": [
{ "type": "text", "id": "titolo", "label": "Titolo", "default": "Dicono di noi" }
],
"blocks": [{ "type": "testimonianza" }, { "type": "@app" }],
"presets": [
{
"name": "Testimonianze",
"blocks": [
{ "type": "testimonianza", "settings": { "autore": "Nome cliente" } }
]
}
]
}
{% endschema %}Qui la sezione accetta solo il blocco testimonianza, più gli app block: si chiama targeting. Con { "type": "@theme" } accetterebbe tutti i theme blocks pubblici del tema. Io preferisco essere preciso: meno scelte, meno errori.
Un dettaglio che spiazza chi arriva dagli snippet: i blocchi non ricevono variabili dalla sezione. Leggono le proprie impostazioni (block.settings), la sezione che li contiene (section) e gli oggetti globali.
Blocchi statici e preset
A volte un pezzo deve esserci sempre: il titolo di una riga a fisarmonica, l’icona di una scheda. Per questo esistono i blocchi statici, che la sezione stampa con content_for 'block' indicando tipo e id:
sections/riga-fisarmonica.liquid
<details class="riga">
<summary>
{% content_for 'block', type: 'titolo-riga', id: 'titolo' %}
</summary>
{% content_for 'blocks' %}
</details>Un blocco statico si può configurare e nascondere dall’editor, ma non si può spostare, duplicare o eliminare. A differenza dei blocchi dinamici può stare dentro un if o un ciclo, e non conta nel limite max_blocks. L’id lo scegli tu e deve essere unico tra i blocchi dello stesso contenitore. I dettagli sono nella documentazione del tag content_for.
I preset sono configurazioni pronte che il cliente sceglie dal menu “Aggiungi”: una sezione “Testimonianze” con tre blocchi già inseriti, una “Colonna” con titolo e testo. Ogni preset ha un name e può avere category per raggrupparlo, settings e blocks. Un blocco statico entra nel preset con lo stesso id usato nel Liquid e "static": true, per dargli valori iniziali diversi da quelli predefiniti.
I preset sono il modo migliore per insegnare il tema al cliente: invece di spiegargli come costruire una sezione da zero, gli do tre o quattro punti di partenza già belli.
Limiti e buone abitudini
I limiti principali, dalla pagina dei limiti dei temi (verificati a ottobre 2026):
- fino a 50 blocchi per sezione (puoi abbassare il numero con
max_blocks) e 1.250 per template; - annidamento dei theme blocks fino a 8 livelli sotto la sezione;
- al massimo 300 file nella cartella
blocks; namenello schema fino a 25 caratteri.
I blocchi aggiunti dal cliente, compresi gli app block, contano in questi limiti; i blocchi statici no. Le abitudini che mi evitano problemi:
- un blocco fa una cosa sola; per le combinazioni uso un blocco “gruppo” che ne contiene altri;
- annido al massimo due o tre livelli: oltre, l’editor diventa un labirinto per chi lo usa;
- ogni blocco ha il suo CSS nel tag
{% stylesheet %}, così lo stile viaggia con il blocco; - prima di consegnare uso l’editor come lo userebbe il cliente: aggiungo, sposto, cancello, e guardo cosa si rompe.
Un consiglio pratico: scrivi le etichette dell’editor pensando a chi non ha mai visto il codice. “Allineamento del testo” si capisce, “text_align_desktop” no.
Domande frequenti
Conclusione
Un tema modificabile non nasce per caso: nasce da impostazioni scelte con criterio, blocchi piccoli e riutilizzabili, preset che guidano il cliente. È lo stesso principio della struttura delle cartelle che ho descritto in creare un tema Shopify da zero: ordine all’inizio, libertà dopo.
Se vuoi un tema costruito così, trovi come lavoro nella pagina realizzazione e migrazione Shopify.
Vuoi un tema che modifichi da solo senza paura di romperlo? Parliamone: ti rispondo io.
