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)

Télécharger

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