Azharkamar.com

How to Add a Custom Header in PrestaShop

Tutorials
10 Mar 2011
14 comments

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

    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. Internet knjizara

    Great post. tnx

  3. Didi

    What about html?



    Azhar Kamar replied:

    @Didi, lol what html

  4. Sklepy PrestaShop

    Nice input ! thanks You :)

  5. Melissa

    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.

  6. Matt

    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.

  7. diana

    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 *