Ti hanno chiesto di incollare un codice “nell’head del sito”, oppure vuoi solo spostare una scritta nella pagina prodotto. Apri l’editor del codice, vedi decine di cartelle e file, e ti viene il dubbio: se tocco qualcosa, si rompe tutto? È la paura più comune quando si deve modificare il codice Shopify per la prima volta.
In breve: per modificare il codice del tema Shopify duplichi il tema da Negozio online > Temi e, sulla copia, scegli Modifica codice. Ogni cartella ha un ruolo: layout per la cornice, sections per i blocchi di pagina, snippets per i pezzi riutilizzabili, assets per CSS e JavaScript, locales per i testi. Lavori sulla copia, controlli l’anteprima e pubblichi.
In questo articolo ti do la mappa che uso io: per ogni modifica, quale file aprire. E soprattutto quando il codice è la strada sbagliata, perché spesso lo è.
Prima regola: duplica il tema
Ogni modifica parte da una copia. Lo consiglia anche la guida di Shopify sulla modifica del codice, ed è la regola che seguo su ogni negozio, anche per una riga sola.
- nell’admin vai in Negozio online;
- accanto al tema pubblicato apri il menu con i tre puntini e scegli Duplica: compare “Copia di…” nella libreria dei temi;
- sulla copia, dallo stesso menu, scegli Modifica codice;
- fai la modifica, salva e guarda l’anteprima della copia su computer e telefono;
- quando è tutto a posto, pubblica la copia.
La libreria tiene fino a 20 temi, come indica la pagina sulla duplicazione dei temi: ogni tanto elimina le copie vecchie. Il tema pubblicato precedente lo tengo sempre per qualche settimana: se qualcosa non va, ripubblicarlo richiede un clic.
C’è anche una seconda rete di sicurezza: ogni file ha una cronologia delle versioni nell’editor del codice. Ti permette di tornare a una versione precedente di quel file, ma non recupera i file eliminati e non conserva le versioni all’infinito. Per questo la copia del tema resta la regola numero uno. Sui progetti più grandi, invece, tengo tutto il tema su GitHub e lavoro in locale: lo spiego nella guida a Shopify CLI e GitHub per il tema.
Voglio fare questo: quale file apro?
La struttura del tema è descritta nella documentazione sull’architettura dei temi. Ma nella pratica la domanda è un’altra: voglio fare X, dove metto le mani? Ecco la mappa.
Cambiare un testo
Prima di aprire il codice, prova l’editor del tema (Personalizza): titoli, testi dei banner e pulsanti delle sezioni sono quasi sempre impostazioni modificabili da lì.
I testi “fissi” del tema, come “Aggiungi al carrello” o “Esaurito”, stanno nei file di traduzione della cartella locales/. Non serve aprirli: dal menu del tema c’è Modifica contenuto predefinito del tema, con una ricerca per frase. Per le altre lingue del negozio si usa l’app Translate & Adapt di Shopify.
Cambiare uno stile
Colori, caratteri e spaziature principali sono nelle Impostazioni del tema, sempre dentro l’editor. Per piccole correzioni molti temi recenti hanno anche un campo CSS personalizzato, sia generale sia per la singola sezione. Ha dei limiti di lunghezza, ma per una regola o due è il posto più sicuro.
Le modifiche più ampie vanno nei file CSS della cartella assets/, oppure nel tag {% stylesheet %} della sezione che stai personalizzando. Il consiglio è uno: aggiungi le tue regole in un punto solo e commentale, così fra sei mesi sai cosa hai cambiato.
Aggiungere un codice di verifica o un pixel
Qui si fanno più danni, quindi distinguo bene due casi. Un codice di verifica (per esempio quello di Google Search Console) è un tag <meta> che non raccoglie dati: va in layout/theme.liquid, dentro l’<head>, prima di {{ content_for_header }}.
layout/theme.liquid (estratto)
<meta name="google-site-verification" content="IL_TUO_CODICE">
{{ content_for_header }}
</head>Un pixel di tracciamento (Google Analytics, Google Ads, Meta, TikTok) è un’altra cosa: raccoglie dati dei visitatori e deve rispettare il loro consenso. Non lo incollo mai in theme.liquid. Le strade giuste sono le app ufficiali dei canali di vendita (Google & YouTube, Facebook & Instagram) oppure un pixel personalizzato in Impostazioni > Eventi dei clienti, che gira in un ambiente isolato e segue le impostazioni sulla privacy del negozio.
Come collegare il consenso a Google lo spiego in Consent Mode v2 su Shopify; per la configurazione di Analytics e Tag Manager c’è la guida su come configurare Google Analytics 4 e Tag Manager.
Modificare la pagina prodotto
Prima di tutto guarda cosa puoi fare dall’editor: nei temi Online Store 2.0 la pagina prodotto è fatta di blocchi che aggiungi, togli e riordini. Se serve davvero il codice, apri templates/product.json e cerca la sezione principale: il valore di "type" ti dice quale file aprire. In Dawn è sections/main-product.liquid, in Horizon sections/product-information.liquid, con i blocchi nella cartella blocks/.
Leggere un file Liquid senza perdersi
Un file di sezione può essere lungo centinaia di righe. Non serve leggerlo tutto: serve sapere dove guardare. Ecco una versione semplificata di come è organizzata la sezione prodotto di Dawn:
sections/main-product.liquid (semplificato)
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'title' -%}
<h1>{{ product.title | escape }}</h1>
{%- when 'price' -%}
{% render 'price', product: product, use_variant: true %}
{%- endcase -%}
{%- endfor -%}Ogni blocco che vedi nell’editor corrisponde a un ramo when: se vuoi cambiare il prezzo, cerchi when 'price'. Lì trovi {% render 'price' %}, che vuol dire “il codice vero è nel file snippets/price.liquid”. Tre indizi ti portano quasi sempre al file giusto:
{% render 'nome' %}rimanda asnippets/nome.liquid;{{ 'nome.css' | asset_url | stylesheet_tag }}rimanda aassets/nome.css;{{ 'products.product.add_to_cart' | t }}è un testo dei file inlocales/.
Nell’editor del codice c’è anche una ricerca tra i file: cercare una parola che vedi nella pagina, o la classe CSS di un elemento, è il modo più veloce per trovare il punto. Se vuoi capire meglio la sintassi, ho scritto una guida pratica a Liquid per chi parte da zero.
Gli errori che vedo più spesso
Quando un titolare mi chiede aiuto per un tema “che non va più”, la causa è quasi sempre in questo elenco.
- Liquid non chiuso: un
{% if %}senza{% endif %}. L’editor segnala l’errore di sintassi con il numero di riga: leggilo prima di salvare di nuovo. - JSON non valido: una virgola di troppo nello
{% schema %}di una sezione o in un template JSON, e il file non si salva o la sezione sparisce dall’editor. - Codice incollato nel posto sbagliato: uno script finito dentro lo schema, dentro un tag Liquid o in fondo alla pagina invece che nell’
<head>. - Pixel inseriti a mano senza consenso: partono prima che il visitatore scelga nel banner dei cookie. È un problema di privacy, non solo tecnico.
- Residui di app disinstallate: snippet rimasti in
theme.liquidche caricano file che non esistono più e rallentano le pagine. - Modifiche fatte sul tema pubblicato: l’errore lo vedono subito i clienti.
Quando fermarsi e chiedere aiuto
Il codice del tema si impara, e molte modifiche piccole le puoi fare da solo con calma. Ci sono però dei segnali che ti dicono di fermarti:
- la modifica tocca il carrello, i prezzi o il pagamento;
- devi cambiare più file collegati tra loro e non sai bene in che ordine;
- stai incollando codice che raccoglie dati dei clienti e non sai come si comporta con il consenso;
- dopo una modifica il negozio è più lento o qualcosa smette di funzionare, e non sai perché.
Sappi anche che il supporto di Shopify non scrive codice personalizzato e non interviene sui temi con modifiche importanti, come spiega la sua pagina sull’assistenza per i temi. Per questo, su un negozio che vende, conviene avere qualcuno che conosce il tema: è quello che faccio con l’assistenza e manutenzione del negozio online. Se vuoi capire quanto pesa una manutenzione nel budget, leggi quanto costa la manutenzione di un sito web.
La mia abitudine: ogni modifica al codice la segno in un file di testo, con data, file toccato e motivo. Quando il tema va aggiornato, so esattamente cosa riportare sulla versione nuova.
Domande frequenti
Conclusione
Modificare il codice del tema non è pericoloso se segui tre regole: lavori su una copia, apri il file giusto per quello che vuoi fare, e non usi il codice quando l’editor o un’app ufficiale fanno già il lavoro. Per modifiche più grandi, come nuove sezioni o un tema su misura, c’è la realizzazione e migrazione Shopify.
Devi modificare il tema ma non vuoi rischiare? Mandami cosa ti serve: lo faccio io su una copia, e pubblichiamo solo quando è tutto a posto. Ti rispondo io.
