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='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 "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.
Here is a non-exhaustive list of best practices that you should follow when creating a theme:
.css
file.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 your 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: