LNK Hero, the home and category banner that replaces your slider

The carousel is one of the most installed blocks in e-commerce and one of the least effective. It loads a JavaScript library and several full-width images before the visitor has read the first slide. On mobile, the second image is rarely seen, because the customer has already scrolled down. While it loads, the layout shifts under the user's fingers.

A fixed banner loads faster and presents a complete message, with a visual and two buttons. LNK Hero works on this principle.

All settings are made on a single configuration page of the PrestaShop back office:

• an eyebrow, a two-line title and a subtitle;
• up to four bulleted selling points;
• two call-to-action buttons, with icon, link and colors;
• a round badge for a strong statement ("Made in France", "48-hour delivery");
• an image, a background gradient and the color of each element.

A live preview is shown next to the form, using the module's real stylesheet. What you see while editing matches what your visitors will see, without going back and forth between the back office and the shop.

Your theme stays intact: the module installs on PrestaShop's standard positions, present in every official theme.

LNK Hero also covers category pages, which few banner modules do. Each category page gets its own header, built automatically from the data you have already entered: the category name serves as the title, its description as the subtitle and its image as the visual.

From installation, all your categories therefore have a banner with no extra input. You then customize the ones that matter, such as your landing pages, directly from their form in Catalog → Categories. The same form lets you hide the banner, or hide it on mobile only.

The module adds a row of links to subcategories, with the number of products in each, so your visitors go down the catalog in one click.

LNK Hero runs no script for your visitors. The banner is written into the HTML sent by the server, with 1.7 to 4.0 KB of compressed CSS depending on the structure. The module loads no Google font, calls no CDN and ships no tracker.

Effects on Core Web Vitals, the speed indicators used by Google:

• the banner image is preloaded with high priority from the page header; the browser downloads it without waiting for the CSS to be parsed, which brings the LCP forward;
• its dimensions are written in the image tag, so the browser reserves the space and the page no longer shifts while loading;
• no script runs at load time, whereas a slider puts the phone's processor to work at that very moment.

You can compare before and after on PageSpeed Insights. The difference is clearest on a shop that has a carousel.

Figures measured on the shipped module, compressed with gzip (level 9). On a page without a banner: nothing, no CSS and no JavaScript. On a page with a banner: 1.7 KB of CSS for the classic structure, and 3.7 to 4.0 KB for a version 3 structure (a 1.7 KB base, plus the structure's own stylesheet, 0.3 to 0.6 KB). No JavaScript on the front office, no jQuery dependency. The preview script, 2.6 KB, only loads in the back office.

For comparison, the slider shipped with PrestaShop (ps_imageslider) loads 2.3 KB of JavaScript, which relies on jQuery, and 0.9 KB of CSS on every page.

The text of your banner is HTML text. Search engines read it, it is translated into each language of your shop and screen readers can access it.

The module also handles the heading hierarchy, a point often handled badly by banner blocks. PrestaShop's official themes put no level 1 heading on the home page and already put one on category pages. LNK Hero adapts to the context with an H1 on the home page and an H2 on categories. It thus adds the missing heading without creating a duplicate.

Each image can get its alternative text, and the subcategory row creates internal links to your catalog pages.

The module has been checked on the official themes of all three branches. It installs like any PrestaShop module: Modules → Upload a module, then Configure.