C’est devenu la norme depuis un bon moment en e-commerce de mettre un slider sur la page d’accueil de sa boutique e-commerce. Pourtant, dans bien des cas celui-ci peut être optimisé… essayons de revenir aux basiques tout en innovant.
Le slider encore et toujours
A partir d’un certain moment on commence à faire les choses sans réfléchir, tous les sites e-commerces mettent un slider sur leur page d’accueil alors on le fait aussi. On cherche à faire les plus beaux effets de transition… mais ne serait-il pas plus judicieux de revenir sur une méthodologie plus simple ? Est-ce qu’il est réellement utile d’avoir 500 options comme l’on voit actuellement sur la plupart des MEGA sliders ? Et pire encore… la conclusion c’est que votre slider n’est pas vraiment responsive à 100% et qu’il y’a des bugs.
Mon constat sur les sliders
Greffer du texte dynamiquement sur les images c’est une mauvaise idée il est préférable d’incruster le texte & bouton dans l’image pour éviter les multiples règles de tailles de texte à gérer en fonction des résolutions + les débordements. Pas besoin de système de navigation (avant / arrière), activez le déroulement automatique si vous le voulez… Si vous optez pour cette logique, la partie technique du slider se résume à : « Je dois faire une image qui donne envie de cliquer et la technique je ne m’en soucie pas ». Et oui, car la responsivité des images simples c’est ce qui marche le mieux et sans bug !
Le slider intelligent
On sait que la plupart des internautes ne verront pas la 2ème image du slider c’est prouvé… alors il est préférable plutôt de faire un « aléatoire » sur l’affichage des images. Ainsi l’image en position 5 pourra potentiellement s’afficher en 1ère position. Ce n’est pas tout, je propose encore mieux… le top c’est de charger une seule image (comme on le fait dans le tutoriel) ainsi on évite de charger la page d’accueil avec pleins de slides inutiles… et cela vous garantira que chaque slide sera vu à coup sûr.
Le slider natif de Prestashop
Franchement je trouve que le slide natif de Prestashop 1.7 c’est certainement l’un des meilleurs que j’ai vu… pour une bonne raison c’est qu’il est « simple » d’utilisation en back-office ! Ce que je comprends moins c’est le choix d’avoir désactivé le slide sur mobile en standard et que le côté responsive est quand même perfectible. Grâce à la méthode que je vous présente, on peut rectifier le tir avec environ 15 lignes de codes alors ça c’est vraiment le truc que j’adore (vite fait / bien fait). C’est aussi une très bonne chose que le slider gère 1 image par langue, ce qui permet de faire du multilangue avec le texte incrusté sur les slides.
Etes-vous aussi en mode « Think different » comme Apple ?
Sincèrement parfois je me pose des questions, je me dis… mais pourquoi je suis le seul à proposer ce genre d’approche ? Et même quand je propose ce genre d’alternative aux marchands ce n’est pas forcément bien perçu : « Non c’est ringard de faire comme ça ! ». Et pourtant, je reste persuadé que c’est l’une des meilleures approche à faire sur beaucoup de niveaux… Je pense qu’il y’a toujours cette crainte de « Penser différent » et de trop faire confiance aux standard… Qui vous dit que le slider tel qu’on le connait actuellement existera toujours dans 10 ans ?
Ressources
Pour ce tutoriel vous aurez à disposition :
- 1 x fichier slider.tpl (affichage aléatoire / dynamique des bannières)
- 1 x fichier custom.css (avec les règles responsives pour le slider)
Résumé de la vidéo : le meilleur slider pour Prestashop en adaptant le module natif
- Transformation du slider en images « aléatoires », avec explication pas à pas de chaque ligne de code dans le TPL de Smarty.
- Ajout des règles CSS pour rendre responsive le contenu du slider.
- Création de nouvelles slides plus grandes & percutantes.
- Activation du module slider pour les smartphones.
- La simplification maximale du slider c’est la clé et c’est génial de revenir aux basiques. La simplicité n’est pas un handicap, mais une force.
Merci pour ce bel article. Dommage pour l’instant j’ai des priorités …. prioritaires ! Mais je le garde pour l’avenir, j’avais déjà confusément le sentiment que le slider pouvait être amélioré. En tous cas j’adore ta philosophie : « La simplicité n’est pas un handicap, mais une force. » (marre de ces pages qui mettent des heures à se charger avec plein de fenêtres, pop-up et autres clignotants comme des sapins de Noël de mauvais goût).
Bonne journée à tous.
Hé oui, le plus important c’est de revenir aux basiques pour faciliter, la gestion, l’ergonomie… et surtout vendre ! A bientôt !
Salut Webbax.
En appliquant la règle dans le custom css, ça me réduit la taille de mon logo que j’ai modifié.
Aurait tu une solution a me proposé.
Merci et merci pour tout les tutos qui sont grandement utile.
Bonjour,
Il faudrait ajouter une règle CSS peut-être uniquement sur l’élément CSS concerné (en utilisant l’attribut ID) afin que cela n’affecte pas d’autres éléments.
A bientôt !
Hello, merci pour les tutos.
J’ai une question à votre endroit, est-il possible d’ajouter les blocs d’images comme c’était le cas sur PS 1.6?
Et si possible comment?
Bonjour,
Essayez de regarder ce tutoriel : https://www.webbax.ch/2017/07/17/prestashop-1-7-ameliorer-page-daccueil-ep-27/
A bientôt !
Bonjour
Est ce que ca fonctionne pour PS1.6 ou aurais-tu un équivalent pour PS.1.6 ?
Bonjour,
Désolé ce tutoriel est compatible uniquement Prestashop 1.7… mais pour 1.6 essayez de regarder ceci https://www.webbax.ch/2016/01/27/jetez-votre-slider-prestashop-et-remplacez-le-par-une-image/ ou encore ici https://www.webbax.ch/category/prestashop-de-a-a-z/
A bientôt !
Salut Webbax,
Vraiment top ce slider en mode random! C’est exactement ce que je cherchais!
Je souhaiterai afficher ce slider sur mes pages de catégories et afin que les images soient différentes de mes miniatures et que les visuels soient moins monotones. Sais-tu s’il est possible de faire cela ?
Merci, à bientôt!
Hello,
Super si ce tutoriel Prestashop t’as plus… par contre pour les catégories le processus est différent (jamais expérimenté). Pour le moment je ne peux que te conseiller ce tutoriel qui peut booster les catégories : https://www.webbax.ch/2018/08/16/prestashop-1-7-seo-methode-mediamarkt-categories-ep-17/
A bientôt !
Bonjour et merci pour ce tuto, toujours aussi intérressant et intelligent…
Petite question bête : cette manip est également possible avec un autre thème, et en utilisant le slider natif?
Bonne continuation.
Hello,
Oui si vous installez le module slider (par défaut) de Prestashop sur un thème personnalisé vous pouvez faire la même manipulation.
A bientôt !
Bonjour et bonne année 2021
D’abord merci pour ce tuto
Je viens d’appliquer ce tuto avec 4 slides et j’ai l’impression que le « tirage au sort » de la slide ne fonctionne pas car je tombe toujours sur la même.
J’ai beau vider le cache etc… je ne sais pas
Merci de votre aide
Bonjour,
je débutes en Prestashop et avec leotheme, je cherche à changer le slider en header de homepage par une vidéo. Et là je sèche complétement….
Pouvez vous m’aider?
Merci d’avance !
Bonjour,
Avant de faire cela essayez de regarder la méthode pour optimiser la page d’accueil de Prestashop : https://www.webbax.ch/2017/07/17/prestashop-1-7-ameliorer-page-daccueil-ep-27/
A bientôt !
Hello Webbax
Merci pour te tutorial qui fonctionne parfaitement lorsque le cache en BO est désactivé, cependant lorsque le cache est actif on perd l’aspect aléatoire (ce qui est normal).
As tu une astuce pour profiter de cette fonction tout en gardant le cache actif ? (bénéfice rapidité du site plus intéréssant que de désactiver le cache 😉 ).
Merci pour ta réponse