---
title: "Creare un tema Shopify da zero: struttura delle cartelle e primi file"
seo_title: "Creare un tema Shopify da zero: struttura e primi file"
description: "Com'è fatto un tema Shopify: layout, templates, sections, blocks, snippets, assets, locales e config. I primi file per partire da zero con Shopify CLI."
url: "https://salvatorepitone.it/creare-tema-shopify-da-zero/"
type: "BlogPosting"
language: "it-IT"
published: "2026-10-26T16:13:56+01:00"
updated: "2026-10-26T18:12:58+01:00"
author: "Salvatore Pitone"
categories:
  - "Shopify"
tags:
  - "Shopify"
  - "creare tema shopify"
image: "https://salvatorepitone.it/wp-content/uploads/2026/10/creare-tema-shopify-da-zero-copertina.webp"
---

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](https://salvatorepitone.it/liquid-shopify-guida/).

## Com’è fatto un tema Shopify

La struttura è descritta nella [documentazione sull’architettura dei temi](https://shopify.dev/docs/storefronts/themes/architecture). Shopify accetta solo queste cartelle: sottocartelle diverse non sono supportate.

![Struttura delle cartelle di un tema Shopify Online Store 2.0 e a cosa serve ciascuna](https://salvatorepitone.it/wp-content/uploads/2026/10/creare-tema-shopify-da-zero-cartelle.webp)

_Le cartelle di un tema Shopify e a cosa serve ciascuna._

### 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](https://shopify.dev/docs/storefronts/themes/architecture/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](https://salvatorepitone.it/theme-blocks-shopify/)**: 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](https://salvatorepitone.it/come-progettare-la-struttura-perfetta-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](https://shopify.dev/docs/api/shopify-cli/theme) 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 `sections` e 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](https://shopify.dev/changelog/developer-preview-liquid-block-and-partial-tags);
- **Horizon**: il tema di punta di Shopify, con sezioni, template JSON e theme blocks. Il [repository di Horizon](https://github.com/Shopify/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](https://shopify.dev/docs/storefronts/themes/architecture/layouts).

![Codice minimo del file layout/theme.liquid di un tema Shopify con content\_for\_header e content\_for\_layout](https://salvatorepitone.it/wp-content/uploads/2026/10/creare-tema-shopify-da-zero-theme-liquid.webp)

_Il layout minimo: le due righe evidenziate sono obbligatorie._

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](https://salvatorepitone.it/creare-sezione-personalizzata-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](https://shopify.dev/docs/storefronts/themes/architecture/limits) (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](https://salvatorepitone.it/shopify-cli-github-tema/), merita un articolo a parte.

## Domande frequenti

### Serve saper programmare per creare un tema Shopify?

Per crearne uno da zero sì: servono HTML, CSS, un po’ di JavaScript e Liquid, il linguaggio dei template di Shopify. Per personalizzare un tema esistente basta molto meno, perché l’editor fa gran parte del lavoro e le sezioni su misura si aggiungono in file separati. Se arrivi da WordPress, la logica dei template ti sarà familiare.

### Posso usare React per il tema?

Non nel tema classico: le pagine dei temi Shopify sono generate dai server di Shopify con Liquid. Puoi usare JavaScript, anche con librerie, per le parti interattive, ma il contenuto resta in Liquid. Per un negozio interamente in React esiste Hydrogen, il framework di Shopify per i negozi headless: è un progetto diverso, con costi e manutenzione diversi.

### Quanto tempo serve per un tema su misura?

Dipende dal numero di template e sezioni, dalla grafica (già pronta o da progettare), dalle integrazioni e da quanto il tema deve essere modificabile dall’editor. Un tema che riprende una grafica già definita richiede meno lavoro di uno da progettare da capo. Dopo aver visto catalogo e pagine ti do una stima divisa in fasi.

### Un tema creato da zero si può vendere sul Theme Store?

Sì, ma con regole precise. Il tema deve superare la revisione di Shopify e rispettare i requisiti del Theme Store: deve essere molto diverso dai temi già presenti, i temi basati su Dawn o Horizon non sono ammessi e lo Skeleton theme è l’unica base di codice consentita. Per un tema fatto per un solo negozio questi vincoli non valgono.

## 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](https://salvatorepitone.it/tema-shopify-personalizzato/).

Se invece il tuo negozio merita un tema costruito sul catalogo, trovi come lavoro in [realizzazione e migrazione Shopify](https://salvatorepitone.it/realizzazione-e-migrazione-shopify/). Per ripassare le basi della piattaforma: [cos’è Shopify e come funziona](https://salvatorepitone.it/cose-shopify-e-come-funziona-per-le-commerce/).

Vuoi un tema costruito sul tuo catalogo e facile da modificare? [**Parliamone**](https://salvatorepitone.it/contatti/): ti rispondo io.
