La confirmation de commande est la pire page de votre boutique

Quelqu’un vient d’acheter dans votre boutique. Il a vu une page d’accueil soignée, des fiches avec de belles photos et un panier qui marche. Trente secondes plus tard il reçoit l’e-mail de confirmation, l’ouvre sur son mobile et tombe sur un tableau gris à cinq colonnes serrées et une ligne en bas qui dit « powered by PrestaShop ».

Cet e-mail est la page de votre boutique que le plus de gens ouvrent. Une confirmation de commande s’ouvre presque toujours, et souvent deux fois : à la réception et quand le livreur arrive. Aucune page de votre site n’a ce taux. Et c’est la seule qui a encore l’allure du jour où vous avez installé PrestaShop.

Pourquoi ils sortent comme ça

Votre boutique envoie beaucoup d’e-mails différents : la confirmation, le compte créé, le mot de passe, l’expédition, le retour, l’alerte à l’entrepôt, plus ceux qu’ajoute chaque module que vous installez. Combien exactement dépend de ce que vous avez installé, mais c’est bien plus que ce que l’on croit. Chacun est un fichier HTML dans le dossier mails, un par langue, écrit il y a plus de dix ans avec des tableaux et des balises <font>.

Changer le thème de votre boutique n’y touche pas. Changer les couleurs du thème non plus. Ce sont des fichiers à part, et ils vivent en dehors de tout ce que vous avez personnalisé.

Un détail aggrave les choses : chaque mise à jour de PrestaShop les remplace. Si quelqu’un les a modifiés à la main en 2022, ce travail a disparu à la montée de version suivante sans que personne s’en aperçoive, et la boutique s’est remise à envoyer l’e-mail d’usine.

Le tableau que personne ne peut lire sur mobile

Le problème le plus coûteux est dans l’e-mail le plus important. La liste de produits de la confirmation est un tableau à cinq colonnes : référence, produit, prix unitaire, quantité et total.

Sur un ordinateur, ça se lit. Sur un mobile de 360 pixels, les quatre colonnes de chiffres en prennent environ deux cent cinquante, et il reste quatre-vingts pixels au nom du produit. « T-shirt technique à manches longues » se coupe en cinq lignes de deux mots, ou l’e-mail entier déborde de l’écran et il faut le faire glisser.

Achetez quelque chose dans votre propre boutique et ouvrez la confirmation sur votre téléphone. C’est le test le plus rapide, et le plus gênant.

Et il y a une deuxième chose qui saute aux yeux quand on regarde : le bloc des totaux affiche toujours ses cinq lignes, même quand il n’y a rien à dire. Une commande sans remise affiche « Remises 0,00 € ». Un catalogue avec TVA incluse affiche « Taxes 0,00 € ». Et une livraison offerte —qui est un argument de vente— apparaît comme « Livraison 0,00 € » au lieu de dire « Offerte ».

L’autre problème : renvoyer la confirmation

Cela arrive dans toutes les boutiques. Le client écrit en disant qu’il n’a jamais reçu l’e-mail de commande, qu’il l’a supprimé par erreur, ou qu’il s’est trompé en tapant son adresse. Vous ouvrez la commande dans le back-office pour le lui renvoyer… et aucun bouton ne le fait.

Pour les e-mails de statut, il y en a un. Dans l’historique des statuts de chaque commande, chaque ligne porte son icône de renvoi : « Paiement accepté », « Préparation en cours », « Expédié ». Cela marche parce qu’un changement de statut est enregistré comme une ligne, et cette ligne peut resservir.

La confirmation de commande n’est pas un changement de statut. PrestaShop l’envoie une seule fois, depuis le processus qui valide la commande, et il ne conserve ni la ligne ni les variables avec lesquelles il l’a composée. L’information est toujours là — les produits, les montants, les adresses, le transporteur — mais l’e-mail doit être refait entièrement pour repartir.

Ce qu’on fait en attendant a un coût : recopier les données dans un e-mail écrit à la main, qui arrive sans le design de la boutique et avec le risque de se tromper sur un montant ; ou changer le statut de la commande pour provoquer un envoi, ce qui salit l’historique et livre au client un e-mail qu’il ne demandait pas.

Et il faut savoir ce qui est renvoyé exactement, car ce n’est pas une copie enregistrée du premier e-mail : le module le recompose à partir de la commande telle qu’elle est aujourd’hui. Si vous avez corrigé l’adresse, retiré une ligne ou changé de transporteur entre-temps, l’e-mail qui part contient ces données et non celles du jour de l’achat. Seule la date de la commande ne change pas. Pour le cas courant — « je n’ai rien reçu » — c’est exactement ce que vous voulez : que le client reçoive la bonne information, pas l’ancienne.

Les trois façons de le corriger

1. Le thème d’e-mail du back-office

Depuis la version 1.7.6, PrestaShop livre un générateur de thèmes d’e-mail. Vous en choisissez un, vous cliquez sur « Générer » et il réécrit les fichiers de mails avec un autre design.

C’est le plus rapide, avec deux limites à connaître avant de commencer. La première : il écrit toujours des fichiers, donc une mise à jour de PrestaShop peut les réécrire et il faut régénérer. La seconde : les thèmes disponibles sont peu nombreux et la place pour votre marque est étroite — vous changez le logo et guère plus.

2. Modifier les fichiers à la main

Ça marche et ça donne le contrôle total. C’est aussi un fichier par e-mail et par langue : le compte s’envole dès deux langues, et il faut recommencer à chaque module installé qui apporte ses propres e-mails.

C’est la voie de qui a une seule langue, n’a pas peur du HTML d’e-mail et va toucher trois ou quatre modèles, pas tous.

3. Intervenir au moment de l’envoi

PrestaShop prévient par quelques hooks juste avant d’envoyer chaque e-mail. On peut y changer le contenu à la volée, sans toucher un seul fichier de mails.

Cela a un avantage que les deux autres n’ont pas : comme aucun fichier n’est écrit, il n’y a rien qu’une mise à jour puisse emporter. Et comme le changement se produit à l’envoi, il atteint aussi les e-mails des modules que vous installerez demain.

Ce qu’il faut vérifier avant de toucher à quoi que ce soit

Quelle que soit la voie choisie, cinq choses méritent une vérification dans votre boutique cet après-midi :

1. Ouvrez un vrai e-mail sur votre mobile. Pas l’aperçu du back-office : passez une commande de test et ouvrez-la sur votre téléphone.
2. Vérifiez que vos e-mails partent en HTML. Dans Paramètres avancés → E-mail, si « texte seul » est coché, aucun design ne se verra.
3. Vérifiez si votre thème remplace des modèles. S’il existe un dossier mails dans votre thème, ces fichiers l’emportent sur ceux de PrestaShop.
4. Comptez vos langues. C’est le nombre par lequel tout le travail se multiplie.
5. Essayez de renvoyer une confirmation. Ouvrez une commande de la semaine dernière et cherchez le bouton. Ne pas le trouver, c’est la réponse.

Comment nous l’avons monté

L’éditeur est ce qui empêche que ce ne soit qu’un modèle de plus : on ajoute des blocs —titres, boutons, images, colonnes, la liste des produits—, on clique dans l’e-mail pour les modifier et le résultat apparaît à côté pendant qu’on écrit. Ce n’est pas un aperçu approximatif : il est dessiné par le moteur qui envoie l’e-mail, donc ce que vous voyez est exactement ce que reçoit le client.

Nous nous sommes posé la question pour nos propres boutiques et nous avons fini par la troisième voie. Le résultat est le Designer d’E-mails pour PrestaShop : il s’accroche à l’envoi, n’écrit jamais dans mails et arrive avec les e-mails de votre boutique déjà rédigés en cinq langues, pour que le travail soit d’ajuster et non de partir de zéro.

La liste de produits est remise en page en une ligne par produit —photo, nom, déclinaison et « 2 × 49,99 € » à gauche, montant à droite—, ce qui la rend lisible à 320 pixels sans rien faire glisser. Et les totaux à zéro disparaissent, avec une exception voulue : la livraison offerte le dit avec ce mot.

Et sur la fiche de chaque commande, un bouton renvoie la confirmation au client, dans la langue de la commande et avec ses données réelles : le module refait les variables depuis la commande enregistrée et l’e-mail part par le même chemin que l’original, donc il arrive exactement comme il serait arrivé le premier jour.

À l’intérieur, un éditeur de blocs avec aperçu en direct, cinq thèmes aux typographies différentes et un bouton qui vous envoie n’importe quel e-mail dans votre boîte avant de le laisser tourner. Il est en dessous, avec son prix et ce qu’il fait.