Sviluppo di Temi Shopify: CLI, Cartelle e Basi di Liquid | We.Inc
Inizia a sviluppare un tema Shopify: comandi theme di Shopify CLI, cosa contiene ogni cartella del tema, basi di Liquid e template JSON, con comandi da copiare.
Installa Shopify CLI, esegui shopify theme init per clonare il tema di partenza Skeleton, poi shopify theme dev --store your-store per visualizzarlo su http://127.0.0.1:9292 con hot reload in Chrome. Modifica in locale Liquid, CSS e template JSON, esegui shopify theme check per trovare errori e shopify theme push per caricarlo.
I comandi theme di Shopify CLI che userai di più
Comando
Cosa fa secondo Shopify
shopify theme init
Clona un repository Git da usare come punto di partenza per creare un tema
shopify theme dev
Carica il tema come tema di sviluppo così puoi visualizzarlo in anteprima
shopify theme pull
Scarica i file del tema da Shopify
shopify theme push
Carica i file locali del tema su Shopify
shopify theme check
Esegue Theme Check per analizzare il codice del tema e trovare errori
shopify theme share
Carica il tema come nuovo tema non pubblicato
shopify theme publish
Pubblica un tema non pubblicato dalla tua libreria
Sviluppare un tema significa modificare il design di un negozio come file veri sul tuo computer, con il tuo editor e il controllo di versione, invece che dentro l'admin. Esplora le cartelle qui sotto per capire cosa c'è dove, poi copia i comandi per avviare un'anteprima.
Installa Shopify CLI ed effettua l'accesso a un negozio di sviluppo o a un negozio in cui hai accesso come collaboratore.
Esegui shopify theme init per ottenere un tema di partenza, oppure shopify theme pull per scaricarne uno esistente.
Esegui shopify theme dev e apri l'indirizzo locale in Chrome; le modifiche a CSS e sezioni si ricaricano quando salvi.
Esegui shopify theme check, poi fai push o share del tema quando è pronto per la revisione.
Tieni il tema in Git dal primo commit. La cronologia dei file nell'admin ha un limite, il tuo repository no.
Lavora su un tema di sviluppo, mai direttamente su quello live. Fai push sul tema live solo di proposito.
Ricorda i limiti dei template: fino a 25 sezioni per template JSON e fino a 50 blocchi per sezione.
Shopify indica l'oggetto Liquid theme come deprecato, quindi non basare la logica sul nome o sull'ID di un tema.
Domande frequenti
Cos'è Liquid?
Liquid è il linguaggio di template di Shopify. Le doppie parentesi graffe stampano un valore, come il titolo di un prodotto, e i tag con parentesi graffa e percentuale contengono la logica, come condizioni if e cicli. I filtri cambiano il modo in cui un valore viene mostrato.
Mi serve un piano a pagamento per sviluppare temi?
Di solito gli sviluppatori lavorano su un negozio di sviluppo creato da un account Shopify Partner. Controlla le condizioni attuali nella dashboard Partner, perché possono cambiare.
Cos'è un template JSON?
Un file di dati che elenca le sezioni che una pagina mostra e le loro impostazioni. Richiede un oggetto sections con almeno una sezione e un array order con gli ID delle sezioni.
Perché l'anteprima si ricarica solo in Chrome?
La guida introduttiva di Shopify dice che l'anteprima con hot reload funziona solo in Google Chrome. Negli altri browser, aggiorna a mano.
Devo partire da Dawn, Horizon o Skeleton?
Il comando init della CLI clona Skeleton, una base minimale per un tema costruito da zero. Parti da un tema gratuito completo se vuoi soprattutto adattare un design esistente.
Come è costruita una pagina
Un file di layout avvolge ogni pagina con la struttura comune, come il tag head e l'header. Poi un template JSON sceglie quali sezioni riempiono la pagina, e ogni sezione è un file Liquid che può contenere blocchi e snippet.
I proprietari del negozio riorganizzano quelle sezioni nell'editor del tema. Il tuo compito come sviluppatore è rendere le sezioni flessibili con le impostazioni, così il proprietario non deve mai chiamarti per una piccola modifica.
Spostare il lavoro tra il tuo computer e il negozio
Fai pull prima di iniziare se qualcuno ha modificato il tema nell'admin, altrimenti il tuo push può sovrascrivere le sue modifiche. Il comando push sovrascrive la versione remota quando punti a un tema esistente.
Usa share per dare un'anteprima a un cliente: carica il tema come nuova copia non pubblicata nella sua libreria, che può guardare prima che qualcosa vada live.
Comandi per avviare un'anteprima
Sostituisci my-store con il nome myshopify del tuo negozio. Eseguili da una cartella vuota.
Creare un tema e visualizzarlo in anteprima
init clona il tema di partenza Skeleton; dev stampa un indirizzo locale che ricarica le modifiche a CSS e sezioni.
Controllare e caricare
Esegui check prima di ogni caricamento. share crea una nuova copia non pubblicata, la soluzione più sicura per la revisione del cliente.
Liquid in un solo snippet
I tag di output stampano valori, i tag di logica decidono cosa viene mostrato e i filtri trasformano un valore.
Titolo e prezzo di un prodotto
Il tag if nasconde la riga del prezzo di confronto quando non c'è uno sconto; il filtro money formatta il prezzo nella valuta del negozio.
Esploratore delle cartelle del tema
Ogni cartella di un tema standard e cosa contiene. Selezionane una per evidenziarla.
Immagini, file CSS e JavaScript usati dal tema.
Theme blocks, il tipo di blocco più recente attorno a cui sono costruiti temi come Horizon.
File di configurazione del tema, incluso settings_schema.json.
File di traduzione, così i testi del tema possono apparire in altre lingue.
Le sezioni e i gruppi di sezioni del tema.
Piccoli pezzi riutilizzabili di codice Liquid.
Template per le pagine legacy dell'account cliente.