PrestaShop child theme: customise the design without losing changes when you update

It is the story of many stores: someone changed the colour of the buttons, moved a block on the product page and tweaked the cart template, all directly in the theme files. It worked for years. Until a new version of the theme came out with important fixes, it was updated, and all those changes disappeared. Or, worse, nobody dared to update and the theme stayed stuck on a version that no longer fits the core.

The child theme exists to prevent exactly that.

What a child theme is

It is a theme that declares another one as its parent and contains only the files you want to change. When PrestaShop needs a template, it looks for it first in the child theme; if it does not find it, it uses the parent's. The result is that the child holds only your customisations, separate from the theme vendor's code.

Since PrestaShop 1.7 the mechanism is part of the core and is declared in the theme's configuration file, config/theme.yml, by stating the name of the parent theme. The default themes (Classic and, in PrestaShop 9, Hummingbird) can be used as parents, as can most commercial themes, although it is worth confirming with their author.

What goes in the child theme

Your own stylesheets and scripts

Your CSS and JavaScript go in the child theme's own files. You can choose whether the child also loads the parent's files (the usual approach, to inherit the whole design and just add on top) or replaces them. Writing your styles in a separate file, loaded after the parent's, is the cleanest way to change colours, margins or fonts without touching anything from the vendor.

Templates you actually change

If you need to modify the structure of a page, you copy only that template to the child, at the same relative path it has in the parent, and edit it there. For example, the product page or a specific block of the cart. All the others still come from the parent.

Even better: many PrestaShop templates are organised into Smarty blocks. A child template can extend the parent's and redefine just one block, instead of copying it entirely. That way, if the vendor fixes something elsewhere in that template, the fix reaches you.

Module templates

Well-built modules let the theme override their templates. They are placed in the theme's modules/ folder, under the module's name and with the same path the template has inside the module. It works the same in a child theme: you customise how a module looks without touching the module, and when the module is updated, your template stays in place.

What does not go in the child theme

• Logic changes. The theme is presentation. If you need something to work differently, that is a module, not a template full of complicated conditions.
• Overrides of core classes. They live in another folder and carry their own risks when updating. Having a change in the child theme does not protect it if it actually depends on an override.
• Complete copies of the parent theme. If you copy all the templates to the child "just in case", the parent becomes useless: no fix reaches you and you are back to the original problem.

How to update the parent theme

With a child theme, updating the parent is a predictable procedure:

1. On a copy of the store, replace the parent theme with the new version.
2. List the templates the child contains and, for each one, compare the parent's old version with the new one. If the vendor has changed that template, you need to carry its changes over to your copy in the child or check whether your redefined block still fits.
3. Review your CSS: if the parent has changed class names or the HTML structure, some of your styles will stop applying.
4. Clear the cache for templates and combined files, and go through the main pages: home, category, product page, cart, checkout and customer account.
5. Test a complete order. Checkout templates are the ones that change most and do the most damage when they fail.

If you keep version control of your child theme (even if it is just saving a dated copy before each change), this process is much quicker: you know what you changed and when.

If you have already edited the theme directly

This is the most common situation, and it can be fixed:

1. Get the original package of the same theme version you have installed.
2. Compare your theme with the original file by file. The differences are your customisations (and, sometimes, things nobody remembers doing).
3. Create a child theme with the original as parent and move only those differences into it: the CSS to its file, the modified templates to their path.
4. Enable the child theme on a copy and compare it page by page with the current store.

From then on, you can update the parent with the procedure above. It is the way to regain the ability to keep the theme up to date, which is part of keeping the whole store up to date: a stuck theme ends up preventing core updates.

Common mistakes

• Enabling the child and losing the theme's visual configuration (modules hooked to hooks, positions). When switching themes, PrestaShop may apply the configuration declared by the new theme; check module positions after enabling it.
• Forgetting the images and fonts that the child's CSS references with paths relative to the parent.
• Editing the combined or cached CSS instead of the source file. It is lost as soon as it is regenerated.
• Customising from the vendor's back office panel and from files at the same time, without knowing which one wins.

How to solve it in PrestaShop

RKR Editor CSS/JS de themes lets you edit your theme's CSS and JS from the back office, child themes included, without FTP: it opens custom.css and custom.js in one click (and creates them if your theme does not have them), searches all the theme's files showing the line, makes a backup before every save so you can roll back from a drop-down, and refuses to save if someone has changed the file on disk since you opened it. It only works with CSS, JS, SCSS and LESS inside the theme folder, and editing .tpl templates is switched off by default and reserved for the SuperAdmin. If what you need is to create the child theme, separate customisations made on the original theme or update the parent, with a Rekire support hours package we do it on a copy of your store.