Category Showcase: PrestaShop category carousel documentation

Installation

In the back office, open Modules > Module Manager, click “Upload a module” and send the dfcategoryshowcase.zip file. The module is compatible with PrestaShop 8.0 to 9.x.

On install, the module creates its tables, the /img/dfcategoryshowcase/ folder for uploaded images, the displayDfCategoryShowcase hook and a demo showcase: the subcategories of the Home category, as a carousel, on the homepage. Open your shop to see the result, then edit or delete this showcase.

The module is managed from Design > Category Showcase (the module’s “Configure” button leads there too).

Create a showcase

Click “Add a showcase”. The General tab contains:

• Internal name: only visible in the back office.
• Hook: where the showcase is displayed (see below).
• Layout: carousel, grid or masonry.
• Design preset: applies a complete style on save (see below).
• Categories displayed: the source of the categories.
• Title, subtitle, View all text and link: per language.

The three sources

• Hand-picked: after saving, the module takes you to the showcase’s categories screen. Add them one by one and reorder them by drag and drop.
• Subcategories of a parent category: choose the parent category and, if needed, a maximum number. The list follows your catalogue.
• Subcategories of the category being viewed: use it with displayHeaderCategory or displayFooterCategory. Each category page shows its own subcategories. A category without subcategories shows nothing.

In both subcategory modes, adding a category on the categories screen is only used to customise it. Disabling it hides it from the showcase.

Customise a category

From the showcase list, click “Categories”, then add or edit a category. Every empty field falls back to the PrestaShop category value:

• Custom image: JPG, PNG, WebP or GIF. The module generates 480 and 960 px copies, served automatically to small screens.
• Mobile image: optional, shown under 768 px. Handy for a tighter crop.
• Name and short description: line breaks in the description are kept.
• Badge: for example New, Sale or -30%.
• Button text and link: the link can point to a filtered listing or a landing page. Only http(s), relative links, anchors, mailto: and tel: are accepted.
• CSS class: added to the card.

A category can only be added once per showcase.

Design

Presets

The “Design preset” field in the General tab offers Minimal, Cards, Overlay, Circles and Banners. The preset replaces the options it covers (image, card, texts, button, columns) when you save. The field then goes back to “Keep my settings” and every option stays editable.

Settings tabs

• Layout: rows (1 to 3), columns on desktop (1 to 8), tablet (1 to 6) and mobile (1 to 4), spacing, row limit for grid and masonry, masonry style, container (theme column, boxed with maximum width, full width), section spacing and background.
• Header: title display, tag (H2 recommended on the homepage), alignment, colours and sizes, position and style of the View all link.
• Image: PrestaShop image format (“Automatic” picks the sharpest format at least 400 px wide, else the original image), ratio, crop or whole image, round shape, background, lazy loading.
• Card: corner radius, border, shadow, background, padding, hover effect, animation duration.
• Texts: position (below the image, on the image at the top, centre or bottom, or no text), overlay, name typography, description, product count.
• Button and badge, Carousel, Visibility, Advanced: see the next sections.

With the round shape, the text always goes below the image.

Carousel

The Carousel tab options apply when the layout is “Carousel”: autoplay and delay, pause on hover, loop, columns scrolled per click, arrows (on the carousel, outside on large screens, or next to the title), colours, navigation dots, peek of the next category on mobile, mouse drag.

With 2 or 3 rows, categories fill each column from top to bottom, then the rows scroll together. Autoplay pauses on hover, on keyboard focus, on touch, when the tab is hidden or when the carousel leaves the screen. It is turned off when the visitor has asked their system for reduced motion.

Where to display a showcase

• displayHome: homepage.
• displayHeaderCategory and displayFooterCategory: category pages, above or below the products.
• displayDfCategoryShowcase: hook created by the module, to call anywhere in the theme with {hook h='displayDfCategoryShowcase'}.
• Custom hook: choose “Custom hook…” and type a name (letters, digits, – and _). A hook that does not exist is created and registered automatically. Call it with {hook h='yourHook'}. An old hook name (alias) is saved under its real name.
• Widget: {widget name='dfcategoryshowcase' id_showcase=1} displays a specific showcase, whatever its hook.

Several showcases can share a hook: they are displayed in the order of the list, which you change by drag and drop. The module unregisters itself from hooks that are no longer used.

Visibility

• Display from / until: dates in YYYY-MM-DD HH:MM:SS format. Empty = no limit.
• Customer groups: the showcase is only displayed to the ticked groups (Visitor, Guest, Customer or your B2B groups). All ticked = no restriction.
• Hide on mobile / on desktop (Advanced tab): under 768 px or from 1024 px.
• Shops: in multistore, associate each showcase with the shops you want.

Duplicate a showcase

The “Duplicate” action in the list copies the showcase with its categories, texts, shops and images. The copy is created disabled: edit it, then enable it.

Custom CSS

Each showcase is rendered in <section id="dfcs-ID">, where ID is the number shown in the list. The “Custom CSS” field in the Advanced tab is only printed with that showcase. Example:

#dfcs-2 .dfcs-card__name { letter-spacing: .08em; }

If the same showcase appears twice on a page (hook and widget), the second copy gets the id dfcs-ID-2.

Cache and performance

The output is cached by Smarty per showcase, language, shop and customer group. The cache is cleared on every save in the module, on every category change, and on every product change if a showcase displays the product count. The module’s CSS and JavaScript are only loaded when at least one showcase is active.

Frequently asked questions

The showcase does not appear

Check that the showcase is active, associated with the shop, within its display period and open to the visitor’s group. Then check that your theme actually calls the chosen hook. For a custom hook, the {hook h='...'} tag must be present in a template.

Images look blurry

Leave the image format on “Automatic” or upload a custom image. The category_default format in PrestaShop 8 is only 141 x 180 px.

In masonry, the order does not read left to right

The “natural heights” and “alternating heights” styles fill columns from top to bottom. If left-to-right order matters, use the grid or the “first category featured” style.

Uninstall

Uninstalling removes the module’s tables, its admin tabs and the /img/dfcategoryshowcase/ folder with the uploaded images.