Open Source Tutorials - Open Source Training
Open source training & tutorials from experienced, passionate people
chrome icon firefox icon ie icon opera icon safari icon Sings in these Browsers
A- A A+

By A Web Design

pdf icons

Changing The Default Theme Of PrestaShop

Web Template Blog:

http://www.webtemplatesblog.com/archives/2010/08/12/15-free-prestashop-themes/

Free Prestashop Themes:

http://www.freeprestashopthemes.net/

eVo - 20 Of The Best Free Prestashop Themes:

http://www.evohosting.co.uk/blog/web-development/prestashop/20-best-free-prestashop-themes/

Disclaimer:
Please be careful while downloading free PrestaShop themes from any of the above URLs.
OpenSourceVarsity is in no way responsible for the themes you download.

We suggest that each downloaded theme’s .zip file should be scanned using an anti-virus system such as Avast.

These URLs have been provided as examples only.

Goggle for – Free Prestashop Themes – will throw up many more.

On finding a theme you like, download the theme and save it to a folder on your hard disk.

Process the downloaded zip file locally

Navigate to the local folder where the PrestaShop theme has been downloaded to.

Unzip the zipped theme file to extract the files and folders from within.

The extracted files and folders have to be copied to /themes folder in the PrestaShop website.

Usually the path to /themes is your_website_URL/themes

Making the uploaded theme the default theme

Log in to the PrestaShop admin section as follows.

In your Browser address bar type in your_website_URL/youradminfoldername

Eg.
your_website_URL/admin1234

Enter the Email Address and password provided on the last configuration page when installing PrestaShop, click on Log in as shown in Diagram 1.

diagram1.png
Diagram 1

After logging in to the backend, PrestaShop Control Panel page is displayed as shown in Diagram 2.

diagram2.png
Diagram 2

Navigate to the Preferences menu item in the Top Menu as shown in Diagram 3.

diagram3.png
Diagram 3

On click of Preferences Tab, the page as shown in Diagram 4 is displayed in the Browser. Locate the link Appearance from the given options as shown in Diagram 4 and click it.

diagram4.png
Diagram 4

On click of the Appearance link, the page as shown in Diagram 5 is displayed in the Browser.

NOTE: Only the Themes section of the page that is displayed in the Browser when the Appearance link is clicked is displayed in Diagram 5. This is because the page is very large vertically.

The top section of the page displays the various possibilities to change the Appearance of the Theme. Scroll two thirds down the page to locate the Themes section.

Click on the link Theme Installer as shown in Diagram 5.

diagram5.png
Diagram 5

On click of the link Theme Installer, the page as shown in Diagram 6 is displayed in the Browser.

On the page displayed, click on the Install button, to install the Import / Export theme module for your PrestaShop.

diagram6.png
Diagram 6

On click of the link Install, the page as shown in Diagram 7 is displayed in the Browser.

diagram7.png
Diagram 7

Scroll down the page, you would see the successful module installation section as shown in Diagram 8.

diagram8.png
Diagram 8

After the Import / export theme module has been successfully installed, click on the Configure link as shown in Diagram 9.

diagram9.png
Diagram 9

On click of the link Configure, the page as shown in Diagram 10 is displayed in the Browser.

diagram10.png
Diagram 10

Locate the Import from your computer section on this page. Click the Browse from within this section.

A file browser opens up. Navigate to the folder on the hard disk where you downloaded the PrestaShop theme file. Select the zip file and click on Next button as shown in Diagram 11.

diagram11.png
Diagram 11

On click of the Next, the page as shown in Diagram 12 is displayed in the Browser.

diagram12.png
Diagram 12

On click of the Next, the page as shown in Diagram 13 is displayed in the Browser. The theme was successfully imported.

diagram13.png
Diagram 13

On click of the Next button, the page as shown in Diagram 14 is displayed in the Browser. Various modules have been enabled.

diagram14.png
Diagram 14

On click of the Finish button, the Appearance page as shown in Diagram 15 is displayed in the Browser.

NOTE: Only the Themes section of the page that is displayed in the Browser when the Appearance link is clicked is displayed in Diagram 15. This is because the page is very large vertically. The top section of the page displays the various possibilities to change the Appearance of the Theme. Scroll two thirds down the page to locate the Themes section.

Select the radio button adjacent to jeans-free. Click Save as shown in Diagram 15.

diagram15.png
Diagram 15

On click of the Save button, the page as shown in Diagram 16 is displayed in the Browser. Settings update successful message is displayed

diagram16.png
Diagram 16

Open a new tab in your Browser and enter the URL of your website.

The page as shown in Diagram 17 is displayed in your Browser.

diagram17.png
Diagram 17

The newly uploaded theme is displayed in the Browser.

OSV Newsletter


Receive HTML?

NOTE: To prevent subscription to the OSV newsletter, uncheck the checkbox above.
Guest Blog for OSV
Free Ebook Download
LinkShare_180x150
Artisteer - DNN Skin Generator
Tapestry Theme - A Tumblog-Style Theme for Wordpress