Développement de thème Shopify : guide pratique pour démarrer
Développement de thème Shopify
Développement de thème Shopify : CLI, dossiers et bases de Liquid | We.Inc
Commencez à créer un thème Shopify : commandes theme de Shopify CLI, contenu de chaque dossier du thème, bases de Liquid et templates JSON, avec des commandes à copier.
Installez Shopify CLI, lancez shopify theme init pour cloner le thème de départ Skeleton, puis shopify theme dev --store your-store pour le prévisualiser sur http://127.0.0.1:9292 avec rechargement à chaud dans Chrome. Modifiez les templates Liquid, CSS et JSON en local, lancez shopify theme check pour détecter les erreurs, et shopify theme push pour envoyer le thème.
Les commandes theme de Shopify CLI que vous utiliserez le plus
Commande
Ce qu'elle fait selon Shopify
shopify theme init
Clone un dépôt Git qui sert de point de départ pour créer un thème
shopify theme dev
Envoie le thème en tant que thème de développement pour que vous puissiez le prévisualiser
shopify theme pull
Récupère les fichiers du thème depuis Shopify
shopify theme push
Envoie vos fichiers de thème locaux vers Shopify
shopify theme check
Lance Theme Check pour analyser le code de votre thème à la recherche d'erreurs
shopify theme share
Envoie votre thème comme nouveau thème non publié
shopify theme publish
Publie un thème non publié de votre bibliothèque
Développer un thème, c'est modifier le design d'une boutique sous forme de vrais fichiers sur votre ordinateur, avec votre propre éditeur et un système de gestion de versions, plutôt que dans l'interface d'administration. Parcourez l'explorateur de dossiers ci-dessous pour savoir ce qui se trouve où, puis copiez les commandes pour lancer un aperçu.
Installez Shopify CLI et connectez-vous à une boutique de développement ou à une boutique sur laquelle vous avez un accès collaborateur.
Lancez shopify theme init pour obtenir un thème de départ, ou shopify theme pull pour télécharger un thème existant.
Lancez shopify theme dev et ouvrez l'adresse locale dans Chrome ; les modifications de CSS et de sections se rechargent à chaque enregistrement.
Lancez shopify theme check, puis faites un push ou un share du thème lorsqu'il est prêt à être relu.
Versionnez le thème dans Git dès le premier commit. L'historique des fichiers de l'admin est limité, votre dépôt ne l'est pas.
Travaillez sur un thème de développement, jamais directement sur le thème en ligne. Ne faites un push vers le thème en ligne que de façon délibérée.
Gardez en tête les limites des templates : jusqu'à 25 sections par template JSON et jusqu'à 50 blocs par section.
Shopify marque l'objet Liquid theme comme obsolète, ne construisez donc pas de logique sur le nom ou l'ID d'un thème.
Questions fréquentes
Qu'est-ce que Liquid ?
Liquid est le langage de templates de Shopify. Les doubles accolades affichent une valeur, comme le titre d'un produit, et les balises accolade pourcentage contiennent la logique, comme les conditions if et les boucles. Les filtres modifient la façon dont une valeur s'affiche.
Ai-je besoin d'un forfait payant pour développer des thèmes ?
Les développeurs travaillent généralement sur une boutique de développement créée depuis un compte Shopify Partner. Vérifiez les conditions actuelles dans le tableau de bord Partner, car elles peuvent changer.
Qu'est-ce qu'un template JSON ?
Un fichier de données qui liste les sections affichées par une page et leurs réglages. Il lui faut un objet sections contenant au moins une section et un tableau order d'ID de sections.
Pourquoi mon aperçu ne se recharge-t-il que dans Chrome ?
Le guide de démarrage de Shopify indique que l'aperçu avec rechargement à chaud ne fonctionne que dans Google Chrome. Dans les autres navigateurs, actualisez à la main.
Dois-je partir de Dawn, Horizon ou Skeleton ?
La commande init de la CLI clone Skeleton, une base minimale pour un thème construit de zéro. Partez d'un thème gratuit complet si vous voulez surtout ajuster un design existant.
Comment une page est assemblée
Un fichier de layout enveloppe chaque page avec la structure commune, comme la balise head et l'en-tête. Un template JSON choisit ensuite les sections qui remplissent la page, et chaque section est un fichier Liquid qui peut contenir des blocs et des snippets.
Les marchands réorganisent ces sections dans l'éditeur de thème. Votre rôle de développeur est de rendre les sections flexibles grâce à des réglages, pour que le marchand n'ait jamais à vous appeler pour une petite modification.
Faire circuler le travail entre votre ordinateur et la boutique
Faites un pull avant de commencer si quelqu'un a modifié le thème dans l'admin, sinon votre push peut écraser ses modifications. La commande push écrase la version distante lorsque vous ciblez un thème existant.
Utilisez share pour donner un aperçu à un client : la commande envoie le thème comme nouvelle copie non publiée dans sa bibliothèque, qu'il peut consulter avant toute mise en ligne.
Les commandes pour lancer un aperçu
Remplacez my-store par le nom myshopify de votre boutique. Exécutez-les depuis un dossier vide.
Démarrer un thème et le prévisualiser
init clone le thème de départ Skeleton ; dev affiche une adresse locale qui recharge vos modifications de CSS et de sections.
Vérifier et envoyer
Lancez check avant chaque envoi. share crée une nouvelle copie non publiée, la solution la plus sûre pour la relecture par un client.
Liquid en un seul snippet
Les balises de sortie affichent des valeurs, les balises de logique décident de ce qui s'affiche et les filtres transforment une valeur.
Le titre et le prix d'un produit
La balise if masque la ligne du prix barré quand il n'y a pas de promotion ; le filtre money formate le prix dans la devise de la boutique.
Explorateur de dossiers du thème
Chaque dossier d'un thème standard et ce qu'il contient. Choisissez-en un pour le mettre en évidence.
Les images, fichiers CSS et JavaScript utilisés par le thème.
Les blocs de thème, le type de bloc plus récent autour duquel sont construits des thèmes comme Horizon.
Les fichiers de configuration du thème, dont settings_schema.json.
Les fichiers de traduction, pour que les textes propres au thème puissent s'afficher dans d'autres langues.
Les sections et groupes de sections du thème.
De petits morceaux de code Liquid réutilisables.
Les templates des anciennes pages de compte client.