Organization of a Theme
Let's diving into the way a theme is organized: folders, files, where they belong and how to handle them correctly
Folders and files
Folders
The main folders of any PrestaShop theme are those:
- The
/cache
folder contains all the temporary files that are generated and reused in order to lighten the server load. The folder is empty by default. - The
/css
folder contains all CSS files.- The
/sass
folder contains all the Sass.scss
source files, before they are compiled into the CSS files.
- The
- The
/font
folder contains the needed font 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 following folders are not directly theme-related, but help you make sure the whole of PrestaShop's feature have a design that is consistent with your theme:
- The
/mails
folder contains the templates for the emails that PrestaShop sends (order confirmation, password request, shipping notifications, etc.). - The
/mobile
folder contains the mobile version of the theme. - The
/modules
folder contains the template files for many modules. - The
/pdf
folder contains the template files for the PDF files that PrestaShop generates (invoices, delivery slip, supply orders, etc.).
The root of the folder contains TPL files only, as well as the preview.jpg
thumbnail file.
Thumbnail file
The preview.jpg
file at the root of the theme's folder is the thumbnail that is used by PrestaShop in its back-office theme selector.
It serves as a visual reminder of what the theme is, and you should therefore make it a screenshot rather than your company's logo.
It can have any size – the default theme's is 180*445 pixels.
It must be a JPEG file.
CSS and Sass files
CSS
The theme's CSS files are located in the /css
folder.
It is recommended to have a common style sheet for global CSS rules: global.css
.
Then, each of the controller should have its own CSS file: for instance, product.css
for the Product page.
Sass / Compass
Sass and Compass files are optional: you do not need to use these tools to build the CSS files for your back-office theme.
If you do use Sass and Compass, we strongly advise to put the source .scss
files in the /sass
theme, so that other developers can have access to theme and rework them more easily.
From there, you can generate the CSS files in the /css
folders from the Sass files in the /sass
folder!
Font files
The /font
folder is optional: it contains the fonts that you chose to use for your theme.
For instance, the default PrestaShop theme uses the FontAwesome font set (http://fortawesome.github.io/Font-Awesome/), and therefore has the following files in its /font
folder:
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
If you do not build your theme with a specific font in mind, you can skip this folder.
Image files
Theme-related images are to be stored in the /img
folder.
You can create sub-folder for a better organization. For instance, the default theme has the following subfolders:
/icon
for simple icons (for instance, those not available in your chosen font set)./jquery
for for jQuery-specific images.
You can create more if needed.
JavaScript files
JavaScript files are to be stored in the /js
folder.
Unlike CSS files, we recommend you NOT to have a common/global JavaScript file, nor should you have a single file per controller.
Language files
All the translation files are to be stored in the /lang folder.
Files should be named after their ISO 3166-1 alpha-2 code in lowercase: for instance, fr.php
.
These files should be generated by PrestaShop integrated translation tool (located in the Localization / Translations menu).
The mobile theme
PrestaShop has a mobile theme option in its back-office: in the Preferences / Themes page, the "Mobile" tab in the "Your current theme" section give you the following choices: disable the option, or enable it for smartphones, tablets or both.
Once this option is enabled, the theme that is displayed to the mobile visitor is not the default desktop theme but the alternative theme that is located in the /mobile folder: it is better suited for this format, and therefore your customers will appreciate the difference.