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

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