Child pages
  • Coding a theme

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of contents

Table of Contents


Coding a theme

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 of your theme's text string should be enclosed in a Smarty function, like so:

Code Block

{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 "Front Office translation", then click on the flag of the language you wish to translate strings into. All the front-office strings will then be displayed.


Layered navigation: In order for a theme to be compatible with layered navigation, the /themes/themename/product-list.tpl file must have its product list area be encapsulated within a tag with the "product_list" id; otherwise, the layered navigation will not be able to update the product list.

Code Block

<div id="product_list">


<ul id="product_list">