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 ! (11 votes, moyenne : 4,91 sur 5)
Loading...

21 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 !

      1. Bonjour,

        Dans le fichier « \themes\classic\modules\ps_imageslider\views\templates\hook\slider.tpl » fourni en téléchargement.

        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

  3. Bonjour,
    Merci de ce tutoriel permettant de combler en partie l’absence de l’éditeur de page d’accueil sur PS 1.7.
    Est-ce qu’il serait possible, en jouant sur les « col-sm-xx » d’avoir des lignes de photos différentes (mais de même hauteur), par exemple :
    – une ligne de trois photos faisant chacune 1/3 de la ligne.
    – une ligne de deux photos faisant 1/3 de la ligne et 2/3 de la ligne.
    Par ailleurs serait il possible de placer un court titre cliquable sous chacune des photos (en plus du « title » au survol) ?
    Merci par avance de vos réponses.
    Cordialement.
    JF David

    1. Bonjour,

      Oui c’est possible, regardez dans les commentaires (le 1er POST) j’ai proposé une méthode pour un affichage plus fun, il faut utiliser ce principe pour ce que vous voulez faire.

      Pour le lien, il faut remettre une balise du genre :

      <a href="{$link}">{$title_{$language.iso_code}.$k}</a>
      

      Mais c’est à tester… à bientôt !

  4. Bonjour,
    J’utilise déjà le module Carrousel en haut de ma page d’accueil.
    Comment faire pour l’utiliser une seconde fois de manière indépendante ?
    Merci 🙂

  5. Bonjour,
    Je suis débutant sur prestashop et je viens de découvrir votre blog. Vos tuto sont très facile à comprendre.
    Cependant, je souhaiterais savoir comment centrer les bannières sur la page, en effet après avoir suivi votre tuto mes bannières sont décalées.
    Merci d’avance.

  6. Bonjour Germain,
    je désire mettre une bordure autour des images des bannières et je n’y arrive pas. J’ai placé la règle suivante #banners_home img{border: 5px red;} dans custom.css, sans résultat et je l’ai également essayé dans themes.css, sans résultat non plus.
    Toi ou une des personnes lisant ce message aurait-elle une solution ?
    Je vous souhaite une agréable journée,
    Jean-Louis

  7. Bonjour Germain!
    Tout d’abord un énorme merci pour le travail que vous accomplissez qui nous est d’une grande aide à nous jeunes jedi de la force Html & Css. Grâce à vous et avec peu de manip une boutique ordinaire prend de la gueule et se démarque des autres.

    Mon problème est le suivant… Je souhaiterais simplement retirer la possibilité de cliquer sur les bannières.
    Ayant fait plusieurs essais en modifiant le slider.tpl, en retirant les liens ou toute la div concernant les links, les bannières ne s’affichent plus. Merci pour votre aide

    1. Bonjour,

      Si vous désirez retirer les liens sur les bannières, il faut supprimer à la ligne 76 et 78.

      <a href="{$link}">

      et

      </a>

      A bientôt !

Laisser un commentaire

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