✅ PrestaShop - Changements de thème de base

Table des matières

Bien que le thème de base par défaut de PrestaShop C'est tout à fait fonctionnel, un magasin ne peut pas être mis en ligne de cette façon, d'abord parce que nous courons le risque qu'un autre magasin ait exactement le même aspect et ensuite parce que le thème de base contient peut-être des choses dont nous n'avons pas besoin ou sont organisés de manière non conforme à notre magasin.
Pour cette raison, la personnalisation est la voie que nous suivons toujours, soit en plaçant un nouveau thème, soit en modifiant l'existant, de sorte que la disposition des éléments et les couleurs puissent être différentes.
Premiers changements
Nous allons commencer à apporter des modifications simples mais très efficaces qui rendront le thème totalement différent de ce qu'il est par défaut, pour cela nous allons suivre les étapes suivantes :

Nous allons changer le logo, nous le faisons depuis l'administrateur du back-office, pour cela, nous allons télécharger l'image dans la section : Préférences -> Apparence.
Ensuite, nous devons aller à Back-Office -> Module -> Outils -> Éditeur d'accueil.
Nous avons remplacé le logo central lors de la configuration du module.

Après ce démarrage, nous allons maintenant modifier certains éléments de position pour un plus grand effet de personnalisation :

On change la position du bloc Catégorie: dans la colonne de gauche.
Nous désactivons les produits spéciaux.
Nous modifions les informations en catégories.

Voyons la capture d'écran suivante pour que nous puissions examiner les modifications que nous avons apportées, nous remarquerons que certaines choses ont été déplacées de droite à gauche et que d'autres colonnes ne sont plus là et donc d'autres sont montées en position :

Maintenant, le thème par défaut semble très différent, si nous n'obtenons toujours pas un bon résultat, ne vous inquiétez pas car c'est quelque chose de nouveau et en tant que tel, nous devons nous entraîner un peu avant de devenir des experts dans le domaine.
Changer le CSS
Un autre changement très efficace est la modification des fichiers CSS avec lequel nous pouvons changer, par exemple, la couleur de fond du magasin.
Pour les besoins de cet exemple, nous allons utiliser Firefox et vos outils de développement ou si vous préférez le pyromane.
Pour activer l'édition du CSS avec les outils de développement, nous allons simplement faire un clic droit sur le magasin et sélectionner l'option Inspecter l'élément, puis dans le menu qui apparaît, nous sélectionnerons éditeur de styles.
Maintenant, si nous utilisons pyromane, nous disons simplement inspecter l'élément avec firebug, puis nous allons dans l'onglet CSS.
Dans la fenêtre qui est apparue et une fois dans la section CSS nous allons localiser le fichier global.css et nous allons essayer de changer le code de Couleur de l'arrière plan.

 corps {couleur de fond : [b] bleu [/ b]; taille de la police : 11px ; famille de polices : Verdana, Arial, Helvetica, Sans-Serif ; couleur : # 5d717e ; text-align: center}

Grâce à ces outils, le changement s'effectue en temps réel et nous avons la possibilité de le visualiser afin que nous puissions voir nos progrès dans l'instant :

Comme on peut le voir, le fond bleu est un changement très drastique, mais efficace, évidemment il n'a pas l'air très beau puisque les lettres et autres éléments doivent être ajustés, cependant on voit l'important et c'est qu'une simple couleur peut faire un différence.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif