Beaucoup d’e-commerçants sont agacés de ne pas pouvoir faire de belles mises en page sous Prestashop, du coup ils sont nombreux à faire appel à Elementor ou à des systèmes de « pages builder » pour créer des mises en forme complexes.

La frustration de la mise en page

C’est vraiment le coeur du problème, beaucoup d’e-commerçants veulent pouvoir faire une mise en page pour le web, comme ils le font dans un document Word… et souvent ça les énerve parce que le rendu ne correspond jamais à ce qu’ils souhaitent… c’est déformé, pas aligné et j’en passe. Il y a aussi ceux qui veulent ajouter des accordéons, des onglets, des galeries photos… En standard sur Prestashop vous ne pouvez rien faire de tout ça, vous avez juste un pauvre petit éditeur HTML dans lequel vous pouvez saisir du texte.

Elementor est un outil génial sur le principe

L’outil Elementor va coder des règles complexes pour vous et permettre de rendre votre Prestahop plus attractif dans l’immédiat. C’est ça qui est important de bien prendre conscience, dans 5 ans est-ce que le code généré sera toujours opérationnel ? Elementor assemble du code à la volée et va ensuite stocker cela dans votre base de données. Le problème de cette manière de faire c’est que du coup on stocke en base de données beaucoup de mise en forme, au lieu de stocker seulement la partie « données pérennes » avec les balises fondamentales indétrônables dans le temps.

Il faudra refaire votre travail lors de migrations & refonte de template

J’ai déjà fait l’expérience plusieurs fois, parce que moi aussi je voulais transposer vraiment sur mon propre site, mes idées et ce que j’ai vraiment envie de faire… Grave erreur ! Qu’est-ce qu’il a fallu faire ensuite lors de la migration ? Revisiter le code complet de chaque page, le nettoyer parce que le builder de l’époque était devenu obsolète. Bien sûr j’aurais pu me contenter de faire un ajustement à la volée, mais le rendu n’était pas vraiment professionnel. Depuis ces expériences, je me suis toujours dit qu’il fallait que je me concentre sur l’essentiel, pour avoir un contenu durable dans le temps et qui ne nécessite pas de réajustements en cas de changement de technologie, de thème ou de CMS.

Accepter de simplifier

On est en 2020 le trafic mobile explose, la mise en page du mobile c’est du « mono-colonne » c’est une réalité et il faut l’accepter. C’est notre cerveau qui doit se dire « OK je simplifie », j’arrête les mises en page complexe (comme je le montre en vidéo ci-dessous en prenant l’exemple du site « Le Temps »). A quoi ça sert de vouloir mettre 2 colonnes alors que les gens voient principalement 1 colonne en finalité ? Pourquoi coder des règles conditionnelles alors qu’une règle « mono-colonne » est tout simplement universelle et sans exception à gérer ? On oublie les images côte à côte et on privilégie les images l’une sous l’autre. C’est un cheminement qu’il faut pouvoir accepter, mais qui permet d’assurer un code maintenable dans le temps, avec peu de bugs.

Faire le travail 1 seule fois mais bien

Il est tentant de jouer avec l’éditeur, mais le code source généré reste assez indigeste. Si vous prenez le temps de passer en amont par une phase de génération via un fichier HTML, que vous copiez-collez directement sur Prestashop, c’est vraiment le TOP niveau qualité & uniformité. Peut-être que cela vous prendra un peu plus de temps au début, mais sur le long terme vous aurez « le code parfait & durable ». Cela semble insignifiant au début quand vous expérimentez le e-commerce, mais plus le temps passe, plus vous serez content d’avoir adopté cette méthode de travail parce que vous intégrez seulement la crème de la crème dans votre base de données (mmm délicieux).

Pour ce tutoriel Prestashop vous avez à disposition :

• 1 x fichier custom.css (pour le responsive & marges)
• 1 x fichier test-fr.html (structure de code basique)

Télécharger

Résumé de la vidéo : Mieux qu’Elementor, du code HTML clean sous Prestashop

• Testons l’éditeur Prestashop pour voir le code source généré.
• Ce que vous devez faire c’est utiliser uniquement les balises HTML basiques voir sur Openclassrooms.
• Idéalement vous créez une arborescence de dossiers en local avec vos fichiers HTML et vous partez toujours de cette base, sur Prestashop vous n’utilisez pas l’éditeur de code.
• Pour le SEO c’est aussi plus clair avec l’utilisation des balises H2.
• Que ce soit pour une fiche produit, une page CMS ou une page de blog, vous devez vous imposer de conserver une mise en page simple.
• L’affichage mono-colonne c’est le présent & l’avenir, il faut l’accepter.
• L’intégration des images, vous la simplifiez aussi (on le voit dans la vidéo en mettant simplement les images l’une sous l’autre).
• Le but c’est que vous ayez un contenu clean, vous n’avez pas envie de perdre du temps à refaire / revisiter votre travail à chaque fois que vous migrez ou que vous changez de thème.
• On teste la portabilité du code en déplaçant une page CMS dans une page produit et miracle tout fonctionne très bien.
• Vous voulez faire quelque chose de complexe ? Pensez autrement.