Step by Step PrestaShop 1.5.x Theme Installation Tutorial

In this tutorial I show you how to install a theme in PrestaShop v1.5. For demonstration purposes, I downloaded a free theme from leotheme.com. Of course this tutorial will work with any theme as long as it's compatible with PrestaShop v1.5.

For your convenience, I have created an installation video which can be viewed below:


Can't view the video? Watch it on YouTube

Preparation:

So after you've downloaded a theme, you'll want to inspect the folder contents. If your download is zipped, you will want to unzip it. While I know that some people recommend uploading the zipped file directly to your server and then unzipping it, I prefer to actually look at what I am working with prior to uploading.

For example, LeoTheme offers 2 download types, a quickstart and regular download. I downloaded the regular file because the quickstart contains the entire PrestaShop installation and since I already had PrestaShop installed, I didn't need this.

You can tell whether the download only contains the theme by looking at the folder names. In my case, I had 2 folders, a modules folder as well as a themes folder. The themes folder contains the files of the new theme that you are installing.

Depending on your theme, you might also have a modules folder like I did but if if you don't, there is no need to worry because the modules folder only contains PrestaShop add-ons.

In addition to the themes and modules folder, my installation folder also contained a Config.xml file which I believe was included to automate the installation process. Unfortunately, this didn't work because when I tried installing the theme via the "add new module" link in the admin section, the files were moved to the wrong directory.

Now if your download doesn't contain a themes folder nor a modules folder, it's likely that it only contains files that make up the theme. So no worries, you can still proceed to the next step.

Connect to your server:

So to begin the installation, you will need to upload the installation files and folders to your server. To do this, I used FileZilla which is a free FTP client. Of course you can use an FTP client of your choice, your hosting control panel, or even a web development application but again, this tutorial uses FileZilla.

So first you will need to establish a connection between your computer and your server. If using FileZilla, simply paste your server's IP address into the host field, enter your hosting username and password and click the connect button.

Upload your theme:

After you've established a connection, locate your theme installation folder on your local computer. You will want to upload the only the contents of your themes folder and modules folder (if you have a modules folder) to the themes folder and modules folder on your server.

Also keep in mind that some downloads might not contain a themes folder and may instead only contain a folder with files that make up the theme. In such cases, just upload that folder directly to the themes folder on your remote server.

Enable your theme:

After you've uploading these files and folders, you will want to enable the theme by going to your admin panel > preferences > themes

and in the screenshot section, simply select your new theme by ticking the radio icon and then click the save button.

Install modules (this step depends on the theme and might not be required):

If you have modules, you can install any of them by going to your admin panel > modules > modules 

and then locating the new modules by their name and installing them. Keep in mind that some modules might not be required by the theme that you installed while other might be required, so you'd want to make sure that you enable the required modules.

In my case some of the modules provided a way to modify the look of the theme through the admin panel so they were definitely useful.

Images not working?

If you run into issues with your images not working, know that this is due to the name used to save the thumbnails. You can fix this by looking at the name that the thumbnails are saved under. Keep in mind that if you have friendly URLs enabled, you'd want to disable this while checking the names of the thumbnails by going to your admin panel > preferences > SEO & URLs

and click the "No" radio icon next to "Friendly URL" and then click the "Save" button.

Afterwards, go to your store's homepage or a product page and view the image URL (the way this is done will depend on your browser). In my case, my thumbnails were saved as:

small_default

medium_default

etc.

While my new theme was showing images as:

small

medium

etc.

which made it obvious that the new theme was excluding "_default" so I had to go to the admin panel > preferences > images

and change each of the values in the list by clicking the edit icon.

After changing the names, remember to regenerate your thumbnails by going to the "Regenerate thumbnails" section at the bottom of the page. Then make sure that "All" is selected for "Select image" and click the "Regenerate thumbnails" button. This basically deletes all of the old thumbnails and saves the new ones with the new name.

After completing these steps, just enable SEO friendly URLs if you've disabled them by going to your admin panel > preferences > SEO & URLs

and click the "Yes" radio icon next to "Friendly URL" and click the "Save" button.

At this point your theme should be up and running.

Recommended themes:

If you haven't found a theme yet, you may want to check out this article which lists some great PrestaShop 1.5 themes (free and paid available) that I managed to find.

Add new comment