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.

BOUM !

1 seul mail par semaine - pas de publicité

31 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 !

  7. Bonjour et merci de cette aide précieuse pour l’utilisation de Prestashop.

    Je vais paraître un tantinet volage mais est-il possible de limiter l’affichage du fond à la seule page d’accueil et de l’occulter par exemple sous les catégories et les produits ?.
    Merci d’avance.

    1. Hello,

      Vous pouvez essayer de modifier la règle « #wrapper… » par  » #index #wrapper… » cela force uniquement sur la page d’accueil (à tester).

      A bientôt !

  8. Bonjour,
    j’aime bien votre style, c-est-dire tout le contenu de la page glisse sur le fond d’ecran fixe.
    Est-ce que c’est complique a faire?

  9. Bonjour sur le site que je met en place pour une cliente la photo ce répète sur le fond d’accueil et sur les pages produit… dois-je agrandir la hauteur de la photo ?

    1. Bonjour,

      Soit il faut une image plus grande, ou alors il faut dire à l’image de fond de ne pas se répéter grâce à :

      background-repeat: no-repeat;
      

      A bientôt !

      1. Bonjour,

        Je vais voir pour mettre agrandir la photo comme je le pensais, car la fonction background-repeat: no-repeat; ne fonctionne pas 🙁 je suis sur prestashop 1.7.6.3.

        Mais en tout cas MERCI pour tout tutos qui m’aide grandement :).

        Bonne Journée !

  10. Bonjour, tout d’abord votre site est vos vidéos sont Geniallissimes et votre intérêt au partage l’est tout autant, merci pour ça.
    J’ai réussi à mettre sans problème le fond d’écran en place en suivant le tuto mais y’aurais t’il moyen d’avoir un fond d’écran différent selon la catégorie choisie ?

    Merci et bonne journée !

  11. bonjour, et merci pour tous vos tutos .
    est il possible de faire défiler plusieurs photos en fond d’écran ? et d avoir un effet de transparence dans le bloc texte personnalisé pour laisser apparaitre l image de fond. merci

  12. Bonjour,
    Merci pour ces tutos pleins d’infos d’utiles. Même si préfèrerais les avoir en texte plutôt que devoir regarder la vidéo, je comprends la démarche… 😉
    Une petite réflexion, pour avoir une image avec un poids minimal ne serait il pas intéressant de créer une image avec une partie blanche dans celle définit par le #wrapper .container ?
    Au plaisir !

  13. Bonjour,
    Je commence à regarder tes vidéos pour faire mon site et je les trouve top.
    J’ai une petite question après avoir vu ton ta vidéo.
    J’ai fixé l’image qui rend mieux pour mes essais mais je souhaite que les partie blanches des articles soit transparente à 30% environ afin de voir l’image du background entre les espaces des articles.
    Pourrais tu me dire comment le faire ? car quand je change l’opacité c’est tous les visuels qui change et non le bloc blanc.

    Merci d’avance

Laisser un commentaire

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