Prestashop 1.7 Templates File Structure

November 1, 2016 / Posted in Prestashop, Prestashop 1.7 by David Nyarbutovik
Templates file structure Prestashop 1.7_2
Download PDF

Template files structure has been rather changed in the latest Prestashop 1.7 version. This let us structure the content in more convenient way and it became more user-friendly, that conduce intuitive understanding and easy navigation. This article describes the file structure of Prestashop 1.7 templates.

Prestashop theme location and components

By default, all themes are stored in themes/ directory and each theme should be stored in a separate one:

themes/
├── <theme1>
├── <theme2>/
├── <theme3>
├–…

The file structure of a Prestashop theme usually should looks as follows:

<theme_folder>/
├───assets
│ ├───css
│ ├───img
│ └───js
├───config
├───modules
│ ├───module1
│ ├───module2
│ ├───module3
│ └───…
├───plugins
├───templates
│ ├───catalog
│ │ ├───listing
│ ├───checkout
│ ├───cms
│ ├───customer
│ ├───errors
│ │ └───static
│ ├───layouts
│ └───_partials
└───_dev
├───css
├───img
└───js

So let’s have a closer look at each particular sub-directory:

Directory Description
/_dev It contains a source code of a theme, icons, fonts, .sass files.
/assets Static files that can be loaded directly from the frontend.
/assets/img Images that are used in this theme.
/assets/js Theme JavaScript files.
/assets/css Theme fonts and Style Sheets.
/templates Folder with Smarty dynamic templates (.tpl) More details you can find below.
/templates/layouts Contains the themes that are described in configuration (/config/theme.yml), mock-ups (for example without side columns, only left or right column, mock-up for errors output).
/modules This is where all the modules are located.

Theme files structure

Here we are going to describe each file and its functionality:

File Required Description
/preview.png Required The preview.png file is the thumbnail that is used by PrestaShop in its back office theme selector.
/config/theme.yml Required Theme configuration file that describes:

1. Information:

  • Theme name
  • Theme version
  • Theme author

2. Configuration:

  • Available mockups
  • Page templates and used mockups
  • Sizes of images that used in mockups
  • Plugin modules
/assets/css/theme.css Required Essential file that contains all styles.
/assets/css/theme.js Required Essential file (analogue of global.js).
/templates/contact.tpl Required Block for output contact information of a webstore with a help of module (ps_contactinfo).
/templates/index.tpl Required Welcome page.
/templates/page.tpl Essential file that describes the structure of a page (header / footer are declared in this file).
/templates/catalog/
/templates/catalog/brand.tpl Used when listing all products from a single brand.
/templates/catalog/manufacturer.tpl Used when listing all products from a single manufacturer.
/templates/catalog/product.tpl Required Used to display details for a single product.
/templates/catalog/supplier.tpl Used to list all the products from a single supplier.
/templates/catalog/listing/
/templates/catalog/listing/best-sales.tpl Used to list all best sale.
/templates/catalog/listing/category.tpl Used to list all products in a current category.
/templates/catalog/listing/manufacturer.tpl Used when listing all products from a single manufacturer.
/templates/catalog/listing/new-products.tpl Used when listing the products that were last added to the cart.
/templates/catalog/listing/prices-drop.tpl Used to list all current promotions.
/templates/catalog/listing/product-list.tpl Required Used by all pages that list products. Displays the actual products list.
/templates/catalog/listing/search.tpl Used to list results from a search query.
/templates/catalog/listing/supplier.tpl Used to list all the products from a single supplier.
/templates/checkout
/templates/checkout/cart-empty.tpl Required Used to empty list products in a client’s cart.
/templates/checkout/cart.tpl Required Used to list products in a client’s cart.
/templates/checkout/checkout-process.tpl Used for rendering all steps in checkout.
/templates/checkout/checkout.tpl Required Checkout page.
/templates/checkout/order-confirmation.tpl Required Used during the order process: Last step, confirming the order (after payment).
/templates/cms
/templates/cms/category.tpl Required Used to list all products in current category.
/templates/cms/page.tpl Required
/templates/cms/sitemap.tpl Required Used to display the site map.
/templates/cms/stores.tpl
/templates/customer
/templates/customer/addresses.tpl Required Used when listing a client’s street addresses.
/templates/customer/address.tpl Required Used when adding or editing a client street address.
/templates/customer/authentication.tpl Used when identifying a user, or creating a new user account.
/templates/customer/discount.tpl Used when listing all discount tickets for a single client.
/templates/customer/guest-login.tpl Required Used for identification of the guests order.
/templates/customer/guest-tracking.tpl Required Used when a visitor has no known account on the site, but wants his order to be tracked – and therefore needs to create an account or log in.
/templates/customer/history.tpl Required Used when listing the order history of a client.
/templates/customer/identity.tpl Required Used when a client edits his/her personal information.
/templates/customer/my-account.tpl Required Welcome page for a client’s account.
/templates/customer/order-detail.tpl Required Used to display the content of a client’s order.
/templates/customer/order-follow.tpl Required Used when a client needs to ask for a product return.
/templates/customer/order-return.tpl Required Used to display a client product return details.
/templates/customer/order-slip.tpl Required Used to display a client’s credit slips.
/templates/customer/page.tpl
/templates/customer/password-email.tpl Password recovery page with e-mail field.
/templates/customer/password-infos.tpl Password recovery page with message output. (Successful)
/templates/customer/password-new.tpl Page with a form for entering a new password.
/templates/customer/registration.tpl Used for registration form output.
/templates/errors
/templates/errors/404.tpl Required Used when the requested page is not found (HTTP error 404).
/templates/errors/forbidden.tpl Required Used when the requested page is forbidden (HTTP error 403).
/templates/errors/maintenance.tpl Used when the site is in maintenance mode.
/templates/errors/not-found.tpl Used when no search results.
/templates/errors/restricted-country.tpl Used when access to the current page is restricted for users.
templates/_partials
/templates/_partials/breadcrumb.tpl Used to find the navigation path, or breadcrumb trail.
/templates/_partials/footer.tpl Page footer.
/templates/_partials/form-errors.tpl Used for errors list output.
/templates/_partials/form-fields.tpl Required Used for output of all types of fields.
/templates/_partials/head.tpl Page head.
/templates/_partials/header.tpl Page header.
/templates/_partials/notifications.tpl Used for output of all types of notifications.
/templates/_partials/pagination.tpl Used by all pages that list products. Displays the pagination button, enable to skip to the next/previous page of products.

Note: the list of essential files is taken from ThemeValidator.php

At any nest level of a catalog you can find a directory that is called “partials”. This folder can contain template files (which functionality was considered to replace to separate file) that might be included inside attached theme templates.



2 comments

  1. Very helpful blog. prestashop is free and best open source eCommerce platform. prestashop web 2.0 innovation is easy and very powerful for multitasking web application.

Post a new comment