Sviluppare un tema Shopify da zero: esperienza tecnica e best practice

Sviluppare un tema Shopify completamente da zero non è solo un esercizio tecnico: è un percorso che permette di creare qualcosa di totalmente aderente alle esigenze reali di un brand. Come frontend developer sono abituato a lavorare su progetti complessi o a fare manutenzione su store già esistenti. La sfida di cui voglio raccontare è stata però diversa: lo sviluppo di un progetto Shopify da zero.

Abbiamo scelto di basarci su Skeleton, lo starter kit minimale di Shopify, che fornisce solo la struttura necessaria per far girare un tema, senza alcuna personalizzazione grafica o funzionale. A differenza di Dawn – il tema di riferimento ufficiale, già pronto all’uso e ottimizzato – Skeleton ci ha garantito pieno controllo sul codice, permettendo di lavorare su accessibilità, performance e ottimizzazione UX senza vincoli. Un percorso che ci dà la possibilità di guidare il cliente verso una crescita digitale modellata su misura, costruita passo dopo passo con attenzione e responsabilità.

Stack e scelte tecnologiche

Per lo sviluppo abbiamo adottato un approccio moderno e scalabile:

Shopify CLI per gestire il flusso di lavoro (dev server, push/pull, deploy).
Tailwind CSS v4 per una gestione ordinata e performante degli stili.
JavaScript modulare asincrono (ES6) per garantire bundle leggeri e caricamenti non bloccanti.
Struttura a componenti riutilizzabili in Liquid e JS, per semplificare manutenzione ed estensioni future.

Uno degli obiettivi principali è stato assicurare un livello elevato di accessibilità: partendo da zero, abbiamo potuto curare semanticità, etichette ARIA, interazioni da tastiera in ogni componente e lo sviluppo di un mega menu completamente navigabile da tastiera, in linea con le linee guida WCAG 2.1 e con quanto richiesto dalla normativa europea sull’accessibilità digitale (European Accessibility Act / Direttiva UE 2019/882). Un approccio che ci consente di costruire non solo un tema, ma un’esperienza che sostiene la crescita del brand e le persone che lo utilizzano, valorizzando ogni interazione.

Gestione del codice e workflow con Shopify CLI

Un aspetto cruciale è stata la definizione di un workflow coerente per ambienti multipli (locale, staging, produzione).

Shopify CLI offre i comandi principali per il ciclo di sviluppo:

shopify theme dev: avvia un dev server collegato allo store, con live reload.
shopify theme pull: scarica i file dal tema remoto. Utile per non sovrascrivere modifiche fatte tramite il Theme Editor.
shopify theme push: carica i file locali sul tema remoto. Si possono aggiungere pattern --ignore o utilizzare .shopifyignore per escludere file specifici.

`.gitignore` vs `.shopifyignore`

Per separare codice da configurazioni specifiche di ambiente, abbiamo usato entrambi i file di ignore:

.gitignore → evita che file variabili (es. configurazioni locali) finiscano nel repository condiviso.
.shopifyignore → dice alla CLI quali file non includere nei push/pull.

In particolare, abbiamo ignorato:

config/settings_data.json

templates/*.json

templates/**/*.json

sections/header-group.json

sections/footer-group.json

Una metodologia che consente ai team e ai clienti di lavorare con serenità, affidandosi a un processo stabile che cresce con il progetto e lo sostiene nel tempo.

Perché questa scelta

La nostra strategia ha assicurato coerenza, stabilità e sicurezza durante tutto lo sviluppo. Alcuni file contengono informazioni che cambiano a seconda dell’ambiente, e non devono essere sovrascritte.

settings_data.json contiene i valori delle impostazioni scelti nel Theme Editor (colori, testi, layout). È paragonabile a un database: ogni ambiente deve avere il proprio.
templates/*.json e sezioni come header-group.json o footer-group.json gestiscono configurazioni di pagina e blocchi. Anche questi variano da ambiente a ambiente.

Con questa strategia, il codice rimane sincronizzato tra i vari ambienti, ma le configurazioni specifiche non vengono mai sovrascritte. Lo store live, ad esempio, mantiene le proprie personalizzazioni senza rischiare di perderle a seguito di un deploy.

Il flusso tipico diventa quindi:

shopify theme pull → sincronizzo eventuali modifiche remote.
lavoro in locale su Liquid, JS, CSS.
shopify theme push (con ignore) → deploy senza toccare configurazioni live.

Una logica che mette al centro la continuità del business, permettendo al cliente di evolvere senza rischi e con la certezza che ogni passo avanti sia solido e consapevole.

UX, UI e Baymard best practices

Un altro motivo per cui abbiamo scritto tutto da zero è stata la possibilità di applicare in modo puntuale le linee guida Baymard per l’ecommerce, con un controllo totale su codice e architettura informativa.

Le pagine collezione sono state estese tramite metafield personalizzati: ogni collezione può includere blocchi dinamici che mostrano prodotti correlati o collezioni aggiuntive. Tecnicamente, i metafield vengono richiamati in Liquid con query condizionali e resi disponibili nel Theme Customizer, permettendo al merchant di gestire i contenuti senza toccare il codice. Dal punto di vista dell’utente, questo si traduce in percorsi di navigazione più ricchi e meno dispersivi, aumentando le opportunità di cross-selling.
I prodotti sono stati arricchiti con schede tecniche generate da metafield nativi (ad esempio, materiali, dimensioni, compatibilità), che vengono mappati nel template di prodotto tramite snippet Liquid e resi semanticamente accessibili. In questo modo l’utente può consultare le specifiche in modo chiaro e strutturato, mentre i motori di ricerca beneficiano di un contenuto meglio formattato.
Le pagine brand sono state sviluppate sfruttando le smart collection di Shopify: queste consentono di filtrare automaticamente i prodotti in base al campo vendor e di mappare ogni brand a una o più collezioni specifiche. A livello tecnico, abbiamo implementato un loop condizionale in Liquid che richiama le smart collection associate al vendor e ne renderizza i prodotti tramite componenti riutilizzabili. Questo approccio evita la gestione manuale delle relazioni e garantisce che ogni nuova aggiunta al catalogo venga mostrata in automatico nella pagina del brand corrispondente. Dal punto di vista UX, l’utente può navigare il catalogo per marchio in modo coerente e strutturato, trovando subito le collezioni e i prodotti più rilevanti.

In sintesi, l’uso strategico dei metafield ci ha permesso di trasformare il tema in un sistema data-driven, dove il contenuto non è “hardcoded” ma strutturato in modo flessibile, scalabile e aderente alle best practices di usabilità e conversione. Un approccio che trasforma la tecnologia in uno strumento concreto per far crescere il valore percepito del brand e semplificare l’esperienza delle persone che lo scelgono.

Filtri e varianti

La gestione dei filtri è stata sviluppata custom in Liquid, integrata con l’app Search & Discovery di Shopify, consigliata dalla piattaforma stessa per la gestione nativa di ricerca e filtri.

Abbiamo distinto:

Filtri basati su opzioni di prodotto (es. colore, taglia).
Filtri basati su metafield di categorie (es. materiale, stile).

Questa differenziazione ha dato maggiore flessibilità agli utenti, migliorando la navigazione. Una soluzione pensata per rendere l’esperienza più fluida e accompagnare l’utente verso scelte più consapevoli, contribuendo alla crescita del business in modo naturale.

Multilingua e localizzazione

Shopify oggi integra nativamente il multilingua, senza dover più installare app di terze parti (spesso a pagamento). Questo rende la localizzazione molto più semplice e performante.

Anche se il progetto non richiedeva la traduzione, abbiamo preparato tutto il codice per supportarla, gestendo le stringhe tramite il sistema di locales. Attualmente sono presenti italiano e inglese, ma il progetto è pronto per ospitare altre lingue in futuro. Una scelta che costruisce basi solide e prepara il brand a evolversi in nuovi mercati con naturalezza e sicurezza.

Add to Cart, carrello e controllo totale sul codice

Uno degli aspetti più interessanti è stato riscrivere completamente tutta la logica di carrello e add to cart. Avere un codice nostro, pulito e controllato al 100%, ci ha permesso di gestire ogni dettaglio: messaggi di feedback, aggiornamenti dinamici e interazioni con le varianti.

Il risultato è un codice più snello, facilmente debuggabile e con un’esperienza utente migliore. Un intervento che permette al brand di crescere su fondamenta tecniche robuste, garantendo sempre un’interazione chiara e di valore.

Theme Customizer

Abituato a Gutenberg (WordPress), mi aspettavo un customizer meno fluido. Invece il Theme Customizer di Shopify si è rivelato intuitivo, veloce e ben progettato, migliorando anche la vita di chi gestisce i contenuti. Uno strumento che rende il cliente più autonomo e lo aiuta a potenziare il proprio progetto, trasformando il lavoro tecnico in un supporto reale alla crescita quotidiana.

Shopify pensa al resto

Un aspetto che ho particolarmente apprezzato è che con Shopify non ho dovuto pensare alle parti sistemistiche: niente configurazioni SMTP per le email (che spesso finiscono in spam), niente setup complessi per ordini, checkout o pagine profilo utenti.

Tutto questo è gestito nativamente da Shopify, lasciandoci concentrare solo su ciò che conta davvero: lo sviluppo del tema e l’esperienza utente.

Il risultato? Un time to market eccezionale, pur partendo da zero.

Conclusioni

Questa prima esperienza di sviluppo full custom su Shopify è stata una piacevole sorpresa.

Abbiamo potuto unire performance, accessibilità e best practices UX, sfruttando un workflow tecnico solido basato su CLI, ambienti multipli e gestione differenziata delle configurazioni.

Non c’è un “meglio o peggio” tra Shopify e WooCommerce: ogni progetto ha le sue esigenze. Ma se l’obiettivo è avere controllo sul codice, time-to-market rapido e infrastruttura affidabile, Shopify si conferma una piattaforma solida e produttiva.
Un percorso che conferma quanto sia importante accompagnare ogni cliente nella propria crescita digitale, creando soluzioni che non siano solo funzionali, ma realmente significative per il loro futuro.

Per lo sviluppo abbiamo adottato un approccio moderno e scalabile:

Shopify CLI per gestire il flusso di lavoro (dev server, push/pull, deploy).
Tailwind CSS v4 per una gestione ordinata e performante degli stili.
JavaScript modulare asincrono (ES6) per garantire bundle leggeri e caricamenti non bloccanti.
Struttura a componenti riutilizzabili in Liquid e JS, per semplificare manutenzione ed estensioni future.

Uno degli obiettivi principali è stato assicurare un livello elevato di accessibilità: partendo da zero, abbiamo potuto curare semanticità, etichette ARIA, interazioni da tastiera in ogni componente e lo sviluppo di un mega menu completamente navigabile da tastiera, in linea con le linee guida WCAG 2.1 e con quanto richiesto dalla normativa europea sull’accessibilità digitale (European Accessibility Act / Direttiva UE 2019/882). Un approccio che ci consente di costruire non solo un tema, ma un’esperienza che sostiene la crescita del brand e le persone che lo utilizzano, valorizzando ogni interazione.

Un aspetto cruciale è stata la definizione di un workflow coerente per ambienti multipli (locale, staging, produzione).

Shopify CLI offre i comandi principali per il ciclo di sviluppo:

shopify theme dev: avvia un dev server collegato allo store, con live reload.
shopify theme pull: scarica i file dal tema remoto. Utile per non sovrascrivere modifiche fatte tramite il Theme Editor.
shopify theme push: carica i file locali sul tema remoto. Si possono aggiungere pattern --ignore o utilizzare .shopifyignore per escludere file specifici.

`.gitignore` vs `.shopifyignore`

Per separare codice da configurazioni specifiche di ambiente, abbiamo usato entrambi i file di ignore:

.gitignore → evita che file variabili (es. configurazioni locali) finiscano nel repository condiviso.
.shopifyignore → dice alla CLI quali file non includere nei push/pull.

In particolare, abbiamo ignorato:

config/settings_data.json

templates/*.json

templates/**/*.json

sections/header-group.json

sections/footer-group.json

Una metodologia che consente ai team e ai clienti di lavorare con serenità, affidandosi a un processo stabile che cresce con il progetto e lo sostiene nel tempo.

La nostra strategia ha assicurato coerenza, stabilità e sicurezza durante tutto lo sviluppo. Alcuni file contengono informazioni che cambiano a seconda dell’ambiente, e non devono essere sovrascritte.

settings_data.json contiene i valori delle impostazioni scelti nel Theme Editor (colori, testi, layout). È paragonabile a un database: ogni ambiente deve avere il proprio.
templates/*.json e sezioni come header-group.json o footer-group.json gestiscono configurazioni di pagina e blocchi. Anche questi variano da ambiente a ambiente.

Con questa strategia, il codice rimane sincronizzato tra i vari ambienti, ma le configurazioni specifiche non vengono mai sovrascritte. Lo store live, ad esempio, mantiene le proprie personalizzazioni senza rischiare di perderle a seguito di un deploy.

Il flusso tipico diventa quindi:

shopify theme pull → sincronizzo eventuali modifiche remote.
lavoro in locale su Liquid, JS, CSS.
shopify theme push (con ignore) → deploy senza toccare configurazioni live.

Una logica che mette al centro la continuità del business, permettendo al cliente di evolvere senza rischi e con la certezza che ogni passo avanti sia solido e consapevole.

Un altro motivo per cui abbiamo scritto tutto da zero è stata la possibilità di applicare in modo puntuale le linee guida Baymard per l’ecommerce, con un controllo totale su codice e architettura informativa.

Le pagine collezione sono state estese tramite metafield personalizzati: ogni collezione può includere blocchi dinamici che mostrano prodotti correlati o collezioni aggiuntive. Tecnicamente, i metafield vengono richiamati in Liquid con query condizionali e resi disponibili nel Theme Customizer, permettendo al merchant di gestire i contenuti senza toccare il codice. Dal punto di vista dell’utente, questo si traduce in percorsi di navigazione più ricchi e meno dispersivi, aumentando le opportunità di cross-selling.
I prodotti sono stati arricchiti con schede tecniche generate da metafield nativi (ad esempio, materiali, dimensioni, compatibilità), che vengono mappati nel template di prodotto tramite snippet Liquid e resi semanticamente accessibili. In questo modo l’utente può consultare le specifiche in modo chiaro e strutturato, mentre i motori di ricerca beneficiano di un contenuto meglio formattato.
Le pagine brand sono state sviluppate sfruttando le smart collection di Shopify: queste consentono di filtrare automaticamente i prodotti in base al campo vendor e di mappare ogni brand a una o più collezioni specifiche. A livello tecnico, abbiamo implementato un loop condizionale in Liquid che richiama le smart collection associate al vendor e ne renderizza i prodotti tramite componenti riutilizzabili. Questo approccio evita la gestione manuale delle relazioni e garantisce che ogni nuova aggiunta al catalogo venga mostrata in automatico nella pagina del brand corrispondente. Dal punto di vista UX, l’utente può navigare il catalogo per marchio in modo coerente e strutturato, trovando subito le collezioni e i prodotti più rilevanti.

In sintesi, l’uso strategico dei metafield ci ha permesso di trasformare il tema in un sistema data-driven, dove il contenuto non è “hardcoded” ma strutturato in modo flessibile, scalabile e aderente alle best practices di usabilità e conversione. Un approccio che trasforma la tecnologia in uno strumento concreto per far crescere il valore percepito del brand e semplificare l’esperienza delle persone che lo scelgono.

La gestione dei filtri è stata sviluppata custom in Liquid, integrata con l’app Search & Discovery di Shopify, consigliata dalla piattaforma stessa per la gestione nativa di ricerca e filtri.

Abbiamo distinto:

Filtri basati su opzioni di prodotto (es. colore, taglia).
Filtri basati su metafield di categorie (es. materiale, stile).