Step-by-Step Guide for Adding Custom HTML Block in PrestaShop

Add Custom HTML Block in PrestaShop | Step-by-Step Guide by Knowband

Why should we add a custom HTML block on our PrestaShop Store?

Adding a custom HTML block in PrestaShop website can enhance its functionality or overall style by allowing the store owners to include custom texts, images, links, or other HTML elements to the website and these blocks can be added to showcase different content on different controllers or pages. 

The process of adding a custom HTML block in PrestaShop store is similar for all the versions.

To add a custom block, we will use a Custom Module in the PrestaShop store.

Why a Custom Module?

Why a Custom Module - Knowband

Flexibility and tighter integration within an online store are two major advantages of creating a bespoke HTML block using a specific PrestaShop module and this strategy works especially well when store owners have specific criteria that the pre-existing modules do not meet, or when adding new functionality without modifying the platform’s core files is desired.

By choosing to create a custom module, PrestaShop store owners can precisely tailor the look and feel of their eCommerce environment to match their marketing objectives and customer interaction strategies and this customization enables further personalization of the user experience, which may increase customer satisfaction and loyalty and along with that it gives business owners the flexibility to swiftly adapt to shifting market trends and maintain a competitive edge by including unique features that raise customer satisfaction and operational efficiency.

Below is a step-by-step guide on how to create and use a custom HTML block in PrestaShop store:-

Step 1: Make Basic Files and Module Directory

  1. Add a Fresh Directory: Navigate to the PrestaShop installation’s modules directory and create a new folder named ‘myhtmlblock’.
  2. PHP Main File: Please create a file called ‘myhtmlblock.php’ inside this directory. This file will contain the main class of your module.

Step 2: Code Your Module

Open ‘myhtmlblock.php’ and add the following PHP code to define your module:

Screenshot of PHP code


Also make sure that in each and every folder of the HTML Module, there is a file named ‘index.php’ having below code:

Screenshot of custom HTML block in PrestaShop


Step 3: Add a Template File

Create a folder structure within the module directory like this: views/templates/hook and inside the hook directory, create a file named ‘displayHome.tpl’:

Screenshot of custom HTML block in PrestaShop


Please note that, at the beginning of the Template file, a comment on the file path and its name has been added to show the same in the HTML content of your store.

Step 4: If desired, include a Configuration Page

If the store owner wants to make the HTML content configurable from the admin panel then they will need to implement a configuration form in the ‘getContent()’ method of your module class and as a result, the admin or store owner will be able to change the HTML text without changing the code.

Step 5: Installing the Module

  • Get into the PrestaShop admin panel.
  • Under Modules choose Module Manager.
  • Click on ‘Upload a Module’ and select the zip file of your module, or find your module in the module list if it’s already on the server.
  • Select ‘Install’.

 Installing the Module


Step 6: Place the Module on Other Hooks (Optional)

The custom HTML block in Prestashop will need to be displayed in several places throughout the PrestaShop website, thus we will need to change the module’s ‘install()’ method to register multiple hooks. Every hook has a designated spot on the website where content can be shown.

Typical hooks include the following:

  • displayFooter
  • displayLeftColumn
  • displayRightColumn
  • displayProductAdditionalInfo
  • displayTop

Step 7: Test Your Module

After installation, go to the homepage of your site to see your new custom HTML block in action.

custom HTML block


If you added a configuration form, try changing the HTML block content through the PrestaShop back office to see if it updates correctly.

This approach gives you full control over what your module does and where it appears within your PrestaShop site, making it a powerful way to customize your store’s functionality and design.

In case you have queries/suggestions, you can reach out to our technical support portal at our email address

Take a look at our bestseller module One Page Supercheckout for Prestashop and Opencart Android and iOS Mobile App Builder Plugin here and you can enhance the product visuals on your store using the Prestashop Product Designer/Customizer addon.

Also, you can watch our latest videos here:



We are professionals in the eCommerce industry, specializing in plugin development. With years of experience, We provide the best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify. We also offer custom module development and customization services for websites and modules. Our team remains at the forefront of industry trends, delivering cutting-edge solutions to enhance eCommerce website functionality. With a customer-centric approach, our company is trusted partner for eCommerce plugin solutions.

Leave a Reply

Your email address will not be published. Required fields are marked *