Share
Naar aanleiding van de publicatie van de recente Shopify Themaserie Enkele mensen hebben contact gezocht met enkele van de workflow-tools die ik gebruik bij het bouwen van thema's. Laten we beginnen met het bekijken van de Desktop Theme Editor voor Mac.
Omdat Shopify een gehost platform is, moet u uw themabestanden uploaden om wijzigingen in uw winkel te bekijken. Hoewel je natuurlijk de thema-editor in het admin-gebied kunt gebruiken, vinden velen van ons het leuk (en verkiest) om lokaal te werken aan themabestanden met behulp van onze geselecteerde teksteditor - Sublime Text 2 in mijn geval.
Met de Desktop Theme Editor voor Mac kunt u synchroon lopen tussen lokale bestanden en uw Shopify-thema Het kan een beetje arbeidsintensief worden om je thema op ZIP in te stellen en het te uploaden om kleine incrementele wijzigingen te zien, maar gelukkig zijn er twee tools die dit probleem oplossen. De eerste die ik zou willen bespreken, is de Desktop Theme Editor voor Mac.
Deze app, die gratis te downloaden is vanuit de Shopify app store, werkt op de achtergrond om wijzigingen die zijn aangebracht in je lokale themamap naadloos te synchroniseren met een ontwikkelings- of live Shopify-winkel. Dit betekent dat je lokaal in je favoriete teksteditor kunt werken, wijzigingen kunt aanbrengen, bestanden kunt toevoegen / verwijderen en gewoon naar je winkel kunt gaan - klik op Vernieuwen - en de wijzigingen ziet.
Het instellen van de Desktop Theme Editor is eenvoudig:
Het is een geweldig hulpprogramma, heel gemakkelijk in te stellen en zal je thema-ontwikkeling zeker stroomlijnen. Alle details over de app inclusief een screencast zijn beschikbaar op de Shopify-documenten-site.
Als je geen Mac gebruikt, of een voorkeur hebt voor de opdrachtregel, ben je misschien geïnteresseerd in het Shopify Theme Gem dat beschikbaar is op GitHub. Hiermee behaalt u hetzelfde eindresultaat als de Desktop Theme Editor, maar in plaats van een native app te installeren installeert u een Ruby Gem.
De Shopify Theme Gem is een krachtige opdrachtregelhulpprogramma voor het werken met uw themabestanden Zodra je de Gem hebt geïnstalleerd (volledige instructies zijn beschikbaar op GitHub) heb je toegang tot een breed scala aan commandoregel-functies naast die aangeboden door de Desktop Theme Editor. Deze omvatten de mogelijkheid om:
Beide tools maken gebouwthema's heel eenvoudig. De synchronisatie verloopt snel en naadloos en versnelt zeker uw workflowproces.
Ik weet zeker dat ik niet de enige persoon ben die mijn eigen standaard voor themaontwikkeling heeft. Ik onderhoud de mijne op GitHub en gebruik dit als een basis van thema's waar ik aan werk.
Hout - Een snellere en eenvoudigere manier om Shopify-thema's te maken Mijn boilerplate-thema is heel eenvoudig en hoewel het voor mij werkt, zou je misschien iets wat meer volledig gevormd willen, zoals Timber. Dit startthema is onlangs uitgebracht door het Shopify-team en beschrijft zichzelf als "een snellere en eenvoudigere manier om Shopify-thema's te maken". Het is veel meer een raamwerk dan het mijne en wordt geleverd met veel handige functies.
Dit is wat inbegrepen is:
Hout is zeker de moeite waard om naar te kijken. Je kunt ook een demo-winkel uitproberen om te zien hoe het werkt in zijn basisvorm.
Het is een weinig bekend feit dat Shopify ook Sass ondersteunt, zij het met een kleine waarschuwing. Compilatie van uw * .scss.liquid bestand gebeurt op de Shopify-servers, zodat u zich geen zorgen hoeft te maken over het uitvoeren van een lokale pre-processor voor uw Shopify-thema-ontwikkeling. De resulterende uitvoer-CSS wordt gecomprimeerd en opmerkingen worden ook verwijderd.
Ik noemde een waarschuwing. Momenteel kunt u niet gebruiken @imports in uw Sass-bestanden, vanwege veiligheidsimplicaties op het Shopify-platform. Dit voorkomt momenteel dat je helpers zoals Compass en Bourbon gebruikt, maar het goede nieuws is dat oplossingen worden onderzocht.
Het is echter niet allemaal slecht nieuws. Timber bevat een aantal nuttige mixins in zijn eigen Sass-bestand en je kunt natuurlijk je eigen mixen toevoegen - onthoud alleen dat ze in hetzelfde bestand moeten leven als je stijlverklaringen.
De Desktop Theme Editor, Shopify Gem, Timber en Sass-ondersteuning vertegenwoordigen allemaal manieren waarop we met heel weinig inspanning van onze kant de manier kunnen verbeteren waarop we Shopify-thema's bouwen.
Naast deze tools gebruiken veel getalenteerde ontwerpers van het thema van Shopify hun eigen tools en ideeën in hun dagelijkse workflow. Als je een bruikbare techniek hebt die je wilt delen, zou ik het graag willen horen, voel je vrij om een opmerking in de opmerkingen te plaatsen.
Accentsconagua