Agence web créative 44


Prestashop, simple and cool sticky right column

Today i’m gonna teach you how to make a sticky right_column with prestashop. It’s a simple trick and I think it’s really useful for customers. But It can’t be useful for all project… you have to think about that before to make the change.



Here is a demo (not made with a full prestashop but I used the same elements) :


Ok, so first we need to use a jquery plugin that will make the sticky and then we will have to used it in prestashop 🙂
So I used this plugin, “jSticky”, made by Andrew Henderson (which is really a great plugin).
You can find it here :
So first download the plugin and then put the file “jquery.jsticky.js” in the folder “themes/your_theme/js”
In my exemple I want the sticky rightcolumn only when I’m in product’s category.
So open the file “footer.tpl” and change the right_column like this :

[pastacode lang=”markup” message=”” highlight=”” provider=”manual”]

<div id="right_column" class="column grid_2 omega">
	{if $page_name == 'category'}
		<div class="sticky">
	{if $page_name == 'category'}


What we are doing is when we will be in product’s category, we will add a div named “sticky” around the content of the right_column.
Now we gonna load the script at the end of DOM with the same way.
Normaly you shouldn’t have to add the jquery library, because prestashop already do it. If not you will have to do it.
So put this code before the </body> :

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

{if $page_name == 'category'}
        <script src="{$js_dir}jquery.jsticky.js" type="text/javascript"></script>   
        <script type="text/javascript">
                topSpacing: 0,
                stopper: "#footer"



So we load the sticky right_column only in the category. If you want it in all pages, you will have to remove all the “{if $page_name == ‘category’}{/if}”

Now the only things you have to do is to give a width to the sticky div.
Because when the scroll will arrive to the sticky div, javacript will put the div in a static position, so you will lose your width.
In your global.css put the same width of your rightcolumn to the sticky div :

[pastacode lang=”css” message=”” highlight=”” provider=”manual”]

/****** sticky div ******/
.sticky{width:350px; margin:0; padding:0; overflow:hidden}


Don’t be afraid to tell me what you think about this. And if you have any questions, I will try to help you (and sorry for my english :)).

7 Commentaires

  • Fledco / 3 janvier 2015 at 17 h 44 min


    Can you send me a procedure for a fixed right and left column?
    I does not work .



  • B.WIA / 5 janvier 2015 at 9 h 04 min

    If you want a fixed column on both you just have to do what I explained and then created a div with the class “sticky” around the {$HOOK_LEFT_COLUMN} in the file header.tpl of your theme.

  • fledco / 24 janvier 2015 at 22 h 37 min

    Hello Boris,

    First of all thank you. Can i email you my footer.tpl and header.tpl.
    It is only working on the irght column. I followed your instructions but somehow it does not work.


  • mohsen / 14 février 2018 at 8 h 46 min

    i do all steps clearly but it not work

    • Boris Billy / 15 février 2018 at 9 h 50 min

      Sorry but I cant help you I need more infos… Is it the same presta version ? The same code ? Do you have JS errors ? Maybe a link so I can look on ?

  • Bbaxter / 2 novembre 2019 at 7 h 48 min

    Hi, sorry I’m a noob but I can’t find what DOM relates to in Prestashop…

  • Thomas / 6 février 2020 at 16 h 06 min


    Thank you for your tutorial,
    I applied it not to a column but to the “filter” block on the category left column on a prestahsop 1.6, in mobile mode the filter block is automatically expand instead of staying closed by default and the sticky function does not work (with no js error ) is this a limitation of jquery.jsticky.js , either while on computer it works well.

Laissez un commentaire

You must be logged in to post a comment.