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.

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="Numéro de suivi" name="button_tracking_number" value="" autocomplete="off" maxlength="100" style="border-color: #ff4a00;"> <span class="TM_input-group-btn"> <button class="TM_my_search_button_style " id="query" type="button" onclick="return doTrack()" style="background-color: #ff4a00;">Suivre mon colis</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:#ff4a00 !important; }
.TM_my_search_button_style { background-color:#ff4a00 !important; }
@media screen and (max-width: 600px) {
.TM_input-group { display:block; }
#button_tracking_number { border-radius:0;  }
.TM_my_search_button_style { margin-top:15px; display:block; width:100%; border-radius:0;  }
}
</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="Numéro de suivi" name="button_tracking_number" value="" autocomplete="off" maxlength="100" style="border-color: #ff4a00;"> <span class="TM_input-group-btn"> <button class="TM_my_search_button_style " id="query" type="button" onclick="return doTrack()" style="background-color: #ff4a00;">Suivre mon colis</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:#ff4a00 !important; }
.TM_my_search_button_style { background-color:#ff4a00 !important; }
@media screen and (max-width: 600px) {
.TM_input-group { display:block; }
#button_tracking_number { border-radius:0;  }
.TM_my_search_button_style { margin-top:15px; display:block; width:100%; border-radius:0;  }
}
</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 !

Bon tuto à tous 😉

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 19 votes]

Cet article a 37 commentaires

  1. Hi,
    plus simple y a pas.
    Merci

  2. 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. Hello, ok merci je vais voir si je peux adapter cela pour mobile 🙂

      1. ok pas de souci 🙂 Merci bien 😉 Super tuto encore une fois sinon 🙂

  3. 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. Hello, cool 😉 et merci pour le message !

  4. super, mais c’est possible de cacher le nom de l’expéditeur?

    1. Hello, non navré on a pas la main sur ça

  5. 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 🙂

  6. 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. 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 🙂

  7. le premier code ca me donne un erreur : parsererror:Error: jQuery17105585512976592419_1590488056766 was not called

    1. hummm je vais ressayer plustard ca me fait la meme erreur directement sur le site de trackingmore…

      1. Hello, surement une mise à jour ou un bug temporaire du plugin 🙂

  8. 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. Hello, bonne idée 🙂 j’ai mis à jour le tuto pour ce cas de figure 😉

  9. Au top ça fonctionne très bien, pour une fois qu’il n’est pas nécessaire de trifouiller dans le code haha !

  10. 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.

  11. Super tuto, mais j’ai un problème, le « suivre mon colis » n’est pas centré sur pc !

      1. 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 🙂

  12. merci dgeo dev

  13. 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. 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 🙂

  14. Merci pour le partage.
    Lequel est bon pour la marche canadien et Français en même temps.
    Merci infiniment.

    1. Hello, à ca je ne sais pas navré 🙁

  15. 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. Hello, oula je ne sais pas trop navré. Il faudrait voir avec le support de cette app pour voir le soucis 🙂 bonne soirée.

  16. 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. Hello et Merci, malheureusement non car ils ne proposent pas de widget distant.

  17. 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 !

  18. 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. Hello, il doit avoir un conflit avec votre thème 🙁 le mieux serait de demander à leur support

      1. 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…

  19. 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. 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 🙂

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine