How to add new Color Schemes to the Prestashop 1.6 Theme

The Prestashop 1.6 theme configurator comes with 8 built in color schemes. That said, it might be worth knowing how to add new ones, when needed! Let’s see how to do it manually, and also with the help of a free module I created.

DOWNLOAD HERE – Prestashop Theme Extender module

Prestashop 1.6 color schemes structure

As a first step, it is fundamental to understand the file structure of color schemes in Prestashop 1.6. They are not located in the default-bootstrap theme folder, as we might think, but come as part of the Theme Configurator module. Therefore, to locate all the default ones, we must reach out the /css/ folder inside /modules/themeconfigurator/.

By default, it will contain one css file for each of the default fonts, and one for each of the color schemes. Notice that, if you want to use SASS, it worth having a look at the /scss folder instead, and create a ruby compiler in the main module’s folder, as it’s missing. In this tutorial we will be editing .css files anyway.

Before proceeding: color schemes are named theme# where # is a number, but notice number 1 is missing, and, for that reason, we have 8 themes, instead of 9.

Adding a new color scheme

The scheme’s file

The easiest way to add a new color scheme is, of, course, to clone one of the existing ones. Therefore, grab the one you wish to use as a starting point (I will use theme9), clone and rename it theme10.

The database entry: 2 routes

Now that we have the file in place, we need the configurator to know it’s actually there. How to? If we inspect the source code, we will see it grabs the selectable variation from a serialized array, added to the database upon install:

		$themes_colors = array(

		!Configuration::updateValue('PS_TC_THEMES', serialize($themes_colors)) ||

We are facing two routes at this point: we can manually edit the array, and reset the module so that the database entry is updated. Or, we can directly modify the serialized array. Please notice that this second way is risky, and if you edit it the wrong way, you will not be able to use the theme switcher unless you reinstall the theme configurator module. That said, resetting the module means losing all of the other customizations that might have been added, and I will therefore cover both methods.

METHOD 1: Modifying the php file, and resetting the module

Head over to /modules/themeconfigurator/ and open themeconfigurator.php. Find the array mentioned above, and add the name of the .css file you cloned. In this case, theme10:

		$themes_colors = array(

How to add new Color Schemes to the Prestashop 1.6 Theme - Resetting the live configurator module

Save, login to the back office and hit Reset on the right hand side dropdown menu. Doing this will erase your current customizations and images added using this module! Therefore, make sure you have a backup, if you need them.

METHOD 2: Manually editing the database entry

Login to your database and reach the ps_configuration table (your prefix might be other than ps_). Look for the entry named PS_TC_THEMES, and click to modify it. At this point, the value column will look like this:


How does a serialized array works? It’s important to understand it, in order to avoid breaking serialization, making it impossible to use it later. a:9 declares the size of the array. It contains 9 elements, so we need to change it to a:10 as we are adding another one.

Then, let’s take a closer look at the last element:


i:8 represents the index of this entry, which is 8; s:6 means it’s a 6-chars long string; “theme9″ is the value of this array entry.

Make sure to copy and save the original value somewhere, before modifying it!

Now that we know it, we can add our new element after the last semicolon:


Explanation: i:9 means that this element has 9 as index; s:7 indicates the length of it, as it’s one more character compared to the other ones, it needs to be 7, not 6. Lastly, the name of our file.

The final entry:


Once more, this is a risky procedure, so if you have doubts, you can follow method 1 instead!

Editing CSS files

At this point, it’s time for some pure CSS fun! Click on the shop link from the back office to activate the live configurator, it should look like this:

How to add new Color Schemes to the Prestashop 1.6 Theme - Live Configurator

That last black entry is our new color scheme! Why is it dark? Because the color is (sadly) saved in a separate file: /modules/themesconfigurator/css/live_configurator.css. It’s not strictly necessary to add it, but in case you want, locate the following:

#tool_customization #color-box .theme9 .color1{
	border: 13px solid #f9f6ed;
#tool_customization #color-box .theme9 .color2{
	background: #eea200;

Clone these lines and rename them to match the new theme’s name, then change the color to something that will help you identify the new scheme (mine is an electric blue, leaving the lighter color as it was):

#tool_customization #color-box .theme10 .color1{
	border: 13px solid #f9f6ed;
#tool_customization #color-box .theme10 .color2{
	background: #3982ef;

Then, open up the theme10.css file and start modifying colors! If you are happy to only change the main color, like in the example of the original theme9, #f9f6ed, locate all entries of it, and replace them with your hex.

Of course, a completely new world opens up now. It would be boring to go through all boxes and colors. Instead, as the current way is troublesome and might generate issues, let’s have a look at n easier (and FREE!) alternative to manual modifications, using a module I created!

Alternative method: Adding new color schemes using my Free Prestashop Theme Extender module

DOWNLOAD HERE – Prestashop Theme Extender module

How to add new Color Schemes to the Prestashop 1.6 Theme - Prestashop Themextender Module

Adding new color schemes using this module is as simple as editing a .css file. Because that is all you need to do, of course! My suggestion is, once more, to use one of the default color schemes as a basis. Once you are done with modifications, simply grab my module, install it, choose your .css file, and, optionally main and secondary colors (they have the only purpose of helping you recognize the scheme in the live configurator). Then, click add. And you have the new color scheme!

THis way, there will be no need or resetting the live configurator module, nor doing any complex modification in the database, or to any .php files. And of course, it’s completely free!

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

  • Nizam

    HI…great tut. Worked very well for me. Can you assist with adding a Font to the theme configurator.

  • Leo David


    I followed every step, but the color does not change.
    Prestashop engine:

    Method 1: When I click Reset: I receive the following message “Could not find upload directory”
    Even creating the folder “upload” in prestashopmodulesthemeconfiguratorupload the error is the same.

    Method 2: The new gray icon appears as theme10 but when replacing all hax for the color I want, the icon remains gray. Clicking on it does not change color.

    Prestashop Theme Extender module: The installation occurs successfully. The new colors appear as a new icon on the customization menu. But when I click on the new color icon, the page reloads and does not change the color.

    Any ideia?
    Thank you

  • Mhar

    I rearrange my prestashop template 1.6 successfully in LIVE CONFIGURATOR. But my changes are just seen in “live configurator website”, and not also on my real website. How should I copy changes also to real website
    i am totally new to prestashop.
    Thank you for helping

  • Tabassum Hayat


    I need to add a new theme color to prestashop cloud I have installed theme extender module, Can you please provide a css file for this module which I can edit and upload for a new theme color.


  • SabakuBozu

    Thanks!! I followed your steps and everything went well. However, is there a way to change the colors for all other pages individually? For instance, I changed the theme, and made my background brown, it works well with the homepage, but if i click on a product, the page that opens up also has a brown background, I want it to be white. How can I work around this?

  • Crea7

    Thanks for your tuto, it works fine !
    Will files changes stay in themeconfigurator folder after a module update or will I have to make it again after each module update ?

  • Tayyib Ahsan

    Nice info. But I did not understand, How to change information block and “My” title in User account block at my site, So please guide me, As I’m using prestashop as a new user to create online store.

  • chuck

    I downloaded your theme extender, but it wouldn’t install. I’m having big trouble with the theme configurater.

    • NemoPS

      What kind of issue are you having?

Store Top Sales

You like the tuts and want to say "thank you"? Well, you can always feel free to donate: