After a few weeks of exploring, I feel PrestaShop is one of the best among the few open source e-commerce solutions out there. PrestaShop uses different file types for their framework – Smarty tags and .TPL files, unlike the more popular CMSes like WordPress and Joomla.
So I got myself familiar with the file structure and figured out how to customize your header without using any hook or module.
The version I’m running is PrestaShop 1.3.6.
Adding codes into header.tpl
It’s quite simple, just locate the file header.tpl, under themes > prestashop (or whatever theme you’re using) and find the comment <!-- Header -->. Note that it’s wrapped inside <div id="page">.
So if you want the header to be 100% width, for example, you gotta place your codes above <div id="page">.
{$HOOK_HEADER}, your website will disappear (the page loads, an empty white screen is all you see).
LOL I don’t know why.
Good luck, soldier!
Hi Azhar
I hope you can help.
I am completely new to all the coding things and need a quick help on my header problem.
Eventually, after I had figured out how to change my background (as well as the header background to match my page background), I decided to design a completely new background. However, when I changed my page background and removed the header background, there is a white block now. I need to remove my logo as well as the white header so that the page background can be seen. My logo is already designed in the page background. All I want is the white middel block.
Can you please, please help with this?
Great post. tnx
What about html?
March 1st, 2012
Azhar Kamar replied:
@Didi, lol what html
Nice input ! thanks You :)
This is really helpfull.
I used this method on PrestaShop Version 1.4.
April 1st, 2012
Azhar Kamar replied:
@Melissa, good to hear that! And thanks for the version update.
If anyone has the problem of nothing changing after making edits to the header.tpl file, here is the solution that worked for me:
1. empty the DIR “/tools/smarty/compile” to flush cache
2. Go to backoffice >> preferences >> performance
3. set smarty recompilation to ‘Yes’
4. set cache to ‘No’
5. Remember to change these back once the shop goes live!
September 3rd, 2011
Azhar Kamar replied:
@Matt, thanks for your input!
March 30th, 2012
Yrag Olanam replied:
@Matt, thank’s it really help me a lot.
is it work on version 1.4 too?
March 31st, 2011
Azhar Kamar replied:
@diana, I only tested it on the version I’m using which is PrestaShop Version 1.3.6. but I believe Version 1.4 should be the same. Try it.
November 25th, 2011
Siddharth replied:
ya its working on 1.4
November 25th, 2011
Azhar Kamar replied:
@Siddharth, thanks for your input!