Prestashop de A à Z – la bannière du haut (ép.3)

Cette semaine, on commence à mettre la main à la pâte sur un élément concret, la bannière du haut de la boutique. Ce bandeau est un élément permanent vu par tous vos visiteurs.

Prestashop bannière du haut

Tutoriel n°3

Au sommet de la page de votre boutique, vous avez une bannière noire qui peut afficher un message de votre choix, nous allons la modifier pour rediriger les clients vers les promotions. Notre but est de conserver le maximum d’éléments possibles du thème par défaut et que ça puisse rester « professionnel »,  sans devoir modifier tous les codes couleurs, on va donc conserver la couleur de base noir.

Pour trouver l’inspiration, rien de tel que de regarder ce qui se fait chez des concurrents et de s’inspirer de leurs idées.

Ressources

Pour ce tutoriel nous vous fournissons :
1 x bannière d’exemple au format Photoshop

Au programme

  • Analyser ce que fait la concurrence dans le header et définir la meilleure idée.
  • Voir la taille de la bannière existante avec Firebug via le navigateur.
  • Vous n’avez pas Photoshop ? Téléchargez la version d’évaluation, cet outil est un indispensable pour tout e-commerçant.
  • Sur Dafont, vous trouverez des polices gratuites et originales pour vos compositions.
  • Regardons notre exemple de bannière, nous vous proposons un modèle simple avec « une idée claire », « un bouton », « un lien ». Dans votre approche, essayez toujours de rester le plus simple et concis possible.
  • Configurons ensemble le module Prestashop « bannière d’entête ».
  • Ajoutez un raccourci rapide vers le module pour gagner du temps et de la visibilité en back-office.

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

4 commentaires sur “Prestashop de A à Z – la bannière du haut (ép.3)”

  1. Bonjour,
    D’abord merci de vos précieux conseils.
    Je voulais simplement savoir comment faire pour justement changer le fond noir en un fond blanc par exemple.
    J’ai modifié le global.css mais ça ne fonctionne pas.
    Merci

    1. Bonjour,

      Concernant le fond noir, vous voulez dire celui de la bannière ? Pour cela il faudra directement modifier le fichier Photoshop fourni dans l’archive.

      Bonne continuation !

  2. Épisode 3, je te suis depuis un moment, et j’ai décidé de te faire confiance pour configurer la boutique, pour le moment je suis, mais tu vas un peu vite pour les néophytes comme moi, autodidacte c’est dur dur, calme sur la vitesse.
    j’ai juste remplacé le logiciel photo que tu propose par gimp il est gratuit, et incompréhensible aussi, ils se valent tous les deux.
    Bon j’y retourne, on est pas loin de trente j’ai un temps a récuoèrer
    A + JC

    1. Hello,

      Pour le logiciel de gestion graphique il existe aussi Canva qui semble permet de faire des choses intéressantes directement en ligne : https://www.canva.com/. C’est très bien, je vous encourage à continuer la création de votre boutique Prestashop 😉

      A bientôt !

Laisser un commentaire

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