How to install (and customize) a theme on my PrestaShop store?

PrestaShop is full of free and paid themes so that you can find the one that best suits your needs in terms of design, ergonomics or features.

There are several reasons to install a PrestaShop theme: you are just starting your website on PrestaShop or you want to redesign your website, improve its performance or change its visual identity completely. 

Installing a PrestaShop theme should be taken seriously. It is the theme that will partly guarantee the proper functioning of your site. So there are several steps to respect:

Before installing a PrestaShop theme, you need to choose it. PrestaShop has a large library of themes for your e-commerce site. To find a theme that suits your needs, start by making a list of the specific characteristics or features you are looking for.

Choose your PrestaShop theme carefully

To save time on the implementation, choose themes that are compatible with your PrestaShop version. Indeed, a non-compatible theme requires additional settings to adapt it to your version of the CMS. Also remember to check that the theme you are interested in supports multilingualism and that it is responsive on different supports.

Use a pre-production

It is essential to go through a pre-production stage to install your PrestaShop theme. The installation of the theme can create conflicts on your site and generate more or less damaging breakdowns. In the worst case, your site could be totally inaccessible.  

The pre-production environment is accessible by site administrators with login access. By testing your new theme on a staging environment, you keep your production site functional for your users, even in case of failure. You can then release your changes in production as soon as they are operational.

And by the way, the Parachute solution makes sense here: you can install your new theme, test its performance, compare it with others, make adjustments and much more without risking damaging the live version of your store. Remember that one of the great advantages of the Parachute solution is that you have a pre-production environment that works right away, without the need to make any configurations to make it reflect the behavior of your production site. Your pre-production store is already configured and ready to use.

Install your PrestaShop theme

Installing a theme on a PrestaShop store can be more or less complicated depending on the version of the CMS. While it is relatively easy on PrestaShop 1.7 or 1.6, it requires to go through a theme installer on PrestaShop 1.5. Moreover, it is possible that the theme must be installed directly from the FTP server if it is not possible to proceed conventionally from the back office of the shop.

Install a theme on PrestaShop 1.7

To install a theme on PrestaShop 1.7, nothing could be easier. In the left menu, go to the “Design” section and click on “Theme & Logo”. In the top right corner, click on the “Add new theme” button. Download your theme in ZIP format, then click on “Open” and “Save” to finalize the installation on your CMS.

Once the theme is installed, you can find it in your theme library, in the same section as your current theme. Select it, and click on “Use this theme”. Go to your site to view your new theme. You will probably need to make some adjustments for an optimal display.

Install a theme on PrestaShop 1.5 or lower

For PrestaShop versions 1.5 or lower, it is necessary to use the theme installer. This is a module that you can download for free from PrestaShop. Once installed, you can import your theme in zip format.

First click on “Choose a file”, select your theme, click on “Next” and then on “Finish”. During this step, remember to install the necessary modules to make the theme work. You will find your new theme from your PrestaShop dashboard, in “Preferences” then “Theme”.

Install a PrestaShop theme via the FTP server

As said before, some themes will require an installation directly on the FTP server of your site. First, unzip the theme you downloaded in zip format to get the different folders that make up the theme. 

Access your server and copy the content of the “Theme” folder of your new theme in the folder of the same name on the server. Do the same for the “Modules” folder, if it exists. Finally, copy the config.xml file of the theme and paste it in the config/xml/themes folder. Rename it with the name of your theme folder so that it can appear on PrestaShop. 

You will find your theme in your back office by going to the “Design” menu and clicking on “Theme & Logo” for a PrestaShop 1.7, or by going to the “Preferences” menu and then “Themes” for a PrestaShop 1.6. Select it and click on “Activate” to set it up. Don’t forget to also activate the modules present in your theme.

Configure your theme in PrestaShop

Once the installation is finished, you can configure your theme from PrestaShop. To do so, go to your PrestaShop dashboard and access the “Theme” category. There, you can change some elements such as logos and favicon.

Customize your PrestaShop theme

Once your PrestaShop theme is installed and configured, the last step is to customize it. Indeed, it is possible that you need to make modifications on your new theme, to change the presentation or the design of some contents of the site.

You can only customize very few elements from your PrestaShop back office. It will therefore be necessary to make modifications to the theme directly in the CSS files, and more precisely in the file named “custom.css”. Please note that you have to be careful with this kind of modifications and think about defining the CSS rules in order to find your way easily. 

There are also tools that allow you to find, modify and debug certain elements of the site more easily. Firebug for example is an extension for Firefox from which you can directly modify and test the CSS, HTML, DOM or JavaScript content of a web page. You can then retrieve these modifications to integrate them into your site from the FTP server.

Since version 1.7 of PrestaShop, it is possible to create a “child” theme from the chosen theme. This allows you, among other things, to make more customizations without changing the original elements present in the “parent” theme. These modifications can be done in the TPL files, which contain all the basic functions of your PrestaShop.

To conclude, installing a theme on your PrestaShop store should not be done in a trivial way. You can do it easily but only if you have a certain organization. To be safe, the most important thing is to first do this installation and all its adjustments on a pre-production environment. Even if it seems useless at first, you are not shielded from a malfunction and this would be really harmful for your e-commerce.

With Parachute, you benefit from an environment that is completely identical to your store, on which you can observe the effects of a new theme, without jeopardizing your production version. Once your choice of theme, its installation and adjustments have been validated in pre-production, you just have to publish them on your production version. Nothing could be easier!