Insert custom blocks (hooks) on Prestashop 1.7 and 8

The only way to extend PrestaShop is through themes and plugins, and for these custom blocks to be displayed, it is necessary to assign a position (a hook) to them.

PrestaShop themes usually include the most common ones by default, but sometimes, we need to establish a hook in a specific place in the template, for this, we define custom hooks.

To define a custom hook, we must first edit the theme.yml file found inside our theme’s config folder.

Once opened, we must locate the block where the hooks are declared, if a block called custom_hooks exists within it we will only have to define the block, if not, we will have to first declare the custom_hooks block and within it the custom hooks to be created.

It is important that the name and title begin with “display” if it is a space to insert into the interface, otherwise the hook will be considered invisible by PrestaShop.

To declare the block, we only have to specify a name, a title and a description, keep in mind that each new hook has to start with -, for example:

custom_hooks:
  - name: displayHomepageSlider
    title: displayHomepageSlider
    description: Reserved space for homepage slider

If we have to add more than one, we simply have to declare a new one starting with a -, leaving the file like this:

...
hooks:
  custom_hooks:
    - name: displayHomepageSlider
      title: displayHomepageSlider
      description: Reserved space for homepage slider
    - name: displayUpperFooter
      title: displayUpperFooter
      description: Space between content and footer
...

Once our custom hooks are defined, we must include them in our template files, so within the theme, we locate the template files where we want to add these new spaces (if you don’t know what they really are you can inspect the source code with debug mode enabled) and add the following line:

{hook h='homepageSlider'}

Also remember that to display an existing module or one that you are creating, it is important that it has a hook declared under the same name as our custom hook, otherwise it will not be displayed, you can copy an existing one and change its name. class to the name of the hook you just established (in this case “DisplayHomepageSlider” for example).

Finally, to make use of this new space that you have created, you must assign the desired plugin to the new hook so that it starts displaying content.

You will also need to assign it in your theme’s config/theme.yml file if you are going to distribute it, since the hooks will be configured automatically every time you activate the theme in PrestaShop.