Custom Hooks in Prestashop 1.7

Custom Hooks in Prestashop 1.7

Here is a small tip on how to use hooks in Prestashop 1.7. In comparison with Prestashop 1.6 version, I can say that 1.7 is a sweet candy. Theme development process is much easier and faster.

You can change modules positions and place them into various hooks using just one file — theme.yml.

It’s really easy to create your own hook and place modules into it.

Let’s take a look at an example and add a full-width slider in a default theme layout.

Custom Hooks in Prestashop 1.7


Go to theme.yml file and find block “hooks”:

Custom Hooks in Prestashop 1.7

In order to add your own hook, just add the following strings:

You can also add a description to a new hook in the “custom hooks” block:

We have just declared a hook and now we are able to call it in any template.

2. In order to add full width slider in a default theme, please navigate theme/templates/layouts/layout-both-columns.tpl file and place previously created hook between <header> and <section id=”wrapper”> tags. And we need to add the following condition to display a slider only on a homepage:

That’s it.

The result is here.

If you need any help with Prestashop Development, just contact us.


  1. I try to create custom hook like your example but with no success. I make all the changes but when i go to positions page on backend and try to change module slider position to my new position i can’t because there is no “displaySlider” position.

  2. Haralake,

    Haralake, you don’t need to change module position in backoffice, because it is already in created hook. The advice to make all things work, try to switch theme to default theme in backoffice and then back to yours – that will lead slider will appear in new position.

  3. Hello,

    Thank you for this tuto, i’m also looking for custom height image slider, do you where i could find it ?

  4. Jimmy,
    You can set slider height in css styles.
    Find imageslider.scss file in your_theme/_dev/css/components folder and set height to any you need:

  5. Don’t work… And it’s easier in the backoffice with Transplant a module. No need to touch code. Cheers!

  6. Hi Lena, I trying to use your example but it’s not working. Maybe I didn’t get the second part. It’s a little bit confuse. After add the hook in theme.yml … I inserted this in layout-both-columns.tpl:

    {block name=’header’}
    {include file=’_partials/header.tpl’}

    {if $page.page_name == ‘index’}
    {hook h=’displaySlider’}

    {block name=’notifications’}
    {include file=’_partials/notifications.tpl’}

    Is that right?


  7. Hi, Adriano, in case changes were not applied, try to switch to another theme in admin panel, then switch back to yours.

  8. Hi, when adding a hook on the new version of prestashop 1.7 i get this error:

    Fatal error: Uncaught exception ‘Symfony\Component\Yaml\Exception\ParseException’ with message ‘A YAML file cannot contain tabs as indentation at line

    Did you experience this in the new prestashop version ( )


  9. Hi Daniel, yes custom hook works fine in the new prestashop version ( ). Error message you’ve got means that you have syntax mistake. Be sure that you don’t use tab, only space allowed as the indentation in YAML files.

  10. Hi Lena ! Hi everybody !

    I am really stuck with the process.
    For the first step :

    On the theme.yml file I have this :
    – ps_imageslider

    I don’t know where to put the following informations so I didn’t use them as it seems optional:
    name: displaySlider
    title: displaySlider
    description: Display Image Slider module in a separate hook

    There is no custom hook block in my theme.yml file.

    For the second Step:
    I put this in the layout both column file:

    – ps_imageslider
    {if $page.page_name == ‘index’}
    {hook h=’displaySlider’}

    The only thing that change on my website is that now I have a text saying : displaySlider: ” – ps_imageslider” between the header and the orifginal prestashop slider.

    I don’t know what to do.

    There is nothing new into the position section in the back-office and there is no new table named ps_imageslider in the database.

    Can somebody help please ? Thank you

  11. Sorry but….Not working!

    Just to be sure, the process only include the change of the theme.yml file and the tpl file? It doesn’t need any additional module than the native image slider of the 1.7.2 classic theme?

  12. Brand New !

    On the prestashop 1.7.2 version, you just have to move the slider from display home to the hook named : “displayNavFullWidth “. Et Voilà !

  13. I tried it a lot doing on a local host but fails to perform and secondly I m getting small white space below slider how to fix that and unable to fix height in scss file

  14. Hi Lena,
    Please, how do you succed to display your popular products in as carousel.
    I would like to do it with my new products and popular products.


  15. Lena Tsybulenko, jamas lograran que aparezca el hook en las pocisiones de prestashop, si no crean el hook en la base de datos: de la siguiente manera, se ubican el ps_hook dentro de la base de datos y una vez dentro van a la pestaña sql y pegan el siguiente codigo INSERT INTO ps_hook (name, title, description) VALUES (‘nombre_del_hook’, ‘titulo_hook ‘, ‘descripcion’);

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *