Skip to main content
Sign in
Español Français Italiano

Customize the CSS of your site

  • Updated

To customize the design of your site beyond what is permitted by the back office settings, you may edit the CSS of your theme. This article will guide you step by step.

 

1. Access the files of your site.

You can find the files for your site either on your FTP (see the article Connecting via FTP to your store's server), or by accessing your hosting interface.

 

Example with the IONOS hosting provider

Go to your administration interface.

IMG-personal-css 1.png

 

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

IMG-perso-css 2.png

 

You will then access the list of files present on the server.

IMG-perso-css 3.png

 

Identify the CSS file to edit.

  • In the list of files for your store, navigate to the CSS folder of your theme: '/themes/your_theme_name/assets/CSS'.
  • In this folder, you will access the list of CSS files for your theme.
  • You will find a file named 'theme.css', as well as a file named 'custom.css' for the majority of themes. Prioritize opening the file 'custom.css'.
  • If it does not exist in the CSS folder, then open the file 'theme.css' and go to the end of the file to add your instructions.

 

Open the file with a code editor.

We recommend installing a code editor to make your modifications. Discover how to proceed in the article "Installing a Code Editor on Your Computer."

 

4. Make the modifications

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

Once your modifications are saved and uploaded to the server, return to your back office and clear the cache by navigating to 'Advanced Settings/Performance.'

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

 

💡 If you wish to learn the basics of CSS, we also have an article to assist you.

 

Frequently Asked Questions

What should I do if my changes do not appear?

  • Ensure that you have cleared the PrestaShop cache after adding or modifying the file.custom.css.
  • Verify that the filecustom.css is correctly loaded by inspecting the sources via the browser (F12 or right-click > Inspect > Sources tab).
  • Ensure that you have saved your changes in your text/code editor and have uploaded the changes to the server by clicking 'yes' in the window that opens in FileZilla.

Related articles