Modifier la bannière d’un site prestashop 1.6

Modifier l’apparence de votre site Prestashop 1.6 : changer la bannière.

Dans ce tutoriel, nous allons voir comment changer l’image et la couleur de fond de la bannière avec prestashop 1.6.

changement de bannière

 

Connexion au back office

Rendez vous dans le back office de votre site en tapant :
http://localhost/prestashop/admin0000 (admin0000 est le nom que nous avions donné au dossier admin dans le tuto installer prestashop en local).
Connectez-vous à l’aide de votre adresse e-mail et de votre mot de passe.

connexion prestashop 1.6
Modification de l’image de la bannière

Passez la souris sur l’onglet MODULES, puis cliquez sur Modules, descendez jusqu’à la liste des modules. Tapez dans le champ recherche « bloc bannière » et enfin cliquez sur configurer.

alt="recherche du module bloc bannière sur prestashop 1.6"

 

Votre image doit avoir une taille de 1170px de long pour 65px de large, c’est la taille prévue par prestashop. Si vous mettez une image de taille différente, elle sera automatiquement déformée.

Cliquez sur « choisissez un fichier », sélectionnez votre image sur votre disque dur, le nom de votre fichier s’inscrit dans le champ, validez. Votre fichier est installé à la place de l’ancien.

Vous pouvez mettre un lien à votre image qui pointe vers une page de votre site. N’oubliez pas de mettre une description à votre image.

Modification de la bannière sur prestashop 1.6

 

Pour voir le résultat cliquez sur : « ma boutique » (en haut à droite).

ma boutique

Voici ce que ça donne pour moi :

mise en place de la bannière

 

Comme vous pouvez le voir ma bannière est verte et le fond est noir, nous allons maintenant voir comment changer le fond.

Modification de la couleur de fond de la bannière

Pour modifier les fond, il faudra modifier le code CSS. Pour cela nous avons besoin d’un éditeur de texte par exemple notepad ++, un éditeur de texte gratuit et très bien fait.

Rendez-vous sur le site de notepad et téléchargez la dernière version notepad ++

Vous pouvez aussi suivre notre tutoriel sur comment installer notepad++

Copie du thème

On va travailler sur une copie du thème pour toujours garder une sauvegarde de l’original.Si vous ne l’avez pas déja fait, suivez notre tutoriel : Faire une copie de son thème prestashop 1.6

Ouvrez le dossier de votre thème, trouvez le dossier CSS à l’intérieur ouvrez le fichier global avec notepad++.

fichier global.css

 

Pour changer la couleur de fond du header, rendez-vous au bloc « header .banner » à la ligne 5274 (le numéro de la ligne peut varier).

css bannière

 

La ligne « background: black; » représente la couleur de fond. Pour changer cette couleur, remplacez black par une valeur hexadécimale composée de 6 chiffres précédés d’un dièse.
Vous pouvez trouver les valeurs hexadécimales à l’adresse suivante dans la colonne du milieu:

Couleurs du web

Remplaçons black par un vert clair afin d’harmoniser la bannière

Changement de couleur de la bannière

 

Admirez le résultat en vous rendant sur votre site. Moi ça donne ça :

Nouvelle bannière

 

N'hésitez pas à laisser un commentaire

Vous pouvez vous abonner à notre newsletter mensuelle pour être informé de nos nouveaux tutoriels.

Vous pouvez aussi aimer notre page facebook.

25 thoughts on “Modifier la bannière d’un site prestashop 1.6

  1. Bonjour
    Merci pour votre tuto, j’ai cependant une question je souhaite utiliser le module banner pour télécharger une image qui s’integrerait dans le fond du header, j’ai essayer de modifier le header.tpl afin de changer la position mais l’image se superpose dans le header auriez vous une astuce pour que l’image soit en fond du header
    Merci d’avance pour votre aide

    1. Bonjour,

      La bannière c’est la zone tout en haut alors que le fichier header.tpl gère une zone beaucoup plus grande.
      Je ne comprend pas où vous souhaitez modifier le fond. Dans tous les cas normalement la modification du fichier css suffit.

      1. Bonjour

        Je souhaiterais un renseignement concernant une modification de ma boutique en ligne faite par un ami.
        Aujourd’hui lorsqu’on arrive sur ma page d’accueil cette dernière propose différentes catégories de produits. Ma questions est-il possible d’ajouter une nouvelle catégorie et si oui comment ?
        Dans la négative comment faire pour modifier le nom d’une de ces catégories.
        Dans l’attente de vous lire
        Bien cordialement

    1. Bonjour,

      Dans le blockbanner.css, il faut enlever les limitations de hauteur. En enlevant les lignes max-height: 65px;
      Ligne 1 :

      #header .banner a {
      display: block;
      max-width: 1170px;
      max-height: 65px;

      et ligne 7
      #header .banner a img {
      display: block;
      width: 100%;
      height: 100%;
      max-height: 65px;
      max-width: 1170px;
      }

  2. Bonjour,
    je cherche à mettre une image dans la partie header à gauche des blocs « recherche » et « panier ».
    J’ai le code ci-dessous lorsque j’utilise l’outil de développement :

    je n’arrive pas à identifier le fichier qui contient ce code et modifier HXL de 28px à 177px.

    Je vous remercie cordialement d’avance si vous pouvez me dépanner.
    ps : mon site est encore en local

  3. Bonjour,
    Question qui pourra sembler idiote : j’ai fait créer le site par un professionnel. Est il possible pour moi de modifier le fond sans être le créateur du site ?
    Bonne soirée

    1. Bonjour,

      Le professionnel a t’il juste crée le site ou gère t’il l’infogérance ?
      Si sa prestation s’arrête à la création du site, il doit vous remettre tous les accès à l’hébergement et donc au FTP qui va vous permettre d’accéder aux fichiers. Avec cet accès vous pouvez parfaitement modifier le design même si vous n’avez pas crée le site. Nous modifions de nombreux sites que nous n’avons pas crée.
      Après si le site est en infogérance chez le professionnel tout dépend du type de contrat que vous avez avec lui.
      Si vous êtes amené à faire régulièrement des modifications, je vous conseil de faire une copie de votre site en local.
      Sinon ayez toujours une copie de vos fichiers avant vos modifications.

      Bonne journée

      1. Bonjour,
        Le professionnel a créé le site et m’a communiqué les login et mdp pour modifier le site, en ligne.
        Mais je ne comprends pas où accéder aux fichiers type CSS.
        Par contre, pour faire une copie du site, j’ai lu dans votre tuto qu’il faut faire comme si on créait un thème. Cela créera t il les fichiers dont j’ai besoin ?
        Merci beaucoup.

          1. Bonjour,

            Avec vos accès à ovh, vous avez accès au ftp du site donc aux fichiers.
            Vous n’avez plus qu’a installer un logiciel de gestion de fichiers à distance comme FileZilla et vous pourrez accéder à vos fichiers.

  4. Bonjour

    Et savez vous s’il est possible de supprimer complètement le bloc bannière pour ne laisser aucune image ? Si oui, comment faire ?

    Merci à vous !

  5. Bonjour,

    Merci beaucoup pour votre tuto qui m’est fort utile.
    Mais toute fois, j’aurais bien voulu savoir s’il était possible de mettre l’inscription du newsletter dans cette bannière.

    Je vous en remercie d’avance.

Répondre à Dejean Annuler la réponse.

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