Pour personnaliser le design de votre site au delà de ce que permettent les paramètres du back office, vous pouvez éditer le CSS de votre thème. Cette article va vous guider étape par étape.
1. Accédez aux fichiers de votre site
Vous pouvez retrouver les fichiers de votre site soit sur votre FTP (voir l'article Se connecter en FTP sur le serveur de votre boutique), soit en passant par votre interface d'hébergement.
Exemple avec l'hébergeur IONOS
Rendez-vous sur votre interface d’administration
Cliquez sur ‘Utiliser l’espace web’ dans la section ‘Espace web’ :
Vous accédez alors à la liste des fichiers présents sur le serveur
2. Identifiez le fichier CSS à éditer
- Dans la liste des fichiers de votre boutique, rendez-vous dans le dossier CSS de votre thème : ’/themes/nom_de_votre_theme/assets/CSS’
- Dans ce dossier, vous accédez à la liste des fichiers CSS de votre thème.
- Vous allez y trouver un fichier ‘theme.css’, ainsi qu’un fichier ‘custom.css’ pour la majorité des thèmes. Privilégiez l’ouverture du fichier ‘custom.css’.
- Si celui-ci n’existe pas dans le dossier CSS, ouvrez alors le fichier ‘theme.css’ et rendez-vous à la fin du fichier pour ajouter vos instructions.
3. Ouvrez le fichier avec un éditeur de code
Nous conseillons d'installer un éditeur de code pour y effectuer vos modifications. Découvrez comment faire dans l'article Installer un éditeur de code sur votre ordinateur.
4. Faire les modifications
Vous pouvez faire vos ajouts / modifications CSS dans le fichier ouvert.
Une fois vos modifications enregistrées et envoyées sur le serveur, retournez sur votre back office et videz le cache en vous rendant dans ‘Paramètres avancées/Performances’.
Une fois le cache vidé, vous pouvez vous rendre sur le front-office et observer les changements opérés.
|
💡 Si vous souhaitez découvrir les bases du CSS, nous avons également un article pour vous aider. |
Questions fréquentes
Que faire si mes modifications ne s'affichent pas ?
- Assurez-vous d'avoir vidé le cache de PrestaShop après avoir ajouté ou modifié le fichier
custom.css. - Vérifiez que le fichier
custom.cssest correctement chargé en inspectant les sources via le navigateur (F12 ou clic droit > Inspecter > onglet Sources). - Assurez-vous d’avoir sauvegardé vos modifications dans votre éditeur de texte / code et d’avoir envoyer les modifications sur le serveur en cliquant sur oui dans le fenêtre qui s’ouvre dans FIleZilla.