Il contesto
Il negozio arrivava da WooCommerce, con un tema acquistato anni prima e mai ripensato per il telefono. La migrazione a Shopify era già decisa quando sono entrato nel progetto: il mio compito era costruire un tema Liquid su misura invece di adattarne uno generico.
Prima i dati, poi il disegno
Prima di scrivere codice ho guardato l'analytics del vecchio sito: da quali dispositivi arrivavano le visite, quali pagine perdevano persone, dove si interrompeva il percorso d'acquisto. In un e-commerce di moda buona parte degli acquisti passa dallo smartphone, e il vecchio tema su schermi piccoli faticava.
Per questo il tema è nato mobile-first: ogni componente progettato prima per uno schermo da telefono e poi adattato a quelli più grandi. Il checkout è stato configurato con il minimo di campi necessario.
Le scelte tecniche
- Immagini prodotto caricate solo quando servono, nelle dimensioni giuste per ogni schermo, sfruttando il CDN di Shopify.
- Niente jQuery: poche righe di JavaScript vanilla, solo dove serve davvero un'interazione.
- Scheda prodotto ridisegnata attorno a quello che aiuta a decidere: recensioni visibili subito, galleria con zoom, taglie chiare.
- Sezioni configurabili dal pannello, così il cliente può cambiare contenuti senza toccare il codice.
Cosa ho imparato
In un negozio online la velocità su mobile fa parte dell'esperienza d'acquisto, non è un dettaglio tecnico da sistemare alla fine. E il codice di un tema va scritto pensando a chi lo erediterà: struttura chiara, commenti dove servono, niente scorciatoie che solo io saprei leggere.