How to make a Promotion Banner in Prestashop V1.6 using HTML BoxPaul Dickson
Today I’m going to show you how to customise a FREE Module within your Prestashop Website so that it appears as a Promotional Banner when a new customer visits your Ecommerce Site. The goal of this Promotional Banner is to get more Customers to sign up to your Ecommerce Website.
This is a short tutorial to illustrate how to edit a FREE Module called HTML Box using a small collection of Web Developer Tools. The aim of this blog post is to educate web developers & designers on how to make custom PHP/CSS/HTML modifications to their clients Prestashop website. I found this to be quite helpful in generating more Customers for my clients Prestashop website DIY Security Cameras.
PLEASE NOTE: There is a Paid Module by MYPRESTA that allows you to achieve this tutorial and more. If you don’t feel comfortable making changes to the FREE Module then please download the PAID module here.
STEPS TO OVERRIDE PRESTASHOP FREE HTML BOX MODULE
STEP 1: Download the FREE “HTML Box Module” from MYPRESTA
Remember where the file below has downloaded
STEP 2: Log into the BACKEND of your Prestashop website.
Go to MODULES and select “Add a New Module”
Left click “Choose a File” and navigate to the location of your HTML Box module (htmlbox.zip)
Left Click “Upload this module“.
Once uploaded, select the Install button to complete the module Installation.
Once your module has been installed, left click the CONFIGURE button
Take a moment to observe the Configuration layout of your HTML Box module in Prestashop. We are going to Change the Display HTML Box“Only on homepage” to “Only Show If User Not Logged In”. Essentially this is going to target our NEW CUSTOMERS that visit our store. We know that most of our customers will new customers as they won’t be logged into our store. Existing customers will ignore the PROMO and sign into our store as normal.
STEP 3: In the Prestashop HTML Box Code Editor type in the following code:
STEP 4: Open your “global.css” file located at:
Paste in the following CSS at the bottom of your “global.css” file and upload to your webserver
STEP 5: Open up your code editor and FTP client. I use Sublime Text 2 and Dreamweaver, but you can use something else in you like. Navigate to your Prestashop website directory and find:
The module location will look like this
HOT TIP: Some developers like to copy their modules into the Theme Folder you are currently using for their Prestashop Website. This stops any custom scripting from being overwritten when you update your Module. In this example I will be editing the MODULE directly in the Modules directory as I don’t plan to update this Module in the future.
STEP 6: Within the “modules/htmlbox/” directory, make a COPY of these two files “htmlbox.php” and “html.tpl”. This is good practice as you have files to revert back too should you make any mistakes along the way.
STEP 7: Open up “htmlbox.php” with Sublime Text 2
CTRL+F and search for the following code.
For me this code was located on line 733
Change “Only on homepage” to “Only Show if User Not Logged In”
SAVE “htmlbox.php” and upload changes to your webserver via Dreamweaver or FTP program.
Open your Prestashop BACKEND Module HTML Box to see changes.
Notice how the text on the left has been updated. Ensure Header Position is selected, you SIGN UP text is present and proceed to the next step
NOTE: This function will not work until we target to smarty variable “$logged” in the next step.
STEP 8: Next open up “html.tpl” with Sublime Text 2
Instead of showing our promotional banner when users are on our homepage, we want to only show it ONLY if they’re NOT logged in. We can do this by targeting the smarty variable “$logged” in the “html.tpl” file.
Change this code from line 13 to line 23:
To this code from line 13 to line 23:
STEP 9: Open your PRESTASHOP website. Make sure you are SIGNED OUT. Notice that your Promotional Banner is displayed at the top of the top banner.
Now log in to your Prestashop Website. Notice that your promotional Banner has disappeared.
I hope you enjoyed this short tutorial on How to make a Promotion Banner in Prestashop V1.6 using HTML Box. If you enjoyed this tutorial on it assisted you with your web design project, please take the time to leave a comment below.