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.

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.css est 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.