Prestashop Marketing

Un compteur pour impressionner vos clients sur la homepage Prestashop (ép. 88)

Sérieusement ? C’est quoi encore ce titre accrocheur… ça fait un peu peur non ? En fait le but c’est surtout d’électrocuter leur cerveau pour que vos visiteurs soient conditionnés dès les premières secondes sur votre Prestashop.

Le cerveau de votre client réagit en 3 secondes

En principe quand un client visite une boutique en ligne Prestashop ou qu’il arrive sur une page web, le cerveau scanne la page automatiquement en quelques secondes et détermine ce qui est vraiment important. Le cerveau va très rapidement se focaliser sur un élément précis de la page… et c’est bien souvent la zone la plus « attirée » par l’oeil qui va être déterminante… le but idéal est donc de prendre prendre le contrôle mental de vos clients.

Forcer l’internaute à regarder la page

En fait pour qu’il se sente obligé de regarder une zone de la page, il faut créer une interaction… c’est-à-dire mettre en mouvement un segment sur la page à un emplacement précis. De cette manière l’oeil se sentira inévitablement obligé de regarder cette zone… C’est quasiment incontrôlable et instinctif… parce que c’est notre comportement naturel (oui ça commence à vous faire peur et vous qui pensiez qu’on faisait juste du simple e-commerce ahaha).

Jouer la carte de l’influence & impressionner

La puissance des nombres est quelque chose d’assez fou… quand on montre un gros nombre à un client… un gros salaire, une grosse dépense, un gros gain… ça crée bien souvent en nous une émotion et c’est ça qui nous intéresse aujourd’hui. Le but est de créer une émotion forte & positive, qui va influencer le visiteur qui se dira…. « Ce site à l’air sérieux et de bonne réputation… certainement un leader »… avant même que votre potentiel prospect n’ait eu le temps de parcourir votre catalogue produit.

La somme des quantités de produits vendus

Voilà une stratégie honnête et qui permettra même à des petits sites e-commerce Prestashop avec peu de commandes, d’impressionner les internautes. Nous allons mettre en place dans le tutoriel, un affichage d’un compteur progressif… avec le nombre total de quantités produits vendus de votre shop. Le cerveau de vos visiteurs se fera facilement duper par le nombre impressionnant, alors que si l’on rapporte ce nombre au volume de commandes en back-office, le chiffre serait bien moins impressionnant.

En plus, ce système est évolutif…

Contrairement à beaucoup de site qui affichent des statistiques en dur… ici la valeur est dynamique et vous pourrez voir le nombre évoluer au fil du temps. Le fait que le nombre ne soit pas toujours similaire et évolue petit à petit, est aussi un gage de confiance et renforce la crédibilité de votre business. Bien sûr vous pouvez utiliser le principe de cette méthode ailleurs que sur la page d’accueil de Prestashop… mais je conseille de ne pas l’intégrer sur toutes les pages, afin de ne pas fatiguer / épuiser l’internaute.

Pour ce tutoriel Prestashop vous avez à disposition :

  • 1 x ps_featuredproducts.tpl (pour afficher le compteur)
  • 1 x FrontController.php (pour compter les quantités)
  • 1 x custom.js (pour l’effet du comptage)
  • 1 x custom.css (pour le rendu visuel)
  • 1 xsuper_counter_bg.jpg (pour l’arrière-plan)

Télécharger

Résumé de la vidéo : Maîtrisez le cerveau de vos clients qui viennent sur votre boutique Prestashop

  • Pour commencer on active le debug Prestashop, pour être sûr de voir les erreurs fatales générées.
  • On met en place ensuite dans le TPL des produits phares, la zone qui va accueillir le compteur pour l’affichage du nombre progressif.
  • Ensuite, on ajoute du Javascript en utilisant la méthode « Swing » pour faire danser le nombre (ahaha oui c’est tripant).
  • Après on passe à l’étape de l’intégration du fichier d’override qui va renvoyer le nombre qu’on désire faire afficher… Ici on va tabler sur la somme des quantités des commandes.
  • On finalise le rendu de l’affichage en ajoutant un fond « fixe » et des règles CSS… le rendu est plutôt fun.
  • Quoi, vous voulez tricher sur l’affichage du compteur ? Oui, effectivement vous pouvez le faire… si ça peut vous aider à vendre (vous êtes diaboliques).

15 commentaires sur “Un compteur pour impressionner vos clients sur la homepage Prestashop (ép. 88)”

  1. Bonjour Germain!
    comme d’habitude je me suis régalé à regardé ta vidéo,
    j’ai essayer de voir si ça sur Prestashop 1.6.1.X
    franchement je sèche…
    j’ai mis les code que tu donne custom.css dans global.css, je custom.js dans global.js, puis le ps_featuredproduct.tpl dans header.tpl car je voulais afficher dans 2 catégorie produits, et une ou 2 category cms, voir un produit aussi,
    ça s’affiche, mais le chiffre reste à zero, j’ai essayé le frontcontroller dans plusieurs dossier direct dans classes/overrides en modifiant le frontcontroller d’origine ça a planté erreur 500, puis j’ai essayé dans classes, ça ne plante pas le site mais le chiffre reste à zéro.
    dans override/classes puis dans override tout cour mais rien n’y fais le chiffre reste à zéro,
    de plus je ne connait pas comment faire pour que ce soit uniquement les pages que je veux qui s’affiche, ça s’affiche partout à zéro…
    je suis dégoûté, mon savoir en terme de dev n’ai pas assez au niveau….

    Répondre

  2. ça fonctionne !!!! merci encore Germain! je suis sou prestashop 1.6.1.18 et ça fonctionne en mettant ce que tu donne pour le custom.css et custom.js, dans global.css et global.js, et aussi ce que tu donne pour le ps_featuredproducts.tpl je l’ai mis dans le header.tpl j’ai juste changé la classe du div en class= »container » pour que ça s’adapte à la colonne centrale PS1.6
    ensuite le FrontController.php doit être mis dans override/classe/controller/FrontController.php
    vider le cache et ça fonctionne pour la page index…
    Maintenant comme j’ai de grosses entrée d’internautes sur au moins 2 catégories, et 2 pages cms, et peut être une page produit, je me met à la recherche de comment le faire afficher uniquement sur ces pages. car pour l’instant ça fonctionne que sur l’accueil, et c’est affiché sur toutes les autres pages du site compteur à zéro.

    Répondre

    1. Hello,

      Félicitations si tu as réussi à adapter le code pour Prestashop 1.6. Il faudrait retirer le code conditionnel ci-dessous qui fait en sorte de compter « uniquement » sur la page d’index.

      if($Context->controller->php_self=='index'){ }

      A bientôt !

      Répondre

      1. et oui quel âne je suis! enlevé le code, moi j’avais recopié le « bloc » entier, en changeant à chaque fois ‘index’ par category, product, cms…
        du coup je vais tester comme tu dit, c’est vrai ça allégera le code.

        bizarre, quand je poste un commentaire, je coche la case: Enregistrer mon nom, mon e-mail et mon site web dans le navigateur pour mon prochain commentaire. Mais ça ne l’enregistre pas…

        Merci à bientôt.

        Répondre

  3. Bonjour Germain.
    Encore un tutoriel super bien expliqué.
    J’ai tout suivi et cela fonctionne très bien.
    Afin d’avoir ma page « index » avec différents modules de contentBox, j’ai essayé d’intégrer le code dans une contentBox.
    Tout fonctionne sauf le compteur.
    J’ai l’impression qu’il prend mon texte comme du html et n’exécute pas le script.
    Si tu as une idée de ce qui pourrait bloquer ?
    Merci d’avance,
    Claude

    Répondre

      1. Bonjour,
        j’avais déjà vidé le cache mais sans sucées.
        J’ai ajouté le code javascript dans le module contentbox au niveau « Load Files on HTML Header ».
        Cela fonctionne lorsque je mets une valeur définie pour le nombre de ventes mais pas avec la variable.
        Je n’arrive pas à insérer la variable « super_counter_nb » qui provient du php de l’override dans le code html.

        Répondre

  4. Bonjour, je ne connais pas le module contentbox, mais normalement il doit y avoir un fichier contentbox.tpl là tu met le code qui est donné pour ps_featuredproducts.tpl,
    le javascript tu doit le mettre dans le fichier de ton thème custom.js
    ça l’exécutera partout où tu voudra le mettre.

    Répondre

  6. Bonjour,
    Alors ça c’est de la bombe carrémént, je ne suis pas super douée en code mais acec ce pas à pas, toujours bien détaillé, je devaris y arriver…Si je peux je tente ce soir et vous dirais la suite…
    Merci Germain

    Répondre

Laisser un commentaire

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