Qui a déjà poussé un cri « waouw » en allant sur un site e-commerce qui montre de très beaux visuels dès la page d’accueil ? Avec la méthode slider façon « Home Cinéma » c’est l’émotion que vous pouvez transmettre à vos clients.
Un slider géant « inutile » vous pensez ?
Tous les templates Prestashop ou presque sont équipés d’un slider sur la page d’accueil, mais ils n’ont pas tous la même apparence. Par défaut sur Prestashop celui-ci est encastrée dans le centre de la page… En mettant en place un slider « géant » vous pouvez hypnotiser plus facilement vos clients avec un superbe visuel qui prendra presque tout l’écran. Bien entendu, il faudra aussi que l’offre soit vraiment alléchante.
L’offre alléchante ?
En fait, comme je l’ai dit dans la vidéo, bien souvent on fait 3 slides et on pointe ces 3 liens vers les catégories afin de ne pas avoir besoin de les changer régulièrement. C’est une grave erreur, il est préférable de faire 3 slides qui renvoient vers 3 produits spécifiques (dont vous avez assez de stock + qui génèrent une marge intéressante). Les catégories produits sont déjà accessibles facilement depuis le menu, inutile de faire encore de la redondance supplémentaire… Il est préférable que le slider mène à des actions claires & concises.
Le syndrome de la flemme
Le slider c’est bien beau, mais c’est un très bon moyen de savoir les sites e-commerce qui sont « rentables » ou non… Qui change son slider chaque 14 jours ? Levez la main devant votre ordinateur SVP ! Et oui, la plupart des e-commerçants ne le font pas (manque de temps, manque d’inspiration… trop de travail pour le retour que le shop apporte). Pourtant… c’est un cercle vicieux, vous retourneriez dans un magasin qui ne fait jamais l’effort de changer sa vitrine ? Moi non… alors sur le web dites-vous bien que c’est pareil.
Le texte incrusté sur l’image tue le SEO
Ahaha… pensez-vous que le fait de rédiger 2 lignes de texte dans un slider améliore votre référencement ? Non, ce n’est pas ça qui fera levier sur votre visibilité. Il est préférable d’incruster tout le texte dans l’image pour éviter les bugs d’affichages liés au mode responsive. Si vous avez besoin d’obtenir plus de trafic, alors il sera préférable de vous tourner vers la méthode SEO Ramsès II qui vous fera décoller. Sur la page d’accueil Prestashop pensez à ajouter le bloc HTML personnalisé avec un peu de texte pour pousser votre référencement.
Belvg, une source d’inspiration…
Et oui, parce que la base de ce tutoriel a été pensé par Belvg avec leur tutoriel Full Slider Prestashop, donc 1000 x merci à eux. Ce que vous devez retenir aussi dans ma manière de faire, c’est que finalement je prends une idée quelque part… je la re-travaille un peu ou la présente sous un autre angle et vous avez l’impression que c’est nouveau (ahaha). Comme dirait Picasso « Les bons artistes copient, les grands artistes volent » cette citation me faire rire, mais c’est que trop vrai.
Pour ce tutoriel vous avez à disposition :
- 1 x fichier « custom.css » (avec les règles pour le mega slider)
- 1 x fichier « slider.css » (exemple de bannière promotionnelle)
Résumé de la vidéo : Un mega slider Prestashop en 20 minutes
- On commence par l’intégration du slider avec une largeur à 100% selon la méthode proposée par la société BELVG.
- Après, on active une seule slide et on affiche aussi le module sur le mode mobile (en standard il est désactivé).
- Dans Photoshop on crée une bannière de 1950×830 pixels et par la même occasion je vous explique quelques grands principes du design, pas besoin de faire compliqué pour faire une bannière percutante.
- Ensuite, on ajoute l’image au slider et on supprime tous les textes afin de n’avoir que l’image, cela évite beaucoup de problèmes pour le multi-supports.
- A méditer sur la hauteur, peut-être que 600 pixels c’est mieux… Si vous mettez aussi votre texte au centre de l’image c’est TOP, car sur mobile cela permet d’avoir une excellente visibilité.
Coucou et merci pour toutes ces infos. Je suis tes épisodes régulièrement et je me demande si l’on cumule toutes tes trouvailles et astuces, le site ne deviendra pas trop lourd. Le temps de chargement reste tout de même important, non?
2. J’ai trouvé un slider encore plus gros, plutôt joli, qui intègre le menu du site : https://kostparis.com/fr/ , comment le trouves tu?
Ciao, Didier
Hello,
La vitesse du shop n’est pas forcément le critère n°1, il faut juste que le client n’ait pas la sensation que c’est « lent » quand il navigue… Très joli le slider j’approuve ! Sinon à voir plutôt du côté Prestashop minceur pour vraiment trouver des astuces pour gagner en vitesse https://www.webbax.ch/2018/07/05/prestashop-1-7-seo-boutique-rapide-ep-15/… mais souvent il faut des compromis.
A bientôt !
Bonjour Webbax
Dans ton fichier a telecharger, il n’y a pas de fichier slider.css, uniquement un fichier slider.psd de photoshop
Je suis en theme classic-rocket, j’ai bien ajoutée ton code css custom.css mais l’image ne veut pas prendre la pleine largeur
Penses tu que le code du carousel soit different du theme classic au theme classic-rocket ?
Je te joins le theme.css du theme classic-rocket si tu le veux bien:
https://easyupload.io/fb8bf6
bien à toi
Re bonsoir Webbax
Concernant, la pleine largeur d’un slider, j’ai changé ceci
( ligne 482 de mon theme.css )
( j’ai tout passé en 100%, au niveau de max-width)
@media (min-width: 576px) { .container, .l-wrapper, .l-wrapper--boxed, main > .notifications-container { max-width: 100%;, qu’en penses-tu ?
Bonjour Webbax
J’ai installé votre tuto « home cinéma » sur mon site depuis sa parution. Il est absolument parfait.
J’ai remarqué que de nombre site utilise désormais ce type de « banner » mais avec un plus, ils ont la possibilité d’integrer de petites animations très légeres « pour éviter la surcharge ».
Pensez-vous qu’il est possible de le faire avec votre slider.
Bien sûr, je suis disposé à payer pour cette modification de votre script et que vous pourrez bien sûr partager à votre communauté.
Cordialement
Bertrand