Front-Office Smarty Themes
Relevant source files
The following files were used as context for generating this wiki page:
PrestaShop utilizes a highly customizable theme system to render its front-office interface. This system is primarily driven by the Smarty templating engine, which allows developers to separate the presentation layer from the core business logic. Themes in PrestaShop provide a fully responsive design for both customers and merchants, supporting various localized content and layouts.
The front-office themes manage the visual representation of products, categories, and Content Management System (CMS) pages. Developers extend theme functionality through modules and overrides, enabling specific site behaviors without modifying core application files.
Sources: README.md:14-17, README.md:188-190
Theme Architecture and Content
Themes structure the visual elements of the store. They rely on template files that process data objects provided by the PrestaShop core. The content rendered within these themes includes dynamic elements like product lists and static elements defined in CMS configuration files.
CMS Integration
Front-office themes render content defined in XML data structures during installation. These structures define meta titles, descriptions, and the HTML content for standard pages such as "About Us," "Delivery," and "Terms and Conditions."
The diagram above shows how localized CMS content moves from source XML files through the database into the Smarty templates of the active theme.
Sources: install-dev/langs/en/data/cms.xml:3-56, README.md:15-18
Core Theme Components
Themes consist of several standard pages and layout components. The following table identifies common pages defined in the system data that themes must render:
| Page ID | Purpose | Key Content Elements |
|---|---|---|
Delivery | Terms of shipment | Shipment methods, tracking links, return rules |
Legal_Notice | Legal credits | Software credits, production information |
Terms_and_conditions_of_use | Store rules | User rules and conditions |
About_us | Company information | Company history, team members, testimonials |
Secure_payment | Security info | SSL information, supported payment methods |
Sources: install-dev/langs/en/data/cms.xml:4-56
Theme Testing and Development
Theme development involves validating the user interface through automated testing. PrestaShop provides a dedicated UI testing suite to ensure theme stability and functional correctness across different scenarios.
UI Testing Framework
The project includes a testing environment based on Playwright and Mocha. These tests target specific frontend paths to verify that themes display information correctly and that user interactions function as intended.
The sequence diagram illustrates the automated workflow for verifying theme functionality.
Sources: tests/UI/package.json:58-69, README.md:204-208
Development Environment Setup
To develop and test themes, you must set up a web server running PHP 8.1+ and MySQL 5.6+. The project recommends using Docker for a consistent development environment, which binds the frontend to port 8001 by default.
- Start the environment using
make docker-start. - Access the frontend at
http://localhost:8001. - Use
npm run lintwithin thetests/UIdirectory to check for code style issues in test scripts.
Sources: README.md:46-51, README.md:73-81, tests/UI/package.json:11-12
Localization and Responsive Design
PrestaShop themes are designed to be fully responsive, ensuring accessibility across mobile and desktop devices. Localization is a core feature, where themes adapt based on the selected language and country settings.
Localization Data
Themes pull localized strings from XML files stored in install-dev/langs/. Each language file contains the specific translations for metadata and body content used in the theme's CMS pages. For example, the Greek localization defines the Delivery meta_title as "Παράδοση".
Sources: install-dev/langs/el/data/cms.xml:4, README.md:16-17
Summary
Front-Office Smarty Themes provide the presentation layer for PrestaShop stores. They integrate closely with the core's localization and CMS systems to deliver responsive content. Developers manage theme quality through an extensive UI testing suite and can extend visual behavior using modules and the Smarty templating engine.
Sources: README.md:14-17, tests/UI/package.json:60-70