How to make a Promotion Banner in Prestashop V1.6 using HTML Box

Web Development

Prestashop Customisation Banner

How to make a Promotion Banner in Prestashop V1.6 using HTML Box

INTRODUCTION:

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.

SUMMARY:

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

HTML Box Free Icon

Remember where the file below has downloaded

“htmlbox.zip”

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.

install-html-box-screenshot-01

Once your module has been installed, left click the CONFIGURE button

install-html-box-screenshot-02.png

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:

<div class=”hidebg”>
<p class=”img-responsive2″ style=”text-align: center;”><a href=”https://www.yourprestashopstore.com.au/login?back=my-account”>SIGN UP TODAY FOR 10% OFF YOUR FIRST ORDER</a></p>
</div>

STEP 4: Open your “global.css” file located at:

www.yourprestashopstore.com.au/themes/yourtheme/css/global.css

Paste in the following CSS at the bottom of your “global.css” file and upload to your webserver

.img-responsive2 {
display: block;
max-width: 100%;
height: auto;
text-transform: uppercase;
font-family: “Roboto”, sans-serif;
font-weight: 700;
font-style: italic;
font-size: 23px;
line-height: 20px;
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 0px;
}
.hidebg {
background: url(../img/bg-main.png) repeat 50% 0 #e0e2e1;
}

@media only screen and (device-width: 768px) {
/* For general iPad layouts */
.img-responsive2 {
display: block;
max-width: 100%;
height: auto;
text-transform: uppercase;
font-family: “Roboto”, sans-serif;
font-weight: 700;
font-style: italic;
font-size: 33px;
line-height: 20px;
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 0px;
}
}

Add CSS Screenshot

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:

www.yourprestashopstore.com.au/modules/htmlbox

The module location will look like this

HTML Box Module location

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.

BEFORE:

html-box-module-location-before

AFTER:

configure-html-box-screenshot-02-after

STEP 7: Open up “htmlbox.php” with Sublime Text 2

CTRL+F and search for the following code.

‘.$this->l(‘Only on homepage’).’

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

configure-html-box-screenshot

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.

BEFORE:

html-tpl-edit-screenshot-01-before

Change this code from line 13 to line 23:

{else}
{if $page_name!=’index’}
{if $htmlbox_home==1}
{* disable *}
{else}
{$htmlboxbody}
{/if}
{else}
{$htmlboxbody}
{/if}
{/if}

To this code from line 13 to line 23:

{else}
{if $logged}
{if $htmlbox_home==1}
{* disable *}
{else}
{$htmlboxbody}
{/if}
{else}
{$htmlboxbody}
{/if}
{/if}

AFTER:

html-tpl-edit-screenshot-after

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.

SIGNED OUT:

Promo-banner-frontend-screenshot-01

Now log in to your Prestashop Website. Notice that your promotional Banner has disappeared.

SIGNED IN:

promo-banner-frontend-screenshot

CONCLUSION:

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.

Share this post