Is your store's home page slider any use? When it helps and when it gets in the way

Almost every store has one: a carousel at the top of the home page cycling through banners. It is decided at the start of the project, filled with four or five campaign images and forgotten. And it is easy for it to spend months showing an offer that has already ended, an image that cannot be read on mobile or a video heavier than the rest of the page.

The question is not “slider or no slider” but what job that space has to do, given it is the most visible spot in the whole store.

What is known about carousels

Usability professionals have been warning for years about some recurring problems:

• People look at the first slide and little else. Many visitors scroll or tap the menu before the second one comes round.
• Automatic movement is distracting and can change the banner just as someone was about to read or tap it.
• It looks like advertising, and users learn to ignore anything that looks like advertising.
• Several messages compete: if everything is important, nothing is.

That does not mean a carousel cannot work. It means a carousel with five generic messages rotating every three seconds probably does not earn the space it takes up.

When a slider does help

• Dated campaigns: sales, seasons, launches. One clear message, with its start and end date.
• Stores with different audiences that need to steer people quickly: trade and consumer, men and women, two very different product lines.
• Very visual products, where a large image conveys what text cannot: fashion, home décor, furniture.
• New arrivals that change often, provided someone actually updates them.

And when something else is better: if your store sells from a wide catalogue (spare parts, supplies, technical references), what visitors want on the home page is the search box and the categories. A fixed banner with your value proposition and clear links to the product families below it is usually more useful than five rotating images.

How to do it well

Few slides, one message each

Two or three. The first is the one seen most: put what matters most there. Each slide with a short headline, one supporting line and a single button leading to a specific page (the campaign category, not the home page).

No fast rotation

If it rotates on its own, it should do so slowly and stop when the user hovers or taps. Even better if it can be navigated with visible arrows and dots.

Dates, not reminders

The offer still on the home page a week after it ended is a classic. If each slide has a start and end date, the campaign can be set up in advance and disappears on its own.

Text as text

A headline inside the image cannot be translated, cannot be read on mobile when the image shrinks and cannot be understood by a screen reader. Better to use a clean image with the text on top as HTML, in each language.

Mobile: where sliders fail most

A landscape desktop banner, shrunk to the width of a phone, becomes a narrow strip in which the headline is illegible. And if the template only crops with CSS, the phone downloads the full large image to show a fragment of it.

The solution is to prepare one image per device (desktop, tablet and mobile, each with its own framing) and serve it with the picture element, so that each screen downloads only its own. It is more design work, but it is the difference between a banner that can be read and one that gets in the way.

Performance: what a carousel weighs

• Images: the weight of all the slides, if they all load at the start. The right approach is to load the first one straight away and the rest afterwards.
• JavaScript: some carousels bring large libraries for animations that are not needed.
• Video: a background video can work on desktop, but on mobile it is heavy. If you use one, make it muted, compressed and with a mobile version or an image in its place.
• External services: a slider that loads its images or code from another server adds connections and dependencies.

Accessibility

An accessible carousel lets users pause the movement, can be operated with the keyboard, has alternative text on images that carry content and does not rely on colour alone to show the active slide. In Spain, the accessibility obligation for many online stores is already a reality; besides, what is accessible is usually more comfortable for everyone.

Check yours in ten minutes

1. Open the home page on your phone. Can you read the headline on the first slide?
2. Does any slide advertise something that is no longer valid?
3. Does each button lead to a specific, relevant page?
4. How many slides are there? If more than three, does anyone look at the fourth?
5. Run the home page through PageSpeed Insights: is the LCP element a slider image, and how heavy is it?
6. In your analytics, how many clicks do the banners get compared with the menu categories?

And if the slider is an old module that came with the theme, check that it is still compatible with your version of PrestaShop and that it does not store its images inside the module folder, where an update can delete them.

How to solve it in PrestaShop

Rekire Slider is a carousel in which each slide can have one image for desktop, another for tablet and another for mobile, served with picture so the browser downloads only one. It supports MP4 or WebM video slides (muted, looped and also with a source per device), automatic WebP copies, start and end dates without cron, pairs of half-width slides that switch to full width on mobile, and positionable text in each language as plain text. It stores images outside the module folder, so that an update does not delete them, and is placed on the home page, above the content, through its own hook or as a widget.