Bannière rassurante e-commerce

Prestashop 1.7 – Micro bannière rassurante (ép. 37)

Le haut d’un site c’est un peu comme la tête des gens… c’est bien souvent la première chose que vous allez voir et c’est d’autant plus vrai avec les supports mobiles qui valorisent encore plus l’importance d’un bon header.

Des arguments forts !

En fait l’idée ne m’est pas venue toute seule, il y’a un lecteur qui m’a dit dans les commentaires que ça serait bien de pouvoir personnaliser un peu le header en mettant des mentions HTTPS / Paiement sécurisé etc… et je me suis dit que c’était une bonne idée. Avant de mettre à exécution ce concept j’ai été regarder comment faisaient les gros sites et on retrouve par exemple cette pratique chez Manor avec leur header très simple & épuré (+ 2 arguments forts… la livraison et les retours gratuits).

C’est vrai qu’une bannière ne révolutionne pas un site e-commerce, mais bien souvent on voit que le consommateur est sensible à toutes ces petites variantes de l’interface. Je vous expliquerai une prochaine fois ce qui fait la différence entre un gros et un petit site… parfois ça se joue à des détails. De plus, la méthode d’intégration que je vous propose est très simple d’accès en 15 minutes c’est bouclé.

Comme petit bonus, je vous explique aussi qu’il peut-être très pratique d’utiliser cette même manière de faire pour afficher un message important à vos visiteurs (ex. quand vous partez en vacances). Cela peut vous faire économiser un module et vous aurez la certitude que le message sera vu par les internautes. Maintenant c’est à vous de jouer, bonne intégration à tous !

Ressources

Pour ce tutoriel vous aurez à disposition :

  • Le fichier custom.css avec les règles de bases pour la micro-bannières.
  • Le fichier head.tpl avec les 3 variantes de code HTML pour afficher la micro-bannière.
  • Un document texte avec l’emplacement de ces différents fichiers.

Télécharger

Résumé de la vidéo : intégration d’une micro-bannière qui rassure

  • La zone du header est une zone chaude de votre e-commerce.
  • La Redoute, Spartoo, Manor et Ochsner appliquent ce concept.
  • L’utilité de cette méthode ? Rassurer, convaincre… et montrer à vos clients vos vraies valeurs.
  • Je vous montre 2 méthodes pour le faire, la manière basique sans icône…et la plus avancées avec les icônes de fontawesome.
  • Sur le mobile il est préférable d’afficher uniquement 2 arguments pour que cela reste toujours sur une seule ligne.
  • Enfin pour les vacances, je vous propose la méthode BONUS avec un message tout simple… qui sera à coup sûr vu par tous vos clients.

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 ! (3 votes, moyenne : 5,00 sur 5)
Loading...

9 commentaires sur “Prestashop 1.7 – Micro bannière rassurante (ép. 37)”

  1. Bonsoir,

    Vraiment une petite bannière mais d’une très grande utilité !
    Je l’ai intégré dans notre site, avec quelques améliorations personnelles et cela donne un super résultat !
    Du coup, exit le bloc « réassurance » de Prestashop tout moche et pas fonctionnel … et vive la micro-bannière avec des images et des liens cliquables !
    Cerise sur le gateau : un conseil technique de Germain pour améliorer encore le fonctionnement.

    Bravo et merci pour cet état d’esprit !

    Jean-Marc

    1. Bonjour,

      La manière de faire n’est pas « révolutionnaire », mais c’est des petits plus qui peuvent faire la différence. Ce que j’apprécie le plus c’est cette visibilité « permanente » des arguments « forts » du site e-commerce. Reste bien sûr à trouver les arguments qui feront mouche… ça c’est une autre paire de manches.

      A bientôt !

  2. Bonjour Germain,

    Je n’arrive pas à ce que cette bannière soit bloquée et reste en permanence visible à l’écran tant sur un smart que sur un ordinateur.
    Je n’y arrive pas avec position:fixed; 🙁 .
    Je ne sais pas où le placer.

    Merci…et encore merci pour toutes ces super vidéos….
    Vivent les lundis !!!!

    Bruno

    1. Bonjour,

      J’ai pas trop creusé la question, mais avec des règles du genre ça devrait s’y rapprocher… mais c’est à expérimenter.

      #header {
          background: #fff;
          color: #7a7a7a;
          margin-top: 20px;
      }
      #header-microbanner {
          background-color: #333;
          color: #fff;
          font-size: 10px;
          text-align: center;
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 100000;
      }
      

      A bientôt !

  3. bonsoir :
    je tiens a vous remercier pour tout les efforts et les tuto que tu nous offre sur ton blog mais jai un petit souci jai téléchargé les fichiers zip , tout mis en place mais la baniere n’existe pas est a cause de ma version prestashop ? je suis sur la Dernière version 1.7.3.0 , Sortie le 28 février 2018 est ce que ca nécéssite d’autres modifications a faire svp ?
    merci

Laisser un commentaire

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