Prestashop panier popup

Simplifier le panier Prestashop pour le rendre plus performant (ép. 114)

Est-ce que vous aimez les vampires ? Sucer le sang ne vous fait pas peur ? Alors c’est parfait, parce qu’on va faire exactement comme Vampirella. On va planter les crocs et laisser uniquement la carcasse de Prestashop, ça effraie au début… mais c’est tellement mieux.

On se dit souvent : « Si c’est fait comme ça alors c’est bien ! »

Peut-être que vous êtes aussi comme moi, en fait pendant très longtemps (surtout au début), j’ai déployé des boutiques Prestashop sans vraiment trop me poser de question, en partant toujours du principe que ce qui était proposé en standard par Prestashop (ou autre solution e-commerce) était optimal.

En fait grave erreur, j’ai mis du temps à comprendre la différence entre « fonctionnel » et « optimisé ». Quand on déploie un Prestashop, qu’on installe un thème Prestashop ou un module… on a souvent quelque chose d’utilisable, mais rarement boosté à 100%.

C’est plutôt une bonne nouvelle en soi, parce que cela laisse aussi une grande marge de progression pour beaucoup d’e-commerçants (imaginez si on était tous à 99% avec des boutiques quasi parfaites, le challenge d’optimisation serait impossible).

Trop de boutiques Prestashop oublient de rester simples

Comme je le dis souvent à mes clients, ce n’est pas le nombre de fonctionnalités qui sont présentent sur votre site e-commerce qui vont vous aider à déclencher des ventes. Il faut dans un 1er temps rester sur une approche basique qui concentre votre énergie sur l’essentiel.

Le plus important est d’avoir des mécanismes simples, minimalistes et optimisés. Le e-commerce a fait des avancées fulgurantes ces dernières années, mais trop d’e-commerce mettent en place des modules superflus. Par exemple, je vois régulièrement des sites e-commerce avec des Wishlist et des boutons partout… Pensez-vous que cela est vraiment indispensable ?

A quoi bon installer une navigation à facette, alors que votre structure de catégories n’est pas optimale et peu enrichie ? Très souvent les basiques sont négligés.

Cette obsession de « toujours + » de fonctionnalités, est souvent liée au fait que l’e-commerçant aimerait vendre plus. Pour cela il est préférable de regarder du côté du SEO Prestashop. Le cerveau de vos clients a une attention limitée (quelques secondes) il faut rester « simple ».

Le comportement d’ajout au panier

L’autre jour quand j’ajoutais un produit au panier en mode mobile sur le site d’un e-commerçant, j’ai vu un pavé « énorme » qui s’affichait à l’écran avec toutes les informations liées au produit, le montant… la photo, le stock, le total et j’en passe…

A ce moment-là, je me suis dit : « C’est fou… j’ai presque l’impression d’être devant un exercice comptabilité (ok j’exagère un peu ». Ce que je veux dire par là c’est pourquoi on ne dit pas simplement « OK produit ajouté » sans aucune autre information de détail.

Si on montre trop d’informations à l’utilisateur, il va se poser des questions. C’est ça aussi le danger, il faut que le client arrive le plus rapidement possible à l’étape du paiement il faut juste lui montrer les informations qu’il a besoin de savoir et accepter de retirer le superflu.

Vous connaissez cette phrase culte de Spiderman ?

Cela fait 1000 ans que je n’ai plus regardé un film (ahaha), mais je me souviens de cette citation « Un grand pouvoir implique de grandes responsabilités ». Et bien dans Prestashop c’est exactement pareil, « Beaucoup de fonctionnalités impliquent de grandes responsabilités ».

Quand vous avez de nombreuses fonctionnalités activées sur Prestashop, certaines fonctionnent parfois à moitié ou mal et pour la partie UX design c’est pareil… (des boutons mal formés, coupés sur certain supports…. des polices non uniformes, des blocs qui débordent, des actions non-testées, etc…).

En théorie tout devrait bien fonctionner, mais souvent la réalité est tout autre. C’est pour cela que plus vous réduisez le nombre de modules « front-office », moins vous aurez besoin d’optimiser votre Prestashop (que ce soit en termes de performances ou ergonomie), plus il sera aussi facile d’accès. Limiter les fonctionnalités c’est faire un très grand pas en avant.

Pas besoin d’être un génie du code ! Mais avoir du bon sens

Vous le savez, je ne suis pas forcément un fan de devoir « coder » beaucoup pour obtenir un résultat conséquent. Quand on parle d’optimisation UX souvent on imagine de réfléchir avec des experts sur l’amélioration de l’interface.

Mais vous allez le voir dans la vidéo ci-dessous, j’essaie de me poser des questions avec vous et finalement si on regarde sur la partie technique je touche 1 seul fichier j’enlève ce qu’il n’y a pas besoin. La méthode est applicable très facilement sur n’importe quelle page du shop.

Sur le processus ajout au panier, on va rendre l’expérience beaucoup plus percutante juste en masquant des zones inutiles. Quand on compare le « avant-après », sincèrement c’est le jour et la nuit. Vous pouvez ensuite appliquer la même logique sur d’autres emplacements de votre boutique Prestashop.

Pour ce tutoriel Prestashop vous avez à disposition :

  • 1 x custom.css (pour améliorer l’action d’ajout au panier)

Télécharger

Résumé de la vidéo : Révisez l’action panier Prestashop en 10 lignes de code

  • Tout d’abord on teste le rendu sur ordinateur, tablette et mobile.
  • Actuellement 1 utilisateur sur 2 verra le rendu sur mobile. Trouvez-vous que l’expérience est pertinente ?
  • Simplement en ajoutant 10 lignes dans le fichier CSS on améliore le rendu de cette action, qui sera exécutée des milliers de fois sur votre boutique (les actions fréquentes nécessitent une attention particulière).
  • L’icône qui va définir l’action doit être aussi percutante.
  • En bonus, on va voir une nouvelle fonctionnalité de Prestashop 1.7.7.0

BOUM !

1 seul mail par semaine - pas de publicité

6 commentaires sur “Simplifier le panier Prestashop pour le rendre plus performant (ép. 114)”

  1. Merci beaucoup Germain.
    Pourras-tu nous montrer comment centrer les boutons si l’on souhaite appliquer cette modif sur tout type d’écran ?
    Bien des choses peuvent être améliorées dans ce panier … Par exemple, si on a plusieurs transporteurs, le tarif affiché est forcément celui du transporteur par défaut …qui n’est pas forcément le choix No1 du client (en fait c’est notre choix No1 !!). Du coût le montant total est faux ….alors que le simple fait de rappeler le prix du produit, des différentes options de livraison sans mettre de prix total pourrait mieux informer le client …Bref, un autre tuto pour améliorer encore cette étape du panier jusqu’à la commande, ce serait top !
    (et ptit retour d’expérience, je fais partie de tes followers qui n’aiment pas les titres qui ne disent pas ce que l’on va voir .. comme celui-ci : « Vampirella aspire le sang du panier » …ça doit être une histoire d’âge !)

    1. Bonjour,

      Oui vous avez tout à fait raison on peut aller beaucoup plus loin dans l’optimisation du panier Prestashop (à voir lors d’un prochain épisode). Bonne remarque le titre du billet est parfois trop « confusant » il est prévu que je fasse un ajustement sur mes derniers posts.

      A bientôt !

  2. Germain, tu es vraiment énorme, j ai réalise mon site grâce a tout tes conseils, merci encore, et en plus tu te prends pas la tète.
    j ai déjà appliquer plus de dix de tes conseils, et mon site ne ressemble plus a celui d’origine tout en gardant une optimisation de simplicité. Il n ai pas encore visible, car mes produits ont besoin d’une certification mais quant ça le serra, je te le dirai. Ainsi tu pourra voir ton travail, et m’apporter des critiques. Cordialement Christophe

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *