Arrière plan Prestashop

Prestashop 1.7 – Dynamiser l’arrière-plan (ép.3)

Ce que je recherche aujourd’hui c’est surtout le moyen de faire beaucoup, mais avec peu. L’arrière-plan d’une boutique e-commerce peut donner un aspect tout autre dès le premier coup d’oeil !

Episode 3

Les images c’est bien souvent ce qui attire l’oeil dès la première visualisation, actuellement il est très facile de greffer un arrière-plan sur une boutique e-commerce grâce à quelques règles CSS. Il fut un temps ou mettre un arrière-plan c’était vu comme « Kitsh », mais les tendances changent.

En ce moment la tendance c’est d’être épuré, pré-dominance blanc (c’est ce que fait le thème standard de Prestashop 1.7). Du coup, je pense que cela vaut la peine de l’utiliser et d’ajouter une touche de différentiation grâce à l’arrière-plan.

Cette manière de faire présente beaucoup d’avantages, car elle permet de donner un look totalement différent à votre boutique rien qu’avec une seule photo. Comme la procédure est simple à exécuter, vous aurez plus facilement la motivation et l’envie de le changer au grès des saisons / événements.

Ne cherchez pas à faire quelque chose de complexe, choisissez une belle image sur Pixabay et faites quelques tests d’intégration. Si l’image ne convient pas tout à fait… choisissez en une autre et testez un autre fond.

Ressources

Pour ce tutoriel vous avez à disposition

  • Fichier bg.psd
  • Fichier css.txt (règles à ajouter)

Télécharger

Au programme

Ajoutons un nouvel arrière-plan à notre e-commerce :

  • Présentation de l’idée / concept, avec ses avantages.
  • Analyser les résolutions actuelles des internaute via le site screenresolution, puis définir un choix de résolution.
  • Choisir une image sur Pixabay.
  • Créer une image dans Photoshop & ajouter un dégradé vers le blanc.
  • Sauver l’image dans le dossier du thème de Prestashop.
  • Intégrer les nouvelles règles CSS à votre fichier « theme.css ».
  • Explication en détail des règles CSS.
  • Test de modification du fond avec des images différentes.

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

16 commentaires sur “Prestashop 1.7 – Dynamiser l’arrière-plan (ép.3)”

  1. Excellente idée que cette image de fond. Cela permet de se différencier des concurrents tout en renouvelant régulièrement et à moindre frais l’aspect graphique de la boutique Prestashop. Merci pour ce tutoriel.

    1. Oui, cette manière de faire est simple mais donne un joli effet. Par contre, il est important que le template soit bien épuré comme le standard (sinon cela donne vite un effet sapin de noël).

  2. bonjour
    je suis dans l’arboressence de presta 1.7.0.2 avec netbean
    mais quand je deroule (theme)(classic)(asset)je n’es que deux dossier
    css et js ..pas de dossier (cache) et (img) … meme apres reinstall
    ma question est :- faut il les rajouter manuellement ou bien j’ai une erreur de decompression?
    merci pour votre reponse.
    cordialement : Alain

    1. Bonjour,

      Pour le dossier « img » il faut le créer manuellement c’est ce que j’avais fait… pour le dossier cache, ne faites rien laissez Prestashop faire le nécessaire si besoin.

      A bientôt !

  3. bonjour

    mon fichier theme css il n’y a pratiquement rien dedans et je viens de rajouter votre code, j’ai créé le dossier pour mettre l’image, j’ai vidé le cache mais rien ne se passe.
    dans le fichier css vous mettez #wrapper{background:url(‘../img/bg.jpg’) top center no-repeat;
    est-ce que je dois mettre le lien complet ou est l’image svp ?

  4. Bonjour,

    Super boulot vos tutos !
    Dans un autre tuto vous donnez l’astuce pour un fond de couleur uni, je me pose alors une question pour ce fond d’écran :
    Est-il possible de mettre un fond d’écran uni, surmonte d’une photo ou alors une photo suivie d’un fond de couleur ? (ces 2 solutions ayant un résultat visuel identique).

    Dans le cas d’un fond rouge, visuellement on aurait alors une photo avec le bas en dégradé vers le rouge, suivi du fond rouge allant jusqu’en bas du site.
    Merci.
    Mickael

    1. Bonjour,

      Cela est peut-être possible en utilisant une image d’arrière-plan en format .PNG (avec transparence) et en effaçant en dégradé le fond de l’image… afin que la couleur de fond HTML du body ressorte. A expérimenter…

      A bientôt !

  5. Je tiens à te dire un sincère merci pour le temps que tu passes à transmettre tes connaissances à d’autres. Voici donc ma question : comment fais-tu pour placer des liens par exemple sur chaque côté du background ? Je te remercie d’avance pour ta réponse

    1. Hello,

      Cela n’est pas possible avec la méthode utilisée, car il faudrait avoir 2 bannières verticales cliquables (hors de la grille) + gérer aussi l’approche responsive. Actuellement je préconise plutôt d’ajouter une bannière de publicité dans le header ou le footer.

      A bientôt !

  6. Les tutos sont super clairs et très bien faits.
    Je débute sur Prestashop et Netbeans.
    J’ai fait plusieurs évolutions en suivant les tutos sans problème, mais sur celui-ci, je n’arrive pas à ouvrir le fichier theme.css
    Seules 7 lignes du fichiers s’ouvrent et des tas de messages d’erreurs filter out CSS parsing errors apparaissent et semblent bloquer l’ouverture du fichier complet.
    J’ai eu beau chercher sur les forums, pas trouvé de résolution au pb…j’ai ouvert le fichier avec d’autres IDE, résultat identique. Le fichier theme.css aurait-il un pb ?
    Merci !

Laisser un commentaire

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