Custom theme Shopify: workflow da zero
Sviluppare un tema custom permette controllo totale su UX, performance e branding. La via moderna è basarsi su Dawn (tema reference Shopify) o Horizon (rilasciato 2024) come scheletro e personalizzare. In questa guida vediamo il workflow completo con Shopify CLI, Git e deploy.
Strumenti necessari
Servono: Node.js 18+, Shopify CLI (npm install -g @shopify/cli@latest @shopify/theme), Git per versioning, VS Code con plugin Shopify Liquid, account Shopify Partner per creare development stores, account development store per testare senza impattare il live.
Setup iniziale
Crea un development store su partners.shopify.com. Sul tuo PC fai login: shopify login --store mystore.myshopify.com. Clona Dawn come base: shopify theme init mytheme --clone-url https://github.com/Shopify/dawn. Apri la cartella in VS Code, esegui shopify theme dev --store mystore.myshopify.com per ambiente locale con hot reload.
Procedura passo-passo
- Setup Shopify CLI e login.
- Crea theme partendo da Dawn:
shopify theme init mytheme. - Apri progetto in VS Code, installa estensione Shopify Liquid.
- Inizializza Git:
git init && git add . && git commit -m "initial dawn". - Avvia ambiente locale:
shopify theme dev(URL fornito per preview live). - Personalizza sezioni: modifica sections/header.liquid, sections/footer.liquid, ecc.
- Crea sezioni custom: sections/custom-hero.liquid con schema JSON per editor.
- Personalizza snippet riutilizzabili: snippets/product-card-v2.liquid.
- Aggiungi assets: CSS, JS, immagini in assets/.
- Configura il tema editor: config/settings_schema.json per impostazioni globali.
- Testa su mobile + desktop + diversi browser.
- Push tema su store:
shopify theme push --unpublished. - Pubblica il tema dal Shopify Admin quando pronto.
- Versiona ogni release con tag Git.
Architettura del tema
Un tema Shopify ha cartelle standard: layout/ (theme.liquid template root), templates/ (templates per tipo pagina: product, collection, cart, ecc.), sections/ (blocchi configurabili da editor), snippets/ (componenti riutilizzabili), assets/ (CSS, JS, fonts, immagini), config/ (settings_schema.json, settings_data.json), locales/ (file traduzione it.json, en.json).
Best practice performance
Per Lighthouse score >85: lazy load immagini con loading="lazy", preload font critici, defer JS non critici, minify CSS/JS, usa image_url con resize per servire immagini ottimizzate, limita app heavy, section rendering API per cart drawer dinamico senza reload.
Errori comuni e come risolverli
- Lavorare sul tema live: rischio rotture immediate; lavora sempre su tema unpublished o development store.
- Niente Git: impossibile tornare indietro a versione funzionante.
- Schema JSON invalido: rompe la sezione nel theme editor, valida sempre il JSON.
- App che modificano tema: alcune app iniettano codice via Asset API; perdi modifiche al pull.
Domande frequenti
D: Posso vendere il mio tema custom sul Theme Store?
R: Sì, ma serve approvazione Shopify e rispettare guideline (Online Store 2.0, accessibility, performance).
D: Quanto costa sviluppare tema custom?
R: 5.000-50.000 euro a seconda di complessità; partendo da Dawn 5-15k.
D: Dawn è un buon starter?
R: Sì, è il tema reference Online Store 2.0, performante e accessibile.
Schema JSON delle sections
Ogni section ha alla fine un blocco {% schema %} JSON che descrive impostazioni esposte all'editor. Esempio: { "name": "Hero", "settings": [ { "type": "text", "id": "heading", "label": "Titolo" }, { "type": "image_picker", "id": "image", "label": "Immagine" } ], "presets": [ { "name": "Hero" } ] }. Il theme editor genera UI auto dai settings. Tipi disponibili: text, textarea, richtext, html, image_picker, color, range, select, radio, checkbox, url, font_picker, blog, page, product, collection.
Online Store 2.0 e accessibility
Dal 2021 Shopify spinge Online Store 2.0: temi modulari con sections ovunque (no solo home), metafield UI nativa, app embed blocks. Dawn è OS 2.0 reference. Per accessibility WCAG 2.1: alt text immagini, ARIA labels su button e link, focus states visibili, contrast ratio 4.5:1 minimo, keyboard navigation, skip link al main content. Testa con Lighthouse Accessibility audit.
Checklist operativa
Prima di considerare l'argomento implementato correttamente, verifica questa checklist sintetica: configurazione tecnica testata in ambiente di staging o development store, backup attivo prima di ogni modifica critica, documentazione interna aggiornata per il team operativo, training agli operatori che useranno la funzionalità, monitoraggio di metriche chiave (conversion rate, AOV, ticket support) per 30 giorni post-implementazione, revisione legale se l'implementazione tocca aspetti GDPR, fiscali o di pagamento, piano di rollback chiaro nel caso di problemi imprevisti, comunicazione ai clienti se il cambiamento influenza la loro esperienza (es. nuovo checkout, nuovi metodi di pagamento, nuovi tempi di spedizione). Una implementazione tecnica senza queste fasi di accompagnamento spesso non produce i risultati attesi e genera attriti interni o sui clienti.
Risorse utili e community
Per approfondire ulteriormente: la documentazione ufficiale Shopify su shopify.dev e help.shopify.com aggiorna costantemente le guide; il Shopify Community Forum ha thread attivi su quasi ogni argomento con risposte da Shopify Experts; Shopify Partner Academy offre corsi gratuiti per merchant e sviluppatori; YouTube channel ufficiale Shopify pubblica walkthrough delle nuove feature. Per il mercato italiano cerca community come Shopify Italia su Facebook o gruppi LinkedIn dedicati a e-commerce manager italiani: il confronto con altri merchant che vivono problemi simili è una scorciatoia preziosa rispetto a documentazione internazionale generica.
Hai bisogno di aiuto?
Se vuoi un Shopify ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.