Accueil e-commerce Prestashop

Prestashop 1.7 – Améliorer sa page d’accueil (ép. 27)

La page d’accueil d’une boutique e-commerce c’est la base… il faut que cela fasse bonne impression et qu’on sente clairement que la boutique est vivante. Pour cela je vous propose de tester ma manière de faire.

Une page d’accueil performante ?

C’est quoi le top du top pour une page d’accueil ? J’ai pas la science infuse… mais à mon sens c’est une page qui est rapide… qui distribue du contenu et qui donne la sensation qu’il y’a vraiment une entreprise active qui a envie d’aider le client.

Le premier point important concerne le slider, dans ce tutoriel je préconise qu’on le retire pour les raisons suivantes… Le slider… presque tout le monde clique sur la 1ère slide, cela fait des images en plus à charger (donc plus lent) et les sliders responsives ne sont pas forcément très ergonomique (en 2014 j’étais déjà contre le slider).

Il y’a aussi la problématique de ne pas mettre assez de texte en avant, le but est donc de créer des petits blocs qui vont rendre l’accueil plus vivant. Il est important de développer une actualité en exploitant les pages CMS de votre boutique e-commerce Prestashop.

Encore un dernier point très important, dans ce tutoriel je vous montre comment faire une page d’accueil simple pour que vous puissiez la mettre en place rapidement. Le but est qu’ensuite chaque deux semaines ou chaque mois… vous puissiez actualiser votre accueil et lui donner un air de « renouveau ». Notez donc bien dans votre agenda, de faire un changement régulier du contenu sur votre page d’accueil pour continuer à intéresser vos clients.

Ressources

Pour ce tutoriel vous avez à disposition :

  • Deux bannières format PSD pour améliorer votre page d’accueil.
  • Un fichier d’exemple HTML pour obtenir une présentation différente.
  • Un fichier CSS pour mettre en forme le nouveau contenu HTML.

Télécharger

Optimisons ensemble la homepage Prestashop

  • Le but ? Avoir une page d’accueil rapide et convaincante.
  • Désactivation du slider pour laisser place à une image simple.
  • Présentation d’un exemple de bannière réalisé sous Photoshop. Vous pouvez aussi télécharger des images professionnelles gratuitement sous Unsplash.
  • Utilisation de LayoutIt pour générer une structure HTML avancée.
  • Intégration du HTML dans le bloc de texte personnalisé de Prestashop.
  • Test de l’intégration dans un format responsive.
  • Conclusion une méthode simple et administrable que je recommande.

BOUM !

1 seul mail par semaine - pas de publicité

35 commentaires sur “Prestashop 1.7 – Améliorer sa page d’accueil (ép. 27)”

  1. Salut Germain,
    Un grand merci pour tes tutos vraiment clair et complet qui m’ont vraiment permis d’ameliorer mon site. Du coup je voulais suivre ton nouveau tuto mais je m’apercois qu’il faut utiliser le bloc de texte personnalisé que l’on a deja utilise dans un précedent tutos. Question un peu naive mais peux ton utiliser deux fois ce modules sur sa page d’accueil ou faut il trouver un module different.
    Merci d’avance
    Etienne

    1. Hello,

      Si le bloc est déjà utilisé il est aussi possible de faire un peu autrement, par exemple en laissant activé le slider sur l’accueil mais en vidant le fichier « \themes\classic\modules\ps_imageslider\views\templates\hook\slider.tpl ». Ensuite, vous mettez votre code HTML directement dans le fichier TPL.

      A bientôt !

  2. Quand tu as parlé des inconvénients du slide c’est exactement ce que je rencontre! Pas une monstre envie de la mettre à jour!

    J’ai suivi cette vidéo avec intérêt pour la v2 de ma boutique, tout est mis en place, restera à peaufiner quelques détails avant la mise en ligne. De bonnes idées!

    Merci pour ce partage !

    1. Hello,

      Justement, je pense donc qu’il est préférable d’avoir une image seulement et de miser sa motivation sur celle-ci en faisant une seule fois le travail. Cela te motivera certainement plus à la changer régulièrement durant les périodes clés de ton activité.

      A bientôt !

  3. Salut,
    Merci pour ce tuto, je pense qu’il fera partie de ma page d’accueil ;o)

    Par contre, pourquoi ne pas avoir utilisé les variables URL de smarty pour rendre le code transportable pour le jour ou il n’est plus local ;o)

    Si tu as une V2 avec le code smarty, c’est volontiers, parce que j’en parle mais je n’arrive pas à le mettre en place :o(

    A+

    1. Hello,

      En fait le code HTML intégré dans le module ne peut pas être dynamique, on ne peut pas mettre des variables Smarty dans du contenu stocké en base de données, car cela doit être mis directement dans le template Smarty.

      Tu peux éventuellement laisser activer le module slider, vider le fichier TPL du slider et mettre ton code dedans si tu préfères.

      A bientôt !

  4. Bonjour, merci pour vos tutos qui me son bien utile je suis en train de creer mon site et je rencontre quelques difficultés et je ne pense pas avoir vu les réponses sur vos différents tuto. Alors si vous avez le temps et les réponses à mes questions ca serait génial…

    Sur la page d’accueil je souhaite changer la police et le texte  » Produits populaires » idem pour le texte « vous aimerez aussi » quand on clique sur une page produit.

    Après je voulais changer la police dans le bloc texte libre, il n’en propose aucune. Je pense que j’ai ma réponse avec votre vidéo il faut que je passe par le code source et que je rajoute la police que je souhaite???

    Merci d’avance et bonne continuation, Sandrine

    1. Bonjour,

      Pour tout ce qui concerne les textes de Prestashop, il faut passer via l’outil de traduction et rechercher la chaîne à traduire : http://doc.prestashop.com/display/PS17/Traductions

      Pour modifier la police, il faudrait à mon avis effectuer une règle CSS qui change la police sur l’élément concerné et si la police est « exotique », inclure une police du style avec Google Font : https://fonts.google.com/ cela fonctionne assez bien via l’intégration web (je regarderai prochainement pour faire un tutoriel pour lier Prestashop à Google Font).

      A bientôt !

  5. Bonjour,

    Ce tuto m’a été grandement utile, un grand merci! Etant novice j’aimerais savoir comment créer un lien sur les boutons qu’on vient de créer via le tuto afin qu’ils redirigent vers des pages cms?

    Cdt

    1. Bonjour,

      Le plus simple est de procéder de la manière suivante, vous créez la page CMS et vous l’activez. Ensuite, vous pouvez faire apparaître le lien en fond de page sous « Apparence -> Link Widget ». Il suffira ensuite de copier / coller ce lien et de re-désactiver l’affichage du lien de page dans le footer.

      A bientôt !

  6. Bonsoir de Bretagne,

    Super tuto … comme d’habitude d’ailleurs !

    Je souhaite témoigner du fait qu’à force d’intégrer les modules d’amélioration de Webbax, j’arrive à personnaliser le look de ma boutique, mais pas seulement.

    En effet le bénéfice d’un tuto s’ajoute au bénéfice du précédent.
    C’est vraiment très bien car je me dis, petit à petit, que la nécessité de l’achat d’un thème avec tous les risques que cela comporte s’éloigne de plus en plus.

    Il est vrai que j’aime bien ce principe d’améliorer chaque jour, par petites touches l’outil. Cela correspond bien à ma vision de la progression, step by step de l’amélioration et de la qualité.

    De plus, cela me permet aussi de progresser gentiment dans la compréhension du fonctionnement de l’aspect purement informatique de Prestashop, que je découvre depuis quelques mois.
    Ce qui me permet d’appréhender la limite de ma capacité d’intervention sur le plan technique ce qui me sera très utile pour échanger de façon pertinente avec des prestataires pour les futures évolutions du site.

    Enfin, je me rends compte en faisant aussi petit à petit l’acquisition de connaissances en terme de SEO, qui est un sujet qui me parait absolument essentiel d’optimiser avant le lancement de la boutique, combien sont pertinents les conseils de Germain.

    Tout ceci pour – une fois encore – remercier Germain pour cette dynamique vraiment très intelligente puisqu’il nous fournit petit à petit un outil d’une incroyable richesse !

    Bon, ceci étant dit, j’ai trouvé aussi une petite astuce pour pouvoir charger le texte du bloc de texte pour notre ami Google sans pour autant imposer un gros pavé à l’utilisateur qui serait plutôt dissuasif qu’autre chose : j’intègre une partie du texte entre des balises … . Cela permet d’avoir un texte avec un « effet accordéon » qui me semble plutôt pas mal !

    Enfin, j’ai réussi à trouver que Prestashop stockait le texte du bloc de texte dans une table PS_info_lang avec un id_info à 1, donc à priori il est possible de gérer plusieurs blocs différents à intégrer dans différentes parties du site mais il ne semble pas que le back-office de PS l’ait vraiment prévu. Il est vrai que cela n’est peut être pas pertinent …

    A bientôt !

    1. Bonjour,

      De mon côté je dois aussi mentionner quelque chose d’important, ce que je propose n’est pas forcément une science exacte. Ce sont des méthodes d’approches progressives qui me permettent à moi aussi d’expérimenter certaines choses et par la même occasion ça peut aider les lecteurs. En même temps le niveau de compétence de ceux qui me lisent peut monter petit à petit, car à force il y’a des automatismes qui se mettent en place et ça les aide à comprendre la logique Prestashop.

      Merci pour votre fidélité et ce commentaire très valorisant !

  7. Merci Germain pour ce tuto que j’ai découvert par hasard.
    Je vais l’utiliser sur une boutique, je l’ai essayé en local, c’est parfait comme bien souvent avec les vidéos
    Je connaissais http://www.layoutit.com/build mais je n’ai même pas penser à l’utiliser dans le module « texte personnalisé »
    et encore merci

    1. Hello,

      Merci pour le retour, c’est effectivement une méthode toute simple… mais qui permet de faire un peu plus que ce que propose l’éditeur standard Prestashop.

      A bientôt !

  8. Salut Germain
    J’ai étudier ta méthode, mais l’affichage ne me convenait pas car trop chargé à mon gout, mais il m’a donné de l’inspiration …
    Du coup j’ai directement utilisé le carrousel, ne gardant qu’un slide fixe et n’utilisant pas les champs de textes, puis j’ai supprimé les boutons de défilements.
    De cette façon la modification de l’image est plus facile à modifier pour une personne novice et le rendu est satisfaisant.
    Quand penses tu ? https://cosmetique-bio-et-naturel.fr/

    1. Hello,

      Très bonne idée, mieux vaut 1 image fixe qu’un slider avec 5 slides qui ne sont jamais actualisées. Ensuite, cela dépend vraiment des goûts de chaque marchand, mais le côté approche par « bloc » rend le shopping ludique sur la homepage.

      A bientôt !

  9. Bonjour,
    Merci pour vos médias de support, très utiles, je suis vraiment novice en la matière.
    J’essaye d’appliquer le code de ce tuto sur la page d’accueil de notre site, mais les trois vignettes et textes s’affichent à la verticale l’une de l’autre, alors qu’il devraient être distribués à l’horizontale. J’ai recopié votre code et modifié le fichier css comme indiqué. Sauriez vous d’ou peut venir ce problème ?
    Merci pour votre aide !

  10. Merci pour tous ces tutos.
    Par contre, celui-ci, malgré le cache vidé, les CCC désactivés, rien n’y fait les images restent trop grandes et ne s’adaptent pas. J’ai donc adapté la taille de l’image dans l’admin au niveau du module.

  11. Bonjour, je débute j ai donc suivi les étapes dans l’ordre .
    j ai un petit soucis , les images ne sont pas responsives
    je ne sais donc pas ou mettre le fichier custom.css ou quel fichier modifier avec celui ci
    merci.

  12. Bonjour Germain,

    Merci pour toutes vos videos qui sont plus intéressantes les unes que les autres.
    Je travaille sur un projet de multi-boutiques où une boutique est la boutique « maître » qui renvoie vers des « sous-boutiques ». Sur les « sous-boutiques », je cherche à créer un menu (au dessus du module menu) où il y aurait le nom de la « sous-boutique active », un lien « Où nous trouver » renvoyant vers Gmap, un lien vers « Notre boutique et les horaires » renvoyant vers la page « Magasins » de Prestashop. Je souhaiterais utiliser des fonctions existantes du back-office de Prestashop pour permettre un paramétrage facilité par la suite.
    Cependant je ne parviens pas à trouver de solution pour créer ce menu de manière simple. J’ai identifié une option: le fait d’utiliser les « link widget » pour faire cela. Il semblerait que les « link widgets » créés s’appliquent à toutes les boutiques et non pas seulement à la boutique active. Néanmoins, je me suis aperçu que:
    – le link « magasin » est bien lié à la boutique active = OK
    – je ne parviens pas à trouver le link qui renverrait vers la page d’accueil de la boutique active = ?
    – comment pourrais-je créer un link qui ouvrirait une URL externe comme Gmap?

    Auriez-vous une suggestion pour que j’utilise mieux le module « link widget »? Auriez-vous une idée d’alternative?

    Merci infiniment

  13. Wahh je découvre cette vidéo et je vais tenter de faire ce que vous expliquez. je suis pas une grande experte mais vos explications me semblent claires. je viens juste de migrer mon site sur 1.7.8.
    merci vos vidéos sont très claires et simples.

Laisser un commentaire

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