O privire de ansamblu asupra instrumentelor mele de lucru Shopify

În urma publicării celei mai recente serii tematice Shopify Câțiva oameni au ajuns să mă întrebe despre unele dintre instrumentele de lucru pe care le folosesc atunci când construiesc teme. Să începem să privim Editorul Tematic Desktop pentru Mac.

Desktop Tema Editor pentru Mac

Întrucât Shopify este o platformă găzduită, trebuie să încărcați fișierele tematice pentru a vizualiza modificările din magazin. În timp ce, desigur, puteți folosi editorul temă în zona de administrare, mulți dintre noi ne place (și preferăm) să lucrăm local pe fișiere tematice folosind editorul nostru text ales - sublime Text 2 în cazul meu.

Editorul tematic Desktop pentru Mac permite sincronizarea perfectă între fișierele locale și tema Shopify

Poate obține un pic de forță de muncă care necesită să-ți zici tema și să o încarci pentru a vedea mici modificări incrementale, dar, din fericire, există două instrumente care rezolvă această problemă. Primul pe care aș vrea să-l discutăm este Editorul Tematic Desktop pentru Mac.

Această aplicație, care este gratuită pentru a fi descărcată din magazinul de aplicații Shopify, funcționează în fundal pentru a sincroniza perfect modificările aduse folderului dvs. tematic local cu un magazin de dezvoltare sau live Shopify. Acest lucru înseamnă că puteți să lucrați local în editorul dvs. de text preferat, să efectuați modificări, să adăugați / ștergeți fișiere și apoi pur și simplu să mergeți la magazinul dvs. - reîmprospătați lovitura - și să vedeți modificările.

Configurarea Editorului Tematic Desktop este drept înainte:

• Descărcați aplicația din magazinul App Shopify, instalați și deschideți.
• Conectați-vă la aplicație cu detaliile magazinului Shopify.
• Alegeți tema pe care doriți să o faceți la nivel local.
  Notă: tema trebuie să fie disponibilă în magazin. Dacă începeți de la zero, încărcați pur și simplu tema dvs. de boilerplate prin zona de administrare a magazinului și apoi selectați-o din listă.
• Alegeți o locație adecvată pentru a salva tema.
• Deschideți tema în editorul de text preferat.
• Efectuați o modificare și așteptați ca notificarea să apară că modificarea a fost aplicată în magazinul dvs..
• Reîmprospătați magazinul browserului pentru a vedea modificările.

Este o mare utilitate, foarte ușor de instalat și cu siguranță va simplifica dezvoltarea temelor. Detalii complete cu privire la aplicație, inclusiv un ecran publicitar, sunt disponibile pe site-ul Shopify docs.

Shopify Gem

Dacă nu utilizați un Mac sau aveți o preferință pentru linia de comandă, este posibil să vă interesați de gemul Shopify Theme Gem disponibil pe GitHub. Acest lucru atinge același rezultat final ca Editorul tematic Desktop, dar în loc să instalați o aplicație nativă, instalați o Ruby Gem.

The Shopify Tema Gem este un instrument puternic de linie de comandă pentru lucrul cu fișierele tematice

Odată ce ați instalat Gem-ul (instrucțiunile complete sunt disponibile pe GitHub), veți avea acces la o gamă largă de caracteristici de linie de comandă, pe lângă cele oferite de Desktop Theme Editor. Acestea includ capacitatea de a:

• Descărcați toate fișierele tematice
• Încărcați un fișier temă
• Eliminați un fișier tematic
• Înlocuiți în totalitate activele magazinelor cu activele locale
• Deschideți magazinul în browserul implicit

Ambele instrumente fac temele constructive foarte simple. Sincronizarea este rapidă și fără probleme și cu siguranță accelerează procesul dvs. de lucru.

Cherestea

Sunt sigur că nu sunt singura persoană care are propria mea boilerplate pentru dezvoltarea temelor. Mă susțin pe GitHub și folosesc acest lucru ca bază a temelor la care lucrez.

Cherestea - o modalitate mai rapidă și mai ușoară de a construi teme Shopify

Tema mea de boilerplate este într-adevăr de bază și în timp ce funcționează pentru mine, s-ar putea să vă placă ceva mai complet format, cum ar fi cherestea. Această temă starter a fost recent lansată de echipa Shopify și se descrie ca fiind "o modalitate mai rapidă și mai ușoară de a construi teme Shopify". Este mult mai mult decât un cadru decât mine și nave cu multe caracteristici utile.

Iată ce este inclus:

• Șabloane necesare - Fiecare șablon de temă, atât obligatoriu, cât și opțional
• Marcajul de bază - Toate etichetele esențiale HTML și lichide și etichetele logice pentru fiecare șablon
• CSS Framework - Un set de stiluri de bare libere, pe care le puteți personaliza rapid pentru nevoile dvs., inclusiv un cadru de rețea complet receptiv
• Snippeturi - Segmente reutilizabile ale codului utilizat în mod obișnuit, cum ar fi blocuri de paginare, breadcrumbs și formularele de înscriere pentru buletine de știri

Cherestea este cu siguranta merita sa se uite la. De asemenea, puteți încerca un magazin demo pentru a vedea cum funcționează în forma sa de bază.

Susținerea Sass

Este puțin cunoscut faptul că Shopify susține Sass, deși cu o mică avertizare. Compilarea dvs. * .scss.liquid fișierul se întâmplă pe serverele Shopify, astfel încât să nu aveți nevoie să vă faceți griji cu privire la rularea unui pre-procesor local pentru dezvoltarea temei Shopify. Rezultatul CSS rezultat este comprimat și comentariile sunt, de asemenea, eliminate.

Am menționat o avertizare. În prezent, nu puteți utiliza @imports în fișierele dvs. Sass, din cauza implicațiilor privind securitatea pe platforma Shopify. Acest lucru vă împiedică în prezent să utilizați asistenți precum Compass și Bourbon, dar vestea bună este că soluțiile sunt examinate.

Cu toate acestea, nu toate știrile rele. Cherestea include un număr de mixuri utile în propriul fișier Sass și puteți include, bineînțeles, și propria dvs. - trebuie doar să vă amintiți că trebuie să trăiască în același fișier ca și declarațiile de stil.

Un flux de lucru mai bun

Editorul Theme Desktop, Shopify Gem, Timber și Sass suportă toate modalitățile prin care, cu foarte puțin efort din partea noastră, putem începe să îmbunătățim modul în care construim temele Shopify.

Dincolo de aceste instrumente, mulți dezvoltatori tematici din Shopify folosesc propriile instrumente și idei în fluxul de lucru zilnic. Dacă aveți o tehnică utilă pe care ați dori să o partajați, mi-ar plăcea să o aud, nu ezitați să notați o notă în comentarii.