Prestashop stimuler les ventes

Prestashop 1.7 – Stimuler le coeur du client (ép. 51)

Pour qu’un acheteur ait une sensation différente sur votre site e-commerce, il faut lui proposer aussi une expérience de navigation « différente » et cela peut aussi passer par l’adaptation de l’impact visuel… car l’oeil du client reste un grand influenceur.

L’émotion en e-commerce VS réalité

Certainement que vous avez un mobile et que vous recevez régulièrement des messages de vos amis… quand votre téléphone fait « bing » ça vous met la pression ? Quand il clignote… pouvez-vous résister 30 minutes ou 1h avant d’aller voir un message ? C’est possible mais, vous devez certainement vous maîtriser. En e-commerce je cherche à faire pareil, je veux que le client se sente obligé de regarder certaines zone chaudes du shop.

Le bouton acheter « Boum Boum »

Voilà une manière oppressante de conditionner l’acheteur, le bouton d’achat peut être animé et faire des pulsations comme le coeur de vos acheteurs (bon à une fréquence plus réduite… il faut quand même rester raisonnable). En faisant animer le bouton d’achat, on sent immédiatement une pression d’achat et l’oeil est forcément attiré par tout ce qui provoque un mouvement à l’écran.

La sensation de rater une affaire

Voilà une stratégie idéale pour conditionner l’acheter, lui donner l’impression qu’il va rater une bonne affaire… pour cet aspect il est aussi intéressant de mettre plus en avant le prix et de par exemple faire un zoom automatique dessus, même si on n’est pas forcément le moins cher. La mise en scène peut parfois suffire à convaincre vos visiteurs, sans devoir forcément sacrifier vos prix.

La vente en ligne joue avec nos émotions

Quand vous faites des commandes en ligne, certainement que vous avez déjà vu des compteurs qui découlent… des stock qui baissent en live devant vos yeux, des notifications visuelles d’un acheteur qui vient d’acheter le même produit (comme par hasard). L’émotion de l’acheteur est souvent sollicitée quand il navigue sur le web, on l’incite même à des jeux… tourner une roue pour gagner une réduction (valable pendant 24h) etc… Vous aussi, vous pouvez vous y mettre !

L’effet CSS à petite dose ! Oui c’est supportable

Avec le CSS on peut mettre en place des effets sympas, il faut juste éviter l’effet sapin de Noël, car à force d’en rajouter cela perd son sens. Dans le cas présent on touchera surtout le visuel du prix et du bouton acheter, mais on pourrait imaginer aussi faire ce type d’effets dans le processus de paiement, afin d’inciter au clic final qui va clore la vente.

Ressources

Pour ce tutoriel vous aurez à disposition :

  • 1 x fichier custom.css (avec les règles de stimulations)

Télécharger

Résumé de la vidéo : conditionner le client pour l’inciter à l’achat sur Prestashop

  • On commence par désactiver tous les caches de Prestashop. N’oubliez pas de regarder ce tutoriel sur les caches pour plus de détail.
  • Pour les effets on n’utilise pas des librairies complexes, mais des effets natifs CSS comme par exemple via le tutoriel de Thoughbot ou de Paulund , car avec quelques lignes de code on peut obtenir un rendu qui entraîne la stimulation.
  • Sur la fiche produit on va mettre un zoom automatique sur le prix du produit lors du chargement de la page et reproduire des battements de coeur sur le bouton d’achat.
Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (12 votes, moyenne : 5,00 sur 5)
Loading...

9 commentaires sur “Prestashop 1.7 – Stimuler le coeur du client (ép. 51)”

    1. Bonjour,

      Pour cela il faudrait essayer d’appliquer les mêmes règles CSS sur l’élément « id » du bouton et le prix… mais je n’ai pas fait le test.

      A bientôt !

      1. Bonsoir,

        Comment faire pour seulement mettre cet effet sur les produits soldés en promotion ?
        Je l’ai testé pour la version 1.6 et l’effet est vraiment plus sympa pour la version 1.7
        Merci pour ce tuto !

        1. Hello,

          Pour cela c’est plus subtile pour faire la différence avec un produit sans promotion… Il faut regarder avec la console Google le nom des éléments ID / class…. par exemple mettre la règle sur « .has-discount » (en V1.7, qui concerne que les produits avec une promotion, mais c’est à tester.

          A bientôt !

        2. Bonjour,
          J’ai essayé avec : #product .has-discount .current-price
          En remplacement de #product .current-price
          Sur les 3 lignes et ça fonctionne nickel
          merci encore pour ton tuto 🙂
          Patrick

Laisser un commentaire

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