Comment ajouter du code à votre section <head> dans Shopify

July 4, 2025

Ajouter du code ou des scripts (parfois appelés extraits de code) à la zone <head> dans Shopify n'est pas aussi effrayant qu'il n'y paraît.

Vous devrez parfois procéder ainsi lors de l'ajout de scripts tiers, tels que des scripts de suivi ou d'analyse, ou lors de la vérification de votre domaine pour Facebook ou Google.

Étape 1 - Dupliquez votre thème actuel

C'est facultatif, mais fortement recommandé.

Lorsque vous travaillez sur le code de votre thème, il est toujours recommandé d'en faire une copie de sauvegarde afin d'en avoir une 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électionner le doublon
Shopify mettra environ une minute à terminer la duplication de votre thème en ligne.

Cliquez sur Dupliquer pour créer une copie de votre thème en ligne sur laquelle nous travaillerons en toute sécurité.

Note annexe – Conventions de dénomination des thèmes

Si vous travaillez avec un développeur, il aura probablement ses propres conventions d'appellation. Si vous travaillez seul, je vous recommande d'utiliser un système comme celui-ci :

--

"MyTheme - EN DIRECT"

Il s'agit toujours de votre thème en direct actuel

--

"MyTheme- DEV"

Il s'agit d'une copie de votre thème actuel, intégrant les modifications que vous y avez apportées. Autrement dit, votre thème « en cours de développement ».

--

"MyTheme - SAUVEGARDE 04-05-21"

Le thème de secours, qui était votre thème précédemment actif.

--

Une fois le thème DEV publié, renommez-le thème LIVE. L'ancien thème LIVE devient alors la nouvelle sauvegarde (c'est-à-dire une sauvegarde de votre thème avant la publication des modifications).

Version DEV actuelle -> nouvelle version LIVE
Ancien système en direct -> nouveau système de sauvegarde
doublon de nouveau LIVE -> nouveau DEV
répéter

Au fur et à mesure que vous travaillez sur de nouvelles modifications et que vous les publiez, vous renommez chaque thème conformément aux conventions afin de toujours savoir quel thème est en ligne, sur quel thème vous travaillez et vers quel thème vous pouvez rapidement revenir en cas de problème.

Nous allons travailler sur un thème dupliqué, avec des conventions de nommage pour les environnements de développement (DEV) et de production (LIVE).

Étape 2 - Modifier le code dans l'éditeur de code du thème Shopify

Accédez à la boutique en ligne > Thèmes
Trouvez le thème que vous venez de dupliquer, puis sélectionnez le menu déroulant Actions.
Sélectionnez Modifier le code

Cela ouvrira une nouvelle zone où vous pourrez consulter la quasi-totalité des fichiers de code qui font fonctionner votre boutique.

Cliquez sur Modifier le code pour accéder à la zone où nous modifierons directement vos fichiers de code pour cette version du thème.

Étape 3 - Modifiez le fichier theme.liquid et ajoutez votre extrait de code.

Trouvez le fichier theme.liquid (dans le dossier Layout).
Dans votre fichier theme.liquid, appuyez sur CMD + F (Mac) ou CTRL + F (Windows) pour ouvrir une barre de recherche.
Saisissez </head> dans la recherche
Assurez-vous d'inclure le slash (/) dans </head>. Sans le slash, on a <head> et c'est la balise d'ouverture. Si vous placez du code avant, cela ne fonctionnera pas.
Cela vous amènera à la balise de fermeture, c'est-à-dire à la fin de la section `<head>` de votre code. En général, il est conseillé de placer tous vos extraits de code juste avant cette balise de fermeture.
Ajoutez votre extrait de code en le copiant et en le collant sur la ligne située juste au-dessus de la balise </head>.
S'il y a du code juste au-dessus, ajoutez simplement des lignes supplémentaires entre elles avec la touche ENTRÉE ou RETOUR.
Veillez à ne pas écraser ni supprimer de portions de code. La suppression accidentelle d'un simple symbole < ou > peut rendre votre site inutilisable.
Cliquez sur Enregistrer
Vous pouvez également cliquer sur le lien « Versions antérieures » 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 le fichier theme.liquid et trouvez la balise, puis ajoutez votre extrait de code 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 travailliez, puis sélectionnez le menu déroulant Actions.
Sélectionner Aperçu

Cela ouvrira un aperçu du thème sur votre boutique, vous permettant de le vérifier avant publication. Si tout vous convient, bravo !

Étape 5 - Publier le thème de développement dupliqué

Si tout semble correct ci-dessus, cliquez sur Actions > Publier pour le thème sur lequel vous avez travaillé.
Shopify mettra quelques instants à traiter le problème, et le thème dupliqué sera déplacé vers l'emplacement « Thème actuel ».
Vous pouvez ensuite renommer comme indiqué ci-dessus.
Renommez ThemeName - LIVE en ThemeName - BACKUP xx-xx-xx (indiquez la date à cet endroit).
Puisqu'il s'agit désormais de votre thème de secours
Renommez ThemeName - DEV en ThemeName - LIVE
Puisqu'il s'agit désormais de votre thème de production/live
Dupliquez le nouveau ThemeName - LIVE et renommez-le ThemeName - DEV
Vous aurez ainsi une nouvelle copie sur laquelle travailler lorsque vous aurez besoin d'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 tout nouveau travail dessus.