Skip to content
ca es en

← Themes and front office

The theme system

How themes work in PrestaShop and the move from Smarty toward modern templates.

5 slides 5 min read

  1. PrestaShop · Temes

    The theme system

    How the visible face of the store is built.

    PrestaShop · Themes and front office arlaf.dev

  2. Smarty, the template engine

    The front office renders with Smarty .tpl templates. The default theme, classic, is the recommended base to start from.

    PrestaShop · Themes and front office arlaf.dev

  3. Anatomy of a theme

    A theme is a folder with a predictable structure.

    • templates/ — the .tpl templates (header, footer, product…).
    • assets/ — CSS, JS and images, often compiled from SASS.
    • config/theme.yml — the theme manifest.
    • modules/ — overrides of module templates.
    PrestaShop · Themes and front office arlaf.dev

  4. The theme.yml manifest

    name: el-meu-tema
display_name: El meu tema
version: 1.0.0
author:
  name: Arnau
global_settings:
  configuration:
    PS_IMAGE_QUALITY: png
    PrestaShop · Themes and front office arlaf.dev

  5. Hooks: where content plugs in

    Templates leave points (hooks) where modules inject their HTML. That's why theme and modules fit together without touching each other.

    PrestaShop · Themes and front office arlaf.dev
Read the full note

El front-office —tot el que veu el client— el dibuixa el tema. Entendre com està fet és el primer pas per personalitzar-lo sense trencar res.

Smarty i el tema classic

PrestaShop renderitza les pàgines amb Smarty, un motor de plantilles .tpl. El tema que ve de sèrie, classic, és net i ben estructurat: és la base recomanada per construir-hi a sobre en lloc de partir de zero.

Què hi ha dins d’un tema

  • templates/ — les plantilles .tpl de cada pàgina i bloc.
  • assets/ — CSS, JS i imatges. En els temes moderns, el CSS surt de SASS compilat amb un pipeline (webpack), no s’escriu a mà el CSS final.
  • config/theme.yml — el manifest: nom, versió, configuració per defecte i els hooks que el tema fa servir.
  • modules/ — aquí el tema pot sobreescriure plantilles de mòduls concrets.

Hooks: la cola entre tema i mòduls

Les plantilles del tema deixen hooks, punts on els mòduls injecten el seu HTML (un carrusel, un bloc de productes, un formulari…). Aquesta és la idea central de PrestaShop: el tema defineix l’estructura i els hooks, i els mòduls hi aporten contingut, sense que cap dels dos hagi de conèixer el codi de l’altre. Quan ho interioritzes, personalitzar el front deixa de fer por.