Quand un acheteur se promène sur votre boutique e-commerce il est important de ne pas le perturber dans son acte d’achat. Vous allez découvrir pourquoi je vais à l’encontre de la méthode tunnel de commande épuré.
Un tunnel de vente optimisé ?
Le concept du tunnel de commande optimisé c’est de limiter les actions de l’utilisateur et de le guider progressivement vers l’étape où il va pouvoir payer (et là vous criez Youpie !). Sur cette méthode je suis très partagé, car il faut optimiser les bons emplacements pour que cela soit efficace.
Prestashop a pris la décision dans sa version 1.7 de masquer le menu, le pied de page et la barre de recherche dans la partie commande et authentification du client. Ce que je n’aime pas c’est que l’interface ne se transforme pas « progressivement »… on assiste à un masquage brutal des éléments qui donne l’impression que le shop est en train de buguer.
Du coup mon concept c’est d’aller à l’encontre de cette manière de faire et de remettre un header et un footer permanent pour que la navigation sur le shop soit toujours constante et identique afin de ne pas perturber l’acheteur. Actuellement ce qui a été fait sur le nouveau thème Prestashop 1.7 est pour moi plus « choquant » que véritablement une « bonne optimisation ».
Il faut dire aussi que ce n’est pas encore une pratique très répandue sur la plupart des boutiques e-commerce (oui chez des grandes entreprises), mais bien souvent on s’en rend même pas compte. En tout cas sur des Prestashop, j’ai toujours vu un footer et un header complet permanent (même sur la nouvelle génération de thèmes Prestashop 1.7 développés par des créateurs de templates).
C’est donc une bonne idée sur le principe, mais encore perfectible de la part de Prestashop. Je pense qu’il serait intéressant de proposer aussi une option en back-office pour laisser au marchand l’opportunité de choisir s’il veut ce comportement ou non. Allez GO pour l’optimisation !
Ressources
Pour ce tutoriel vous aurez à disposition :
- 1 x fichier checkout.tpl (avec le header / footer optimisé)
- 1 x fichier custom.css (avec le réajustement des règles par défaut)
Résumé de la vidéo : un header et un footer constant pour Prestashop 1.7
- Brève mention sur l’importance de la réussite d’un e-commerce, n’oubliez jamais le succès dépend de vous et de votre motivation.
- Le but principal c’est de ne pas perturber l’acheteur, il ne doit pas avoir un sentiment de méfiance dans le tunnel de commande.
- Remplacement du code du header + footer dans le fichier « checkout.tpl ».
- Intégration des nouvelles règles CSS dans le fichier « custom.css ».
- Comparaison du résultat avant / après et conclusion.
Hello Germain,
Ton approche est intéressante mais pourquoi les grands du e-commerce comme Amazon et la Fnac par exemple en France propose un header minimaliste sans interaction dans le tunnel d’achat ?
L’idée est d’isoler l’acheteur pour qu’il soit plus concentré sur son achat. J’avais rédigé un article complémentaire sur le sujet pour améliorer la conversion dans le tunnel d’achat : https://www.arnaud-merigeau.fr/22-astuces-pour-diminuer-labandon-panier-sur-prestashop/
En tout cas, je garde sous le coude 😉
A bientôt !
Salut Arnaud,
La méthode d’isolement pour améliorer la conversion est une bonne idée, mais dans ce thème Prestashop 1.7 je suis pas trop fan de la méthode de masquage, je trouve que ça manque d’harmonie et ça donne une impression que le thème s’est chargé à moitié (c’est mon avis personnel).
Merci d’avoir partagé ton expérience !
Autre solution très simple pour garder son header/footer habituel :
Modifier templates/checkout/checkout.tpl et pointer le header.tpl dans « _partials » plutôt que celui de « checkout ». Et on se retrouve avec les headers / footers du site.
Il manque clairement une option dans le backoffice pour choisir de basculer en mode tunnel (ou pas).
{block name='header'} {* include file='checkout/_partials/header.tpl' *} {include file='_partials/header.tpl'} {/block}et
{block name='footer'} {* include file='checkout/_partials/footer.tpl' *} {include file='_partials/footer.tpl'} {/block}