The default PrestaShop install offers a neutral theme in shades of gray, enabling sellers to quickly and freely start their activity, whatever their business line.
More than 700 themes are available through the PrestaShop Addons marketplace. They were created either by the PrestaTeam or the PrestaShop community, and are sold at reasonable prices – some even free.
As a graphic designer/web developer, you too can put your themes up for sale on the PrestaShop Addons site, and earn 70% of the selling price.
Anyone with some knowledge of CSS and image manipulation can create a custom theme for PrestaShop. Provided you know PHP as well, you can build a whole new theme for your shop. Thanks to a tried and tested theme system, any shop can quickly sport a theme tailored to its needs.
That theme system is based on a template engine, called Smarty, which allows web-designers and developers to easily build their own theme, with little technical knowledge.
All web-designers and developers should use the following tools:
Internet Explorer users can also make use of Firebug lite. |
A PrestaShop theme is a set of files which you can edit in order to change the look of your online shop.
Here are a few important tidbits:
/themes
root folder./tpl
), image files (.gif
, .jpg
, .png
), one or more CSS files (/css
), and sometimes even JavaScript files (.js
).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):
/css
folder contains all CSS files./img
folder contains all images./js
folder contains all the JavaScript files./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.preview.jpg
file.The |
All of your theme's text string should be enclosed in a Smarty function, like so:
{l s='Mon Texte'} |
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 "Tools" tab and its "Translation" sub-tab. In the "Modify translations" section, use the drop-down menu, choose "Back Office translation", then click on the flag of the language you wish to translate strings into. All the back-office strings will then be displayed, and the strings for your theme are those whose sections are not prefixed with "Admin*".
PrestaShop uses a 3-tier architecture, in order to clearly separate concerns: it uses...
(schema)
Thanks to the l()
function, the hello.tpl
file can display text in the user's language of choice.
The PrestaShop developers have done their best to clearly and intuitively separate the various parts of the software.
Here is how the files are organized:
/admin
: contains all the PrestaShop files pertaining to the back-office. When accessing this folder with your folder, you will be ask to provided proper identification, for security reasons. Important: you should make sure to protect that folder with a .htaccess
or .htpasswd
file!/cache
: contains temporary folders that are generated and re-used in order to alleviate the server's load./classes
: contains all the files pertaining to PrestaShop's object model. Each file represents (and contains) a PHP class, and its methods/properties./config
: contains all of PrestaShop's configuration files. Unless asked to, you should never edit them, as they are directly handled by PrestaShop's installer and back-office./controllers
: contains all the files pertaining to PrestaShop controllers – as in Model-View-Controller (or MVC), the software architecture used by PrestaShop. Each file controls a specific part of PrestaShop./css
: contains all CSS files that are not attached to themes – hence, these are mostly used by the PrestaShop back-office./docs
: contains some documentation. Note: it should be deleted in a production environment./download
: contains your digital products, which can be downloaded: PDFs, MP3s, etc./img
: contains all of PrestaShop's default images, icons and picture files – that, those that do not belong to the theme. This is were you can find the pictures for product catergories (/c
sub-folder, those for the products (/p
sub-folder) and those for the back-office itself (/admin
sub-folder}}./install
: contains all the files related to PrestaShop's installer. You will be required to deleted after installation, in order to increase security./js
:/localization
:/log
:/mails
:/modules
:/override
:/themes
:/tools
:/translations
:/upload
:/webservice
:Follow the following steps below to create your own theme out of the PrestaShop default theme.
../themes
directory in your PrestaShop install, and create a copy of the default ../themes/prestashop/
directory.../themes/MyStoreTheme/
), locate the /css
folder.global.css
file and change it according to your needs. This is where you are only limited by your creativity – and your knowledge of CSS.maintenance.css
file, located in the same folder, controls the layout of the Maintenance Mode page./img
folder (e.g., ../themes/MyStoreTheme/img
).
|
Once your customized theme is ready, you must place a file representing the theme, called preview.jpg
, in the theme's root folder (e.g., ../themes/MyStoreTheme
). This file must be a 100 × 100 pixels .jpg
file.
Show off your hard work, get feedback, and build your reputation by sharing your theme in the Themes section of our Forum!
You can also sell theme to PrestaShop users through our Addons website!
One of the key point of integrating content within a PrestaShop theme is to know where said content is displayed, and therefore where the various hooks and modules are located.
Here is a graphical representation of where they are, for each page. You will find: