Child pages
  • Laying the Theme's Foundations

Versions Compared

Key

  • 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

...

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
languagexml
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'}" />
    </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 TemplateStyle tab
Delivery slipdelivery-slip.style-tab.tpl
Supply orderinvoice.style-tab.tpl
Order returninvoice.style-tab.tpl
Invoiceinvoice.style-tab.tpl
Order slipinvoice.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.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

...