Il tuo tema ha tante sezioni, ma manca proprio quella che ti serve. Capita spesso: una lista di domande frequenti, una tabella, un blocco di testo con un’impaginazione particolare. La soluzione è una sezione personalizzata Shopify, scritta una volta e poi gestita dall’editor come tutte le altre.
In breve: per creare una sezione personalizzata crei un file .liquid nella cartella sections/ del tema, scrivi l’HTML con Liquid e in fondo aggiungi lo {% schema %}, un JSON che dice all’editor nome, impostazioni, blocchi e preset. Con il preset la sezione compare in “Aggiungi sezione” e la usi come quelle del tema.
In questo articolo costruiamo insieme una sezione completa, con il codice spiegato riga per riga. Se Liquid è nuovo per te, tieni aperta la mia guida pratica a Liquid: qui do per scontati oggetti, tag e filtri.
Cosa costruiamo
Una sezione “FAQ semplice”: un titolo, e sotto un elenco di domande che si aprono con un clic per mostrare la risposta. Il titolare può:
- cambiare il titolo dall’editor del tema;
- aggiungere, togliere e riordinare le domande, fino a 20;
- scrivere le risposte con grassetto, link ed elenchi;
- inserirla nella home, nelle pagine, nei prodotti e nelle collezioni.
Il codice usa solo funzioni standard dei temi Online Store 2.0, quelli con i template in formato JSON: non dipende da classi o file di un tema in particolare, quindi lo puoi usare su Dawn, su Horizon o su un tema a pagamento recente. Se il tuo tema è più vecchio, le sezioni funzionano solo in parte: in quel caso leggi prima come passare a un tema Online Store 2.0.
Perché una sezione scritta a mano e non un’app per le FAQ? Perché è HTML semplice, senza script esterni da caricare, e resta nel tema anche se un giorno cambi app o abbonamenti. In più la imposti una volta e poi la gestisce il titolare dall’editor, senza toccare il codice.
Creare il file della sezione
Prima di tutto, duplica il tema: da Negozio online > Temi, menu con i tre puntini, Duplica. Lavori sulla copia e il negozio resta intatto finché non decidi di pubblicare.
- sulla copia, apri il menu con i tre puntini e scegli Modifica codice;
- nella colonna a sinistra trova la cartella
sectionse clicca su “Aggiungi una nuova sezione”; - chiamala
faq-semplice(lettere minuscole e trattini, senza spazi): Shopify crea il filesections/faq-semplice.liquid; - il file nuovo contiene un modello di partenza: cancellalo tutto e incolla il codice che trovi qui sotto.
Il nome del file conta: è l’identificativo della sezione nei template JSON. Se lo cambi dopo averla usata, le pagine che la contengono non la troveranno più.
Il markup Liquid
La prima parte del file è l’HTML della sezione, con Liquid per i contenuti. Eccola completa:
sections/faq-semplice.liquid (parte 1: markup)
<div class="faq-semplice">
{%- if section.settings.titolo != blank -%}
<h2 class="faq-semplice__titolo">{{ section.settings.titolo | escape }}</h2>
{%- endif -%}
{%- for block in section.blocks -%}
<details class="faq-semplice__voce" {{ block.shopify_attributes }}>
<summary>{{ block.settings.heading | escape }}</summary>
<div class="faq-semplice__risposta">{{ block.settings.risposta }}</div>
</details>
{%- endfor -%}
</div>Titolo dalle impostazioni
section.settings.titolo legge il valore che il titolare scrive nell’editor, nel campo che definiremo nello schema con l’id titolo. Il controllo != blank evita di stampare un <h2> vuoto se il campo viene cancellato. Il filtro escape rende sicuro il testo dentro l’HTML.
I blocchi domanda-risposta
section.blocks è l’elenco dei blocchi aggiunti dal titolare, nell’ordine scelto nell’editor. Per ogni blocco stampo un elemento <details>: il <summary> è la domanda, sempre visibile; il resto è la risposta, che si apre al clic.
La risposta non passa da escape: è un campo di testo formattato e contiene già HTML pulito generato da Shopify (paragrafi, grassetto, link). Se lo “scappassi”, vedresti i tag scritti nella pagina.
block.shopify_attributes: perché serve
{{ block.shopify_attributes }} aggiunge al contenitore del blocco alcuni attributi data- che usa l’editor del tema. Grazie a quelli, quando clicchi su una domanda nell’anteprima, l’editor seleziona il blocco giusto nella colonna a sinistra, e viceversa. Fuori dall’editor non stampa niente, come spiega la documentazione dell’oggetto block. Va messo sull’elemento più esterno del blocco.
Lo schema, riga per riga
In fondo allo stesso file va lo {% schema %}. È JSON puro, senza Liquid dentro, e descrive la sezione all’editor. Ogni attributo è documentato nella pagina sullo schema delle sezioni.
sections/faq-semplice.liquid (parte 3: schema)
{% schema %}
{
"name": "FAQ semplice",
"tag": "section",
"class": "section-faq-semplice",
"settings": [
{
"type": "text",
"id": "titolo",
"label": "Titolo",
"default": "Domande frequenti"
}
],
"blocks": [
{
"type": "domanda",
"name": "Domanda",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Domanda",
"default": "Scrivi la domanda"
},
{
"type": "richtext",
"id": "risposta",
"label": "Risposta",
"default": "<p>Scrivi la risposta.</p>"
}
]
}
],
"max_blocks": 20,
"presets": [
{
"name": "FAQ semplice",
"blocks": [{ "type": "domanda" }, { "type": "domanda" }, { "type": "domanda" }]
}
],
"enabled_on": {
"templates": ["index", "page", "product", "collection"]
}
}
{% endschema %}name è il nome che vedi nell’editor. tag sceglie l’elemento HTML che avvolge la sezione (qui <section> invece del <div> predefinito) e class aggiunge una classe a quell’involucro.
settings
Le impostazioni della sezione. Ognuna ha bisogno di tre attributi: type (il tipo di campo), id (il nome con cui la leggi in Liquid) e label (l’etichetta nell’editor). default è facoltativo e riempie il campo quando la sezione viene aggiunta. I tipi disponibili sono nella pagina delle impostazioni di input.
blocks e max_blocks
Ogni tipo di blocco ha un type, cioè il suo identificativo, e un name per l’editor. Le domande hanno due campi: text per la domanda e richtext per la risposta. Il valore predefinito di un richtext deve essere racchiuso in <p> o <ul>, altrimenti Shopify dà errore.
Perché l’id della domanda è heading e non domanda? Perché l’editor, per dare un nome ai blocchi nella colonna di sinistra, cerca prima un campo con id heading, poi title, poi text. Così vedi l’elenco delle domande vere, invece di “Domanda, Domanda, Domanda”.
max_blocks limita il numero di blocchi. Il massimo di Shopify è 50 per sezione: io ne metto 20, perché una pagina con più domande diventa difficile da leggere. Questi blocchi vivono solo dentro la sezione: se ti servono componenti da riusare in più sezioni, nei temi recenti ci sono i theme blocks.
presets ed enabled_on
presets è quello che rende la sezione disponibile in “Aggiungi sezione”. Senza preset, la sezione si può inserire solo scrivendo a mano nel template JSON. Il mio preset parte con tre domande di esempio, così il titolare vede subito come funziona.
enabled_on dice dove la sezione può essere aggiunta: qui home (index), pagine, prodotti e collezioni. Esiste anche il contrario, disabled_on, ma non puoi usarli tutti e due nella stessa sezione.
Attenzione: lo schema deve essere JSON valido. Una virgola in più dopo l’ultimo elemento, una virgoletta dimenticata o un id ripetuto, e Shopify non salva il file. Se l’editor del codice ti dà un errore sullo schema, il problema è quasi sempre lì.
Stile e accessibilità
Lo stile della sezione va nel tag {% stylesheet %}, tra il markup e lo schema. Shopify raccoglie il CSS di tutte le sezioni e lo carica una volta sola, anche se la sezione compare più volte nella pagina.
sections/faq-semplice.liquid (parte 2: stile)
{% stylesheet %}
.faq-semplice { max-width: 48rem; margin: 0 auto; padding: 2rem 1.5rem; }
.faq-semplice__voce { border-bottom: 1px solid currentColor; }
.faq-semplice__voce summary { cursor: pointer; padding: 1rem 0; font-weight: 600; }
.faq-semplice__voce summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.faq-semplice__risposta { padding-bottom: 1rem; }
{% endstylesheet %}Due regole del tag, dalla documentazione di stylesheet: dentro non puoi usare Liquid, e ogni file può averne uno solo. Ho usato currentColor per bordi e contorno, così la sezione prende il colore del testo del tema, anche sugli sfondi scuri.
Sull’accessibilità, <details> e <summary> fanno quasi tutto da soli: si aprono con il mouse, con il tasto Invio e con la barra spaziatrice, e i lettori di schermo annunciano se la risposta è aperta o chiusa. Non serve JavaScript. Ho aggiunto solo un contorno ben visibile quando la domanda riceve il focus da tastiera.
Il titolo è un <h2>, perché nella pagina l’<h1> c’è già. Domande chiare e spazi generosi non sono un dettaglio estetico: è quello che spiego parlando di come il design del sito influisce sulle conversioni.
Aggiungerla alla pagina dall’editor
Salva il file e torna ai temi. Sulla copia del tema clicca Personalizza, poi:
- in alto scegli la pagina su cui lavorare (per esempio un prodotto, o una pagina come “Spedizioni e resi”);
- nella colonna di sinistra clicca Aggiungi sezione e cerca “FAQ semplice”;
- scrivi titolo, domande e risposte; trascina le domande per cambiarne l’ordine;
- salva, controlla l’anteprima su computer e telefono, e pubblica la copia del tema quando sei convinto.
Ogni volta che aggiungi la sezione hai una copia indipendente, con i suoi contenuti: puoi avere FAQ diverse sulla pagina delle spedizioni e su un prodotto. Se le stesse domande devono comparire su molti prodotti, conviene un template prodotto dedicato con la sezione già dentro.
Domande frequenti
Conclusione
Una sezione personalizzata è un file con tre parti: markup Liquid, stile e schema. Una volta capito lo schema, puoi costruire qualsiasi sezione: testimonianze, tabelle, loghi, confronti tra prodotti.
Se il tema ti sta stretto in più punti, una sezione alla volta può non bastare: è il lavoro che faccio nella realizzazione e migrazione di negozi Shopify. Per piccole aggiunte e correzioni nel tempo c’è l’assistenza e manutenzione del negozio online.
Ti serve una sezione su misura e non vuoi rischiare? Scrivimi: la preparo io, pronta da usare dall’editor. Ti rispondo io.
