...
Duplicating the files of the default theme is easy, and even that can be done using two different ways.
From the back
...
office
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.
...
Module name | Why it is necessary |
---|---|
blockcategories | Displays the product categories. |
blockcms | Lists and displays the CMS pages (i.e. Terms & Conditions, Legal notice, etc.). |
blockcontact | Displays the Customer Service information. |
blockcontactinfos | Displays the stores contact info. |
blockmyaccountfooter | Displays links to the user's account pages in the footer. |
blocksearch | Displays the searchh search engine and its results. |
blocktags | Displays the product tags. |
homefeatured | Displays featured products. |
...
Module name | Why it is necessary |
---|---|
blockbestsellers | Displays the best-selling product. |
blocklayered | Displays layered navigation filters. |
blocklinks | Displays additional custom links. |
blockmanufacturer | Lists and displays the manufacturers/brands of the store's products. |
blocknewprodutcsblocknewproducts | Displays the newest produtsproducts. |
blocknewsletter | Displays a form where customers can subscribe to your store's newsletter. |
blockrss | Displays the content of an RSS feed from another site. |
blocksocial | Displays information about your store's social networking pages. |
blockspecials | Displays the current discounts. |
blocstore | Displays a link to the store located. |
blocksupplier | Lists and displays the suppliers of the store's products. |
blockviewed | Lists the products that the customer viewed last. |
blockwishlist | Displays the customer's wishlists. |
productcomments | Displays a comment section in each product page. |
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.
...
Icons are a special case: PrestaShop 1.6 uses FontAwesome as its iconseticon set: http://fontawesome.io/. It is a font made of icons, giving you scalable vector icons that can instantly be customized.
...
The template files
A template files (.tpl
) is Smarty's way to separate the content from the way that content is presented.
The template only have a few dynamic elements (where your content goes). This facilitates the design and update of your sites, both for your content and its presentation.
Code Block | ||||
---|---|---|---|---|
| ||||
<div class="pagenotfound"> <div class="img-404"> <img src="{$img_dir}/img-404.jpg" alt="{l s='Page not found'}" /> </div> <h1>{l s='This page is not available'}</h1> <p> {l s='We\'re sorry, but the Web address you\'ve entered is no longer available.'} </p> <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"> <fieldset> <div> <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> </button> </div> </fieldset> </form> <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> </a> </div> </div> |
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: delivery-slip.style-tab.tpl
and invoice.style-tab.tpl
. You can find these in the folder /pdf/
. The following table shows how the style tabs are linked:
PDF Template | Style tab |
---|---|
Delivery slip | delivery-slip.style-tab.tpl |
Supply order | invoice.style-tab.tpl |
Order return | invoice.style-tab.tpl |
Invoice | invoice.style-tab.tpl |
Order slip | invoice.style-tab.tpl |
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.tpl
, delivery-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
...