PrestaShop Design & Navigation

PrestaShop Category Carousel Module 8/9: Show Categories on the Homepage

Your categories showcased on the homepage, as a carousel, a grid or a masonry wall.

Pick the categories to feature, or let the module display the subcategories of an aisle. Show them as a carousel, a grid or a masonry wall, on 1 to 3 rows, with the number of columns set separately for desktop, tablet and mobile. Replace the image, name and description of each category, add a badge, schedule the display and reserve a showcase for specific customer groups.

At a glance
  • Unlimited showcases as a carousel, grid or masonry, on the homepage, category pages, any theme hook or a custom hook created automatically.
  • Per category: custom image with a mobile version, marketing name, short description, badge, button text and a link of your choice.
  • 5 one-click design presets (minimal, cards, overlay, story-style circles, banners), then 81 options in the back office.
  • CSS scroll-snap carousel driven by vanilla JavaScript without jQuery: arrows, dots, loop, autoplay, swipe, mouse drag and keyboard.
  • Start and end dates, customer groups, hide on mobile or desktop, multistore and responsive images generated on upload.
PrestaShop 8 & 9 No jQuery Multistore Multilingual 8 languages
  • 30-day refund
  • 12 months updates
  • 24h support
www.datafirefly.com/en/
🗂️
v1.0.0 · updated 2026-09-23
The long version

Everything you'd want to know before you install.

A detailed look at how PrestaShop Category Carousel Module 8/9: Show Categories on the Homepage works, why we built it the way we did, and the thinking behind the features above.

§ 01

A category showcase you can configure, not a fixed block

The native PrestaShop category block shows a list of links or thumbnails in whatever format the theme imposes. Here, each showcase is configured in a tabbed form: layout, number of rows, columns on desktop, tablet and mobile, spacing, container width, section background. You pick categories by hand and reorder them by drag and drop, or let the module display the subcategories of an aisle, with a limit. A demo showcase is created on the homepage at install so you see the result right away.

§ 02

Custom image, name and text for each category

A category is often called "Women's clothing" in the catalogue while the homepage should say "New collection". Each category added to a showcase therefore accepts a custom name, a short description, a dedicated image and a tighter-cropped mobile image, a badge, a button text and a link to a filtered listing or a landing page. Without customisation, the module uses the category image and name. For the image, it automatically picks the sharpest PrestaShop format available, because the category_default format in PrestaShop 8 is only 141 x 180 px.

§ 03

Carousel, grid or masonry, on 1 to 3 rows

The carousel scrolls 1, 2 or 3 rows together, with arrows, dots, loop and optional autoplay. On mobile it shows part of the next card so visitors know the row can be swiped. The grid lays categories out in regular columns, with an optional row limit. The masonry offers three styles: natural image heights, alternating heights or the first category featured on 2 x 2. When a row holds fewer categories than columns, it aligns with the title instead of sticking to the left.

§ 04

5 presets to start, 81 options to finish

The Circles preset gives round Instagram story-style images in one click, 6 per row on desktop. Overlay puts the text on the image over a gradient, Banners shows 2 large tiles with names in capitals, Cards puts each category in a white card with description and link. The preset fills the design options on save, then everything stays editable: colours, sizes, corner radius, borders, shadows, 6 hover effects, text position, button and badge style. A custom CSS field scoped to the showcase id covers the last details.

§ 05

On the homepage, on category pages or anywhere

Each showcase picks its hook from a list or a free field: an unknown hook name is created and registered automatically, and the module unregisters hooks that are no longer used. The "category being viewed" source shows each category page its own subcategories, with a single showcase for the whole catalogue. The displayDfCategoryShowcase hook and the widget tag place a specific showcase in any template. Start and end dates and a customer group restriction serve seasonal campaigns and B2B selections.

§ 06

Fast and accessible

The carousel uses native browser scrolling (CSS scroll-snap), driven by about 3 KB of compressed JavaScript, without jQuery. Uploaded images are resized to 480 and 960 px and served with srcset and sizes computed from your columns. The first image loads immediately, the others lazily, with width and height attributes. The output is cached by Smarty and cleared on its own when a category or product changes. On accessibility: the section is labelled by its title, buttons and dots are announced to screen readers, keyboard navigation has a visible focus, autoplay pauses on focus and prefers-reduced-motion is respected.