Étape 1 – Dupliquer votre thème en direct
Lorsque vous travaillez sur le code de votre thème, il est toujours bon de le dupliquer afin d’avoir une sauvegarde au cas où quelque chose se casse accidentellement.
- Accédez à la boutique en ligne > Thèmes
- Dans « Thème actuel », sélectionnez le menu déroulant Actions
- Sélectionnez Dupliquer
- Il faudra environ une minute à Shopify pour terminer la duplication de votre thème en direct
Cliquez sur Dupliquer pour créer une version dupliquée de votre thème en direct sur laquelle nous travaillerons en toute sécurité.
Nomenclature de dénomination des thèmes
Si vous travaillez avec un développeur, il aura probablement ses propres conventions de dénomination. Si ce n’est que vous, je vous recommande d’utiliser un système comme celui ci-dessous :
« MYTHÈME – EN DIRECT »
Ceci est toujours votre thème live actuel
« MYTHÈME – DEV »
Il s’agit d’une copie de votre thème en direct avec toutes les modifications supplémentaires que vous avez apportées. c’est-à-dire. Votre thème « travail en cours ».
« MYTHEME – SAUVEGARDE 04-05-21 »
Une fois qu’un thème DEV est publié, vous le renommez en thème LIVE. Le thème LIVE précédent devient le nouveau BACKUP (c’est-à-dire une sauvegarde de votre thème avant la publication de vos modifications)
1. DEV actuel -> nouveau LIVE
2. ancien LIVE -> nouveau BACKUP
3. duplicata du nouveau LIVE -> nouveau DEV
4. répéter
Au fur et à mesure que vous travaillez et publiez de nouvelles modifications, vous renommez chaque thème selon les conventions afin que vous sachiez toujours – quel thème est en direct, sur quel thème vous travaillez et sur quel thème vous pouvez revenir rapidement si quelque chose se casse.
Étape 2 – Modifier le code
- Accédez à la boutique en ligne > Thèmes
- Trouvez votre thème nouvellement dupliqué, sélectionnez le menu déroulant Actions
- Sélectionnez Modifier le code
Cela ouvrira une nouvelle zone où vous pourrez voir presque tous les fichiers de code qui alimentent votre boutique.
Cliquez sur Modifier le code pour être redirigé vers la zone où modifiez directement vos fichiers de code pour cette version du thème.
Étape 3 – Modifiez theme.liquid et ajoutez votre script TRYGR.
- Trouvez le fichier theme.liquid (sous Disposition)
- Dans votre fichier theme.liquid, appuyez sur CMD + F (Mac) ou CTRL + F (Windows) pour ouvrir une barre de recherche
- Entrez </head> dans la recherche
Assurez-vous d’inclure le / dans </head>, sans le / est <head> et c’est la balise d’ouverture. Si vous mettez du code au-dessus, cela ne fonctionnera pas.
- Cela vous mènera à la balise de fermeture ou à la fin de la section <head> de votre code. Généralement, vous voulez mettre tous vos extraits, juste au-dessus de cette balise de fermeture.
- Ajoutez votre extrait en le copiant et en le collant sur la ligne directement au-dessus de la balise </head>.
S’il y a du code directement au-dessus, ajoutez simplement des lignes supplémentaires entre elles avec la touche ENTER. - Assurez-vous de ne pas écraser ou supprimer d’autres petits morceaux de code. La suppression accidentelle d’un seul < ou > peut en fait empêcher le code (c’est-à-dire votre site) de fonctionner.
- Appuyez sur Enregistrer
- Vous pouvez également cliquer sur le lien « Anciennes versions » qui apparaît en haut si vous devez revenir à une version précédente de ce fichier, au cas où quelque chose tournerait mal.
Ouvrez theme.liquid et trouvez la balise </head>, puis ajoutez votre extrait juste au-dessus.
Étape 4 – Prévisualisez votre thème de développement dupliqué
- Accédez à la boutique en ligne > Thèmes
- Trouvez le thème dupliqué sur lequel vous avez travaillé, sélectionnez le menu déroulant Actions
- Sélectionnez Aperçu
Cela ouvrira un aperçu de ce thème sur votre boutique pour que vous puissiez le vérifier avant de le publier. Si tout semble bien, alors vous avez fait un excellent travail !
Étape 5 – Publier le thème de développement dupliqué
- Si tout semble bon ci-dessus, appuyez sur Actions > Publier sur le thème sur lequel vous avez travaillé.
- Cela prendra quelques instants à Shopify et le thème dupliqué sera déplacé vers l’emplacement « Thème actuel ».
- Vous pouvez ensuite renommer comme indiqué ci-dessus.
Renommer ThemeName – PRODUCTION en ThemeName – BACKUP xx-xx-xx (y mettre la date) Comme c’est maintenant votre thème de sauvegarde
- Renommez ThemeName – DEVELOPMENT en ThemeName – PRODUCTION Comme c’est maintenant votre thème live/production
- Dupliquez le nouveau ThemeName – PRODUCTION et renommez-le en ThemeName – DEVELOPMENT
Ainsi, vous aurez une nouvelle copie sur laquelle travailler lorsque vous devrez apporter d’autres modifications.
*Assurez-vous que votre thème de DÉVELOPPEMENT est une copie exacte et à jour de votre thème de production avant de commencer un nouveau travail dessus.
