PrestaShop 1.6.x. How to work with Custom CMS block

In this tutorial we will show you how to manage the Custom CMS information block in PrestaShop 1.6.

PrestaShop 1.6.x. How to work with Custom CMS block

This block contains some additional information for your customers, retrieved from the CMS pages.

By default, you have two custom blocks appearing on the home page:

To edit the Custom CMS information block, follow these steps:

1. Log into your PrestaShop admin panel.

2. Navigate to Modules->Modules:

   

3. Search for the Custom CMS information block in the Modules List. Make sure to choose “All” modules filter:

   

4. Press “Configure” button to edit the module.

   Note: if the module is not activated, click “Enable” to be able to edit it.

5. Once you open the module configuration page, you will see a list of existing blocks:

   

6. Click on “Edit” button to make the changes to this block.

   • Here you have a visual text editor with the help of which you can enter the basic information for your home page:

     

   • Use the buttons from the tool menu to customize the content of your block (change the color of your text, make the font bold or italic, insert a video or an image, etc.).

   • That editor features an “HTML” button (Source code) which makes it possible to enter specific HTML tags with custom classes, to which you can add some styles with the help of css editing:

     

   • Use the language switcher to translate your content to different languages in your store.

7. Press “Save” button to keep the changes you have made.

8. Check your changes on the site front end.

By default, the Custom CMS information block is located in the Homepage content hook (displayHome).

• In case you want to change the module position, you can do it in Modules->Positions.

• Check this tutorial to learn how to manage modules and their positions in PreStashop 1.6.

Now let’s add a new custom CMS block on your home page.

1. Get back to the Custom CMS information block in your admin panel.

2. Click on the “Configure” button to access the module setting.

3. Select the “ADD NEW” option from the top right:

   

4. Input the text content of your new block:

   

   • Make sure to add some class to your paragraph or list to be able to assign some specific css rules to it later.

5. Save the block by pressing “Save” button.

6. Return to your front page to view how the block appears there.

   • As you can see, the block doesn’t fit the layout.

   • To adjust the layout and make 4 columns, you need to edit the “blockcmsinfo.tpl” file located in “themes/themeXXXX/modules/blockcmsinfo” directory on your server.

     Note: sometimes the “blockcmsinfo” folder may be missing from the “themes/your theme/modules/” directory. In that case you have to copy the “blockcmsinfo” folder form the “modules” folder – the folder with default PrestaShop modules. You don’t have to copy all the files located in this folder, just the blockcmsinfo.tpl file only. Avoid making changes to the default PrestaShop files.

   • Open the file with any text editor. You may also use the Code Editor on your hosting control panel.

   • Look for the code: “

     {$info.text}
     ”:

     

   • Change “col-xs-6” to “col-xs-4” to make three equal columns.

   • Save the changes. The new block fits the layout now.

   • Copy the css rules from the existing blocks and apply them to the class of the newly created block. Add the new css rule to the bottom of your “global.css” file which is located in /themes/themeXXXX/css/ directory on the server.

     • You can inspect the css code you need with the help Firebug which is a special Mozilla Firefox plugin. Check this link to learn how to work with Firebug.

   • Check how your new Custom CMS block looks now.

We hope the tutorial was useful for you.

Feel free to check the detailed video tutorial below:

PrestaShop 1.6.x. How to work with Custom CMS block