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.

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

    Répondre

      1. Salut schooukroun,
        tu peux modifier cette ligne dans le fichier suivant :
        \themes\classic\modules\ps_imageslider\views\templates\hook\slider.tpl
        Amicalement,
        Jean-Louis

        Répondre

      2. Bonjour,

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

        A bientôt !

        Répondre

    2. Bonjour,

      Tout d’abord merci pour vos vos supers tutos ! Mais je bloque avec celui là. J’ai bien modifier les règles qu’il fallait dans le fichier slider, insérer les photos au bon endroit avec le bon nom, vider les caches et réactualiser en forçant l’affichage pourtant rien n’est modifié et mon slider utilisé précédemment reste tel quel. Avez-vous une idée par rapport à ce blocage ?

      Merci d’avance pour votre réponse.

      Répondre

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

    Répondre

    2. Bonjour,
      Avez-vous réussi à faire un overlay par image pour faire apparaître avant le clic de la souris une petite description ? Si oui, pouvez-vous nous partager votre astuce svp ? Car cela m’intéresse aussi. Merci d’avance. Cordialement,

      Répondre

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

    Répondre

    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 !

      Répondre

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

    Répondre

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

    Répondre

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

    Répondre

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

    Répondre

    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 !

      Répondre

  11. Salut Germain
    J’ai appliqué ton tuto sur mon site, et vraiment, c’est top !
    Sur smartphone c’est le top de la navigation.
    Je souhaiterai aller plus loin et pouvoir reproduire ce style de menu à « tuiles » sur les pages catégories, a tu des info ou … un tuto, merci.

    Répondre

  13. Salut
    super tuto, je suis nouveau sur prestashop, j’ai suivi le tutoriel, tout ok, mais je n’arrive pas à remplacer les images pour des images différentes, j’ai toujours une répétition de la même image. C’est possible de placer les banner multiples ailleurs que dans le carrousel? un conseil?
    Merci par avance

    Répondre

    1. Hello,

      Pour les images, il faut utiliser les mêmes noms que celles dans mon tutoriel et les déposer dans le dossier racine « /img ». C’est possible de mettre cela ailleurs certainement, mais je ne l’ai pas expérimenté dans ce tutoriel.

      A bientôt !

      Répondre

  14. Ce tutoriel, m’a beaucoup aidé. Merci !
    Du coup, j’ai poussé le truc un peu plus loin pour « simplifier » la sélection des image.
    J’ai souhaité, récupérer automatiquement, les catégories (sauf accueil et root) ainsi que leurs images. Et j’en suis tellement content que je partage :

    {* Webbax - Tuto 43 - Bannières multiples Homepage *}

{assign var='categories' value=Category::getSimpleCategories($language.id)}

    {foreach from=$categories key=k item=category}
        {if $category.id_category &gt; 2}
            
                <a>getCategoryLink($category.id_category)|escape:'html':'UTF-8'}"&gt;
                getCatImageLink($category.name, $category.id_category)|escape:'html':'UTF-8'} alt="{$category.name}" title="{$category.name}" class="img-responsive" /&gt;
                  
                    {$category.name}
                  
                </a>
            
        {/if}
    {/foreach}

    J’ai en plus ajouté le nom de la catégorie par dessus l’image et adapté le custom.css pour que cela soit plus joli.
    Personnellement, j’ai en plus modifié la fonction getSimpleCategories dans le fichier Category.php pour ne récupérer que les catégories actives.

    Patager, partager, partager…

    Répondre

    1. Bonjour,

      Félicitations, pour cet ajustement et pour avoir réussi à adapter le code de Prestashop… Prochainement je vais essayer d’aborder la problématique du code, car je reçois beaucoup de questions à ce sujet et il faut vraiment être patient pour trouver des solutions fonctionnelles.

      Je vais voir si je peux aider pour initier (aux lecteurs) la bonne logique à avoir pour être autonome en manipulant du code…

      Merci pour votre partage !

      Répondre

  15. Bonjour,
    Alors cet article me titillait depuis un moment. Je le trouvais génial mais j’osais pas me lancer jusqu’à hier.
    J’ai opté pour le mode « amélioration carré dans tous les sens » et j’en suis ravi !!
    Mes clients aussi et c’est encore mieux.
    Merci donc pour ce tuto lumineux qui je trouve fait de nos sites « classic » des sites modernes et merci pour finalement nous donner confiance à toucher un peu le code quand on y connait rien
    Pour voir les possibilités https://toutelacontention.com/

    Répondre

    1. Bonjour,

      C’est très bien je vois que vous avez appliqué de nombreux conseils sur votre boutique Prestashop 😉

      Bon succès dans votre avancement !

      Répondre

  16. Webbax t’es vraiment méga méga génial. Tes tutos sont superbes et je te remercie pour toute cette générosité et tes tutos que je suis pas à pas. Je voulais juste te demander comment est ce que tu as coloré ton langage sur notepad qui n’est pas du html ? D’ailleurs c’est quel langage là où il y a explode dans ton fichier slider.tpl ? Sur mon notepad, il apparaît en gras et en noir alors que sur le tiens il est coloré comme en html donc beaucoup plus lisible. Pourrais-tu me donner la consigne stp ? Merci d’avance et bravo pour ton travail.

    Répondre

    1. Hello,

      Pour l’affichage de la coloration dans Notepad++ tu peux changer la coloration sous « Language -> H -> HTML » et même le TPL Prestashop aura ainsi de la coloration.

      Merci pour le retour positif !

      Répondre

  17. Bonjour et merci!
    ça marche tout nickel chez moi, j’aimerais juste centrer les images (j’ai un nombre d’image impaire) je l’ai fait pour mes pages produits mais là pas moyen…
    Peux tu m’aider?
    merci!

    Répondre

Laisser un commentaire

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