Bannière pour Prestashop

Prestashop 1.7 – Module bannière (ép.10)

Cette fois-ci on va s’attaquer à l’indémodable module bannière pour Prestashop, qui est déjà automatiquement en place lors du déploiement de votre boutique. Découvrons ensemble comment l’exploiter au mieux !

Episode 10

Dans cette nouvelle version de Prestashop, le module bannière est de nouveau de la partie, dans la version précédente PS 1.6, il était collé tout au sommet de la boutique dans le header et faisait une fine bande noire (souvenez-vous). A présent ce module est par défaut greffé sur le centre-bas de la boutique en page d’accueil.

Ce qui est dommage c’est que le module permet uniquement l’ajout d’une seule bannière, il aurait été intéressant de pouvoir greffer une ou plusieurs bannières sur les points d’accroches de notre choix (mais bon, il faut que Prestashop puisse quand même continuer de vendre des modules payants, ahah… hé oui !).

En standard la bannière est greffée en page d’accueil, je préconise plutôt de la greffer dans le footer pour qu’elle soit permanente, car sur la page d’accueil il y’a déjà suffisamment de blocs dynamique (dont aussi le module éditorial).

Encore un dernier point important, n’oubliez pas qu’une bannière ça doit pas être là pour « faire joli », mais pour accomplir un objectif. Le but n’est pas de promener l’internaute en boucle sur votre boutique, mais de cibler son attention sur un point précis pour tenter de l’influencer sur ses envies d’achats.

Ressources

Pour ce tutoriel vous avez à disposition :

  • Fichier banner.psd (exemple de bannière)
  • Fichier theme.css.txt (extrait des règles d’affichage CSS)

Télécharger

Au programme

  • Utilité du module ? Possibilité de greffer une seule bannière.
  • Réalisez un projet simple de maquette sous Photoshop.
  • Misez sur un objectif simple & clair pour votre bannière.
  • Ajoutez un effet CSS au survol de la bannière.
  • Déplacez la bannière dans le HOOK par défaut.
  • Greffez la bannière sur le HOOK du footer.
  • Forcez l’affichage de la bannière sur mobile.

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

18 commentaires sur “Prestashop 1.7 – Module bannière (ép.10)”

  1. Bonjour
    un ami vient d installer ma boutique romandis
    j essaye de faire des modifications de banniere et de carousel . les nouvelles images sont telechargèes sur le back office mais pas sur la boutique qui garde les image par defaut.
    merci
    Abel

    1. Bonjour,

      A vérifier dans le back-office Prestashop, avant de cliquer sur configurer le module vous avez une liste déroulante qui vous permet de désactiver le module sur certains supports.

      A bientôt !

  2. Bonjour,

    Comment se fait-il que la bannière n’apparaisse pas sur les mobiles alors que la fonction « enable mobile » sur le module a bien été cliquée ?

    Prestashop 1.7 est à devenir fou tellement on n’y comprend rien par rapport aux versions plus anciennes…

    Merci

    1. Bonjour,

      C’est une bonne question… je pensais que c’était ça la cause… une analyse dans le code s’impose. A tester peut-être aussi avec un « vrai » mobile pour vérifier le comportement.

      A bientôt

  3. Bonjour,
    Je n’y connais pas grand chose, c’est mon futur époux qui m’a tout installé, mais j’aurai aimé savoir s’il était possible de diminuer la taille du carrousel ?
    Il pourrait probablement résoudre mon souci (il est dev’), mais j’aimerai savoir le faire moi-même et il travaille toute la semaine sur du développement donc je comprends qu’il sature un peu du PC quand vient le soir.
    Sur tablette et smartphone la taille est parfaite, sur PC c’est monstrueusement grand : ça prend tout l’écran.
    A savoir que j’ai acheté un thème (dont je ne me souviens plus le nom… celui avec les bijoux bleus) donc peut-être que ce sera plus compliqué ?
    J’ai essayé en diminuant la taille des images, mais même en 50×50 la bannière s’ajuste pour être immense (et donc image pixelisées lorsqu’elles sont trop petites).

    Voilà, j’espère que j’aurai été assez claire, sinon veuillez m’en excuser; je pourrai vous donner plus de détails s’il y a un point que vous ne comprenez pas.

    Je vous remercie de votre future réponse et en profite pour vous souhaite une bonne année 2018 !

    1. Bonjour,

      Chaque template Prestashop est spécifique, dans le cas présent la première chose à faire serait d’envoyer un mail au développeur du thème, car c’est lui qui pourra répondre à cette question. Un thème acheté diffère du thème standard, les règles à appliquer ne sont donc pas identiques.

      A bientôt !

  4. Salut,

    Je souhaiterai dupliquer ce module afin de pouvoir bénéficier de 2 blocs bannières administrables via le BO. C’est possible ? Ah moins qu’il existe un autre module gratuit avec les mêmes fonctions ?

    Merci d’avance pour tes futures pistes.

    1. Bonjour

      Pour cela il faut reprendre la règle CSS proposées dans ce tutoriel et transposer la règle sur l’élément ID / class du slider… mais j’ai pas essayé de faire le test.

      A bientôt !

      1. c’est ce que j’ai tester en mettant #content .slider, mais cela n’a pas l’air d’être cette classe. comment trouver le nom de la classe ?

  5. Bonjour,
    J’ai bien ajouté la bannière sur ma version test en local, mais la bannière ne s’affiche pas dans le hook displayHome. Lorsque je passe mon module Bannière dans displayTop par exemple ça fonctionne. Sachant que ma barre est bien présente dans le code source lorsque je fais inspecter mais elle a un display-none qui vient m’embêter. Suffirait-il juste d’ajouter un display:block !important; dans theme.css ?
    D’avance merci pour ta réponse.

    1. Bonjour,

      Oui, avec le display:block cela devrait rectifier le tir, mais je vous conseille de mettre cette modification dans le « custom.css » pour séparer les règles (appliquez bien la règle sur l’élément concerné en utilisant son ID).

      A bientôt !

Laisser un commentaire

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