...
/cache: contains temporary files that are generated and reused in order to alleviate the server's load./css: contains the style sheets./img: contains the theme's images./js: contains the theme's JavaScript files./lang: contains a sub-folder per translation, one for each language./mobile: contains the mobile version of the theme./mails: you can override PrestaShop's default mail templates with you own./modules: you can provide modules with the theme, and override the default modules with your own./pdf: you can override PrestaShop's default PDF templates with your own.Note: if you do not have time to build a specific mobile version of your theme, you can at first just rely on the default theme's mobile version, by copying its/mobilefolder into your theme's folder.
The last three sub-folders in this list (/mails, /modules and /pdf) are greatly useful in order to fully customize your installation of PrestaShop, and make the templates better match the theme's style. This way you can provide a full experience with your theme.
All of these folders are optional. Having them is simply a best practice: it makes your theme cleaner and more complete.
| Note |
|---|
If you do not have time to build a specific mobile version of your theme, you can at first just rely on the default theme's mobile version, by copying its |
Preview image
When displaying the theme in the theme selection page of the back-office, located in the "Themes" page under the "Preferences" menu, PrestaShop displays a specific image file. This file's characteristics are thus:
- Filename:
preview.jpg - Size: 180*202 200 pixels
- Format: JPEG (do not use GIF or PNG).
You As a theme creator, you should make that preview image very recognizable: making a screen capture of the theme's home page is the best way to catch the PrestaShop administrator's eyes.
Even the default PrestaShop theme has its own.:
Translation files
The translation files are stored in the /lang folder.
Each translation file must be named with the two-letters ISO 639-1 code for its language: for instance, for French, use fr.php.
Translation files are automatically created by PrestaShop translation tool, which you can find in the "Translations" page of the "Localization" menu in the back-office.
Handling translations
All of your theme's text string should be enclosed in a Smarty function, like so:
...
This will enable anyone to translate the theme into his own language, using the internal translation tool, which you can find in the PrestaShop back-office, under the "Localization" menu and its "Translation" page. In the "Modify translations" section, use the drop-down menu, choose "Front Office translation", then click on the flag of the language you wish to translate strings into. All the front-office strings will then be displayed: translate them all then save your work, and PrestaShop will create the translation file at the correct location.
Transmitting data to a PrestaShop theme
...
The cached CSS files are grouped into one file per page and per media.
Image files
...
Not all controllers have their own JS file. Each has its own needs, and therefore some have their own JavaScript files, some do nothave none.
Mobile version of the theme
You can (and should) provide a mobile version of your theme. PrestaShop 1.5 is built to automatically use the theme available in the /mobile sub-folder in situations when the store is being viewed from a mobile device.
...
The /mobile sub-folder has its own set of CSS, JS and image files, respectively stored in the /mobile/css, /mobile/js and /mobile/img folders.
| Note |
|---|
If you do not have time to build a specific mobile version of your theme, you can at first just rely on the default theme's mobile version, by copying its |
Overriding the e-mails and PDF template files
...
The easiest way to get started is to copy PrestaShop's default mail templates folder (from the root /mails folder) into the theme's /mails sub-folder, and edit the files to fit your theme's style.
Likewise, copy PrestaShop's default PDF templates folder (from the root /pdf folder) into the theme's /pdf sub-folder, and edit the files to fit your theme's style.
Note that the mail files are duplicated as many folders as there are available languages. The translation is to be made using PrestaShop's integrated translation tool.
You can selectively override the default templates: if one of the file is missing in your version of the /mails or /pdf folder, PrestaShop will use the one from the equivalent root folder.
...