Prologue

The default PrestaShop install offers a neutral theme in black and white, enabling sellers to quickly and freely start their activity, whatever their business line.

Nearly 2000 themes are available through the PrestaShop Addons marketplace (http://addons.prestashop.com/en/). They were created either by members of the PrestaShop community or the PrestaTeam, and are sold at reasonable prices – some are 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.

Requirements

Your PHP code should work on PHP 5.4+.

Your HTML/CSS/JS code should work with at least IE9+, Edge, Firefox 45, and Chrome 29. Mobile-wise: iOS 8.4 and Android Browser 4.4

Coding standard and guidelines

General code guideline

Intend with spaces for every language (PHP, HTML, CSS, etc.): 4 spaces for PHP files, 2 spaces for all other filetypes.

Use our .editorconfig file in order to easily configure your editor: https://github.com/PrestaShop/PrestaShop/blob/develop/.editorconfig

PHP files

You should follow the PSR-2 standard, just like PrestaShop does.

In general, we tend to follow Symfony’s coding standards.

HTML file

Use HTML 5 tags:

  • <br /> –> <br>,
  • <nav>,
  • <section>,
  • etc.

All open tags must be closed in the same file (a <div> should not be opened in header.tpl then closed in footer.tpl). Subtemplates (templates meant to be included in another template) must reside inside a /_partials/ folder.

CSS

Use CSS3.

We recommend that you follow the RSCSS structure: http://rscss.io/

JavaScript

Make sure your linter tool follows our .eslint file: https://github.com/PrestaShop/PrestaShop/blob/develop/.eslintrc

If you wish to write ECMAScript 2015 (ES6) code, we advise you to use the Babel compiler: https://babeljs.io/

A good JS practice consists in splitting files per use, and then compiling them into one.

Learn more about the ES2015 standard: https://babeljs.io/docs/learn-es2015/

Migrating from PrestaShop 1.6

PrestaShop 1.7 introduces a totally reworked theme system from version 1.6, with the goal of making PrestaShop upgrades easier, and of making it easier/faster to create a brand new theme.

The huge change to the theme system means that there is no easy way to migrate your PrestaShop 1.6 theme to PrestaShop 1.7.

When using the automatic upgrade from PrestaShop 1.6 to 1.7, your theme will be switched to the new default theme, called “Classic”. We therefore advise you to work on your 1.7 theme before you make the switch to PrestaShop 1.7.

Some features have been dropped with PrestaShop 1.7. They were either already deprecated in 1.6, or proved too problematic to maintain.