Knowledgebase
How to customize and manage themes in PrestaShop 1.5-1.6
In this article we'll briefly go over the settings in the admin panel of PrestaShop for customizing and configuring your themes, as well as for exporting and creating new themes. For screenshots and more details check out the tutorial on how to configure and manage themes in PrestaShop.
If you need information on how to install themes and change the active theme read the tutorial on how to install and switch themes in PrestaShop, or the shorter article version.
Theme Logos
To change the logos of your site, go to Preferences menu>Themes sub-menu and under the current theme you'll see the options for changing the logos. By default, an example logo is used as the header logo, and the logo used for invoices and emails is the same. Use the option for the header logo to upload a new image from your local computer that will be used as the header logo. If you don't upload a different logo for the invoices and emails, the header logo will be used. There are options with which you can also change the favicon (the icon shown in the address bar of the web-browser) and the store icon shown on Google maps. There are options with which you can enable the lighter mobile version of the theme that's shown when the site is viewed with mobile devices. Of course, the theme should have such a version. Otherwise, the regular theme version is shown.
Theme Configurator
PrestaShop 1.6 introduced a core module called Theme Configurator. It's purpose is to make it easier for you to control what's shown on the frontend of your site (in terms of blocks/modules and homepage images). Whether you can actually use this module also depends on whether the theme that you use is compatible with it. The default theme that comes prepackaged with PrestaShop is designed to make use of the theme configurator. To access and use it, go to Preferences menu>Themes sub-menu and click on the button Theme Configurator that's in the section showing the current theme (or go to Modules menu>Modules sub-menu, find the module Theme Configurator and click on its Configure button).
On the page that opens you'll see a list of blocks and links, and for each option there are Yes and No buttons with which you can control whether the particular element(s) should be shown on the frontend. For some of them there's also a Configure button which will redirect you to the options of the module that's responsible for the particular element (e.g. Facebook block).
Under the list with the frontend blocks you'll see another one which consists of the hooks/positions on the frontend that can be used to display images. If there are some images shown by these hooks, you'll see each image displayed under the particular hook. You can edit the settings of each image by clicking on its Edit button; from the options of the image you can disable it and thus hide it from being shown on the frontend. You can also delete each of these images. To add a new image, click on the Add item button that's above the images and use the settings that appear. You can select an image that you want to upload from your local computer, you can choose the hook to which you want to attach it and configure some other options.
The theme configurator is a sort of a shortcut to the various modules that are responsible for the different frontend features. You can enable/disable and manage the options of all modules that show blocks, links and other items on the frontend directly from Modules menu>Modules sub-menu in the admin panel.
Live Configurator
The Live Configurator tool comes with the theme configurator and can be used to change some of the colors of your site's frontend and the font of the text. Whether you can use it depends on the theme.
To access it, go to Preferences menu>Themes sub-menu, click on the button Theme Configurator, on the following page find the option Display Live Configurator and click on its View button. This will open a new browser tab displaying the frontend of your site. On the left side you'll see the button for the Live Configurator. When you click on it a panel will expand with options for changing some of the colors of the theme and the font.
Advanced Theme Settings
To edit the advanced settings of your current theme, go to Preferences menu>Themes sub-menu and on the page that opens click on the button Advanced Settings. This will open a new page with some options. You can change the name of the theme and the screenshot with which it's listed in the admin panel. You can also configure the number of products shown on category pages and change the theme's directory. Be careful with the option for the directory; if you change it, make sure that the new directory contains all the theme's files and folders. The options for the left and right column are just to inform whether the theme has a left and/or a right column; they don't actually affect the design of the theme. If you make any changes, don't forget to click on the Save button.
Under these options there's a list of the frontend pages and for each page it's indicated with a green checkmark or a red X symbol whether the left and right columns appear on the page. Clicking on a checkmark will turn it into an X symbol an vice versa, but this doesn't necessarily mean that the change will be reflected on the frontend. It will work for some pages and for others it won't; this also depends on the theme.
From the above mentioned advanced theme settings in PrestaShop 1.5 you can edit only the ones for the theme's name and directory. To do this, go to Preferences menu>Themes sub-menu in the admin panel and in the table with the installed themes click on the edit icon for the theme (it looks like a pencil).
Export Themes
You can export any of your installed themes. In the admin panel go to Preferences menu>Themes sub-menu and click on the Export theme button. On the following page select the theme from the drop-down menu and click on the Save button. On the next page there are some options that you can configure (e.g. name of theme, email address, etc.). When you click on the Save button that's on the page a window will pop out with which you can download the theme to your local computer; it's archived into a ZIP file.
In PrestaShop 1.5 this is done a bit differently. Go to Modules menu>Modules sub-menu, find the module Import/export a theme and click on its Configure button. On the page that opens you'll find the options for exporting themes.
Create New Themes
If you want to create a new theme, instead of creating each theme file from scratch you can use one of the installed themes as a base. For instance, you can use the default prepackaged theme. One way to do this is to manually create a new directory in the themes folder on your PrestaShop hosting account and then copy the files and folders of the original theme into folder of the new theme. For more information on this check out the article on how to create a child theme in PrestaShop.
Another way to do the same thing is from the admin panel. Go to Preferences menu>Themes sub-menu, click on the Add new theme button and on the following page click on the button Create new theme. On the page that opens there are some options with which you can set the name of the theme and the theme's directory that's about to be created. From the respective drop-down menu select one of the installed themes from which you want to copy the files. After you're done click on the Save button.
In PrestaShop 1.5 to create a new theme from the admin panel, go to Preferences menu>Themes sub-menu and click on the Add new button.
For screenshots and more details read the tutorial on how to configure and manage themes in PrestaShop 1.5-1.6.