...
Characteristics of a front-office theme
The theme's folders
The main folder for the theme should have a unique name. It must be put in PrestaShop's root /themes folder in order to work.
A PrestaShop front-office theme is built using the following standard folders, within the main theme folder:
/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.
mails/mobile: contains the mobile version of the theme./mails: you can override PrestaShop's default mail templates with you own./mobile: contains the mobile version of the theme.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/modules: you can change the templates for the modules, in order to have them better fit the theme.
The main folder for the theme should have a unique name. It must be put in PrestaShop /themes folder in order to work.
...
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.
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:
...
| Code Block |
|---|
{l s='My Text'}
|
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 "ToolsLocalization" tab menu and its "Translation" sub-tabpage. 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.h3
Transmitting data to a PrestaShop theme
The following graphic explains how data is transmitted from PrestaShop's core to its theme. Using the l() method enables the theme to display its text in the chosen language, if it has been translated beforehand.
...
Not all controllers have their own JS file. Each has its own needs, and therefore some have their own JavaScript files, some do not.
Mails of the theme
You can override mails templates.
If you want to overload a template email, just put it in this folder. If the email template is not present, PrestaShop take the default one.
Mobile version of the theme
...
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.
Modules of the theme
...
Overriding the e-mails and PDF template files
You should provide your own mail and PDF templates, and make them match the theme's style.
The easiest way 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.
You can selectively override the default templates: if one of the default file is missing in your version of the /mails or /pdf folder, PrestaShop will use the one from the equivalent root folder.
Overriding a module's template files
PrestaShop's modules can have templates of their own, in their /views/templates/front, and /views/templates/admin/views/templates/hooks folders.
For instance, the Bankwire has these templates:
/modules/bankwire/views/templates/front/payment_execution.tpl/modules/bankwire/views/templates/hook/payment.tpl/modules/bankwire/views/templates/hook/payment_return.tpl
In order to override a module template file, your template must have a file of the exact same name in the same exact file path, but within its own folder. So, for instance, for the three Bankwire templates above, the resulting file names should be:
/themes/my_theme/modules/bankwire/views/templates/front/payment_execution.tpl/themes/my_theme/modules/bankwire/views/templates/hook/payment.tpl/themes/my_theme/modules/bankwire/views/templates/hook/payment_return.tpl
You can override the template files, CSS files or JS files of installed modules using the same principle: same exact file name, same exact file path within the theme's folder.