Una panoramica degli strumenti My Workify per il flusso di lavoro

A seguito della pubblicazione delle recenti serie di temi di Shopify Alcune persone hanno contattato alcuni degli strumenti per il flusso di lavoro che utilizzo durante la creazione di temi. Iniziamo guardando l'Editor temi desktop per Mac.

Desktop Theme Editor per Mac

Poiché Shopify è una piattaforma ospitata, devi caricare i file del tema per visualizzare le modifiche nel tuo negozio. Sebbene tu possa ovviamente utilizzare l'editor di temi nell'area admin, molti di noi preferiscono (e preferiscono) lavorare localmente sui file dei temi usando il nostro editor di testo scelto - Sublime Text 2 nel mio caso.

Il Desktop Theme Editor per Mac consente una sincrona sincronizzazione tra i file locali e il tema Shopify

Può essere un po 'laborioso dover caricare il tema su ZIP e caricarlo per vedere piccole modifiche incrementali, ma, fortunatamente, ci sono due strumenti che risolvono questo problema. Il primo di cui vorrei parlare è l'Editor temi desktop per Mac.

Questa app, che è scaricabile gratuitamente dall'app store Shopify, funziona in background per sincronizzare senza problemi le modifiche apportate alla cartella del tema locale in uno sviluppo o in un negozio Shopify. Ciò significa che puoi lavorare localmente nel tuo editor di testo preferito, apportare modifiche, aggiungere / eliminare file e poi semplicemente andare al tuo negozio - premere refresh - e vedere le modifiche.

L'impostazione dell'editor di temi desktop è semplice:

• Scarica l'app dall'app store di Shopify, installa e apri.
• Accedi all'app con i dettagli del negozio Shopify.
• Scegli il tema pertinente su cui vorresti lavorare a livello locale.
  Nota: il tema deve essere disponibile nel negozio. Se stai partendo da zero, carica semplicemente il tuo tema di identificazione tramite l'area di amministrazione del negozio e poi selezionalo dall'elenco.
• Scegli una posizione appropriata per salvare il tema.
• Apri il tema nel tuo editor di testo preferito.
• Apporta una modifica e attendi che venga visualizzata la notifica che la modifica è stata applicata al tuo negozio.
• Aggiorna il tuo browser store per vedere le modifiche.

È una grande utilità, molto facile da configurare e semplificherà sicuramente lo sviluppo del tuo tema. I dettagli completi sull'applicazione, incluso uno screencast, sono disponibili sul sito di Shopify docs.

Shopify Gem

Se non usi un Mac o hai una preferenza per la riga di comando, potresti essere interessato alla Gemma tema Shopify disponibile su GitHub. Ciò ottiene lo stesso risultato finale dell'Editor tema del desktop, ma invece di installare un'app nativa si installa una gemma Ruby.

La gemma del tema Shopify è un potente strumento da riga di comando per lavorare con i file del tema

Una volta installata la gemma (le istruzioni complete sono disponibili su GitHub) avrai accesso a una vasta gamma di funzioni da riga di comando oltre a quelle offerte dall'Editor temi desktop. Questi includono la possibilità di:

• Scarica tutti i file del tema
• Carica un file del tema
• Rimuovi un file del tema
• Sostituisci completamente le risorse del tema del negozio con le risorse locali
• Apri il negozio nel browser predefinito

Entrambi questi strumenti rendono i temi di costruzione molto semplici. La sincronizzazione è rapida e senza soluzione di continuità e sicuramente accelera il processo del flusso di lavoro.

Legname

Sono sicuro di non essere l'unica persona ad avere il mio piatto per lo sviluppo del tema. Mantengo il mio su GitHub e lo uso come base dei temi su cui lavoro.

Legname - Un modo più semplice e veloce per costruire temi Shopify

Il mio tema è molto semplice e, mentre funziona per me, ti potrebbe piacere qualcosa di più completo come il legno. Questo tema introduttivo è stato recentemente pubblicato dal team di Shopify e si descrive come "un modo più semplice e veloce per creare temi Shopify". È molto più di un framework che il mio e viene fornito con molte funzionalità utili.

Ecco cosa è incluso:

• Modelli richiesti - Ogni modello di tema, sia richiesto che facoltativo
• Markup di base - Tutti i tag HTML e Liquid e logici essenziali per ogni modello
• Framework CSS - Un set di stili barebone che puoi personalizzare rapidamente per le tue esigenze, incluso un framework griglia pienamente reattivo
• Frammenti - Segmenti riutilizzabili di codici comunemente usati come blocchi di impaginazione, breadcrumb e moduli di iscrizione a newsletter

Il legname merita sicuramente una visita. Puoi anche provare un negozio demo per vedere come funziona nella sua forma base.

Supporto Sass

È un fatto poco noto che Shopify supporti anche Sass, anche se con un piccolo avvertimento. Compilazione del tuo * .scss.liquid il file si verifica sui server Shopify in modo da non doverti preoccupare di eseguire un pre-processore locale per lo sviluppo del tuo tema Shopify. Il CSS di output risultante viene compresso e anche i commenti vengono rimossi.

Ho menzionato un avvertimento. Attualmente non puoi usare @imports nei file Sass, a causa delle implicazioni sulla sicurezza della piattaforma Shopify. Questo attualmente ti impedisce di utilizzare helper come Compass e Bourbon, ma la buona notizia è che le soluzioni vengono esaminate.

Comunque non sono tutte brutte notizie. Il legname include un certo numero di mix utili nel proprio file Sass e puoi ovviamente includere il tuo - ricorda solo che devono vivere nello stesso file delle dichiarazioni di stile.

Migliore flusso di lavoro

L'editor di temi desktop, il supporto di Shopify Gem, Timber e Sass rappresentano tutti i modi in cui, con uno sforzo minimo da parte nostra, possiamo iniziare a migliorare il modo in cui costruiamo i temi di Shopify.

Al di là di questi strumenti, molti talentuosi sviluppatori di temi Shopify utilizzano i propri strumenti e idee nel proprio flusso di lavoro quotidiano. Se hai una tecnica utile che vorresti condividere mi piacerebbe ascoltarla, lascia un commento nei commenti.