Child pages
  • Laying the Theme's Foundations

Versions Compared


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


Duplicating the files of the default theme is easy, and even that can be done using two different ways.

From the back



PrestaShop's back - office can help you create a new theme folder based on any other installed theme, all in a couple of clicks:


As you can see, if all you want to change in a module's front - office appearance while keeping its organzation, you only have to edit its CSS file and leave its template file alone. For instance, to change the styling of the Layered Navigation module, you should put your customized version in this folder: /themes/YOUR_THEME/css/modules/blocklayered/blocklayered.css. Just make sure to use the same file path as the original module files.


All these module templates are included by default in the default theme's /modules folder, because they are front-end features that are needed by that theme. You can safely disable/uninstall any other module in the back - office "Modules" page. This enables you to start on a somewhat clean slate.


Code Block
titleTemplate file for the HTTP 404 Error page
<div class="pagenotfound">
    <div class="img-404">
        <img src="{$img_dir}/img-404.jpg" alt="{l s='Page not found'}" />
    <h1>{l s='This page is not available'}</h1>
        {l s='We\'re sorry, but the Web address you\'ve entered is no longer available.'}
    <h3>{l s='To find a product, please type its name in the field below.'}</h3>
    <form action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="post" class="std">
                <label for="search_query">{l s='Search our product catalog:'}</label>
                <input id="search_query" name="search_query" type="text" class="form-control grey" />
                <button type="submit" name="Submit" value="OK" class="btn btn-default button button-small">
                    <span>{l s='Ok'}</span>
    <div class="buttons">
        <a class="btn btn-default button button-medium" href="{$base_dir}" title="{l s='Home'}">
            <span><i class="icon-chevron-left left"></i>{l s='Home page'}</span>

The template engine uses \ {...} to handle instructions. The rest of the document is sent to the browser as is.

It is possible to use a template to generate HTML files, and also XML files, text files, etc.

The PDF files

The PDF files are also generated from Smarty templates (.tpl files). The main difference with the template files used to generate HTML, is that the PDF templates do not allow for external resources such as CSS. Therefore you must use internal or inline styling in order to change the style of your invoice, order slip, return slip, etc. A default PrestaShop installation comes with two style templates: and You can find these in the folder /pdf/. The following table shows how the style tabs are linked:

PDF TemplateStyle tab

Note that if you would like to apply a different style template, you will have to override the corresponding PDF Class in the directory /classes/pdf/.

The internal styling in the style tabs can only be applied to the main PDF template files, such as invoice.tpldelivery-slip.tpl, etc. In order to reuse the variables in this template in templates which are included, you can assign Smarty variables or apply inline styling separately in each of these files.

Scratching that itch: creating all files from zero