Pages CMS Prestashop un nouveau style

Prestashop 1.7 – Optimiser les pages CMS (ép.18)

Trop souvent on a tendance à délaisser les pages CMS de la boutique Prestashop, c’est vrai que bien souvent elles ressemblent à des pavés de textes. Cette période est révolue, place à la customisation !

Episode 18

Les pages CMS de Prestashop sont bien souvent austères, car elles manquent de mise en forme. Pourtant, il ne suffit de pas grand chose pour les « revisiter », en réduisant la largeur de page en ajoutant une image et en définissant une nomenclature des balises du type « HX » tout de suite ça fait meilleure façon.

Cette manière de faire permet aussi à des petits contenus (de quelques lignes) d’avoir une apparence crédible lors de l’affichage. Cela vous semble être un détail ? Peut-être mais en e-commerce le cumul des détails fait la différence pour rassurer le visiteur et l’incitera peut-être à rester plus longtemps sur votre site.

Encore une chose, n’oubliez pas que les pages CMS peuvent aussi faire office de page d’information, d’actualité… de news… Soyez créatifs et exploitez la création des pages CMS, pour faire des articles d’informations complémentaires à vos fiches produits ou pour présenter et appuyer votre marque. Les pages CMS peuvent être un levier pour votre référencement naturel, il ne reste plus qu’à créer du contenu !

Ressources

Pour ce tutoriel vous avez à disposition :

  • theme.css.txt (extrait de règles CSS)
  • page.tpl (structure de la page CMS)
  • cms.psd (exemple de bannière)

Télécharger

Au programme

  • Quel est le but de modifier le rendu de la page CMS ?
  • Faisons le point sur l’affichage actuel et optimisons le contenu via CSS. Ensuite, nous comparons le résultat sur les différents supports (mobile / tablette / desktop).
  • Modifiez bien le bon fichier « \themes\classic\templates\cms\page.tpl » de manière à avoir un titre avec la balise <h1> et une image qui puisse s’intégrer automatiquement. L’image doit correspondre à l’identifiant de la page CMS.
  • Dans votre contenu pensez à toujours ajouter des balises <h2> pour la nomenclature du contenu et pour le référencement / SEO.
  • Soyez « mono-colonne », le contenu simple fonctionnera sur tous les supports et pendant longtemps.
  • Visez des petites optimisations (comme nous le faisons aujourd’hui), afin d’avoir une boutique Prestashop rassurante.

18 commentaires sur “Prestashop 1.7 – Optimiser les pages CMS (ép.18)”

  1. Bonjour,

    Merci pour votre article !

    Pourriez-vous me dire comment avoir une page CMS qui s’affiche en full width. Mon theme actuel est en deux colonnes mais il y a bien un fichier layout-full-width.tpl dans templates/layout ?

    Merci.
    PS : prestashop 1.7.2.2

    Répondre

  2. Merci pour vos tutoriaux très explicites qui permettent d’améliorer pas à pas mon thème Classic 1.7.2.2
    Cependant j’ai un problème au niveau de tutoriel.

    j’ai modifié le fichier theme.css sans problème, par contre j’ai beau intervenir sur le fichier page.tpl, celui-ci n’apporte aucune modification une fois rechargé??? je procède pourtant de la même manière qu’avec le .css
    J’ai été amené dans un autre tutoriel à modifier le fichier product.tpl et j’ai eu le même problème, pas de modification sur le site ???

    Peux t’on me donner une piste de travail? merci d’avance

    Merci d’avance pour votre aide.

    Répondre

  3. Bonsoir
    Je souhaite changer l’ordre des pages cms. Je l’ai fait dans le back office, mais à l’affichage c’est toujours celui de base.
    Auriez-vous une idée svp ?

    Et merci merci merci pour ce que vous nous proposez

    Répondre

  4. Bonjour,

    Merci pour cet excellent partage !

    Il serait intéressant d’ajouter une balise ALT aux images.
    J’imagine que la modification doit porter sur le fichier cms.tpl :

    Que conseillez-vous de mettre à la place des pointillés pour une balise optimisée ?

    Répondre

    1. Bonjour,

      En fait dans le code du TPL proposé il y’a déjà la balise ALT optimiséee en mettant automatiquement le titre de la page CMS sur l’image… c’est le champ le plus simple à intégrer pour qu’il soit automatiquement lié (manageable) en back-office.

      Pour le futur vous pouvez poster du code en mettant la balise [php]votre code brut[/php].

      A bientôt !

      Répondre

  5. Bon tuto comme d’habitude, merci beaucoup

    Sur un tuto (https://www.webbax.ch/2016/03/25/ameliorer-les-categories-cms-et-pages-cms-de-prestashop/) vous aviez abordé l’amélioration des catégorie sur 1.6, mais a priori la version 1.7 est totalement différente à ce niveau.

    j’ai bien essayé avec les élements apportés par

    Jérôme Laure dit :
    18 mars 2018 à 11 h 23 min
    Bonjour, pour la version 1,7 le code à modifier se trouve dans : « monthème/templates/cms/category.tpl » ligne 47

    {$cms_page.meta_title}
    à remplacer par :

    getCMSLink($cmspages.id_cms, $cmspages.link_rewrite)|escape:’html’:’UTF-8′} » id= »title »>{$cmspages.meta_title|escape:’html’:’UTF-8′}
    getCMSLink($cmspages.id_cms, $cmspages.link_rewrite)|escape:’html’:’UTF-8′} » id= »title »>


    Pour la feuille de style c’est dans « montheme/assets/css/custom.css et voici le code :

    .list_pages{margin-top:20px;}
    .list_pages #title{font-size:20px;text-align:center;display:block;margin-bottom:10px;color:#6CF;}
    .list_pages img{border:hidden; margin: 10px 0; padding: 10px;}
    .list_pages img:hover{opacity: 0.8;filter: alpha(opacity=80);}
    à éditer à votre souhait.
    et enfin les images se placent dans le dossier suivant :

    adressedevotresite/img/cms/id_category.png

    mais a priori ça ne fonctionne pas sauf erreur de ma part.

    merci d’avance si vous envisagez de mettre le tuto a jour pour les categories cms de presta 1.7

    bonne continuation et encore merci

    Répondre

  6. Bonjour et merci pour ce super tuto.

    J’ai essayé de m’en inspirer pour un problème légèrement différent mais je coince.

    Pouvez vous m’indiquer comment changer le backround-color d’une page cms spécifique svp ?

    Répondre

    1. Bonjour,

      A vérifier je crois que dans le code source de la page il y’a une classe mise sur le body de chaque page CMS ce qui permet ensuite d’établir une règle CSS sur chaque page spécifique (à contrôler).

      A bientôt !

      Répondre

  7. Bonjour,

    Pour la page CGV qui s’affiche en mode POPUP vous pouvez ajouter les règles suivantes : 

    /* tous les supports */
.modal .page-content h1{font-size:30px;margin-bottom:20px;}
.modal #banner-cms img{max-width:100%}
.modal #banner-cms{margin-bottom:20px;}  

/* desktop */
@media(min-width:1024px){ 
    .modal .page-content.page-cms{margin-left:25%;margin-right:25%;}
}

/* tablette vert. - small */
@media(max-width:768px) AND (min-width:600px){ 
    .modal .page-content.page-cms{margin-left:10%;margin-right:10%;}
}

    A bientôt !

    Répondre

    1. Bonjour,

      Certainement possible, mais il faut inclure la librairie dans le fichier header TPL du thème (pas certain qu’elle soit intégrée de base).

      A bientôt !

      Répondre

  9. Bonjour , petit soucis au niveau des CMS , lorsque j’écris mon texte et que j’enregistre celui ci n’est pas pris en compte a tu déjà eu affaire a sa ?

    Répondre

Laisser un commentaire

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