Working with Homepage banners and home blocks

Working with homepage banners can be fun but it can also be frustrating if you do not know where to go.

The home page of your shop must make the user want to buy, the buyer must quickly understand what you have to offer. That is why it is important that you learn how to work with the native module Homeslider to look after the presentation of the banners and update them regularly.

In this episode of Learning Prestashop-thirtybees ecommerce properly, we are going to be working with homepage banners as well as begin to understand what are blocks in Prestashop and thirtybees ecommerce.

Before digging into it. I want to make the record straight,

We are not going to use image sliders!

Why is that? One reason, there are a lot of studies conducted on the impact of sliders on customers’ decision to buy, and it is not good! I mean, the study found out that, it is a bad idea to have an image slider on your ecommerce website. The result of the study says that, customers developed a blindness to the slider once on a website with a slider.

Here are the list of their findings:

And there’s a lot more resources we can find to support the arguments above.

You might be asking, Why even use sliders? Well, as I said, we will not. What we will do instead is to use a banner. I will give 5 reasons why this is still a good practice in place of the image slider by using the slider module.

Working with Homepage Banners effectively

Reason #1.  Create a banner that does not look like an advertisement. Make it simple, a nice picture and a simple text on top will do. As stated above, the reason why customers developed a blindness to the slider is that, people are allergic and reacts negatively to advertisements.

Reason #2. Make sure to put the product in context so that it makes people want to click it, not to avoid it(with a precise objective), … avoid a product placed on a white background, one sees that already everywhere in the shop. Also remember to limit yourself to 1 slide only, the customers rarely scroll images. See list above.

Reason #3. Try to create “fun” content, which does not necessarily focus on the sales side. Do not Out a “Buy” now button on the banner. Putting “Buy now” button everywhere on the shop … will not sell more.

Reason #4. Frequently update or change your banner at least once in 2 months.  A shop that works well, regularly updates its sliders and homepage, to make your customers want to come back.

Reason #5. Make sure to create banners with sizes that follows what Google recommends as proper size to make your website load as fast as it can. You don’t want to get penalized by search engine for that.

Finally, try to put as much textual content as possible in the HTML content of the slider. Do not put your text “encrusted” in the image, it will not be readable by search engines.

Alright!

In this lesson series, we will be working on the following list of tasks:

• Discover the different formats / sizes, expected by Prestashop.
• Upload and enable our banner.

To do this, first you must login to the back office area. Mine is at http://localhost/thirtybees-v1.1.0/admin399anix6r, yours will look differently of course.

Once in, click on “Modules and Services” >> type “slider” on the search field to the left of the screen. You should be able to see a screen just like below:

Click on the “Configure” button to the left of the Block Image Slide module. You should be directed to the configuration page of the module. By the default, “Block Image Slider” has the following values:

You don’t have to do anything here. Keep in mind the recommended width, and height. This is important as you will have to resize your images close to this dimensions to make the slider work well for your website.

Because we will only enable 1 image banner, no need to set the play to “auto play”.

Disable all the default banners by clicking on the “enable” button to the left. We don’t have to delete them, disabling them will do the trick just fine, like so.

Now, click on the “+” icon at the top right of the “Slides List” box to add a new image slide.

How to create a new slide?

Once in the “New Slide” page, enter the details of the image banner as you see fit.

1. Upload your image file, and make sure the width is near the recommeded with of 1114px width and in jpg, jpeg, png, gif format.
2. Give it a title appropriate of the image and the concept you want to get across to your customes and visitors.
3. Enter a URL target, usually a product on your website.
4. Give it a good one-liner caption.
5. Add the content which will appear at the top of the banner.
6. Set it to enabled!
7. And of course don’t forget to click the “Save” button to save your work!

Check the sample image below:

That was easy!

Check your homepage, you should see your banner right away.

In the tutorial lesson series, working with homepage banners, we were able to work on two things: We were able to Discover the different formats and recommended image size to make the banner work effectively, and Uploaded and enabled our banner.

Go ahead and practice creating New Slides. You may enable as much as 3 slide images at the same time. But bear in mind the suggestions above for slides. Our recommendation is to enable one banner at a time.

Let us know what you think of this tutorial series. Is it helpful? Do you have some suggestions? Please feel free to do so using the comment section below!