Pages 404 Prestashop

Prestashop 1.7 – Optimiser la page 404 (ép. 49)

Vous avez certainement déjà vu des pages 404 affichées sur certains sites… c’est énervant vous êtes d’accord ? Souvent ça gave aussi le client alors il existe une méthode toute simple pour redonner le sourire à tout le monde.

La page introuvable qui fait mal

Quand vous recherchez quelque chose de précis sur une boutique en ligne et que vous êtes pressé, rien de pire que d’avoir une page d’erreur 404… . Si en plus le cas se répète plusieurs fois… votre client va certainement partir rapidement… il faut donc absolument capter son attention en cas d’erreur.

La page 404 en standard n’est pas optimisée, il y’a juste un simple texte qui nous dit que la page est introuvable (quel dommage). Ce que je propose c’est que l’on intègre un bon de réduction sur la page d’erreur pour « s’excuser » auprès de l’internaute et par la même occasion lui montrer des produits de la catégorie phare (ou catégorie de votre choix).

Vous allez me dire « Quoi ? Faire une réduction quand y’a une erreur du shop ! C’est n’importe quoi ! ». Voyez le plutôt comme une opportunité… si vous donnez 5% de réduction, le client « aura » l’impression de flairer une bonne affaire, mais si vos marges sont correctes vous restez gagnant dans le deal.

Et de plus vous savez quoi ? Lorsque vous aurez beaucoup de clients qui utilisent des bons de réduction « 404PROMO » vous allez penser : « Peut-être que faut que je vérifie l’état de mes liens morts dans ma console Google Webmaster » (voyez-le comme un rappel à l’ordre ahahah).

Comme toujours en e-commerce, il faut faire des optimisations « simples » et mettre en place des « micro-boost » de ce genre un peu partout dans le shop. Tous ces petits détails vont faire la différence au final et vous devenez petit à petit un e-commerçant innovant qui continue d’optimiser en permanence sa boutique Prestashop. Alors, motivé ? Go… passage à l’exécution !

Ressources

Pour ce tutoriel vous aurez à disposition :

  • 1 x fichier PageNotFoundController.php (pour charger des produits)
  • 1 x fichier not-found.tpl (pour afficher les produits + bannière)
  • 1 x fichier 404.psd (exemple de bannière pour le bon de réduction)
  • 1 x fichier custom.css (pour ajuster l’affichage)

Télécharger

Résumé de la vidéo : les liens morts en 404 sous Prestashop… c’est un argument marketing fort à exploiter

  • Analyse de la page 404 classique et constatations.
  • Contrôle sur la partie statistiques de Prestashop, cela ne semble pas remonter (en tout cas sur ma version en local / même avec optimisation du .htaccess).
  • Mise en place du fichier override qui va permettre de charger des produits sur la page 404, intégration aussi d’un TPL optimisé + un CSS contenant des nouvelles règles. Sur mobile l’affichage des produits est masqué pour éviter l’encombrement.
  • Bien vider les caches de Prestashop pour la surcharge de l’override, ainsi que le cache CSS du navigateur avec la console Google Chrome.
  • Intégration sur la page 404 d’une bannière avec un code de bon de réduction (faites quelques choses de simple).
  • Modification de la phrase d’accroche, soyez un peu plus convival que le message standard… une erreur 404 doit faire sourire l’internaute.
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 ! (14 votes, moyenne : 4,64 sur 5)
Loading...

7 commentaires sur “Prestashop 1.7 – Optimiser la page 404 (ép. 49)”

  1. Bonjour Germain,
    J’ai un souci , j’ai fait toutes les modifications de tes tuto qui touche le dossier override (la pop up newsletter, celle ci) . Cela marche au début puis je n’arrive plus à le refaire paraître la pop up même si j’efface les données dans F12 applications (j’ai réduit à 3 heures pour le cookie et 2 affichages). Les produits affichés sous la bannière de la page error 404 ne veulent plus revenir. La modification de la page produit avec un smiley comme indicateur d’acheteur n’a elle jamais marché.
    Ce matin j’ai remis tous les dossiers pour le pop up et ça a marché et ce soir RIEN.
    Je précise que j’ai la dernière mise à jour prestashop.
    Aurais tu une idée? J’adore ces modifications et je suis frustrée…soupir.

  2. Bonsoir Germain,
    Encore un merci pour tes tutos qui font gagner un temps précieux. Mais un souci avec celui-ci.
    not-found.tpl est effectivement appelé pour le 404 mais pas seulement !
    Exemple, si aucun produit actif n’existe dans une catégorie et qu’on la sélectionne dans le front-end, Smarty se fâche grave car forcément il ne trouve pas page.products.
    Si l’on supprime la div products, cause du plantage, ça fonctionne, mais la page front-end de la catégorie vide affiche l’image, le texte etc…
    De même, pas testé, mais si aucun résultat pour une recherche on doit être dans le même cas.
    Concrètement, je ne devrais pas modifier d’ici lundi, https://coeur-huitres-oleron.com/10-huitres-fines-de-claire. Heureusement pas mis en place le principe du code promo…
    Allez plus que 18 de tes tutos à étudier et mon premier Presta sera une réussite 🙂
    Bien cordialement.

    1. Bonjour,

      C’est une bonne remarque je l’ai remarqué par la suite, en fait il est possible d’encapsuler le code ajouté par :

      {if $page.page_name=='pagenotfound'} VOTRECODE {/if}
      

      De cette manière on est certain que le contenu va s’afficher uniquement sur la page 404 et pas ailleurs.

      A bientôt !

      1. Salut, déjà, merci pour tout c’est tuto 😉

        N’étant pas très à l’aise avec le code, je souhaiterai avoir plus de précision pour l’ajout de cette ligne: « {if $page.page_name==’pagenotfound’} VOTRECODE {/if}
        A savoir son emplacement exacte et à quoi correspont « VOTRE CODE »
        N’empêche que l’idée de personnaliser l’erreur 404 me taraudait depuis un moment, de cette façon on peux vraiment faire un truc sympa. Pour exemple:https://cosmetique-bio-et-naturel.fr/erreur.html

Laisser un commentaire

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