Bannières homepage pour Prestashop

Prestashop 1.7 – Bannières multiples (ép. 43)

Est-ce qu’on est obligé d’avoir une page d’accueil comme tout le monde ? Pas forcément, parfois il peut-être sympa de proposer une page d’accueil avec des blocs de bannières cliquables. Alors, prêt pour l’expérience ?

Des images de contexte à l’accueil

Est-ce que vous êtes capable de faire rêver vos clients ? Leur donner envie… et susciter chez eux une forme d’excitation ? Je constate que bien souvent… il manque sur beaucoup de sites e-commerce une mise en contexte. Hé oui, pour qu’un client ait envie d’acheter il faut avant tout le faire rêver.

En partant de ce principe on peut se poser la question s’il est judicieux sur une page d’accueil de balancer immédiatement des produits et des prix… Sur beaucoup de sites Prestashop, je constate que le contexte est complètement absent… on nous montre que la photo du produit, mais on ne voit pas l’ambiance qui gravite autour (des gens en train d’utiliser le produit… des photos qui donnent envie)… Par exemple Ikea à travers ses produits… ils font rêver avant de vendre (oui c’est une grosse entreprise, mais c’est le cas flagrant qui me vient en tête).

Comment vous pouvez faire pour inspirer vos clients ? A votre place, je serais assez radical dans un premier temps… je supprimerais tout le contenu inutile en page d’accueil et je mettrais à la place, de belles images qui me donnent envie de rentrer dans chaque catégorie (faire une mosaïque d’image sur la homepage).

Vous me direz peut-être… « Oui Germain t’es bien gentil, mais les autres sites ne font pas ça… ». Et alors ? En fait il y’a aussi une explication, les marchands produisent peu de contenu visuel, encore moins des photos de contexte, car c’est long et ça demande du temps… Et pour les photos des produits, bien souvent ils les prennent de leurs fournisseurs. Ne faites pas comme les mauvais exemples 😉 !

Pour donner un exemple chez nous en Suisse, vous avez par exemple DeinDeal qui applique cette méthode avec des bannières sur deux colonnes… Personnellement je trouve que c’est assez incitatif au clic chaque produit est exposé dans un contexte qui fait envie. Et vous que pensez-vous de cette méthode ?

Ressources

Pour ce tutoriel vous aurez à disposition :

  • 1 x fichier de slider.tpl optimisé pour les bannières multiples
  • 1 x fichier CSS pour la présentation des bannières
  • 1 x bannière PSD d’exemple

Télécharger

Résumé de la vidéo : des bannières sur la homepage de Prestashop

  • Les bannières offrent un gros avantage en terme d’intégration, cela facilite grandement le responsive et ça permet de faire de beaux visuels.
  • Le but ? Pouvoir greffer des bannières en page d’accueil de manière illimitée et que ça soit pas trop complexe à manager.
  • Intégration du code dans le slider.tpl et ajustement du fichier custom.css.
  • Création de la bannière et déplacement des fichiers d’exemple dans le dossier racine /img de Prestashop.
  • Ce processus fonctionne en multilingue et est compatible responsive.
  • Test sur mobile avec essai d’affichage sur deux colonnes.
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 : 5,00 sur 5)
Loading...

6 commentaires sur “Prestashop 1.7 – Bannières multiples (ép. 43)”

  1. Hello,

    Pour ceux qui veulent un affichage encore plus fun, vous pouvez remplacer :

    <div class="col-xs-6 col-sm-4 bloc">
    

    par

      <div class="col-xs-6 {if $k==0}col-sm-12{elseif $k==1 || $k==2}col-sm-6{else}col-sm-4{/if} bloc">
    

    A bientôt !

  2. Bonjour et bonne année,
    J’ai suivi le tuto et il fonctionne super bien. Merci pour le partage !
    Est-il possible de rajouter un overlay par image pour faire apparaître, avant le clic de souris, une courte description ? Si oui comment faire ?
    Par avance Merci

Laisser un commentaire

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