Prestashop 1.7 Templates File Structure

Nov 1, 2016

9847 David Narbutovich

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.
Prestashop 1.6 - 1.7 Themes

Prestashop 1.6 - 1.7 Themes

Take your online store to the next level with BelVG design

Click to check out the designs

Theme files structure

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

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

Looking for a stylish and functional PrestaShop webstore design? Check out our custom themes for PrestaShop 1.6-1.7.

Andrey Dubina

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

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

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