Bonjour à tous, je suis Boniface web entrepreneur et aujourd'hui, je vous présente un guide détaillé sur la façon d'implémenter et de se servir de l'application TrackingMore pour suivre vos colis en temps réel sur votre boutique Shopify. Pour ceux qui ne connaissent pas encore cette innovation, l'outil TrackingMore s'intègre sans peine sur Shopify et vous permet d'offrir à vos clients une méthode de suivi de colis efficace et transparente.
De nos jours, l'honnêteté et la transparence sont des valeurs qui font la différence dans le choix des consommateurs, mettre à leur disposition un outil de suivi de colis performant peut être un véritable atout pour votre boutique en ligne. C'est pourquoi je vous propose ce tutoriel étape par étape qui va vous aider à non seulement implémenter cette méthode de suivi, mais également à l'exploiter efficacement.
Avant de continuer, si vous débutez en e-commerce ou non, vous pouvez me contactez personnellement pour avoir une boutique premium et un coaching sur mesure en e-commerce. Laissez moi un message à hi@bonifaceebo.com ou via whatsapp.
Mise en place de la page de suivi de colis
Ce processus débute depuis votre administration Shopify. Dans le tableau de bord, accédez à la section "Pages" et cliquez sur "Ajouter une page". Nommez cette page à votre convenance, par exemple "Suivi Colis", et n'oubliez pas d'ajouter un texte descriptif pour plus de clarté et une meilleure optimisation SEO. Une fois ceci fait, enregistrez vos modifications.
Lire aussi : Comment créer une Page de Collection sur Shopify, tutoriel complet
Intégration du code TrackingMore
La prochaine étape consiste à intégrer le code TrackingMore sur votre page créée. Vous trouverez le code juste en dessous. Il y a deux versions du code; l'une sans transporteur et l'autre spécifique à La Poste. Copy-collez le code que vous choisissez et collez-le sur le champ texte de votre page en passant en mode code pour faciliter l'intégration.
Code de suivi avec auto-détection du service de transport
<div style="max-width: 800px; margin: 0 auto; padding: 20px;">
<h1 style="color: #FF6700; text-align: center;">Suivi de Colis - MonEntreprise</h1>
<p style="text-align: center; margin-bottom: 20px;">Bienvenue sur notre page de suivi de colis. Utilisez le formulaire ci-dessous pour suivre l'état de votre livraison en temps réel.</p>
<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" style="display: flex; justify-content: center; margin-bottom: 15px;">
<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; padding: 10px; flex-grow: 1; max-width: 300px;">
<span class="TM_input-group-btn">
<button class="TM_my_search_button_style" id="query" type="button"
onclick="return doTrack()" style="background-color: #FF6700; color: white; border: none; padding: 10px 20px; cursor: pointer;">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>
<p style="text-align: center; margin-top: 20px;">Si vous rencontrez des problèmes avec le suivi de votre colis, n'hésitez pas à nous contacter.</p>
</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
<div style="max-width: 800px; margin: 0 auto; padding: 20px;">
<h2 style="color: #FF6700; text-align: center; margin-bottom: 20px;">Suivre mon colis La Poste</h2>
<p style="text-align: center; margin-bottom: 20px;">Entrez votre numéro de suivi ci-dessous pour obtenir les dernières informations sur votre colis La Poste.</p>
<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" style="display: flex; justify-content: center; margin-bottom: 15px;">
<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; padding: 10px; flex-grow: 1; max-width: 300px;">
<span class="TM_input-group-btn">
<button class="TM_my_search_button_style" id="query" type="button"
onclick="return doTrack()"
style="background-color: #FF6700; color: white; border: none; padding: 10px 20px; cursor: pointer;">
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>
<p style="text-align: center; margin-top: 20px; font-size: 0.9em; color: #666;">
Si vous rencontrez des difficultés pour suivre votre colis, n'hésitez pas à contacter notre service client.
</p>
</div>
<style>
#button_tracking_number { border-color: #ff6700 !important; }
.TM_my_search_button_style { background-color: #ff6700 !important; }
</style>Association de la page à un menu
Il est maintenant temps d'associer votre page à un menu depuis la section "Navigation". Ajoutez un élément de menu et sélectionnez votre page "Suivi Colis" précédemment créée. Choisissez où vous souhaitez positionner ce menu sur votre site (main menu ou footer par exemple). Une fois cette étape franchie, vous devriez voir apparaître le lien vers votre page de suivi sur votre site.
Suivi d'un colis avec TrackingMore
Maintenant vos clients peuvent suivre leur colis depuis votre site web sans difficultés.
Lorsqu'un numéro de suivi est renseigné et qu'on clique sur rechercher, l'application fournit de précieuses informations sur l'emplacement et l'état du colis.
Personnalisation de la page de suivi
Un des avantages du système TrackingMore est sa flexibilité. Vous pouvez choisir le transporteur en renseignant son identifiant dans le code du widget. De plus, il est possible de changer les couleurs du bouton et de la bordure de la fenêtre de suivi pour que cela corresponde à votre identité visuelle.
TrackingMore est une application pratique qui vous permet de gérer efficacement et en temps réel le suivi de vos colis sur Shopify. Son implantation est intuitive et ses configurations multiples vous permettent de l'adapter à vos besoins spécifiques.
Si vous avez apprécié cet article, n'hésitez pas à liker et à le partager avec vos amis e-commerçants! À la prochaine!