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.

40 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

    Répondre

    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 !

      Répondre

  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

    Répondre

    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 !

      Répondre

    1. Hello,

      Oui, normalement vous pouvez ensuite traduire les textes du thème depuis le back-office Prestashop (via l’outil de traductions).

      A bientôt !

      Répondre

  5. 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

    Répondre

    1. Hello,

      Pour cela il faudra s’amuser un peu avec les règles CSS et augmenter les différentes valeurs, mais c’est à expérimenter.

      A bientôt !

      Répondre

      1. Merci pour ta réponse j’ai réussi , maintenant j’ai un 2eme problèmes … ( c’est pas facile quand on commence lol)

        la bannière ne s’affiche pas sur les mobiles et tablette :s
        aurai tu la solution please

        (prestashop v 1.7.3 themes prestige_fashion version 1.0.2)

        merci d’avance

        Répondre

        1. Hello,

          Désolé, mais je ne peux pas proposer de réponses précises sur ce type de demande, car les règles CSS sont définies en fonction des supports et chaque thème a ses spécificités.

          A bientôt !

          Répondre

  7. Salut Webbax,

    Merci beaucoup pour toutes ces vidéos et cet énorme partage de connaissances.

    J’aurais une question bête ^^:
    « J’ai mis 2 bannières qui doivent renvoyer à 2 articles différents (suivant ta méthode décrite ds cette vidéo).
    Comment puis-je faire pour assigner à ces bannières l’adresse de leur articles respectifs?

    Merci d’avance et bonne continuation.

    Répondre

  8. Bonjour,

    Je ne trouve pas comment faire la traduction des textes dans d’autres langues. J’ai cherché dans les tradcutions mais je ne trouve rien.

    Pouvez-vous m’aider ?

    Merci

    Répondre

    1. Bonjour,

      Normalement cela devrait être disponible dans les traductions du thème, essayez de formuler le texte ainsi avec le paramètre « d » :

       {l s='Votre texte' d='Shop.Theme.Global'}

      A bientôt !

      Répondre

      1. Bonjour et merci pour votre réponse.

        J’ai bien essayé de rajouter le paramètre « d » dans le head.tpl.

        Je ne trouve malheureusement toujours pas ces textes quand je fais une recherche dans les traductions (dans traduction de theme).

        Merci pour votre aide

        Répondre

        1. Bonjour,

          Il faudrait éventuellement regarder dans les fichiers du thème d’autres chaines de traductions pour voir la syntaxe exacte… Peut être ouvrez un topic sur le forum à ce sujet, car je n’ai pas encore fait beaucoup d’expériences sur les chaînes de traductions.

          A bientôt !

          Répondre

  10. bonjour bon tuto je l’ai expérimenté sur la 1.7.5.2 mais malheureusement la micro bannière ne s’affiche pas en page d’accueil mais uniquement sur la page promotion. Que faire?

    Répondre

    1. Bonjour,

      Cela dépend du thème utilisé aussi… il faut éventuellement rechercher massivement dans les fichiers du projet Prestashop le code suivant « {block name=’hook_header’} » puis ensuite une fois la zone trouvée… d’ajouter le code à la suite pour voir ce que ça donne.

      A bientôt !

      Répondre

  11. Salut, tes vidéos m’aide bien. J’ai un problème avec ce tuto. Si j’active «  »Smart cache » pour les feuilles de style » le CSS n’est pas pris en compte. Comment faire pour l’activer tout en gardant le CSS. Je suis sous prestashop 1.7.5.0. Merci d’avance.

    Répondre

  12. Salut Germain,
    Merci encore grâce à toi je bidouille un peu, à l’occasion passe sur mon site, c’est grâce à toi que j’en suis pas là. Ceci dit j’ai besoin d’un petit conseil, j’aimerais faire changer de langue la micro bannière. Et ça fonctionne presque, j’en suis fière mais je bloque, qu’est ce que tu dis de ça:

    <a href="https://kit.fontawesome.com/f192a64a5d.js" rel="nofollow ugc">https://kit.fontawesome.com/f192a64a5d.js</a>

    
        {if $language.iso_code=='en'}
            {literal}
            
                <i></i>
                {l s='FREE DELIVERY 60€'}
            
            |
            
                <i></i>
                {l s='RETURNS TO 14 DAYS'}
             
            |
            
                <i></i>
                {l s='SATISFIED OR REFUNDED'}
            
            {/literal}
        {/if}

    Du coup dans la micro bannière il y a écrit ça « {l s=’FREE DELIVERY 60€’} » en entier, pareil avec le reste 🙁

    Bien cordialement !

    Répondre

    1. Bonjour,

      Cela semble fonctionner à présent sur votre Prestashop, vous avez dû trouver la solution… sinon vous pouvez passer par le back-office Prestashop pour traduire ces textes.

      A bientôt !

      Répondre

  16. Bonjour,
    Merci pour tout vos tutos qui sont très didacticiel et très détaillés.
    Je rencontre un soucis , si il y a un accent dans mon texte , le texte n’apparait pas dans le bandeau ( seul l’icone est là ) .
    Sinon les bandeaux sont bien présent .
    je suis sous Presta 1.7.6.8

    Merci par avance.

    Répondre

  18. Bonjour,

    j’ai un petit soucis avec la bannière . Le texte ne s’affiche pas dès qu’il y a un caractère spécial comme  » °  » ou  » à  » . Dès que je n’utilise aucun des accents ou caractère spéciaux, le texte fonctionne. Je précise que je suis en phase de construction de site et que je suis en local sur wampserver pour l’instant .
    Y-a-t’il un option que je dois activer ?

    Répondre

  19. Bonjour Monsieur Webbax,

    Merci beaucoup pour tout ce que vous faîtes. Vous m’avez été d’une aide précieuse durant toute ma période de préparation à mon site internet. Je me permet de vous contacter pour la première fois car hélas, vu mon niveau, je reste bloqué. Cela concerne votre mini bannière qui m’est utile, c’est pourquoi j’ai essayé en vain à faire la traduction de celui-ci en anglais. Le problème est que la bannière reste tout le temps en français et j’aimerai la traduire en anglais et japonais. Dans un précédent commentaire, vous avez dit à un utilisateur que nous pouvons directement modifier les traductions via le Back Office. J’ai essayé mais je ne trouve pas et j’ai également essayer de toucher au code mais ça a été une catastrophe… Donc je m’en remets à vous.

    Merci par avance.
    Continuez comme ça et à bientôt !

    Cordialement,

    Brian DA COSTA
    Ayataké

    Répondre

  20. Bonsoir,
    pour la traduction, j’ai de base mis les phrases en anglais au cas où ça poserait un pb comme indiqué dans un commentaire (car au départ malgré mes traductions faites ça restait toujours en français).

    Pour traduire faut aller dans :
    Traductions -> Modifier les traductions -> Traductions de thème -> choisir son thème puis la langue

    Jusque là c’est ok, je fait bien ma traduction mais le pb c’est que même si on traduit en français ça reste toujours dans le langage de base du fichier head.tpl rien ne se passe même après vidage du cache.

    Si quelqu’un a la soluce je suis preneuse.
    Cordialement
    Amandine

    Répondre

  21. Bonsoir,
    pour la traduction, voici la soluce, il faut ajouter d=’Shop.Theme.Global’ juste après votre phrase à traduire :
    {l s=’phrase à traduire’ d=’Shop.Theme.Global’}

    Et pour la traduction, aller à traductions :
    -> Modifier les traductions
    -> Type de traduction : Traductions de thème
    -> Sélectionnez votre thème
    -> Choisissez votre langue
    Faites les modifications ici : Shop > Theme > Global

    Pour moi ça fonctionne bien.
    Cordialement

    Répondre

    1. Bonjour,

      En mettant d=’Shop.Theme.Global’ mon site plante.

      J’ai vu autre-part qu’il fallait mettre d=’Shop.Theme.Actions’

      Dans ce cas ça ne plante mais je ne trouve toujours pas où faire les modifications.

      Si je sélectionne Espagnol puis ‘Shop > Theme > Actions’ je ne retrouve pas les textes du bandeau.

      Répondre

      1. Bonjour,

        Vous pouvez aussi essayer de ne pas mettre le paramètre « d » vous supprimez d=’Shop.Theme.Actions’… pour voir si le texte à traduire remonte.

        Il faut parfois aussi tester la traduction du texte par le thème classic, même si cela n’a rien à voir avec votre thème, elle peut remonter parfois à cet endroit.

        Si les traductions PrestaShop ne fonctionnent toujours pas, il faudrait lire ces deux billets :

        https://www.webbax.ch/2019/01/17/prestashop-1-7-gerer-traductions-ep-67/
        https://www.webbax.ch/2020/10/15/traduire-prestashop/

        À bientôt !

        Répondre

Laisser un commentaire

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