{"id":12101,"date":"2018-08-22T17:00:09","date_gmt":"2018-08-22T15:00:09","guid":{"rendered":"http:\/\/blog.belvg.com\/?p=12101"},"modified":"2025-06-27T07:25:27","modified_gmt":"2025-06-27T05:25:27","slug":"custom-hooks-in-prestashop-1-7","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/custom-hooks-in-prestashop-1-7.html","title":{"rendered":"Custom Hooks in Prestashop 1.7"},"content":{"rendered":"\n

How to use hooks in PrestaShop 1.7? This is a question many beginners find asking themselves. We gladly share our experience and for that we have prepared a small tutorial for you. We should say that in comparison to Prestashop 1.6 version, theme development process in 1.7 is much easier and faster. Check out our how-to video inside to see for yourself.
\n<\/p>\n

In case you prefer information in written form, you can find it below.<\/p>\n

You can manually change modules positions and place them into various hooks using just one file — theme.yml<\/strong>.<\/p>\n

It’s really easy to create your own hooks in Prestashop 1.7 and place modules into it.<\/p><\/blockquote>\n

Let’s take a look at an example and add a full-width slider in a default PrestaShop 1.7 classic theme layout.<\/p>\n

\"Custom<\/p>\n

Example:<\/strong><\/p>\n

Go to theme.yml<\/strong> file and find block “hooks”<\/strong>:<\/p>\n

\"Custom<\/p>\n

In order to add your own hook, just add the following strings:<\/p>\n

displaySlider: \r\n  - ps_imageslider<\/pre>\n
You can also add information as a description to a new hook in the “custom hook<\/strong>” block:<\/p>\n
custom_hooks:\r\n  name: displaySlider\r\n  title: displaySlider\r\n  description: Display Image Slider module in a separate hook<\/pre>\n
We have just simply declared a hook and now it’s accessible to call it in any template.<\/p>\n
<\/a>
\"modules
Prestashop Modules<\/h3>
Take your online store to the next level<\/p>Click to check out the designs<\/span><\/a><\/div><\/div><\/div>\n
2. In order to add full width slider in a default <\/strong>theme, please navigate theme\/templates\/layouts\/layout-both-columns.tpl <\/strong>file and place previously created hook between <header> <\/strong>and <section id=”wrapper”> <\/strong>tags. And we need to add the following condition to display a slider only on a homepage:<\/p>\n
<header id=\"header\"><\/header>\r\n{if $page.page_name == 'index'} \r\n   {hook h='displaySlider'}\r\n{\/if} \r\n<section id=\"wrapper\"><\/section>\r\n\r\n<\/pre>\n
That’s all data.<\/p>\n
The result of the guide is shown here.<\/p>\n
If you need any help with Prestashop Development<\/a>, just contact us<\/a>.<\/p>\n
Moreover, if you are looking for premium PrestaShop designs, you are welcome to visit our BelVG store. There you will find a wide range of designs for different categories of online retail enterprises.<\/p>\n
<\/a>
\"development_prestashop\"
PrestaShop Development<\/h3>
Take your online store to the next level with BelVG PrestaShop Development<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"How to use hooks in PrestaShop 1.7? This is a question many beginners find asking …","protected":false},"author":17,"featured_media":16512,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[15,520,461,521],"tags":[],"class_list":["post-12101","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-prestashop","category-prestashop-custom-development","category-prestashop-development","category-prestashop-webdesign","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t