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éder aux fichiers de votre site

Deux chemins existent pour accéder à ces fichiers.

 

Via FTP

Toutes les informations sont dans notre article dédié !

 

Via le gestionnaire de fichiers de votre hébergeur

Avec la majorité des hébergeurs, vous avez également la possibilité d’accéder aux fichiers de votre site via le gestionnaire de fichiers.

Exemple avec l'hébergeur IONOS :

• Accédez à 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. Identifier 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. Ouvrir 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 dédié. 

 

4. Faire les modifications

Vous pouvez faire vos ajouts / modifications CSS dans le fichier ouvert.

Si vous souhaitez découvrir les bases du CSS, nous avons également un article pour vous aider.

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.