Create Prestashop themeUnlike WordPress themes, Prestashop themes are quite complex. Prestashop themes consist of many pages such as the home, user accounts page, product page, a page for cart and order processing and many more whereas WordPress can work with just a single index.php page. If you plan on building an e-commerce site, the pages and the templates necessary becomes higher and more complex thereby making the theme creation process difficult.

But as a solution, you can build custom Prestashop theme by using the default theme provided by Prestashop. This default theme is proven to provide all the pages that are necessary organized and in their correct places so that you gain the ability to make changes to the default display by adding your required scripts and your own images without having to worry about the complex page structure.

Creating the theme folder

Create a copy of the default theme folder found in Prestashop as the initial step to create Prestashop theme. Rename the new copy of the theme with a unique theme name. It should be made sure that a theme with an identical name does not exist if you are planning to sell the theme in the future. This can be done by checking the Add-ons website. Finally, place the newly renamed theme folder in the /themes folder inside your Prestashop installation.

The name of the default theme in Prestashop 1.4 is “prestashop” which can be found inside the /themes/prestashop folder.

The name of the default theme in Prestashop 1.5 is “default” which can be found inside the /themes/default folder.

Cleaning unnecessary content

Since you’re going to create Prestashop theme of your own, there are content that will not be necessary for your new theme, inside the default theme folder and your Prestashop installation. Out of the default modules that are installed and activated by Prestashop, there are certain modules without which the store of your site cannot function properly whereas there are other modules, the existence of which will not make any difference to your theme or website.

Module templates necessary for the store

Without the presence of the below mentioned modules, it will not be possible to sell any product from your website.

  1. Blockmyaccount – Module for creating new user accounts.
  2. Blockcart – Module for displaying the orders and payment processes.

Module templates needed for theme design

These are the modules that are not necessary for the functioning of the store, but are important for the design of the theme. It is best advised to use these modules when you develop Prestashop theme.

Ex:

  1. Blockcategories – Module for displaying categories for products
  2. Blockmyaccountfooter – Module that displays links to user accounts in footer
  3. Blocksearch – Module for displaying search engine and search results
  4. Homefeatured – Module that displays featured products

Module templates to enhance functionality

Though not necessary for functioning of the store, these are a set of modules that enhance the store’s functionality by providing additional features. Therefore using these modules will increase the user friendliness of your store for customers.

Ex:

  1. Blockbestsellers – Module for displaying the best seller products
  2. Blocknewprodutcs – Module that displays new products
  3. Blockrss – Module that displays RSS feeds
  4. Blocksocial – Module that displays information from social networking pages

If you wish to start with a completely clean environment without any of the default modules enabled, all the available modules can be disabled and reinstalled one after the other according to the requirements. These modules can be either safely disabled or uninstalled through the “Modules” page in your back-office. This process will help you identify and understand the functionality of each module but the process tends to take a long time to be completed. It is best advised to keep a set of modules that are essential for the functioning of your theme in most configurations.

Another approach to cleaning content is to clean only the unnecessary modules for your theme. This will not require as much time as the complete cleaning process. Though the modules can be disabled or uninstalled from back-office access, the physical location of the module templates is the /modules folder of the theme.

All the themes contain module templates for the modules inside the /modules folder. As an example, blockcategories.tpl, the template file for the module product categories is located in the blockcategories folder inside the modules folder of your theme. The theme developer should make sure to create Prestashop template for the default Prestashop modules and also for the additional modules to be provided with the theme.

But if you only want to modify the CSS of the front-end appearance of a module, all you have to do is to add your custom CSS file to the specific location, for example the location of the CSS file for the product categories module can be accessed by navigating to the modules folder inside the CSS folder of your theme.

Creation of content

Whether your theme was built with an intention for selling to the public  or even for private use, the theme design cannot be done without content and without some key features that should be activated before the design process. Your theme will initially acquire content from the Prestashop database to display on your website. There are data installed with the installation of Prestashop for demonstration purpose which will feature stores, products, product categories etc. When Prestashop is freshly installed, it provides these demo data whereas addition of new content would be necessary for empty stores to test your theme’s reaction to content addition.

Customizing the design

By this time you would have your own theme created from the default theme that was provided. Now it’s in your power to explore the smarty templates, JavaScript codes, CSS rules and locations of content blocks etc. and make preferred changes to finalize the theme design according to your requirements.