Nous allons voir dans ce tutoriel comment installer un système de tracking sur Shopify permettant au client de suivre son colis. En effet le suivi de vos colis sur Shopify est primordial pour que vos clients puissent suivre l’état de leur commande en temps réel. De plus cela va grandement diminuer votre SAV et ça c’est bon à prendre 😀

Le service proposé sera celui de Trackingmore, c’est le plus efficace étant proposé en widget Gratuit. Si vous avez besoin d’un système de tracking plus évolué il faudra vous tourner vers une application payante comme Trakr, AfterShip ou Tracking Génie.

Une autre alternative : https://extcall.17track.net/fr

Comment installer le service de Tracking dans une page Shopify

Créez tout simplement une page qui vous allez nommer « Suivre mon colis« . Ensuite passer en mode code </> (l’icône en haut à droite de votre éditeur) et copiez/collez le code ci-dessous:

Code de suivi avec auto-détection du service de transport

<script type="text/javascript" src="//s.trackingmore.com/plugins/v1/buttonCurrent.js"></script>

<div style="width: 100%;margin:0 auto;text-align:center;">
<form role="form" action="//track.trackingmore.com" method="get" onsubmit="return false">
<div class="TM_input-group">
<input type="text" class="TM_my_search_input_style " id="button_tracking_number" placeholder="Renseignez le n° de suivi" name="button_tracking_number" value="" autocomplete="off" maxlength="100" style="border-color: #FF6700">
<span class="TM_input-group-btn">
<button class="TM_my_search_button_style " id="query" type="button" onclick="return doTrack()" style="background-color: #FF6700">Rechercher</button>
</span>
</div>
<input type="hidden" name="lang" value="fr" />
<input id="button_express_code" type="hidden" name="lang" value="" />
</form>
<div id="TRNum"></div>
</div>
<style><!--
#button_tracking_number { border-color:#ff6700 !important; }
.TM_my_search_button_style { background-color:#ff6700 !important; }
--></style>

Code de suivi uniquement pour la Poste

<script type="text/javascript" src="//s.trackingmore.com/plugins/v1/buttonCurrent.js"></script>

<div style="width: 100%;margin:0 auto;text-align:center;">
<form role="form" action="//track.trackingmore.com" method="get" onsubmit="return false">
<div class="TM_input-group">
<input type="text" class="TM_my_search_input_style " id="button_tracking_number" placeholder="Renseignez le n° de suivi" name="button_tracking_number" value="" autocomplete="off" maxlength="100" style="border-color: #FF6700">
<span class="TM_input-group-btn">
<button class="TM_my_search_button_style " id="query" type="button" onclick="return doTrack()" style="background-color: #FF6700">Rechercher</button>
</span>
</div>
<input type="hidden" name="lang" value="fr" />
<input id="button_express_code" type="hidden" name="lang" value="laposte" />
</form>
<div id="TRNum"></div>
</div>
<style><!--
#button_tracking_number { border-color:#ff6700 !important; }
.TM_my_search_button_style { background-color:#ff6700 !important; }
--></style>

Si vous souhaitez le mettre en Anglais il suffira de modifier la portion de code suivante : name="lang" value="fr" par name="lang" value="en" et les textes 😉

Et niveau design on peut faire quelque chose ?

Bien sur 😉 si vous voulez modifier la couleur de la bordure et le fond du bouton vous pouvez modifier les couleurs hexadécimales de la portion de code tout en bas !

Pour la bordure
#button_tracking_number { border-color:#ff4a00 !important; }

Pour le fond du bouton
.TM_my_search_button_style { background-color:#ff4a00 !important; }

Il ne vous reste plus qu’à tester avec une commande en cours pour voir si tout fonctionne correctement ! au besoin des numéros pour tester :

International : 9261290312833844954982
La poste : 6Q01929938641

Bon tuto à tous 😉

Merci de me laisser une petite note 😉

[Note moyenne de: 5 sur 42 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

« Comment créer un encart Offre Spéciale sur Shopify

Comment créer un bouton ajouter au panier dans les collections sur Shopify »

Cet article a 68 commentaires

Peter
19 Mai 2020 Répondre

Hi,
plus simple y a pas.
Merci
Max Harder'Z
19 Mai 2020 Répondre

Nickel 🙂 Merci bien 🙂 J’avais une autre appli de tracking, du coup j’ai enlevé pour mettre ça et ça fonctionne impec 😉 Je suis encore une fois tombé dessus par hasard mais par-contre la taille du conteneur ellene s’adapte pas en mobile. Là où on doit écrire le numéro ça se met en petit et le lien en carrément grand.
1. Dgeo Dev
  19 Mai 2020 Répondre
  
  Hello, ok merci je vais voir si je peux adapter cela pour mobile 🙂
  1. Max Harder'Z
    19 Mai 2020 Répondre
    
    ok pas de souci 🙂 Merci bien 😉 Super tuto encore une fois sinon 🙂
Christophe
21 Mai 2020 Répondre

Bonjour, cela fonctionne très bien. Merci. Sur mon mobile (iPhone 6s Plus) cela s’adapte sans soucis. Votre site et vos conseils sont Top !.
1. Dgeo Dev
  21 Mai 2020 Répondre
  
  Hello, cool 😉 et merci pour le message !
akaa
21 Mai 2020 Répondre

super, mais c’est possible de cacher le nom de l’expéditeur?
1. Dgeo Dev
  21 Mai 2020 Répondre
  
  Hello, non navré on a pas la main sur ça
Justine
25 Mai 2020 Répondre

Bonjour
Possible d’avoir un aperçu du système sur un site ?
Sujet à part, auriez-vous une technique pour ajouter du texte aux collections sous les produits ?
Je voudrais ajouter du contenu mais si je met tout dans la description de la collection on doit trop scroller pour voir les produits.
Et du coup si j’édite la page collection directement pour mettre en pied de page j’ai le même texte pour toutes les collections donc ça ne va pas
Merci 🙂
1. Dgeo Dev
  27 Mai 2020 Répondre
  
  Hello, on peut voir le résultat ici : https://dgeodev.myshopify.com/pages/suivre-mon-colis
  malheureusement non on peut pas rajouter une description en plus de celle proposée par shopify mais ca sera bientôt possible sur Speedfly
Patrick
25 Mai 2020 Répondre

Hello,
Mon commentaire a été supprimé. Comment cela se fait il svp ? Je disais juste que çà ne fonctionnait pas avec CJPacket et demandait s’il y avait une explication. Je ne comprends pas trop la raison de cette suppression, il n’y avait pourtant rien de mal 🙁
1. Dgeo Dev
  27 Mai 2020 Répondre
  
  Hello, euh non je ne supprime pas les commentaires ça doit être une erreur 🙂 pour CJPacket il faudrait voir sur tracking more si il le propose car c’est au niveau de leur code que cela ce gère 🙂
Patrick Paquet
26 Mai 2020 Répondre

le premier code ca me donne un erreur : parsererror:Error: jQuery17105585512976592419_1590488056766 was not called
1. Patrick Paquet
  26 Mai 2020 Répondre
  
  hummm je vais ressayer plustard ca me fait la meme erreur directement sur le site de trackingmore…
  1. Dgeo Dev
    27 Mai 2020 Répondre
    
    Hello, surement une mise à jour ou un bug temporaire du plugin 🙂
Anonyme
27 Mai 2020 Répondre

Bonjour,y’a t’il une possibilité pour changer la langue car personnellement je ne vends pas sur le marché français sinon très bon tutos .Merci
1. Dgeo Dev
  27 Mai 2020 Répondre
  
  Hello, bonne idée 🙂 j’ai mis à jour le tuto pour ce cas de figure 😉
Anaïs
1 Juin 2020 Répondre

Au top ça fonctionne très bien, pour une fois qu’il n’est pas nécessaire de trifouiller dans le code haha !
Alexis
1 Juin 2020 Répondre

Hello, très bon tuto mais ça me marque « le suivi de commande n’est pas configuré » une fois que je clique sur le lien.
Nohan
3 Juin 2020 Répondre

Super tuto, mais j’ai un problème, le « suivre mon colis » n’est pas centré sur pc !
1. Nohan
  3 Juin 2020 Répondre
  
  Voici un capture d’écran de mon problème
  https://www.zupimages.net/viewer.php?id=20/23/xscx.png
  1. Dgeo Dev
    4 Juin 2020 Répondre
    
    Hello, c’est à cause du thème 🙁 il doit mettre une marge à gauche, il faudrait la réinitialiser. demander au support du thème du coup 🙂
fabien
5 Juin 2020 Répondre

merci dgeo dev
romgab94
20 Juin 2020 Répondre

Bonjour, j’ai testé et effectivement l’astuce fonctionne à merveille!!! Ca remplace une app éventuelle.
MAIS… (car il y a toujours un mais…)… et pas des moindres : lorsqu’on utilise le code qui détecte automatiquement le service de transport, si on a le malheur d’utiliser Ali Express Standard Shipping, la fenêtre de tracking trahi le dropshipping en affichant le nom du service de transport!!! Dommage.

Désormais j’utilise TrackHive, une app Shopify permettant de faire la même chose, avec la possibilité de customiser la page de suivi et bien d’autres fonctionnalités, etc…, sans pour autant montrer les infos « compromettantes »lol. Le seul bémol : pas de détection auto du transporteur, obligé de le saisir à la main pour chaque n° de suivi. Mais je préfère ça plutôt que l’autre inconvénient.

https://apps.shopify.com/trackhive

TrackHive est complètement gratuit : https://www.trackhive.co/pricing/
1. Dgeo Dev
  20 Juin 2020 Répondre
  
  Hello, as-tu testé le 2ème code qui empêche l’auto détection du service de transport en ne prendant en compte que la poste ?, le code est un peu plus bas dans le tuto 😉 sinon merci pour le partage de cette app 🙂
Ibrahima DIATTA
18 Sep 2020 Répondre

Merci pour le partage.
Lequel est bon pour la marche canadien et Français en même temps.
Merci infiniment.
1. Dgeo Dev
  18 Sep 2020 Répondre
  
  Hello, à ca je ne sais pas navré 🙁
raphael
22 Sep 2020 Répondre

Hello, merci pour tout ces tutos! Apres avoir installé l’app Trackingmore, une page Suivi Colissimo s’est automatiquement créée sur mon site et elle reste sur Please wait (Merci de patienter)… Je ne vois pas ou modifier le code non plus, merci si vous pouvez m’éclairer sur la demarche a suivre
1. Dgeo Dev
  22 Sep 2020 Répondre
  
  Hello, oula je ne sais pas trop navré. Il faudrait voir avec le support de cette app pour voir le soucis 🙂 bonne soirée.
Kevin Goudjil
3 Oct 2020 Répondre

Salut,

Super tuto,

Y’aurait-il moyen de faire le code en fonction du site : parcelsapp.com qui ne permet pas d’identifier le transporteur (si c’est aliexpress) et qui track les colis dans le monde entier ?
1. Dgeo Dev
  5 Oct 2020 Répondre
  
  Hello et Merci, malheureusement non car ils ne proposent pas de widget distant.
Alexandre
20 Nov 2020 Répondre

Bonjour et merci pour le tuto !

Je viens de l’intégrer à mon site et je vous remercie cependant en faisant un test j’obtiens cette erreur :

parsererror:Error: jQuery17104971xxxxxxxxxxx was not called (j’ai juste remplacé « la-poste » par « cj-dropshipping »)

Cela vous dit quelque chose ?

Merci !
Ryan
21 Nov 2020 Répondre

Bonjour j’ai une question par rapport au suivi de commande sur les boutiques Shopify, il y a bien écrit suivi de commandes mais je ne peux pas entrer de code. la barre de recherche a disparu
1. Dgeo Dev
  23 Nov 2020 Répondre
  
  Hello, il doit avoir un conflit avec votre thème 🙁 le mieux serait de demander à leur support
  1. Alexandre
    25 Nov 2020 Répondre
    
    Bonjour, c’est ce que je pensais mais au fur et à mesure des tests, je n’ai cette erreur qu’avec cj dropshipping. Le test en automatique fonctionne, celui de la poste uniquement aussi…
exbrayat
23 Nov 2020 Répondre

Bonjour , super video par contre je ne sais pas ou trouver mon numero de suivie laposte depuis mon site dsers avec shopify et aliexpress s’il vous plait une réponse ya que sa qui me bloque
1. Dgeo Dev
  24 Nov 2020 Répondre
  
  Hello, ah ça je ne sais pas navré, je ne connais pas dsers. Peut être que vous aurez une réponse de la communauté ci-dessous 🙂
AHU
2 Déc 2020 Répondre

Bonjour ! j’ai mis la version du code qui capte automatiquement tous les transporteurs, mais quand je rentre un numéro de suivi colissimo ; ça demande de chosir entre Colissimo Ou JCEX au lieu de directement afficher le colissimo, est-ce normal ? comment enlever ce ‘jcex’
1. Dgeo Dev
  4 Déc 2020 Répondre
  
  Hello, il faudrait directement voir avec les options du widget car c’est un code externe. https://www.trackingmore.com/en.html 🙂
Antenor
6 Déc 2020 Répondre

Bonsoir, le tuto est excellent mais j’aimerais bien changer en d’autres langues. Est il possible de faire un autre tuto sur ce contexte.

Merci.
1. Dgeo Dev
  6 Déc 2020 Répondre
  
  Hello, c’est possible en changeant les textes et surtout de modifier le value="fr" par value="en"
jerem
8 Déc 2020 Répondre

Bonsoir, ya t’il eu une mise à jour pour CJdropshipping ? car j’ai ce code aussi:

parsererror:Error: jQuery17104971xxxxxxxxxxx was not called (j’ai juste remplacé « la-poste » par « cj-dropshipping »)

merci 🙂
1. Dgeo Dev
  9 Déc 2020 Répondre
  
  Hello, je ne pense pas que cj soit pris en compte désolé
OLIVIA
22 Jan 2021 Répondre

Sur mon site shopify avec Mondial Relait comme livreur et ben il ne fonctionne pas .
Axel
8 Mar 2021 Répondre

Salut merci pour ce tuto c’est super, j’aurais juste une question. Est-il possible de modifier le texte qui s’affiche lorsque la commande n’est pas trouvable ? j’aimerais affiché quelque chose comme : « votre colis est en préparation » afin que le client ne pense pas ne pas pouvoir suivre son colis. Merci.
1. Dgeo Dev
  9 Mar 2021 Répondre
  
  Hello, non navré le widget ne propose pas cela.
Rachid
12 Avr 2021 Répondre

Merci,
on ne peux trouver plus simple.
Un Big Merci pour tes ces conseils.
1. Dgeo Dev
  12 Avr 2021 Répondre
  
  Hello, merci pour le com 😉
Sacha
19 Mai 2021 Répondre

Salut je ne comprend pas pourquoi mais cela m’affiche en doublon. J’ai essayé avec les 2 codes et cela me fait des doublons et impossible d’en supprimer 1 sans supprimer l’autre.
1. Dgeo Dev
  20 Mai 2021 Répondre
  
  Hello, étrange un lien peut etre ?
Osman
1 Août 2021 Répondre

Salut Dgeo Dev,

J’ai mis Livraison Colissimo offert dans mon site, du coup je peux remplacer le « //track.trackingmore.com » par l’URL du site de Colissimo ?

Merci pour ton retour,

A bientôt
1. Dgeo Dev
  5 Août 2021 Répondre
  
  Hello, non c’est pas si simple il faut regarder sur colissimo propose son propre widget à intégrer sur un site en HTML 🙂
Aaron-Steeven Modukpe ADETOLA
23 Sep 2021 Répondre

Les suivis de commandes sont créer par nous lorsqu’on traite une commande via shopify non ?
1. Dgeo Dev
  26 Sep 2021 Répondre
  
  Hello, shopify fournit des templates de notifications mails pré-configurés
colin
2 Fév 2022 Répondre

bonjours ce tuto est top cependant j’ai quelque problème , le suivie de colis s’affiche sur toute mes page de mon site j’ai donc voulu supprimer la page et après supprimer la page avec le code , le suivie de colis s’affiche toujours sur mon site , j’ai pourtant bien enregistré rien a faire ca reste sur mon site
1. Dgeo Dev
  3 Fév 2022 Répondre
  
  Hello, visiblement vous l’avez mis dans un fichier peut être non ? car ca expliquerait sa présence partout 🙂
  1. colin
    3 Fév 2022 Répondre
    
    c’est a dire dans un fichier ? , A par dans ajouter une nouvelle page je l’ai mie nul part
    1. Dgeo Dev
      4 Fév 2022 Répondre
      
      Difficile à dire. le mieux serait de revenir à une version dupliquée et sauvegardée que vous avez du faire avant de faire le tuto comme je le conseille 🙂 comme ça retour en arrière et plus de soucis 🙂
colin
2 Fév 2022 Répondre

bonjours pourquoi supprimez vous mon commentaire ? j’aimerai juste savoir comment enlever cette fonctionnalité de mon site
1. Dgeo Dev
  3 Fév 2022 Répondre
  
  Hello, je ne supprime rien… les commentaires sont juste en attente de modération 😉
colin
2 Fév 2022 Répondre

super video je recommande
1. Dgeo Dev
  3 Fév 2022 Répondre
  
  Merci 🙂
Mathieu
11 Juin 2022 Répondre

Ouiais merci c’est super
GRONDIN
26 Juil 2022 Répondre

Encore merci pour ce tuto facile et rapide à mettre en place
Nadia
25 Déc 2022 Répondre

Bonsoir,

Merci pour votre aide ce code marche trés bien !
Je voulais juste savoir si il était possible de rajouter une petite phrase en dessous de la « barre de tracking » pour dire par exemple que le délai de livraison est de 10-12 jours maximum afin de rassurer les clients.
Si cela est possible où faut il rajouter cette phrase dans le code svp
1. Dgeo Dev
  6 Jan 2023 Répondre
  
  Hello, c’est possible simplement en dessous du code et ce servant tout simplement de l’éditeur shopify et rajoutant du texte 🙂
Coudray
17 Juin 2023 Répondre

Bonjour, comment faire pour que le script n’ouvre pas une nouvelle page mais reste sur le site en question en cliquant sur « rechercher » comme sur la vidéo ça montre que c’est intégré a la page (pas chez moi, ça ouvre sur une autre fenetre)
ps: j’ai le theme speedfly 4.5.2
merci
1. Dgeo Dev
  26 Juin 2023 Répondre
  
  Hello, oui c’est normal c’est une mise à jour du site en question et on ne peut malheureusement rien y faire et c’est vraiment dommage vous vous l’accorde 🙁

Comment installer le service de Tracking dans une page Shopify

Code de suivi avec auto-détection du service de transport

Code de suivi uniquement pour la Poste

Et niveau design on peut faire quelque chose ?

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Vous devriez également aimer

Comment mettre automatiquement à jour le prix du panier au changement de quantité sur shopify ?

Comment mettre un système d’auto-complétion sur le moteur de recherche de Shopify ?

Comment créer un carrousel d’images sur Shopify

Cet article a 68 commentaires

Peter

Max Harder'Z

Dgeo Dev

Max Harder'Z

Christophe

Dgeo Dev

akaa

Dgeo Dev

Justine

Dgeo Dev

Patrick

Dgeo Dev

Patrick Paquet

Patrick Paquet

Dgeo Dev

Anonyme

Dgeo Dev

Anaïs

Alexis

Nohan

Nohan

Dgeo Dev

fabien

romgab94

Dgeo Dev

Ibrahima DIATTA

Dgeo Dev

raphael

Dgeo Dev

Kevin Goudjil

Dgeo Dev

Alexandre

Ryan

Dgeo Dev

Alexandre

exbrayat

Dgeo Dev

AHU

Dgeo Dev

Antenor

Dgeo Dev

jerem

Dgeo Dev

OLIVIA

Axel

Dgeo Dev

Rachid

Dgeo Dev

Sacha

Dgeo Dev

Osman

Dgeo Dev

Aaron-Steeven Modukpe ADETOLA

Dgeo Dev

colin

Dgeo Dev

colin

Dgeo Dev

colin

Dgeo Dev

colin

Dgeo Dev

Mathieu

GRONDIN

Nadia

Dgeo Dev

Coudray