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)
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.
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
Bonjour,
Pensez à bien vider le cache du navigateur et de faire un CTRL+R sur la page d’accueil pour forcer le re-chargement des images.
A bientôt !
Bonjour,
Pourquoi n’ai-je pas de bannière sur la version mobile de prestashop 1.7 ?
Merci beaucoup, car je suis vraiment perdu avec cette nouvelle version cauchemardesque !
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 !
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
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
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 !
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 !
Bonjour, ma bannière ne se centre pas comme vous le faite dans la video, j’ai pourtant la bonne règle css
Bonjour,
Essayez de regarder ce tutoriel pour que le CSS s’actualise bien : https://www.webbax.ch/2017/10/23/prestashop-1-7-problemes-dactualisation-ep-38/
A bientôt !
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.
Bonjour,
Pour des affichages plus avancés essayez de regarder comment optimiser la page d’accueil Prestashop avec ce tutoriel : https://www.webbax.ch/2017/07/17/prestashop-1-7-ameliorer-page-daccueil-ep-27/
A bientôt !
Bonjour, est-il possible d’avoir le même effet qd on passe la souris sur la bannière changement de couleur surle module SLIDER ?
merci
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 !
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 ?
Bonjour,
Vous pouvez essayer avec une règle du genre :
#content #carousel a img:hover{opacity: 0.5;filter: alpha(opacity=50);}Pour connaitre le nom des classes et des id, il faut inspecter le code CSS voir tutoriel suivant : https://www.webbax.ch/2017/03/27/prestashop-1-7-modifier-css-ep-16/
A bientôt !
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.
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 !
Bonjour cher Monsieur,
Ma bannière s’aligne à gauche, elle n’est pas centrée, et en mode mobile elle n’est pas responsive, elle déborde et ne s’adapte pas.
Auriez-vous une idée d’où cela pourrait venir ?
Merci beaucoup.
Bonjour,
A commencer par vérifier si ce n’est pas un problème de cache : https://www.webbax.ch/2017/10/23/prestashop-1-7-problemes-dactualisation-ep-38/
Puis essayez de remettre le fichier original CSS et mettez uniquement les modifications proposées dans ce tutoriel pour voir si cela fonctionne ou s’il y’a un conflit de règles.
A bientôt !
Bonjour, je souhaite mettre cette bannière en pleine largeur sur mon site. j’ai fait plein de test mais en vain.
lorsque je code la position:absolut sur la bannière j’arrive a la mettre en pleine largeur mais le pied de page passe par dessus.
Je suis en prestashop 1.7.8
J’utilise le thème blck qui est presque identique a celui d’origine sauf le carrousels qui est déjà en pleine page.
Merci pour tous vos tutos.
cordialement