Couleur des boutons PrestaShop : utilisez custom.css au lieu de modifier theme.css

Où ajouter la couleur pour qu’elle ne disparaisse pas

Dans le custom.css du thème actif, et avec un thème acheté, idéalement dans un thème enfant. Avant d’ouvrir des fichiers, regardez les réglages du thème dans l’administration. Beaucoup de thèmes achetés ont leur propre module de configuration avec un choix de couleurs pour les boutons et les titres. La modification se fait alors en quelques clics, sans CSS. Le thème Classic n’a pas de tels réglages. Chaque endroit où vous pouvez faire la modification a des conséquences différentes.

L’ordre de chargement des feuilles de style est décrit dans la documentation sur la gestion des ressources du thème. Si des modifications du thème ont déjà disparu chez vous après une mise à jour, lisez que faire quand une mise à jour du thème a supprimé vos modifications.

Comment changer la couleur d’un bouton étape par étape

Il vous faut un accès aux fichiers du thème par FTP ou par le gestionnaire de fichiers de votre hébergeur.

1. Ouvrez une fiche produit et vérifiez la classe du bouton dans les outils du navigateur (clic droit, Inspecter).
2. Ouvrez le fichier assets/css/custom.css dans le dossier du thème actif.
3. Ajoutez une règle pour le bouton et une autre pour l’état au survol.
4. Enregistrez le fichier, en en gardant d’abord une copie.
5. Videz le cache dans Paramètres avancés > Performances.
6. Vérifiez la fiche produit dans une fenêtre privée et sur un téléphone.

Dans le thème Classic, le bouton d’ajout au panier a la classe add-to-cart. La règle peut ressembler à ceci :

.product-add-to-cart .add-to-cart {
  background-color: #2e7d32;
  color: #ffffff;
}
.product-add-to-cart .add-to-cart:hover {
  background-color: #1b5e20;
}

L’état au survol est décrit par MDN, au sélecteur :hover. Les téléphones ne l’ont pas, la couleur de base doit donc fonctionner seule.

Comment changer les couleurs d’autres éléments de la boutique

De la même façon, avec une règle dans custom.css, mais avec une autre classe. Voici des classes du thème Classic. Dans un thème acheté, les noms peuvent différer, vérifiez-les donc toujours dans les outils du navigateur.

Changez un élément à la fois et vérifiez la page après chaque modification. Plusieurs modifications à la fois rendent difficile de trouver celle qui a cassé quelque chose. Ajoutez aussi un court commentaire dans le fichier indiquant ce que vous avez changé et quand. Dans six mois, il sera plus facile de trouver la règle à corriger.

Un changement complet de la palette du thème, par exemple toutes les nuances de vert d’un coup, est généralement un travail sur les fichiers sources du thème et une recompilation. C’est en général un développeur ou l’auteur du thème qui s’en charge.

Comment choisir une couleur qui sera lisible

Vérifiez le contraste entre le texte du bouton et son fond avant d’enregistrer la modification. Pour un texte normal, les recommandations d’accessibilité préconisent un contraste d’au moins 4,5 pour 1, comme l’explique le W3C pour le critère de contraste. Vous pouvez vérifier une couleur dans le WebAIM Contrast Checker en saisissant les codes du fond et du texte.

Dimanche, 20 h 30, et vous changez le vert dans le fichier pour la troisième fois, videz le cache et rafraîchissez la page. La couleur vive de la marque est belle dans le logo, mais le texte blanc s’y perd. Une nuance plus foncée de la même couleur aide généralement.

Pourquoi ne voyez-vous pas la nouvelle couleur ?

Le plus souvent à cause du cache ou d’une règle trop faible. Vérifiez dans l’ordre :

• Avez-vous vidé le cache dans l’administration et rafraîchi la page en contournant le cache du navigateur ?
• Avez-vous modifié le custom.css du thème actif, et non celui du thème parent ?
• La règle du thème est-elle plus spécifique que la vôtre ? Ajoutez alors une classe parente à votre sélecteur.

Nous parlons plus en détail des couches de cache dans l’article modifications invisibles dans PrestaShop.

Comment changer la couleur du bouton avec le chat

Vous donnez la couleur et le bouton. Votre chat (Claude ou ChatGPT) trouve la feuille de style, montre la règle qu’il va ajouter et l’enregistre après votre accord, avec une copie du fichier.