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.

BOUM !

1 seul mail par semaine - pas de publicité

15 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

  1. Bonjour,
    Hier le début des soldes. Attente frénétique et puis le coup de massue. Mes prix soldés ne s’affichent pas sur mon site.
    Au secours ! Les prix spécifiques sont bien paramétrés pour tous comme d’habitude. Mais en front office seul le tarif normal s’affiche. Ce n’est pas ma première période de soldes. Pour les soldes d’hiver je n’avais eu aucun souci.
    Je ne vois pas du tout d’où ça peut venir. Je cherche désespérément partout, sans piste, sans solution… (en train de rater le boom des soldes).
    J’avais suivi votre tuto pour le prix qui fait boum boum. Je n’ai rencontré aucun problème mais comme je cherche partout je me suis demandée si cela pouvait avoir un impact sur la prise en compte du prix spécifique.
    Merci

    1. Bonjour,

      Dans ce cas, le plus sage est de revenir avec le fichier original (TPL) sur la fiche produit en le reprenant dans un fichier archive de Prestashop… pour vérifier que ce n’est pas cette modification qui cause le problème.

      A bientôt !

      1. Bonjour,
        Merci pour vos conseils. Mais j’ai trouvé d’où venez le problème, enfin je crois 🙂 En tout cas, cette manip pour faire clignoter le prix n’était pas du tout en cause. Tant mieux parce que j’aime beaucoup son rendu !

Laisser un commentaire

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