| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|
Designer Guide
Anyone with knowledge of CSS and image manipulation can create a new theme for PrestaShop.
| Tip |
|---|
We recommend using the following tools:
Internet Explorer users can also make use of Firebug lite. |
Customizing the default theme
Follow the following steps below to create your own theme out of the PrestaShop default theme.
1. Copy the default theme
- Locate the
../themesdirectory in your PrestaShop install, and create a copy of the default../themes/prestashop/directory. - Rename the duplicate.
2. Modify the CSS sheet
- In the customized theme folder (e.g.,
../themes/MyStoreTheme/), locate the/cssfolder. - Open the
global.cssfile and change it according to your needs. This is where you are only limited by your creativity – and your knowledge of CSS.
Note: themaintenance.cssfile, located in the same folder, controls the layout of the Maintenance Mode page. - New or modified images must be placed in the new theme's
/imgfolder (e.g.,../themes/MyStoreTheme/img).
| Tip | ||
|---|---|---|
| ||
|
3. Create a preview screen shot
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.
4. Test your theme
- Go to back-office's "Preferences" tab, then its "Appearance" and its "Themes" section.
- Select the new theme and click Save..
Share your themes!
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!
Integration: where the hooks and modules are
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:
- The name of the block.
- The block's id, in order to target it with CSS.
- The block's folder or template file, if you need to make changes to it.
Hooks
Main content areas
Header section
Homepage blocks
Category central column
Modules
Product page
Account forms & order steps
Account creation form
Order blocks
Addresses
Terms & Conditions and carrier choice
Payment module choice
Site map
Contact form
Stores page
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.
| Children Display |
|---|
Training
PrestaShop also offers a complete training program tailored for designers. Contact us through this page: http://www.prestashop.com/en/training