Homepage Slider and Banners: documentation

Overview

DF Home Banners displays a complete hero grid on your shop’s homepage, made of five zones: a main slider (multiple slides), a top side banner, a bottom side banner, a wide left banner and a wide right banner. On desktop the slider takes about 75% of the width with the two side banners stacked to its right, and the two wide banners display underneath. On mobile the grid stacks into a single column.

The module is built for speed: WebP conversion on upload, LCP image preload, lazy loading, size attributes against CLS, 3 KB of vanilla JavaScript and Smarty caching. No dependencies: no Composer, no jQuery.

Installation

1. In your PrestaShop back office, go to Modules > Module Manager > Upload a module.
2. Select the dfhomebanners.zip file downloaded from your DataFirefly account.
3. The module installs and creates a DF Home Banners tab in the Improve menu, along with its tables and the image upload folder.

Module settings

The configuration page (Modules > DF Home Banners > Configure) contains:

• Slider autoplay delay in milliseconds, minimum 2000. The slider pauses on hover, when the browser tab is hidden, and honors the system preference prefers-reduced-motion.
• Five mobile display switches, one per zone. A disabled zone is hidden under 768 px and its images are never downloaded by mobile visitors: they switch to lazy loading, and a hidden lazy image is not requested by the browser. When the slider is disabled on mobile, its LCP preload is automatically restricted to desktop.

Every settings save clears the module cache, so the effect is immediate on the front office.

Managing banners

Management happens in the DF Home Banners tab of the Improve menu. The list shows every banner with its zone, title, dates, position and status, with filters and one-click activation.

Creating a banner

Click Add and fill in:

• Zone: the main slider accepts several banners (one per slide); each of the four fixed zones displays the first active banner, following position order.
• Image: one field per language. Accepted formats: JPEG, PNG, WebP. The image is resized to its zone’s maximum width (1400 px for the slider, 560 px for side banners, 900 px for wide banners) then converted to WebP quality 82, with a JPEG or PNG fallback file kept. Final dimensions are stored and injected as width / height attributes to eliminate CLS.
• Mobile image: optional, one field per language. Frame it for portrait; it is resized to 768 px, converted to WebP and served under 768 px viewports through the picture element. Mainly useful for slider slides.
• Title / alt text: used as the image alt attribute, per language.
• Link URL: per language, optional.
• Position: display order inside the zone (ascending).

Scheduling with start and end dates

Both date fields are optional. Accepted format: YYYY-MM-DD or YYYY-MM-DD HH:MM:SS. A start date alone publishes the banner from that moment; an end date alone removes it at that moment; both together frame the campaign. Empty fields: the banner shows permanently as long as it is active.

Multistore and multilingual

In a multistore context, each banner is associated with the shops of your choice through the form’s association checkboxes. The image, mobile image, link and alt text are defined per language; a language without an image simply shows nothing (the banner stays hidden in that language until an image is provided). The cache is isolated per language and per shop.

Performance: what the module does

• LCP: the first active slider slide is announced in the head through a link rel="preload" tag with fetchpriority="high". With a mobile image, two preload tags with media attributes are emitted: each device only preloads its own variant.
• CLS: width and height attributes are set on every image, space is reserved before loading.
• Weight: WebP output, lazy loading on every non-LCP image, decoding="async" everywhere.
• JavaScript: about 3 KB of vanilla loaded with defer at the bottom of the page. Arrows, dots, touch swipe, autoplay.
• Server: rendering cached in Smarty per language and shop, a single grouped SQL query on regeneration. CSS and JS registered on the homepage controller only.

Troubleshooting

Banners do not show on the front office

• Check that the banner is active, that an image is uploaded for the language being browsed, and that today’s date is inside the defined range.
• Check the banner’s shop association in multistore setups.
• The theme must expose the displayHome hook, present in every Classic-based theme. If a native slider module already occupies the area (ps_imageslider), disable it to avoid a visual duplicate.

WebP conversion does not happen

Your PHP probably lacks imagewebp. The module then serves the original resized JPEG / PNG files. Ask your host to enable GD’s WebP support.

A change does not appear immediately

Save any banner or the settings: the module cache is cleared on every write. Also clear PrestaShop’s global Smarty cache if your shop sits behind a full page cache (Varnish, LiteSpeed, CDN).

Uninstalling

Uninstalling removes the admin tab, the module’s tables and its configuration values. Uploaded image files remain in the module folder until it is deleted from disk.