Comment installer une heatmap sur votre boutique Shopify (sans application, une seule ligne de code)

Résumé de l'article

• Ajouter une heatmap à Shopify ne nécessite que de coller une seule ligne de code dans theme.liquid — aucune application à installer
• Dupliquez toujours votre thème comme sauvegarde avant de le modifier. Les changements prennent effet dès l'enregistrement — contrairement à STUDIO, il n'y a pas d'étape de republication séparée
• Les pages de paiement n'exécutent pas le code du thème, elles ne sont donc pas suivies. Le succès se mesure par une augmentation réelle du compteur dans le tableau de bord HeatMapX — pas seulement par « aucune erreur »

Vous vous demandez si vous pouvez ajouter une heatmap à votre boutique Shopify sans installer d'application ? C'est possible. Shopify vous permet de coller une seule ligne de code de balise directement dans votre thème, sans application requise. Ce guide détaille l'étape de sauvegarde à toujours effectuer en premier, comment ajouter la balise, comment vérifier qu'elle fonctionne, et quelques points de vigilance.

Étape 1 : obtenez votre clé de site

Commencez par vous inscrire sur HeatMapX (un plan gratuit est disponible), enregistrez votre boutique, et obtenez votre clé de site. Aucune carte de crédit n'est requise.

Une fois votre clé de site obtenue, utilisez la balise ci-dessous, en remplaçant YOUR_SITE_KEY par la clé qui vous a été attribuée.

<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>

Étapes : ajouter la balise à theme.liquid

1. (Obligatoire) Dupliquez votre thème comme sauvegarde

Avant de modifier directement le code, dupliquez toujours votre thème actuel en premier. Dans votre back-office Shopify, allez dans Boutique en ligne → Thèmes, repérez votre thème publié, cliquez sur le menu « … » (actions), et choisissez Dupliquer. Cela vous donne une copie de secours vers laquelle revenir en cas de problème. Sauter cette étape signifie que vous n'aurez aucun moyen d'annuler une modification erronée.

2. Ouvrez l'éditeur de code

1. Dans votre back-office Shopify, allez dans Boutique en ligne → Thèmes
2. Sur votre thème publié, cliquez sur le menu « … » (actions) et choisissez Modifier le code
3. Un navigateur de fichiers pour votre thème s'ouvrira à gauche

3. Ajoutez la balise dans layout/theme.liquid

1. Dans la liste des fichiers, ouvrez le dossier « Layout » et cliquez sur theme.liquid
2. Recherchez </head> dans le fichier et collez la balise ci-dessus juste avant
3. Enregistrez le fichier

4. Enregistrer suffit — pas besoin de republier

Sur Shopify, la modification du code du thème prend effet dès son enregistrement. Contrairement à STUDIO, il n'y a pas d'étape distincte de « publication » ou de « republication ». Une fois l'enregistrement effectué, votre boutique en ligne a déjà chargé la balise.

Comment vérifier que ça fonctionne réellement

Une fois la balise ajoutée, parcourez quelques pages de votre boutique. Mais voici le point important.

Le fait qu'une page se charge sans erreur n'est pas la même chose qu'un suivi réellement fonctionnel. Même si la console de votre navigateur n'affiche aucune erreur, une clé de site mal saisie ou une balise collée au mauvais endroit peuvent signifier qu'aucune donnée n'atteint jamais HeatMapX.

La seule vérification fiable consiste à ouvrir le tableau de bord HeatMapX, retrouver votre site dans la liste des sites, et confirmer que son compteur a réellement augmenté. Après avoir visité quelques pages — pages produits, pages de collection, etc. — si le compteur augmente, votre installation fonctionne.

Points de vigilance

Les pages de paiement ne sont pas suivies

La balise que vous avez ajoutée à theme.liquid s'exécute sur votre boutique en ligne — page d'accueil, pages produits, pages de collection et panier — mais elle ne s'exécute pas sur les pages de paiement (les pages de règlement sous /checkouts/). Le paiement est hébergé directement par Shopify, séparément de votre thème, et le code du thème provenant de theme.liquid n'y est jamais chargé. Si vous constatez l'absence de données pour les pages de paiement dans votre tableau de bord, il s'agit d'un comportement normal, pas d'un bug.

Changer de thème implique de réajouter la balise

La balise n'existe que dans le fichier theme.liquid du thème que vous avez modifié. Si vous passez ultérieurement à un autre thème (en publiant un nouveau thème), son theme.liquid ne reprendra pas automatiquement la balise. Chaque fois que vous changez de thème, répétez les mêmes étapes pour ajouter la balise au nouveau thème.

FAQ

Q. Est-ce que cela va ralentir ma boutique ? R. La balise se charge de manière asynchrone et est légère, donc l'impact sur la vitesse de chargement des pages est minime.

Q. J'ai ajouté la balise, mais le compteur du tableau de bord n'augmente pas R. La cause la plus fréquente est une clé de site incorrecte — coller la clé d'un autre site, ou un caractère perdu lors de la copie. Vérifiez également que les pages testées sont bien des pages de la boutique en ligne (accueil, produit, collection) et non des pages de paiement, puisque le paiement n'est jamais suivi.

En résumé

Ajouter une heatmap à Shopify se résume à coller une ligne de code dans theme.liquid — sans application requise. HeatMapX est gratuit pour démarrer, alors essayez-le et découvrez comment vos clients vivent réellement votre boutique.