Prestashop - 1.4 Design Guide



 

All themes have their files located in the 

/themes

 root folder. 



 

Each theme has its own sub-folder, in the main themes folder. 



 

Each theme is made of template files (

.tpl

), image files (

.gif

, 

.jpg

, 

.png

), one or more CSS files (

.css

), and sometimes even JavaScript 

files (

.js

). 



 

Each theme has a 

preview.jpg

 image file in its folder, enabling the 

shop-owner to see what the theme looks like directly from the back-

office, and select the theme appropriately. 

Here is an overview of the file structure of a PrestaShop theme (here, the 
default one): 

 



 

The 

/css

 folder contains all CSS files. 



 

The 

/img

 folder contains all images. 



 

The 

/js

 folder contains all the JavaScript files. 



 

The 

/lang

 folder contains the theme's translations. Its access rights 

should be set at CHMOD 666 (for instance), so that the back-office 
translation tool can read and write into it. 



 

The root of the folder contains TPL files only (Smarty files), as well 
as the 

preview.jpg

 file. 

 

The 

/css

, 

/img

 and 

/js

 folder are optional, the theme can perfectly work 

without them, it's up to you to create them. 

All of your theme's text string should be enclosed in a Smarty function, 

like so: