To personalize the design of your site beyond what the back office settings allow, you can edit the CSS of your theme.

This article will guide you step by step.

1. Access your site's files

There are two ways to access these files.

Via FTP

All the information is in our dedicated article!

Via your host's file manager

With the majority of hosts, you also have the option to access your site's files via the file manager.

Example with the IONOS host:

• Access your administration interface:

  

• Click on 'Use web space' in the 'Web space' section:

  

• You will then access the list of files present on the server:

  

2. Identify the CSS file to edit

In the list of files in your shop, go to the CSS folder of your theme: '/themes/name_of_your_theme/assets/CSS'

In this folder, you will access the list of CSS files of your theme.

You will find a 'theme.css' file, as well as a 'custom.css' file for the majority of themes. Please prioritize opening the ‘custom.css’ file.

If this file does not exist in the CSS folder, then open the ‘theme.css’ file and go to the end of the file to add your instructions.

3. Open the file with a code editor

We recommend installing a code editor to make your modifications. Find out how to do this in the dedicated article.

4. Make the changes

You can make your CSS additions/modifications in the opened file.

If you would like to learn the basics of CSS, we also have an article to help you.

Once your modifications have been saved and sent to the server, return to your back office and clear the cache by going to 'Advanced settings/Performance':

Once the cache has been cleared, you can go to the front office and observe the changes made.

Frequently asked questions

What should I do if my changes do not appear?

• Make sure you have cleared the PrestaShop cache after adding or modifying the file.custom.css.
• Check that the filecustom.css It is correctly loaded by inspecting the sources via the browser (F12 or right-click > Inspect > Sources tab).
• Please ensure that you have saved your changes in your text/code editor and sent the changes to the server by clicking "Yes" in the window that opens in FileZilla.