Share
Suite à la publication de la récente série thématique Shopify, quelques personnes m'ont contactée pour m'informer sur certains outils de flux de travail que j'utilise pour créer des thèmes. Commençons par regarder l'éditeur de thème de bureau pour Mac.
Shopify étant une plate-forme hébergée, vous devez télécharger vos fichiers de thème pour afficher les modifications apportées à votre magasin. Bien que vous puissiez bien sûr utiliser l'éditeur de thème dans la zone d'administration, beaucoup d'entre nous aiment (et préfèrent) travailler localement sur des fichiers de thème à l'aide de l'éditeur de texte choisi - Sublime Text 2 dans mon cas..
Le Desktop Theme Editor pour Mac permet une synchronisation sans faille entre les fichiers locaux et votre thème Shopify. Cela peut être un peu fastidieux d’avoir à zipper votre thème et à le télécharger afin de voir de petits changements incrémentiels, mais, heureusement, deux outils permettent de résoudre ce problème. Le premier que je voudrais aborder est l’éditeur de thème de bureau pour Mac..
Cette application, qui peut être téléchargée gratuitement à partir du magasin Shopify, fonctionne en arrière-plan pour synchroniser de manière transparente les modifications apportées à votre dossier de thèmes local dans un magasin Shopify en développement ou en direct. Cela signifie que vous pouvez travailler localement dans votre éditeur de texte favori, apporter des modifications, ajouter / supprimer des fichiers, puis simplement aller dans votre magasin - cliquez sur Actualiser - pour voir les modifications..
La configuration de l’éditeur de thème de bureau est simple:
C'est un excellent utilitaire, très facile à installer et qui simplifiera certainement le développement de votre thème. Tous les détails sur l'application, y compris un screencast, sont disponibles sur le site de documentation de Shopify..
Si vous n'utilisez pas de Mac ou si vous avez une préférence pour la ligne de commande, le joyau de thème Shopify disponible sur GitHub pourrait vous intéresser. Le résultat final est le même que celui de l’éditeur de thème de bureau, mais au lieu d’installer une application native, vous installez un Ruby Gem..
Shopify Theme Gem est un puissant outil de ligne de commande pour travailler avec vos fichiers de thème. Une fois que vous avez installé Gem (les instructions complètes sont disponibles sur GitHub), vous aurez accès à un large éventail de fonctionnalités de ligne de commande en plus de celles proposées par l’éditeur de thèmes de bureau. Ceux-ci incluent la capacité de:
Ces deux outils rendent les thèmes de construction très simples. La synchronisation est rapide et transparente et accélère certainement votre processus de flux de travail.
Je suis sûr que je ne suis pas la seule personne à avoir mon propre passe-partout pour le développement de thèmes. Je maintiens le mien sur GitHub et je l’utilise comme base de thèmes sur lesquels je travaille.
Timber - Un moyen plus rapide et plus simple de créer des thèmes Shopify Mon thème passe-partout est très basique et bien que cela fonctionne pour moi, vous aimerez peut-être quelque chose de plus complet, comme Timber. Ce thème de démarrage a récemment été publié par l'équipe Shopify et se décrit comme "un moyen plus rapide et plus simple de créer des thèmes Shopify". C'est beaucoup plus un framework que le mien et est livré avec de nombreuses fonctionnalités utiles.
Voici ce qui est inclus:
Le bois vaut vraiment la peine d'être examiné. Vous pouvez également essayer un magasin de démonstration pour voir comment il fonctionne dans sa forme de base.
C'est un fait peu connu que Shopify supporte également Sass, avec toutefois une petite mise en garde. Compilation de votre * .scss.liquid le fichier passe sur les serveurs Shopify, vous n'avez donc pas à vous soucier de l'exécution d'un préprocesseur local pour le développement de votre thème Shopify. La sortie CSS résultante est compressée et les commentaires sont également supprimés.
J'ai mentionné une mise en garde. Actuellement, vous ne pouvez pas utiliser @importations dans vos fichiers Sass, pour des raisons de sécurité sur la plate-forme Shopify. Cela vous empêche actuellement d'utiliser des aides telles que Compass et Bourbon, mais la bonne nouvelle est que des solutions sont à l'étude..
Cependant, ce ne sont pas toutes de mauvaises nouvelles. Timber inclut un certain nombre de mixins utiles dans son propre fichier Sass et vous pouvez bien sûr inclure le vôtre - rappelez-vous simplement qu’ils doivent résider dans le même fichier que vos déclarations de style..
L'éditeur de thèmes de bureau, l'assistance Shopify Gem, Timber et Sass représentent tous des moyens par lesquels, avec très peu d'effort de notre part, nous pouvons commencer à améliorer notre manière de créer des thèmes Shopify..
Au-delà de ces outils, de nombreux développeurs de thèmes Shopify talentueux utilisent leurs propres outils et idées dans leur flux de travail quotidien. Si vous avez une technique utile à partager, j'aimerais l'entendre, n'hésitez pas à laisser un commentaire dans les commentaires..
Accentsconagua