UPGRADE PRESTASHOP THEME FROM 1.3 TO 1.4

There are quite a few steps involved with upgrading a Prestashop 1.3 theme to a 1.4 compatible theme, but it is all possible with a few skills.. and some elbow grease!

Here is a "step by step how to" guide for upgrading a default presta shop 1.3 theme to work with prestashop 1.4.

1 First Steps

Firstly, (do not try this on your live web server!!!). Make sure you have a copy of your 1.3 theme and a copy of the default Prestashop 1.4 theme, open each folder and we are ready to go!

Rename your copied 1.4 theme folder to be your new theme name ie;"mynewtheme". (Make sure it is a different name than your 1.3 theme - well worth saying!)

2 Replace Core Files

From your 1.3 folder, take footer.tpl and place into your "mynewtheme" folder.

Then put your 1.3 global.css file into your "mynewtheme" folder.

Do the same with the images folder, but make sure you MERGE them rather than replace, this will make sure you keep the old and new images in your folder. (If your computer does not merge files then perhaps try using a FTP program to do this).

Your header.tpl file requires some work before we can move over... and this is where it can get tricky. Most commercial 1.3 templates will have adjustments to this file so not everyone will see the same code. Firstly we need to copy and paste everything within the 1.4 < head > < /head > tags of the header.tpl file, into your 1.3 header.tpl file.
The code just below the head tags also needs moving over, an example of this would look like:

(DO NOT COPY THIS CODE, IT IS FOR VISUAL PURPOSES ONLY)
< body {if $page_name}id=”{$page_name|escape:’htmlall’:'UTF-8′}”{/if}>
{if isset($ad) && isset($live_edit)}
{include file=”$tpl_dir./live_edit.tpl”}
{/if}
{if !$content_only}
{if isset($restricted_country_mode) && $restricted_country_mode}
< div id=”restricted-country”>
< p>{l s=’You cannot place a new order from your country.’} < span>{$geolocation_country}< /span>
< /div>
{/if}

There is another excerpt of code in your 1.4 header.tpl file to display the websites logo that is different between 1.3 and 1.4. It looks something like:

(DO NOT COPY THIS CODE, IT IS FOR VISUAL PURPOSES ONLY)
< a id=”header_logo” href=”{$base_dir}” title=”{$shop_name|escape:’htmlall’:'UTF-8′}”>

< /a>

Copy that code over also. Once you have made these changes, move this header.tpl file from your 1.3 folder into your new 1.4 "mynewtheme" folder.

3 The CSS

One big difference between a Prestashop 1.3 theme and 1.3 theme is the CSS. In Prestashop 1.3, all of the main CSS is handled by the global.css file. In a Prestashop 1.4 theme the CSS is divided up into separate CSS files for different modules and aspects of the website. As CSS is a major part of our website displaying correctly, it requires some work to integrate the old CSS with the new theme.

Approach 1 - more effort

The correct approach would be to install the modules you require for your new 1.4 site, and then take the appropriate CSS from your old global.css file and put this directly into the yourinstalledmodule.css file. For example; if you install the BEST SELLERS module, search your old global.css file for all css relating to "Bestsellers" and then put this into the blockbestseller.css file. This will carry your old css styling over to show in your new module. You need to do this with all of the modules so there is a bit of work to do, but its a clean and correct way of upgrading your theme.

Approach 2 - easier method

We recommend you use "Approach 1" above, but if you do not like editing CSS code or are in a hurry... then you can always go and edit each module to update the reference to the CSS file. For example; the NEW PRODUCT MODULE. In this folder you will see a file located under: /modules/blocknewproducts/blocknewproducts.php. Edit the module CSS reference line in the file.

FROM THIS:
Tools::addCSS(($this->_path).’blocknewproducts.css’, ‘all’);

TO BE THIS:
Tools::addCSS(($this->_path).’global.css’);

So what we have done above is to tell the module to go use our old 1.3 global.css file instead of the specific 1.4 module CSS file. It is a bit of a hack to each module file but will work a treat!

4 Test

Now you can go and setup a local copy, or test copy of 1.4 Prestashop and try your new theme out. It is worth nothing that the above approach is aimed at a default 1.3 theme. As most of you will have custom 1.3 themes, you may have other .tpl files within your 1.3 folder. These will all require bringing over into the 1.4 theme folder for your site to function the same as before. In doing this you may break your new theme due to 1.3 code also requiring updating in those files.

You might also want to check your email templates as well as a few other bits and bobs around the site. Transfer the important information over bit by bit as you test out!

Should you require any further assistance with this process, Amplify provide 1.3 to 1.4 theme upgrades and support assistance. Contact us if you would like Prestashop web development support.