Se arrivi da WordPress, o se stai valutando un tema su misura e vuoi capire cosa stai pagando, la domanda è la stessa: come si fa a creare un tema Shopify da zero? Quali cartelle servono, quali file sono obbligatori, da dove si parte?
Un tema Shopify è una cartella con una struttura fissa: layout, templates, sections, blocks, snippets, assets, locales e config. L’unico file obbligatorio è layout/theme.liquid; poi servono un template per ogni tipo di pagina, le sezioni che li compongono e le impostazioni del tema. Si sviluppa in locale con Shopify CLI.
Ti mostro la mappa delle cartelle con il perché di ognuna, i primi file che scrivo, i limiti da conoscere e come provare il tema senza toccare il negozio. Se Liquid ti è nuovo, tieni a portata di mano la mia guida pratica a Liquid.
Com’è fatto un tema Shopify
La struttura è descritta nella documentazione sull’architettura dei temi. Shopify accetta solo queste cartelle: sottocartelle diverse non sono supportate.
layout
Contiene la cornice delle pagine: <head>, intestazione, piè di pagina. Il file theme.liquid è l’unico richiesto per caricare il tema. Puoi avere layout alternativi, per esempio per la pagina con password, e sceglierli dal template.
templates (JSON e Liquid)
Un template per ogni tipo di pagina: index (la home), product, collection, page, article, blog, cart, search, 404 e così via. Nei temi Online Store 2.0 sono file JSON: un elenco di sezioni con impostazioni e ordine, che l’editor riscrive quando il cliente sposta qualcosa.
Un template esiste in JSON oppure in Liquid, mai in tutte e due le versioni. Alcuni restano in Liquid anche nei temi ufficiali di Shopify, come gift_card.liquid. Puoi creare template alternativi, come product.regalo.json, da assegnare solo ad alcuni prodotti.
sections e section groups
Le sezioni sono i moduli della pagina: file .liquid con markup, stile e uno {% schema %} che dichiara impostazioni e blocchi. Nella stessa cartella stanno i section groups, file JSON che raccolgono le sezioni di intestazione e piè di pagina, così il cliente le modifica dall’editor come le altre.
blocks e snippets
Nella cartella blocks stanno i theme blocks: componenti riutilizzabili (un pulsante, una scheda, un gruppo) che si inseriscono nelle sezioni e anche uno dentro l’altro. Gli snippets sono frammenti di codice richiamati con {% render %}: utili per non ripetersi, ma invisibili nell’editor.
assets, locales e config
In assets vanno CSS, JavaScript, immagini e font del tema. In locales le traduzioni: en.default.json per i testi del negozio, en.default.schema.json per le etichette dell’editor, più un file per ogni lingua, come it.json.
In config ci sono settings_schema.json, che definisce le impostazioni generali del tema, e settings_data.json, dove Shopify salva i valori scelti dal cliente.
Organizzare bene le cartelle è come progettare la struttura di un sito: se lo fai all’inizio, tutto il resto viene più facile. Ne ho parlato in come progettare la struttura di un sito web.
Da dove partire: theme init, Skeleton o Horizon
Partire letteralmente da una cartella vuota è possibile, ma di rado utile. Le basi ufficiali sono tre, e vanno scelte con informazioni aggiornate:
shopify theme init: il comando di Shopify CLI che crea un nuovo tema copiando lo Skeleton theme di Shopify, oppure un altro repository Git indicato con--clone-url;- Skeleton theme: un tema minimo, open source con licenza MIT. Attenzione: la versione attuale è “block-first”, cioè senza cartella
sectionse senza template JSON, con le pagine composte dal nuovo tag{% block %}. Questo modello è in developer preview da luglio 2026, come spiega l’annuncio di Shopify; - Horizon: il tema di punta di Shopify, con sezioni, template JSON e theme blocks. Il repository di Horizon permette di clonarlo come base, ma avverte di non usarlo come partenza per un tema da pubblicare sul Theme Store.
Come scelgo io? Per il tema di un negozio vero, oggi, lavoro sull’architettura stabile: template JSON, sezioni e theme blocks. Le funzioni in anteprima le provo su un negozio di sviluppo, non sul negozio di un cliente. Se serve un punto di partenza ricco, Horizon fa risparmiare molto lavoro; se serve un tema leggero e tutto mio, parto dai file minimi che ti mostro qui sotto.
Le basi cambiano spesso. Prima di iniziare un progetto controllo sempre il README del repository e il changelog per sviluppatori di Shopify. Quello che leggi qui è verificato a ottobre 2026.
I primi file, uno per uno
theme.liquid
È la cornice di ogni pagina. Due oggetti sono indispensabili: {{ content_for_header }} dentro <head>, che carica gli script di Shopify e delle app, e {{ content_for_layout }} dentro <body>, che stampa il contenuto del template. Senza questi riferimenti Shopify non ti lascia salvare il file, come spiega la documentazione sui layout.
Ecco il file, in layout/theme.liquid:
layout/theme.liquid
<!doctype html>
<html lang="{{ request.locale.iso_code }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page_title }}</title>
{{ 'base.css' | asset_url | stylesheet_tag }}
{{ content_for_header }}
</head>
<body>
{% sections 'header-group' %}
<main id="contenuto">
{{ content_for_layout }}
</main>
{% sections 'footer-group' %}
</body>
</html>Il tag {% sections 'header-group' %} stampa il gruppo di sezioni dell’intestazione, definito in sections/header-group.json con "type": "header"; per il piè di pagina vale lo stesso con footer-group.json e "type": "footer".
index.json
È il template della home. In templates/index.json elenco le sezioni iniziali: qui una sola, la sezione “benvenuto” che scrivo subito dopo.
templates/index.json
{
"sections": {
"benvenuto": {
"type": "benvenuto",
"settings": {
"titolo": "Benvenuto nel negozio"
}
}
},
"order": ["benvenuto"]
}La prima sezione
La sezione va in sections/benvenuto.liquid: markup in alto, schema in fondo. Le impostazioni dichiarate nello schema compaiono nell’editor e si leggono con section.settings.
sections/benvenuto.liquid
<section class="benvenuto">
<h1>{{ section.settings.titolo | escape }}</h1>
{%- if section.settings.testo != blank -%}
<div class="benvenuto__testo">{{ section.settings.testo }}</div>
{%- endif -%}
</section>
{% schema %}
{
"name": "Benvenuto",
"settings": [
{ "type": "text", "id": "titolo", "label": "Titolo", "default": "Benvenuto" },
{ "type": "richtext", "id": "testo", "label": "Testo" }
],
"presets": [{ "name": "Benvenuto" }]
}
{% endschema %}Il presets fa comparire la sezione nel menu “Aggiungi sezione” dell’editor; senza, la sezione si può usare solo se la scrivi tu nel template. Un esempio più completo, con blocchi e immagini, è nella guida per creare una sezione personalizzata in Shopify.
settings_schema.json
Le impostazioni generali del tema (colori, font, logo) si dichiarano in config/settings_schema.json. Il primo oggetto, theme_info, contiene nome, autore, versione e i link a documentazione e assistenza: sono campi richiesti. Gli altri oggetti sono i gruppi di impostazioni che il cliente trova in “Impostazioni tema”.
config/settings_schema.json
[
{
"name": "theme_info",
"theme_name": "Tema Negozio",
"theme_author": "Salvatore Pitone",
"theme_version": "1.0.0",
"theme_documentation_url": "https://salvatorepitone.it/",
"theme_support_url": "https://salvatorepitone.it/contatti/"
},
{
"name": "Colori",
"settings": [
{ "type": "color", "id": "colore_testo", "label": "Testo", "default": "#2B211C" },
{ "type": "color", "id": "colore_sfondo", "label": "Sfondo", "default": "#FBF5EC" }
]
}
]Nel tema le leggo con l’oggetto settings, per esempio {{ settings.colore_testo }}, di solito in uno snippet che scrive le variabili CSS nel <head>. In locales/en.default.json metto invece i testi fissi del tema, come quelli del carrello, che poi traduco in it.json.
I limiti da conoscere
Shopify pone limiti precisi, elencati nella pagina dei limiti dei temi (verificati a ottobre 2026). Questi sono quelli che incidono sulla progettazione:
| Cosa | Limite |
|---|---|
| Sezioni in un template JSON | 25 |
| Sezioni in un section group | 25 |
| Blocchi in una sezione | 50 |
| Blocchi in un template JSON o section group | 1.250 |
File nella cartella blocks | 300 |
| Annidamento dei theme blocks | 8 livelli sotto la sezione |
| Template JSON per tema | 1.000 |
| File Liquid (sezione, snippet, layout) | 256 KB |
name di sezioni e blocchi nello schema | 25 caratteri |
Il limite su cui inciampo più spesso è il nome nello schema: “Prodotti in evidenza con filtri” è già troppo lungo. Gli altri si raggiungono solo con temi progettati male, e quando succede è un segnale d’allarme utile.
Provare il tema senza toccare il negozio
Un tema in sviluppo non si carica mai sul tema pubblicato. Dalla cartella del tema, il flusso base con Shopify CLI è questo:
terminale
# anteprima locale collegata al negozio, su http://127.0.0.1:9292
shopify theme dev --store=tuonegozio
# controllo di errori e cattive pratiche
shopify theme check
# carica il tema come nuovo tema non pubblicato
shopify theme push --unpublished --theme="Tema negozio"theme dev carica i file su un tema di sviluppo e apre un’anteprima locale che si aggiorna a ogni salvataggio; i temi di sviluppo vengono eliminati quando esci con shopify auth logout. theme push --unpublished crea un nuovo tema non pubblicato nella libreria: lo vedi, lo fai vedere in anteprima e lo pubblichi solo quando è pronto.
Per lavorare sul tema basta un account del negozio con il permesso Temi (proprietario, staff o collaboratore). Il flusso completo, con GitHub e la pubblicazione controllata, merita un articolo a parte.
Domande frequenti
Conclusione
Creare un tema Shopify da zero vuol dire conoscerne a fondo struttura, limiti e strumenti. Non sempre conviene: a volte un tema esistente con qualche sezione su misura fa lo stesso lavoro con meno costi, come spiego nella guida al tema Shopify personalizzato.
Se invece il tuo negozio merita un tema costruito sul catalogo, trovi come lavoro in realizzazione e migrazione Shopify. Per ripassare le basi della piattaforma: cos’è Shopify e come funziona.
Vuoi un tema costruito sul tuo catalogo e facile da modificare? Parliamone: ti rispondo io.
