Child pages
  • Creating your own theme

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Building a PrestaShop is a complex endeavour. For instance, in comparison with a WordPress theme, which could work with a single index.php file, a minimal PrestaShop requires many more pages: home page, product page, user account pages, cart page, order process pages, etc. Building a theme for an e-commerce site implies a much more complex and intertwined set of pages and templates.

This is why we advise to start your own theme by using the foundations laid by the default theme. Complete and proven, PrestaShop's default theme ensures that all necessary pages are already in places, leaving you the freedom to rework the page display, to use your own images, to enhance it with your own scripts.

...

In PrestaShop 1.4, the default theme is called "prestashop", and is located in the /themes/prestashop folder.
In PrestaShop 1.5, the default theme is called "default", and is located in the /themes/default folder.

Give your copy of the folder its own name: it should be the final name of your theme, in a single lowercase word. Make sure to check on the Addons website that no other theme is already using that name, even more so if you plan to eventually sell that theme online.
Place the renamed folder in the /themes folder of your installation PrestaShop.

...

All these module templates are included by default in the default theme's /modules folder, because they are front-end features that are needed by that theme. You can safely disable/uninstall any other module in the back-office "Modules" page. This enables you to start on a somewhat clean slate.

...

The point here is that a theme must come packed with custom templates for the default modules. These template files are stored in the "/modules" folder of the theme's folder. For instance, in the default theme, the template file for the Layered Navigation module can be found in the following path: /themes/default/modules/blocklayered/blocklayered.tpl It is your duty as a theme developer to build templates for at least all the default PrestShop modules, along with the additional modules that you plan on providing along with your theme's files.
If all you want to change in a module's front-office appearance is its CSS file, you should put your customized version in this folder: /themes/YOUR_THEME/css/modules/blocklayered/blocklayered.css. Just make sure to use the same file path.

Creating content

Your theme will display content taken from the PrestaShop database. Wether you plan on keeping the theme to yourself or share/sell it for others to use, you simply cannot start designing it without content, along with the activation of some key features that any store might use, along with yourself.

The demo data installed with PrestaShop is enough to help with it, as it features products, categories, stores, etc. Starting with a fresh installation of PrestaShop gives you a head-start with demo content, while empty stores will require you to start adding content (either demo fake or real) to the store in order to actually see your theme react to it.

...