En oversikt over mine Shopify-arbeidsflytverktøy

Etter publiseringen av den nylige Shopify Theme Series Noen få mennesker har nådd å spørre meg om noen av de arbeidsflytverktøyene jeg bruker når jeg bygger temaer. La oss begynne med å se på Desktop Theme Editor for Mac.

Desktop Theme Editor for Mac

Siden Shopify er en vert plattform, må du laste opp temafilene dine for å se endringer i butikken din. Selv om du selvfølgelig kan bruke temaredigeringen i administrasjonsområdet, liker mange av oss (og foretrekker) å jobbe lokalt på temafiler ved hjelp av vår valgte tekstredigerer - Sublime Text 2 i mitt tilfelle.

Desktop Theme Editor for Mac muliggjør tilsynelatende synkronisering mellom lokale filer og ditt Shopify-tema

Det kan bli litt arbeidskrevende å ZIP opp temaet ditt og laste det opp for å se små trinnvise endringer, men heldigvis er det to verktøy som løser dette problemet. Den første jeg vil diskutere, er Desktop Theme Editor for Mac.

Denne appen, som er gratis å laste ned fra Shopify App Store, fungerer i bakgrunnen for å sømløst synkronisere endringer som er gjort i din lokale temamappe til en utvikling eller live Shopify-butikk. Dette betyr at du kan jobbe lokalt i din favoritt tekstredigerer, gjøre endringer, legge til / slette filer og så bare gå til butikken din - hit oppdatering - og se endringene.

Konfigurering av Desktop Theme Editor er rett frem:

• Last ned appen fra Shopify App Store, installer og åpne.
• Logg inn på appen med Shopify-butikkinformasjonen din.
• Velg det aktuelle temaet du vil jobbe med lokalt.
  Merk: temaet må være tilgjengelig i butikken. Hvis du starter fra grunnen, laster du bare opp ditt boilerplate-tema via butikkadministratorområdet, og velg det fra listen.
• Velg et passende sted for å lagre temaet.
• Åpne temaet ditt i ditt foretrukne tekstredigeringsprogram.
• Gjør en endring og vent på at varselet viser at endringen har blitt brukt i butikken din.
• Oppdater nettleserens butikk for å se endringene.

Det er et flott verktøy, veldig enkelt å sette opp og vil sikkert strømlinjeforme temautviklingen. Fullstendig informasjon om appen, inkludert en screencast, er tilgjengelig på Shopify-dokumentets nettsted.

Shopify perle

Hvis du ikke bruker en Mac, eller har en preferanse for kommandolinjen, kan du være interessert i Shopify Theme Gem tilgjengelig på GitHub. Dette oppnår det samme sluttresultatet som Desktop Theme Editor, men i stedet for å installere en innfødt app, installerer du en Ruby Gem.

Shopify Theme Gem er et kraftig kommandolinjeverktøy for å jobbe med temafilene dine

Når du har installert perlen (full instruksjoner er tilgjengelig på GitHub) har du tilgang til et bredt spekter av kommandolinjegenskaper i tillegg til de som tilbys av Desktop Theme Editor. Disse inkluderer evnen til å:

• Last ned alle temafiler
• Last opp en temafil
• Fjern en temafil
• Fullstendig erstatte butikkens temapapirer med de lokale eiendelene
• Åpne butikken i standard nettleser

Begge disse verktøyene gjør bygningskjemaer veldig enkle. Synkroniseringen er rask og sømløs og øker hastigheten på arbeidsflytprosessen.

Timber

Jeg er sikker på at jeg ikke er den eneste personen som har min egen boilerplate for temautvikling. Jeg vedlikeholder min på GitHub og bruker dette som grunnlag for temaer jeg jobber med.

Tømmer - En raskere og enklere måte å bygge Shopify-temaer på

Mitt tema er veldig grunnleggende, og mens det virker for meg, kan det hende at du kanskje liker noe mer fullstendig dannet som Timber. Dette startetemaet ble nylig utgitt av Shopify-teamet og beskriver seg som "en raskere og enklere måte å bygge Shopify-temaer på". Det er mye mer av et rammeverk enn min egen og skip med mange nyttige funksjoner.

Her er det som følger med:

• Påkrevde maler - Hver templatmal, både obligatorisk og valgfri
• Grunnleggende merking - Alle viktige HTML- og Liquid-utdata- og logikk-koder for hver mal
• CSS Framework - Et bare bones sett med stiler som du raskt kan tilpasse for dine egne behov, inkludert et fullt responsivt gridramme
• Tekstutdrag - Gjenbrukbare segmenter av vanlig brukt kode som paginering blokker, breadcrumbs og nyhetsbrev registreringsskjemaer

Tømmer er definitivt verdt å se på. Du kan også prøve en demo butikk for å se hvordan den fungerer i sin grunnleggende form.

Sass Support

Det er et lite kjent faktum at Shopify også støtter Sass, om enn med en liten advarsel. Samling av din * .scss.liquid Filen skjer på Shopify-serverne, slik at du ikke trenger å bekymre deg for å kjøre en lokal forprosessor for din Shopify-temautvikling. Den resulterende utdata-CSS komprimeres og kommentarer blir også fjernet.

Jeg nevnte en advarsel. For øyeblikket er du ikke i stand til å bruke @imports i Sass-filene dine, på grunn av sikkerhetsimplikasjoner på Shopify-plattformen. Dette forhindrer i øyeblikket deg fra å bruke hjelpere som Compass og Bourbon, men den gode nyheten er at løsninger blir undersøkt.

Men det er ikke alle dårlige nyheter. Tømmer inneholder en rekke nyttige mixins i sin egen Sass-fil, og du kan selvfølgelig inkludere din egen - bare husk at de må leve i samme fil som dine stildeklarasjoner.

Bedre arbeidsflyt

Desktop Theme Editor, Shopify Gem, Timber and Sass-støtte alle representerer måter som, med svært liten innsats fra vår side, kan vi begynne å forbedre måten vi bygger Shopify-temaer på.

Utover disse verktøyene bruker mange talentfulle Shopify-temautviklere egne verktøy og ideer i sin daglige arbeidsflyt. Hvis du har en nyttig teknikk du vil dele, vil jeg gjerne høre det, vær så snill å slippe et notat i kommentarene.