PrestaShop is a popular e-commerce platform, offering extensive customization options for online stores. One of the key elements of this platform is its system of templates and layouts, which allows developers to fine-tune the store’s look and functionality. In this article, we’ll break down the structure of templates and layouts in PrestaShop, describe how to organize them properly, and provide examples for clarity.
The Basics of Templates in PrestaShop
Templates in PrestaShop are based on the Smarty 4 template engine, which enables the creation of dynamic pages using HTML and special tags. All template files should be stored in the templates folder within the theme, such as in /themes/classic/templates for the default theme.
Directory Structure of Templates
For easier management and readability, templates are organized into folders, each responsible for a specific part of the site:
- /partials/ – contains shared elements of the site, such as the header, footer, and notifications.
- /catalog/ – templates for product pages, categories, brands, search results, etc.
- /checkout/ – templates for the cart, delivery options, payment options, and order confirmations.
- /cms/ – templates for static content like contact pages, site maps, CMS pages, and so on.
- /customer/ – everything related to the customer’s account and information.
- /errors/ – error templates, such as “not found,” “server error,” and “forbidden” pages.
- /layouts/ – theme layouts, including one-column, two-column, full-width layouts, and more.
The _partials folder contains template fragments that are used across multiple pages, allowing centralized editing of elements applied to all pages where the fragment is used.
Difference Between Template and Layout
It’s essential to understand the difference between a template and a layout:
- Layout – the page structure, defining the arrangement of elements (e.g., sidebar presence).
- Template – specific to a feature, such as the product page.
Key template files include:
- index.tpl – home page.
- catalog/product.tpl – product page.
- catalog/listing/product-list.tpl – product listing page.
- checkout/cart.tpl – cart page.
- checkout/checkout.tpl – checkout process page.
Specific Templates
If your store targets multiple languages or regions, unique templates can be created for specific countries or languages. For example, if you need different page designs for American and Japanese customers, create a product.tpl template for each language and place it in the corresponding folder.
When loading a template, PrestaShop checks multiple locations to find the appropriate file. This makes it easy to create unique templates for different locales or specific categories. For example, for a product page with ID=3 and locale en-US, the following files are checked in this order:
en-US/catalog/product-3.tplcatalog/product-3.tplen-US/catalog/product.tplcatalog/product.tpl
Example of a Category Page Template
For a category page with ID=9 and locale en-US, the following files are checked in this order:
en-US/catalog/listing/category-9.tplcatalog/listing/category-9.tplen-US/catalog/listing/category.tplcatalog/listing/category.tplen-US/catalog/listing/product-list.tplcatalog/listing/product-list.tpl
This feature is particularly useful for developers working on custom templates for clients with specific requirements.
Layouts in PrestaShop
A layout defines the page’s organization, such as whether a sidebar is present or if the product listing takes up the entire space. PrestaShop users can change the layout of each page independently, and as a developer, your role is to ensure that your theme is compatible.
Example of a Layout File
A layout sits at the top of the template hierarchy, responsible for structuring and including different blocks. A typical layout file might look like this:
Templates and layouts in PrestaShop provide extensive customization options, making the store’s interface more flexible and dynamic. The well-thought-out file structure enables quick adjustments to the design and functionality. If you want to create a unique look for your online store or tailor it to specific requirements, PrestaShop’s template and layout system is your go-to tool.
Share your thoughts on PrestaShop templates and structure in the comments!
