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.

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

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

Laisser un commentaire

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