A PrestaShop theme is a set of files which you can edit in order to change the look of your online shop.
Here are a few important tidbits:
The best way to learn how to create a theme for PrestaShop is to dive into the Classic Theme.
Here is its organization, which is explained further below.
.
├── CONTRIBUTING.md
├── README.md
├── _dev
│ ├── css
│ │ └── ...
│ ├── js
│ │ └── ...
│ ├── package.json
│ └── webpack.config.js
├── assets
│ ├── css
│ │ ├── ...
│ ├── img
│ │ └── ...
│ └── js
│ └── ...
├── composer.json
├── config
│ └── theme.yml
├── modules
│ └── ...
├── plugins
│ └── ...
├── preview.png
└── templates
├── _partials
│ └── ...
├── catalog
│ ├── _partials
│ │ └── ...
│ ├── listing
│ │ └── ...
│ └── ...
├── checkout
│ ├── _partials
│ │ └── ...
│ └── ...
├── cms
│ ├── _partials
│ │ └── ...
│ └── ...
├── contact.tpl
├── customer
│ ├── _partials
│ │ └── ...
│ └── ...
├── errors
│ ├── ...
│ └── static
│ └── ...
├── index.tpl
├── layouts
│ ├── layout-both-columns.tpl
│ ├── layout-content-only.tpl
│ ├── layout-error.tpl
│ ├── layout-full-width.tpl
│ ├── layout-left-side-column.tpl
│ └── layout-right-side-column.tpl
├── page.tpl
└── wrapper.tpl
The folders are used this way:
themes/classic/modules/ps_categorytree/views/templates/front/ps_categorytree.tpl
file replaces the Category module’s own modules/ps_categorytree/views/templates/front/ps_categorytree.tpl
When you install/enable a theme, PrestaShop checks if the theme is valid: it looks for the theme.yml file (and checks its content), its declared compatibility, and the existence of some files.
There is a list of files that need to exists, even if they’re empty. Please see dedicated documentation to know what makes a theme valid.
It could be that you’ve built some sort of groundbreaking theme and it doesn’t exactly work like the Classic Theme does. For instance, if you don’t have a product page, then you don’t need the product.tpl file. In that case, you just have to create an empty product.tpl file. Be nice to the next developer and add a comment indicating where the code related to products can be found ;)
jQuery v3.5 is loaded by the core (bundled in core.js
) file.
Read more about assets management.