Quoi de neuf pour les développeurs de thèmes Shopify en 2017

Comme certains d'entre vous le savent peut-être dans mes articles précédents, Shopify est une plate-forme de commerce hébergée basée sur des thèmes qui vous permet de créer des magasins en ligne. Il a connu une croissance constante au cours des dernières années et constitue aujourd'hui la plate-forme de plus de 400 000 entreprises dans environ 175 pays..

La plate-forme Shopify est en constante évolution et au cours des derniers mois, un certain nombre de fonctionnalités clés ont été lancées, destinées spécifiquement aux développeurs de thèmes et d'applications. Dans cet article, nous allons examiner une sélection de ces nouvelles fonctionnalités et outils, notamment:

Mises à jour de la gestion des images de thème
Sections
Des blocs
Thème et Ardoise
Le système de design Polaris

Plusieurs des exemples suivants vont discuter Liquide. Liquid est le langage de gabarit permettant aux développeurs de thèmes d'utiliser des espaces réservés et des constructions logiques dans leurs gabarits qui seront remplacés par des données de magasin en direct lorsqu'une page est demandée et rendue. Il utilise une syntaxe simple permettant la sortie (par exemple un titre de produit) et la logique (par exemple un pour boucle). Je ne vais pas entrer dans trop de détails ici, mais vous pouvez regarder mon screencast de 25 minutes qui va dans beaucoup plus de détails sur la façon dont fonctionne Liquid.

Et pendant que vous êtes ici, vous pouvez également être intéressé par le post d’inspiration suivant, pour les thèmes disponibles sur Themeforest:

20 meilleurs thèmes Shopify avec de superbes designs de commerce électronique
Construire un site de commerce électronique est un jeu d'enfant lorsque vous avez le meilleur choix de thèmes Shopify. Un thème Shopify de qualité a les fonctionnalités dont vous avez besoin, c'est sûr…

Brenda Barron
10 octobre 2017 Shopify

1. Nouveau thème de gestion d'images

Commençons par examiner l’un des principaux changements liés au thème qui a eu lieu récemment: le img_url Filtre à liquide. Jusqu'à récemment, les images étaient rendues sur la base d'un ensemble de tailles nommées prédéfinies. Par exemple:

product.featured_image | img_url: 'grande'

Ici, nous demandons la photo en vedette pour le produit en taille grande. Ainsi, en supposant que l’image originale ait un côté égal ou supérieur à 600 pixels, l’image avec le plus long des deux axes faisant 600 pixels.

Ces tailles nommées sont maintenant obsolètes et bien qu’elles fonctionnent encore, elles ont été remplacées par un nouvel ensemble de paramètres comprenant Taille, surgir, échelle, et format. Cela permet maintenant d'effectuer toute une série de manipulations liées aux images, auparavant indisponibles pour les développeurs de thèmes Shopify..

Je vais utiliser le img_url Filtre liquide dans ces exemples, mais les techniques fonctionneront également avec les autres objets liés à l'image suivants:

product_img_url
collection_img_url
article_img_url
asset_img_url

Commençons par examiner comment redimensionner une image. Pour ce faire, nous remplaçons l’image devenue obsolète. prénom avec une taille spécifique en pixels. Voici un exemple:

product.featured_image | img_url: '450x450'

En utilisant la syntaxe ci-dessus, le contrôle des dimensions de l’image est maintenant entre vos mains: nous avons spécifié ici la largeur et la hauteur (dans cet ordre)..

Vous pouvez également spécifier uniquement une largeur:

product.featured_image | img_url: '450x'

ou seulement une hauteur:

product.featured_image | img_url: 'x450'

Lorsque vous spécifiez une valeur unique, Shopify calculera la dimension restante en fonction de la taille de l'image d'origine, en conservant le rapport de format de l'image d'origine..

Pour revenir à notre exemple initial, vous pourriez penser que cela produirait une version 450x450 de votre image. Ce n'est cependant pas toujours le cas.

Cette demande aboutirait à un carré parfait, uniquement si les deux conditions suivantes sont remplies:

L'image originale était 450px ou plus sur les deux axes
Les deux côtés ont la même longueur

Si les deux conditions sont vraies, une image carrée de 450 x 450 sera rendue. Sinon, Shopify le redimensionnera selon la même logique que si vous aviez spécifié uniquement la hauteur ou la largeur. Le plus long côté gagne dans cette situation et est dimensionné en conséquence.

Pour créer des images carrées, vous pouvez utiliser le paramètre de rognage pour vous assurer que les dimensions de l'image résultante correspondent aux dimensions demandées. Si toute l'image ne rentre pas dans les dimensions demandées, le paramètre de recadrage spécifie la partie de l'image à afficher. Il existe trois options valides:

Haut
centre
bas
la gauche
droite

Cette fonctionnalité est disponible depuis la fin de 2016 mais début 2017, une mise à jour a été publiée, offrant encore plus de flexibilité. Les thèmes disponibles dans le magasin thématique Shopify, y compris le thème premium Empire illustré ci-dessous, utilisent tous ces techniques. L'installation d'un thème gratuit est un excellent moyen d'en apprendre davantage sur la mise en œuvre de ces idées..

Il est maintenant possible d'accéder directement aux propriétés de hauteur, de largeur et de rapport de format d'une image à l'aide de Liquid. Les développeurs de thèmes peuvent désormais utiliser ces informations pour fournir des images correctement dimensionnées à l'utilisateur final. Voici un exemple d'utilisation srcset Décrivez comment vous pouvez en tirer parti dans vos propres thèmes:

% pour le produit dans collection.products% % assigner une image = product.featured_image%  % endfor%

Dans cet exemple, nous utilisons le attribuer Fonction liquide pour créer une variable appelée image qui correspond à l’image sélectionnée des produits actuellement consultés (définie dans l’administrateur Shopify). Nous pouvons ensuite utiliser la logique liquide pour créer notre srcset déclarations utilisant, dans ce cas, la largeur propriété:

% si image.width> 640% image.src | img_url: '640x' 640w % endif%

La bonne nouvelle est que les développeurs de thèmes n'ont pas à s'inquiéter de re-télécharger toutes leurs images car Shopify a indexé chaque image sur la plate-forme..

Deux autres paramètres à discuter sont échelle et format. Le paramètre scale vous permet de spécifier la densité de pixels de l'image. Vous pouvez agrandir 2x ou 3x en fonction de vos besoins:

product.image | img_url: '400x400', scale: 2

le format Ce paramètre vous permet de spécifier le format de fichier à utiliser pour l'image. Actuellement, vous pouvez spécifier soit jpg ou pjpg (JPEG progressif):

product.image | img_url: '400x400', format: 'pjpg'

Vous pouvez également utiliser cette technique pour les images résidant dans le dossier des ressources de votre thème. Pour ce faire, vous utilisez le asset_img_url filtre. Voici un exemple qui utilise également le img_tag filtre qui se traduira par un complètement formé img élément en cours de rendu dans le modèle:

logo.jpg '| asset_img_url: '300x' | img_tag

Ces nouveaux filtres de manipulation d'images et propriétés d'image permettent enfin d'être aussi flexible que vous le souhaitez en ce qui concerne le traitement des images, la direction artistique et la convivialité des plans de données des utilisateurs finaux..

2. Sections

À la fin de 2016, Shopify a introduit les «sections». Cette nouvelle fonctionnalité permet aux développeurs de thèmes de créer une interface d'administration personnalisée permettant aux propriétaires de magasins d'ajouter, de réorganiser et de supprimer facilement des sections de contenu telles que des produits, des diaporamas, des vidéos ou des collections de produits. Ce sont des cas d'utilisation courants, mais vous pouvez utiliser littéralement cette fonctionnalité pour permettre aux propriétaires de magasins d'ajouter et de modifier tout type de contenu. Tous les changements dans l'administrateur peuvent être visualisés en temps réel et une fois sauvegardés, ils seront en direct dans le magasin..

Les sections peuvent être incluses de manière statique dans les modèles d'un thème (comme l'en-tête et le pied de page), ou bien être ajoutées et supprimées de manière dynamique, via l'interface d'administration, sur la page d'accueil d'un thème. Dans l'exemple ci-dessus, que nous aborderons sous peu, vous pouvez voir comment nous pouvons modifier une section statique qui apparaîtra dans le pied de page du magasin. Vous remarquerez également le bouton "Ajouter une section" qui nous permet d'ajouter des sections dynamiques, plus à celles plus tard, à la page d'accueil..

Les modèles de section se trouvent dans le nouveau dossier de sections et peuvent être référencés de la même manière que les extraits. Si notre fichier se trouvait dans sections / promotion.liquid, nous le référencerions comme suit:

% section “promotion”%

Remarque: vous n'avez pas besoin du .liquide comme dans le cas des extraits de code dans les thèmes Shopify. Regardons un exemple pour clarifier le pouvoir des sections. Ce qui suit est le contenu de sections / footer.liquid:

section.settings.title

section.settings.description

% schema% "name": "Promotion de pied de page", "paramètres": ["id": "titre", "type": "texte", "label": "Titre de la promotion", "défaut": "Titre", "id": "description", "type": "richtext", "label": "Ajoutez votre description ci-dessous", "par défaut": "

Ajoutez votre description ici

"] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%

Si vous connaissez les paramètres de thème Shopify, certains de ces éléments peuvent sembler assez familiers. Il comprend un mélange de HTML, de caractères de substitution liquides et de JSON similaires à ceux trouvés dans settings_schema.json. Incidemment, la fonctionnalité de settings_schema.json reste toujours: les sections ajoutent simplement une couche supplémentaire de fonctionnalités.

En haut du modèle se trouve la sortie HTML que je souhaiterais générer lorsque le modèle rencontre la section au moment du rendu. À l'intérieur de chacun des h1 et p les éléments sont des espaces réservés Liquid utilisant le nouveau section.settings. [x] syntaxe de sortie. Dans nos exemples, notre modèle de section va rechercher des données correspondant à section.settings.title et section.settings.description.

Jusqu'ici, c'est simple et facile, mais comment Shopify sait-il comment peupler ces espaces réservés? Tout cela revient au JSON que j'ai mentionné plus tôt niché entre l'ouverture et la fermeture % schema% Mots clés.

"nom": "Promotion de pied de page", "paramètres": ["id": "titre", "type": "texte", "étiquette": "titre de promotion", "défaut": "titre", "id": "description", "type": "richtext", "label": "Ajoutez votre description ci-dessous", "par défaut": "

Ajoutez votre description ici

Pour que notre section apparaisse dans la zone “Personnaliser le thème” de l’administrateur du magasin, nous devons lui attribuer un identifiant: nous le faisons en définissant la valeur “name” au niveau supérieur du fichier JSON..

Ensuite, nous avons le noeud de paramètres qui a, dans cet exemple, deux sous-noeuds. Les deux contiennent des propriétés de identifiant, type, étiquette, et défaut. Chacun d'entre eux, en fonction de leur valeur, déterminera le rendu de l'interface d'administration. Regardons chacun à son tour:

identifiant

Une chaîne de texte qui sera utilisée en interne. Il est à noter que, même si les ID doivent être uniques dans un fichier de section, ils ne doivent pas nécessairement l'être dans tous les fichiers de section. En tant que tel, il est parfaitement correct d'avoir un identifiant de Titre dans plusieurs fichiers de section. Les paramètres de section ne seront pas non plus en conflit avec les paramètres de settings_schema.json.

type

Cela représente le contrôle qui sera rendu dans l'administrateur. Les options les plus couramment utilisées sont les suivantes:

texte: Champs de texte d'une seule ligne
zone de texte: Zones de texte multilignes
texte riche: Un éditeur de texte riche
image_picker: Images téléchargées
radio: Boutons radio
sélectionner: Menus déroulants de sélection
case à cocher: Cases à cocher

Certains d'entre eux nécessitent un JSON supplémentaire pour fonctionner. Par exemple, le contrôle de sélection nécessite des options pour le remplir. Plus d'informations sur le fonctionnement de ces outils, ainsi que sur d'autres contrôles à prendre en compte, sont disponibles dans la documentation Shopify..

étiquette

Ceci représente l'étiquette HTML qui sera générée dans l'administrateur au-dessus de votre contrôle.

défaut

Ce paramètre vous permet d'ajouter des valeurs de marque de réservation au contrôle. Il est à noter que ce sont les valeurs qui seront utilisées jusqu'à ce que la section ait été mise à jour par le propriétaire du magasin..

Mon exemple est assez simple et va créer deux contrôles. Le premier est un champ de texte d’une seule ligne qui sera rendu dans le h1 élément du modèle, le second est une zone de texte riche qui donne les options gras, italique et URL.

Il existe de nombreuses autres options que vous pouvez utiliser pour repérer l’administrateur de votre magasin, notamment l’ajout de contrôles sur mesure pour les URL, les listes de collections et de produits, ainsi que le code HTML personnalisé. Nous ne les examinerons pas tous dans cet article, mais je vous encourage à explorer les possibilités.

Vous remarquerez également que vous pouvez ajouter du code CSS et JavaScript personnalisé aux fichiers de section à l'aide des balises Liquid suivantes:

% stylesheet% % endstylesheet%

% javascript% % endjavascript%

Vous pensez peut-être que cela pourrait ajouter beaucoup de code CSS et JavaScript en ligne potentiellement volumineux à votre thème. La bonne nouvelle est que Shopify concatène tous les CSS et JS dans un seul fichier qui est injecté via Liquid. content_for_header espace réservé. La plate-forme garantit qu'une seule instance est toujours incluse, même si cette section est utilisée plusieurs fois sur une page. Plus d'informations sur l'exécution des scripts sont disponibles dans la documentation Shopify.

Une fois que vous avez configuré vos contrôles et vos noms dans le fichier JSON, vous pouvez inclure la section dans n’importe quel modèle pertinent. Des sections peuvent être ajoutées à un fichier de présentation (l'enveloppe extérieure d'une page) ou à un fichier de modèle individuel. L’administrateur Shopify affichera les commandes de manière contextuelle: c’est-à-dire uniquement lors de la visualisation du modèle correspondant dans l’éditeur «personnaliser le thème». La modification des valeurs entraînera une mise à jour en temps réel dans l’administrateur: c’est un excellent moyen de voir comment les modifications affecteront la mise en page avant la mise à jour et la diffusion en direct..

Si vous regardez le code HTML rendu, vous remarquerez que les sections sont encapsulées dans un div élément:

L'id de la div prend le format de shopify-section- [id] , où id est un identifiant unique pour cet élément de la page, et sans spécifier, ajoute une classe de section shopify. Vous pouvez également ajouter votre propre classe à l'élément div en spécifiant une valeur de classe dans vos paramètres. Voici comment cela ressemblerait à notre exemple ci-dessus:

 "id": "titre", "type": "texte", "Classe": "titre", "libellé": "titre de promotion", "défaut": "titre"

Cet ajout aurait les conséquences suivantes:

Les sections sont un excellent ajout aux thèmes Shopify car elles permettent aux développeurs de thèmes d'activer les paramètres contextuels dans tout un magasin. Cependant, ils prennent vraiment tout leur sens lorsqu'ils travaillent en tandem avec la nouvelle fonctionnalité de blocs.

3. Blocs

Les blocs reposent sur le concept de sections et permettent aux propriétaires de magasins d'ajouter plusieurs sections à la page d'accueil d'un magasin. Voyons comment utiliser des blocs pour ajouter la possibilité d'ajouter un certain nombre de boîtes promotionnelles à la page d'accueil. Voici l'exemple de fichier avec lequel nous allons travailler:

% for block in section.blocks% % if block.type == "promo-box"%

block.settings.title

block.settings.description

% elsif block.type == "sélecteur d'image"%

% endif% % endfor% % schema% "name": "Blocs promotionnels", "max_blocks": 5, "préréglages": ["name": "Blocs promotionnels", "catégorie": "Contenu personnalisé de la page d'accueil"], "blocs": ["type": "boîte promotionnelle", "nom": "Boîte promotionnelle", "limite": 1, "paramètres": ["id": " titre "," type ":" texte "," étiquette ":" titre "," défaut ":" votre titre ici ", " id ":" description "," type ":" texte "," étiquette " : "Description", "défaut": "votre description ici"], "type": "sélecteur d'image", "nom": "Image promo", "paramètres": ["id": "promo -image "," type ":" image_picker "," label ":" Promo Image "] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%

Je serai honnête, il m'a fallu un peu plus de temps pour comprendre comment fonctionnent les blocs. Cependant, une fois que vous comprendrez comment les pièces s’assemblent, cela vous ouvre un nouvel ensemble de possibilités pour le développement de votre thème..

La page d’accueil peut être composée de plusieurs sections, chaque section pouvant contenir plusieurs blocs. Le propriétaire du magasin peut alors commander à nouveau ces blocs pour créer une présentation qui répond le mieux à leurs besoins. Voyons en quoi cela diffère de l'exemple précédent pour clarifier certains concepts.

Tout d'abord, vous remarquerez qu'il y a un liquide pour boucle en haut du modèle:

% for block in section.blocks% % if block.type == "promo-box"%

block.settings.title

block.settings.description

% elsif block.type == "promo-image"%

% endif% % endfor%

Ces multiples éléments étant à la merci du propriétaire du magasin, nous, les développeurs de thèmes, n’avons aucun moyen de savoir ce que nous devons produire. Nous devons donc utiliser une structure à boucle liquide, dans ce cas une pour boucle, ce qui nous permet d’itérer tour à tour tous les blocs présents dans une section particulière et de sortir les données pertinentes.

Dans l'extrait ci-dessus, vous verrez que j'utilise un simple si / elsif instruction qui vérifie le type de bloc actuel. Nous pouvons définir le type dans le schéma nous-mêmes, comme nous le verrons bientôt. Dans cet exemple, nous utilisons elsif être doublement sûr du type que nous vérifions. Si vous ne disposiez que de deux types de blocs distincts, comme dans cet exemple, vous pouvez simplement autre comme vous le savez, c'est la seule autre alternative: cela dit, ça ne fait pas mal d'être plus défensif.

Selon notre type, une section différente de HTML sera affichée. Pour sortir la valeur associée au bloc, nous utilisons la syntaxe suivante:

block.settings. [id]

[id] représente l'identifiant donné à cet élément particulier de notre schéma que nous couvrirons ensuite.

En passant au schéma, vous remarquerez des éléments familiers et des éléments inconnus. Commençons par regarder la partie d'ouverture:

"nom": "Blocs promotionnels", "max_blocks": 5, "paramètres prédéfinis": ["nom": "Blocs promotionnels", "catégorie": "Contenu personnalisé de la page d'accueil"]

Regardons chaque partie à tour de rôle:

"name": "Blocs Promotionnels": Nom qui apparaîtra pour ce groupe de contrôles dans l'administrateur Shopify
"max_blocks": 5: Le nombre total de blocs pouvant apparaître dans cette section. Cela fonctionne à l'unisson avec le réglage de limite de chaque bloc que nous traiterons plus tard. Une fois que le nombre maximum de blocs a été atteint, vous ne pourrez plus en ajouter dans le menu admin..
"presets": Un tableau de paramètres par défaut pour la section dynamique. Dans l'exemple ci-dessus, nous souhaitons que notre élément dynamique apparaisse sous le titre «Blocs promotionnels» et dans la catégorie «Contenu de la page d'accueil personnalisée». La valeur de la catégorie nous permet de regrouper différentes sections dans un groupe de l’administrateur..

Une fois que nous avons défini le prénom, max_blocks, et des valeurs prédéfinies, nous pouvons porter notre attention sur les commandes que nous souhaitons voir apparaître dans l’administrateur. Ceux-ci sont définis dans la section des blocs du schéma:

"blocs": ["type": "boîte de promotion", "nom": "Boîte promotionnelle", "limite": 1, "paramètres": ["id": "titre", "type": " text "," label ":" Titre "," default ":" votre titre ici ", " id ":" description "," type ":" textarea "," label ":" Description "," default " : "votre description ici"], "type": "image-promo", "nom": "image promo", "paramètres": ["id": "image-promo", "type": "image_picker", "label": "Promo Image"]]

Chaque bloc a un certain nombre de valeurs prédéfinies:

"type": Un nom donné à ce groupe de commandes particulier. Cela peut être tout ce que vous voulez, mais idéalement quelque chose d'explicite.
"prénom": Le nom de ce groupe de contrôles particulier que vous souhaitez voir apparaître dans l'administrateur
"limite": Le nombre de fois que vous souhaitez que ce groupe de commandes particulier, à savoir ce bloc, apparaisse dans la section. Nous allons examiner cela plus tard.

Une fois que vous avez défini ces préréglages, vous pouvez définir les contrôles que vous souhaitez voir apparaître dans l’administrateur. Ceux-ci sont définis dans les paramètres:

"settings": ["id": "titre", "type": "texte", "libellé": "titre", "défaut": "votre titre ici", "id": "description", "type": "textarea", "label": "Description", "défaut": "votre description ici"]

Dans notre exemple, nous avons deux types de blocs potentiels que nous pouvons ajouter à cette section. Le premier est le type de bloc boîte promotionnelle et le second est le type de bloc image promo: dont nous nous sommes définis.

Chaque bloc peut également définir son propre ensemble de paramètres, qui peut comprendre un ou plusieurs contrôles. Dans l'exemple ci-dessus, le bloc de type boîte promotionnelle a deux contrôles qui apparaîtront une fois ajoutés à la section. Le premier est un champ de texte et le second est un zone de texte. Pour une raison quelconque, les blocs ne peuvent pas utiliser le texte riche éditeur nous avons utilisé dans notre exemple précédent, mais un zone de texte vous permettra d'ajouter du HTML au besoin. Comme pour les sections statiques, nous devons également définir et identifiant, type, étiquette, et la description.

Il existe un certain nombre de types disponibles, notamment:

texte: Champs de texte d'une seule ligne
zone de texte: Zones de texte multilignes
image_picker: Images téléchargées
radio: Boutons radio
sélectionner: Menus déroulants de sélection
case à cocher: Cases à cocher
intervalle: Curseurs de gamme

Dans l’exemple ci-dessus, nous avons également défini un contrôle d’image en utilisant le image_picker valeur. Cela permettra au propriétaire du magasin de télécharger une image ou d'en choisir une qui a déjà été téléchargée dans le magasin. Comme cela a son propre type, nom et paramètres, le sélecteur d'images apparaîtra comme une autre option que le propriétaire du magasin peut ajouter à cette section dynamique..

J'ai mentionné plus tôt que le boîte promotionnelle Le bloc a une valeur limite de 1. Vous vous souviendrez également que nous avons défini le nombre maximal de blocs dans cette section comme étant 5. Il est donc possible dans ce scénario de créer une section composée de:

1 “boîte promotionnelle” et 4 “images promotionnelles”
5 “images promotionnelles”

Une fois la combinaison atteinte, vous ne pourrez plus ajouter de blocs à la section, sauf si vous supprimez un bloc existant..

Une fois que votre modèle et votre schéma sont prêts, ainsi que tous les CSS et JavaScript supplémentaires, vous devez ajouter une dernière pièce de code au modèle index.liquid de votre thème afin d'activer la fonctionnalité du bloc. En ajoutant content_for_index à index.liquid Shopify sait inclure toute section dans laquelle un ou plusieurs préréglages sont définis. Chaque préréglage devient alors une section dynamique qu'un commerçant peut ensuite ajouter à sa page d'accueil de thème..

Dans l'image ci-dessous, vous verrez le résultat final. Après avoir cliqué sur l’administrateur, nous pouvons ajouter nos liens ou nos blocs promotionnels à la section dynamique. Dans ce cas, j'ai choisi des blocs promotionnels et je peux ensuite ajouter des blocs supplémentaires, mais uniquement des images Promo, car nous avons spécifié une limite de 1 dans notre schéma pour le type «Boîte promotionnelle»..

Il est à noter que non seulement vous pouvez réorganiser les blocs dynamiques dans une section, mais vous pouvez également réorganiser les sections parent sur la page d'accueil comme bon vous semble. Une chose à retenir est qu'il y a une limite stricte de 25 sections qui peuvent être ajoutées à la page d'accueil.

Les sections statiques et dynamiques, ainsi que leurs blocs ultérieurs, constituent un outil très puissant. Il m'a fallu un certain temps pour bien comprendre les concepts, mais une fois que vous avez cliqué, vous commencez à vraiment apprécier le potentiel qu'ils offrent..

4. Kit thématique et ardoise

Une première question que me posent souvent les premiers développeurs de thèmes Shopify est la meilleure façon de configurer un environnement de développement compatible avec la plate-forme: il existe aujourd'hui deux options intéressantes qui vous permettront de démarrer et de fonctionner correctement..

L'année dernière, l'équipe de thèmes Shopify a publié le kit thématique Shopify. Theme Kit est un outil de ligne de commande binaire unique (fonctionne sous Windows, Linux et macOS) qui, une fois installé, vous permettra:

Télécharger des thèmes dans plusieurs environnements
Télécharger et télécharger des ressources de thème
Surveillez les modifications locales et téléchargez-les automatiquement sur la plateforme Shopify

Le kit de thème permet aux développeurs de thèmes de travailler avec leurs outils habituels (éditeur de texte, pré-processeurs, etc.) et de synchroniser les modifications en arrière-plan sur un magasin de développement Shopify. Si vous n'avez pas encore regardé Shopify du point de vue de la création de thèmes, il est possible que vous ne soyez pas au courant des magasins de développement..

Ils sont essentiellement des magasins Shopify avec une différence: vous ne pouvez pas accepter de véritables paiements. Toutefois, pour que vous puissiez démontrer le flux de paiement complet à un client, vous pouvez ajouter une "passerelle de paiement factice". Vous pouvez créer autant de magasins de développement que vous le souhaitez via un compte partenaire gratuit. Une fois prêt à lancer, vous pouvez simplement passer du magasin à un forfait payant ou déployer le thème dans un autre magasin..

Le kit thématique propose un certain nombre de commandes utiles vous permettant d'interagir avec des thèmes tout en travaillant dans un environnement de développement local. Une fois installé, vous pouvez utiliser le regarder commande qui lancera un processus pour surveiller votre répertoire des modifications et les télécharger sur Shopify.

Shopify ne peut pas être vraiment «local» (d’où les citations) car vous aurez besoin d’une connexion Internet pour travailler avec un magasin de développement, mais l’intégration du kit thématique dans votre flux de travail donne l’impression «locale». Utilisé avec des outils tels que Prepros, vous pouvez également profiter du rechargement en direct de votre magasin de développement, ainsi que de la minification et de la concaténation de fichiers..

En 2017, Shopify a également lancé Slate: un échafaudage de thèmes open source et un outil de ligne de commande pour développer des thèmes Shopify. Il est conçu pour faciliter votre processus de développement et accélérer le processus de développement, de test et de déploiement de thèmes dans les magasins Shopify..

Considérant que ThemeKit vous aide dans un domaine, Slate va beaucoup plus loin. En plus de fournir les fonctionnalités de synchronisation de thème de ThemeKit (ThemeKit fait partie de Slate), il vous permet également de déployer simultanément plusieurs environnements, de créer des modèles de squelette pour un nouveau thème et d'organiser les feuilles de style et les scripts de manière flexible..

Les modèles d'échafaudage de Slate sont «intentionnellement vierges» (page d'accueil illustrée ci-dessous): les balises Liquid standard et la logique susceptible d'être utilisée sur chaque modèle ont été incluses avec peu ou pas de balises, classes ou autres codes que vous devrez effacer. Il est conçu comme un point de départ parfaitement fonctionnel: il vous suffit de remplir les blancs et vous êtes opérationnel..