Table of contents

Theme development fundamentals


PrestaShop's 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 developer browser extensions:

They provide a lot of useful tools, among which DOM explorer, CSS editors, network inspector, etc., and are a huge help when debugging HTML, CSS, JavaScript, and even Ajax requests.


PrestaShop's technical architecture

PrestaShop is based on a 3-tier architecture:

See Wikpedia for more information:

This is the same principle as the Model–View–Controller (MVC) architecture, only in a simpler and more accessible way.
Learn more about MVC on Wikipedia:

Our developer team chose not to use a PHP framework, such as Zend Framework, Symfony or CakePHP, so as to allow for better readability, and thus faster editing.

This also makes for better performances, since the software is only made of the lines of code it requires, and does not contain a bunch of supplemental generic libraries.

A 3-tier architecture has many advantages:


A model represents the application's behavior: data processing, database interaction, etc.

It describes or contains the data that have been processed by the application. It manages this data and guarantees its integrity.


A view is the interface with which the user interacts.

Its first role is to display the data that is been provided by the model. Its second role is to handle all the actions from the user (mouse click, element selection, buttons, etc.), and send these events to the controller.

The View does not do any processing; it only displays the result of the processing performed by the model, and interacts with the user.


The Controller manages synchronization events between the Model and the View, and updates both as needed. It receives all the user events and triggers the actions to perform.

If an action needs data to be changed, the Controller will "ask" the Model to change the data, and in turn the Model will notify the View that the data has been changed, so that the View can update itself.

Concepts and technical information

Best practices

Here is a non-exhaustive list of best practices that you should follow when creating a theme:

  1. Do not mix HTML and PHP code; use Smarty tags in order to get a dynamic page.
  2. Do not mix HTML and CSS code; put the CSS code in a separate .css file.
  3. Always validate your HTML and CSS code using the W3C validators: for HTML and XHTML, for CSS.
  4. Do not make SQL queries from a PHP controller (.php file at the root of PrestaShop); use the existing methods from the PrestaShop classes, or create new methods for these classes.
  5. Always check if a method you need already exists in the available classes.
  6. Do not ever edit PrestaShop's own files; always build your code into modules in order to facilitate updates.
  7. Make sure to always produce a clear and readable code, making it easy to maintain that code for anyone in the foreseeable future.
  8. Do comment your code, and write both method names and comments in plain English.
  9. When editing the theme on a production site, always put the shop in Maintenance Mode first, via the back-office' "Maintenance" preference page.
  10. Use modern browsers, such as Firefox, Google Chrome, IE10 or Opera (and make sure your friends and family members do too).
  11. Whenever possible, use CSS sprites (read and

How a theme works

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:

Theme-specific folders

As a theme developer, there are mostly 5 PrestaShop folders you must be aware of:

Overview of a theme's folder

Here is an overview of the file structure of a PrestaShop theme (here, the default one):

The /css, /img and /js folder are optional, the theme can perfectly work without them, it's up to you to create them.