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

10 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 ?

Laisser un commentaire

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