Understanding Prestashop Themes

Prestashop uses what are called themes to style your your shop. Ideally you will only want to create and edit themes and the themes gloabl.css file and themes images to get your store looking how you want and avoid making changes direct to php files which can be overwritten during future upgrades. The tpl files within your theme are used to render the layout of webpages using Smarty templating engine and HTML. The goal is to have the presentation information held within themes, exclduing the programming logic whcih is in the php files so designers do not have to worry about breaking the code.

Themes contain your template (tpl) files, your CSS rules for the front office style and an image called "preview.jpg" which is used by Prestashop within backoffice >> Preferences  >>Apprearance to give you a visual image of what each theme looks like.

By default Prestashop ships with one default theme but its easy to add additional themes to your installation.

In addition to tpl files existing with your themes directory, Prestashop also has modules. Modules are the functional blocks such as your category, products, top-sellers etc and allow developers to extend Prestashop in many ways. Modules also need tpl files and these can be found within each modules directory. Therefore, when you need to change the HTML relating to a module, you will need to modify its tpl file. (If if just styling-the glabal.css file is all you would need to work on).

First, I recommend you never work on the default theme. This is because if something is not working right in your shop, you can always change the theme back to the default one and see if the same functional issue exists. The second benefit is that you always have the default theme available if you wish to check a template (tpl file) against changes you may have may on your own theme.

Getting Started

Changing the look of your Theme

For some people, they will be happy with the way the default theme displays the key information blocks and will just want to change the overall style (background images and CSS). In this case, there is no need to do anything with the template (tpl) files.

However, if you need to modify the HTML or even some of the smarty code, you need to work on the tpl files. The best place for us to start is understanding the default HTML and CSS that ships by default with Prestashop and secondly how we edit the tpl files.

Understanding and modifying the default Prestashop theme