Les boutiques en lignes sont de plus en plus nombreux sur la toile, et si vous avez un projet en ligne que vous avez opté pour Prestashop comme solution open source pour l’e-commerce alors vous pourriez trouver ce tuto utile !
Changer l’icône « Caddie » en une autre forme
Vous avez peut-être le besoin de mettre un caddie plus sympa ou autre chose comme un sac qui correspond mieux à votre image de marque et votre secteur d’activité. Ce qu’il faut savoir, c’est que le dessin du panier sur Prestashop n’est pas une image, c’est une police de caractères stylisée (font-awesome) !
1 option, changer la police de caractère par une autre
Vous avez la possibilité de simplement choisir une autre forme dans la liste des font-awesome et l’affiché. Pour cela il vous faut
- L’accès au fichier CSS de votre Prestashop
- RDV dans le répertoire de votre thème « child_classic\child_classic\assets\css\»
- Ouvrir le fichier custom.css, et rajouter le code ci-dessous :
.fa-shopping-cart:before {
content: "\f07a";
}- Sur cet exemple de code, la valeur « \f07a » correspond au « caractère panier » !
- Remplacer la valeur « \f07a » par une autre. Exemple : « \f291 »
Voici le lien vers la liste des caractères disponibles : https://fontawesome.com/icons?d=gallery
Voici le lien vers la liste des caractères disponibles : https://fontawesome.com/icons?d=gallery
Option 2, changer la police de caractère par une image personnalisé
Pour des raisons esthétiques vous pourriez souhaiter mettre une illustration fait par votre graphiste préféré, dans ce cas la modification s’opère dans le même fichier CSS.
- Supprimer ou mettre en veille la ligne content: « \f07a »;
- Ajouter une image en Background
.fa-shopping-cart:before {
content: "\f07a";
}
