How to Create a Theme for Prestashop 1.7. Part 1

The following information will be very helpful for beginners and everyone who just installed Prestashop 1.7 and doesn’t know what to do next. Here I will cover the questions regarding what do you need to start with, to create your own Prestashop template. Well, that’s what you definitely should have before starting:

• Sound knowledge of CSS, Js, HTML, Smarty 3 template engine, localization, data model and modularization in Prestashop;
• Sound knowledge of webpack bundling process;
• Understanding of node.js, node.js modules, NPM package manager;
• Fundamental knowledge of GIT

Not long ago Prestashop 1.7 has been released and as you know there are many
changes in it. Here is the short list of the most important changes:

• Old themes are not compatible with new 1.7 version;
• Theme files structure has been changed;
• Now it’s possible to connect various styles and scripts, depending on pages and priority (it can be configured by theme.yml);
• Bootstrap 4;
• Ability to create and use custom hooks;

PrestaShop Development

Take your online store to the next level with BelVG PrestaShop Development

Visit the page

1. Initial configuration

It’s required to have a fundamental GIT knowledge. Let’s clone Prestashop repository to our global directory on web server:

Further it’s necessary to switch from the current dev branch to the stable version. To do that, let’s follow to the directory with repository and run the following commands:

After that you will face the list of available versions:

Let’s switch to 1.7.x.x version (in my case it’s 1.7.0.3)

So now everything is ready for installation.

• At first Install Composer;
• Navigate to the root directory of the cloned repository and run the command:
  
  PHP

  composer install

  1	composer install

It’s important, that in order to use this installation method you should already have enabled Dev Mode in Prestashop.

2. Starting template as a prototype

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Igor

After the first step is completed, we should decide which template is the best fit for creating your new one. At the moment there are two themes provided for developers: classic and StarterTheme. The difference between them is only that StarterTheme has only basic functionality, rather then Classic is a default theme (you can find source files on the official repository). As for me, I prefer to use Classic one. And after you cloned Prestashop, I’m sure you already have source files and Classic theme itself in themes/ directory, but what concerns how to install and configure StarterTheme, all this information you can find on github.

3. Environment configuration

After you decide what theme to use as a prototype, let’s start operational environment installation:

• Node.js installation;
• Webpack global package installation (by npm package manager);

For Windows users: 

For others: 

After that let’s navigate to <theme_folder>/_dev/ directory, and if you have already read our article about template files structure, then you should know that all source files are carried in this directory, as well as assembler config file and of course package.json, in which all the dependencies are described. So let’s define these dependencies:  

Here we almost completed indispensable minimum of required configurations and now we’re ready to start the most important part – theme creation. And if you are not familiar with the technologies described above, it is highly recommended to read more about node.js, npm/yarn and webpack. Or just request a consultation.

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.

Talk to Igor

Now you can run the bundler. In order to do that just navigate to  <theme_folder>/_dev and run:

 – bundling all the Prestashop theme source files;

 – tracking mode: bundler doesn’t stop its work, but is waiting for any changes and performs recompilation (very fast by means of caching);

Webpack is a pretty powerful bundler, and if you are still not familiar with it, it’s time to get into. No matter what pre(post)processor you use, webpack will work properly with any type, as long as you configure it before. The same with js, you can use everything you want: es – 2015, coffeescript, typescript.

Additionally it would be great to set up livereload to speed up development process. We will cover this point in the next part of the article and will start first steps of the theme editing.

Need a great PrestaShop site? Visit our store with modules.