{"id":823864,"date":"2024-05-15T12:34:44","date_gmt":"2024-05-15T12:34:44","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=823864\/"},"modified":"2024-05-15T13:15:46","modified_gmt":"2024-05-15T13:15:46","slug":"adding-custom-html-block-in-prestashop","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/prestashop-blog\/adding-custom-html-block-in-prestashop\/","title":{"rendered":"Step-by-Step Guide for Adding Custom HTML Block in PrestaShop"},"content":{"rendered":"

Why should we add a custom HTML block on our PrestaShop Store?<\/b><\/h2>\n

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.\u00a0<\/span><\/p>\n

The process of adding a custom HTML block in PrestaShop store is similar for all the versions.<\/span><\/p>\n

To add a custom block, we will use a Custom Module in the PrestaShop store.<\/span><\/p>\n

Why a Custom Module?<\/b><\/h2>\n

\"Why<\/a><\/p>\n

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.<\/span><\/p>\n

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.<\/span><\/p>\n

Below is a step-by-step guide on how to create and use a custom HTML block in PrestaShop store:-<\/b><\/p>\n

Step 1: Make Basic Files and Module Directory<\/b><\/h3>\n
    \n
  1. Add a Fresh Directory:<\/b> Navigate to the PrestaShop installation’s modules directory and create a new folder named \u2018<\/span>myhtmlblock\u2019<\/b>.<\/span><\/li>\n
  2. PHP Main File:<\/b> Please create a file called \u2018<\/span>myhtmlblock.php<\/b>\u2019 inside this directory. This file will contain the main class of your module.<\/span><\/li>\n<\/ol>\n

    Step 2: Code Your Module<\/b><\/h3>\n

    Open \u2018myhtmlblock.php\u2019 and add the following PHP code to define your module:<\/span><\/p>\n

    \"Screenshot<\/a><\/p>\n

     <\/p>\n

    Also make sure that in each and every folder of the HTML Module, there is a file named \u2018index.php\u2019 having below code:<\/span><\/p>\n

    \"Screenshot<\/a><\/p>\n

     <\/p>\n

    Step 3: Add a Template File<\/b><\/h3>\n

    Create a folder structure within the module directory like this: views\/templates\/hook and inside the hook directory, create a file named \u2018displayHome.tpl\u2019:<\/span><\/p>\n

    \"Screenshot<\/a><\/p>\n

     <\/p>\n

    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.<\/span><\/p>\n

    Step 4: If desired, include a Configuration Page<\/b><\/h3>\n

    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 \u2018getContent()\u2019 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.<\/span><\/p>\n

    Step 5: Installing the Module<\/b><\/h3>\n
      \n
    • Get into the PrestaShop admin panel.<\/span><\/li>\n
    • Under Modules choose Module Manager.<\/span><\/li>\n
    • Click on \u2018Upload a Module\u2019 and select the zip file of your module, or find your module in the module list if it’s already on the server.<\/span><\/li>\n
    • Select \u2018Install\u2019.<\/span><\/li>\n<\/ul>\n

      \"<\/a><\/p>\n

       <\/p>\n

      Step 6: Place the Module on Other Hooks (Optional)<\/b><\/h3>\n

      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 \u2018install()\u2019 method to register multiple hooks. Every hook has a designated spot on the website where content can be shown.<\/span><\/p>\n

      Typical hooks include the following:<\/b><\/p>\n

        \n
      • displayFooter<\/span><\/li>\n
      • displayLeftColumn<\/span><\/li>\n
      • displayRightColumn<\/span><\/li>\n
      • displayProductAdditionalInfo<\/span><\/li>\n
      • displayTop<\/span><\/li>\n<\/ul>\n

        Step 7: Test Your Module<\/b><\/h3>\n

        After installation, go to the homepage of your site to see your new custom HTML block in action.<\/span><\/p>\n

        \"custom<\/a><\/p>\n

         <\/p>\n

        If you added a configuration form, try changing the HTML block content through the PrestaShop back office to see if it updates correctly.<\/span><\/p>\n

        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\u2019s functionality and design.<\/span><\/p>\n

        In case you have queries\/suggestions, you can reach out to our technical support portal at our email address support@knowband.com.<\/span><\/p>\n

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

        Also, you can watch our latest videos here:<\/span><\/p>\n

         <\/p>\n