To customize your site's design beyond what the back office settings allow, you can edit your theme's CSS.

This article is a step-by-step guide.

 

1. Access your site files

Two paths exist to access these files.

 

Via FTP

Read all about it in our dedicated article!

 

Via your host's file manager

With most hosts, you can also access your site files via the file manager.

An example from IONOS:

• Access your administration interface :

  

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

  

• This takes you to the list of files on the server:

  

 

2. Identify the CSS file to be edited

In your store's file list, go to your theme's CSS folder: '/themes/your_theme_name/assets/CSS'.

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

You'll find a 'theme.css' file, as well as a 'custom.css' file for most themes. It's best to open the 'custom.css' file.

If it doesn't exist in the CSS folder, 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 that you install a code editor to make your modifications. Find out how in the dedicated article.

 

4. Make changes

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

If you'd like to learn the basics of CSS, we've also got an article to help you.

Once your changes 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.

 

Frequently asked questions

What should I do if my changes don't appear?

• Make sure you have cleared PrestaShop's cache after adding or modifying thecustom.css.
• Check that thecustom.css is correctly loaded by inspecting sources via the browser (F12 or right-click Inspect Sources tab).
• Make sure you've saved your changes in your text/code editor and sent them to the server by clicking yes in the FIleZilla window that opens.