Prestashop 1.7 Templates File Structure

Prestashop 1.7 Templates File Structure

Prestashop template files structure has been rather changed in the latest 1.7 version. This lets us structure the content in a more convenient way and it became more user-friendly, that conduct 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 The preview.png file is the thumbnail that is used by PrestaShop in its back office theme selector.
/config/theme.yml 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 Essential file that contains all styles.
/assets/css/theme.js Required Essential file (analogue of global.js).
/templates/contact.tpl Block for output contact information of a webstore with a help of module (ps_contactinfo).
/templates/index.tpl 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 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 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 Used to empty list products in a client’s cart.
/templates/checkout/cart.tpl 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 Checkout page.
/templates/checkout/order-confirmation.tpl Used during the order process: Last step, confirming the order (after payment).
/templates/cms
/templates/cms/category.tpl Used to list all products in current category.
/templates/cms/page.tpl
/templates/cms/sitemap.tpl Used to display the site map.
/templates/cms/stores.tpl
/templates/customer
/templates/customer/addresses.tpl Used when listing a client’s street addresses.
/templates/customer/address.tpl 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 Used for identification of the guests order.
/templates/customer/guest-tracking.tpl 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 Used when listing the order history of a client.
/templates/customer/identity.tpl Used when a client edits his/her personal information.
/templates/customer/my-account.tpl Welcome page for a client’s account.
/templates/customer/order-detail.tpl Used to display the content of a client’s order.
/templates/customer/order-follow.tpl Used when a client needs to ask for a product return.
/templates/customer/order-return.tpl Used to display a client product return details.
/templates/customer/order-slip.tpl 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 Used when the requested page is not found (HTTP error 404).
/templates/errors/forbidden.tpl 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 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.

Check also: How to Edit Email Templates in Prestashop 1.7



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

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *