The process of creating a template for PrestaShop 1.7 version may cause some problems for users coming from previous PS versions.

It is completely different from 1.6 and requires some time in order to make proper setup.

Please note this is my personal point of view about setting up environment for theme creation.

Theme creation

There is already a thing called PrestaShop Starter Theme but I won’t use it. In my opinion it looks bad and it’s just better and easier to adapt existing classic built-in PrestaShop theme.
To do so, go to your /themes/ directory, copy whole classic folder to the same location, but with new name.
I will call it my_theme.

Next, edit /themes/my_theme/config/theme.yml. Adjust first 7 lines to match your needs. For example:

name: my_theme
display_name: my_theme
version: 1.0.0
author:
  name: "PrestaCraft"
  email: "prestacraft@gmail.com"
  url: "http://www.prestacraft.com"

Of course there is bunch of another configuration options in this file, but I won’t focus on them.

You should be able to change the theme now. In the BackOffice go to the Design > Theme & Logo and find “my_theme”.
Click Use this theme.

Setting up PrestaShop for development process

In your BackOffice go to Advanced Parameters > Performance and use the following settings:

Applications to install

If you have already installed any of these – just skip installation of them.

Git for Windows
https://gitforwindows.org/
Needed mostly to get access for using some UNIX shell commands.

Node.js
https://nodejs.org/en/download/
Package dependencies used in the theme.

About SASS

For those who don’t know about SASS – it’s special CSS preprocessor which makes creating and maintaining CSS files easier.

There is a nice guide about SASS which I recommend to read if you are not familiar with it – https://sass-lang.com/guide.

Using NPM to compile SASS (.scss files) to CSS

Please note that in PrestaShop 1.7 theme structure:
– your source files (dev scripts, sass files, etc.) are located in /_dev/ folder
– your destination files (scripts, stylesheets etc.) are compiled from /_dev/ folder and stored in /assets/ directory

Now it’s time to create something in your theme.
In file explorer go to your PrestaShop root folder and navigate to /themes/my_theme/_dev/. Right click on empty space and click “Git Bash Here”.

Type and click enter:

npm install

After completing this task, there are two commands which will compile your source (/_dev/) files into destination (/assets/):

npm run build

and

npm run watch

First one generates assets manually and you should run it at beginning of your theming work.
Second one looks for changes in your /_dev/ files (for us .scss files are especially important in this process) and automatically compiles into /assets/ directory. I’m using this command for most time because I don’t have to build my assets manually.

Practice task

Let’s try compiling theme.scss file into theme.css.
Open Git Bash in /_dev/ directory and execute:

npm run build

npm run watch

Change the header background color. Near line 31 you should see #header.

Find:

#header {
  background: white;

Replace with:

#header {
  background: orange;

Save the file. Look at your console. You are going to see that NPM is compiling your assets. Go to your store homepage now and your header background should be orange. If it’s not – open manually in your browser (because you may have still older version in your browser memory):

http://your_presta_address/themes/my_theme/assets/css/theme.css

Your theme preview image

If you have fully created your theme (or at least homepage) you can make screenshot of main page and put it in your preview image.
To do so, edit file /themes/my_theme/preview.png.

PrestaShop themes ready to install

Of course whole theme developing process is really long and requires strong FrontEnd coding knowledge (HTML+CSS+JS). It’s much easier to choose ready theme which you’ll only have to download and install in your store. You can find a great template catalog ready for PrestaShop here. I strongly recommend using themes provided by trusted companies, because you’ll not only have a working theme, but also you’ll receive a support if needed.

Final words

You probably noticed that file structure is much different in 1.7 version. Also, whole theming process has changed significantly.
That’s why I recommend you reading official Developer Documentation for Themes where you can find more informations about theming.
Thanks for reading and have fun in creating your theme 🙂