How to Add a Custom Header in PrestaShop

10 Mar 2011

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">.

One funny thing I found was that if you add any code above {$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!

Author - Azhar Kamar
14 Comments Revolving around this Article
  1. Janeske says:

    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?

  2. Didi says:

    What about html?

    Azhar Kamar replied:

    @Didi, lol what html

  3. Nice input ! thanks You :)

  4. Melissa says:

    This is really helpfull.
    I used this method on PrestaShop Version 1.4.

    Azhar Kamar replied:

    @Melissa, good to hear that! And thanks for the version update.

  5. Matt says:

    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!

    Azhar Kamar replied:

    @Matt, thanks for your input!

    Yrag Olanam replied:

    @Matt, thank’s it really help me a lot.

  6. diana says:

    is it work on version 1.4 too?

    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.

    Siddharth replied:

    ya its working on 1.4

    Azhar Kamar replied:

    @Siddharth, thanks for your input!

Write a Comment! NOW! :)

Current ye@r *