Product Carousel Pro — Unlimited Product Carousels (dfproductcarousel)

Product Carousel Pro creates unlimited product carousels anywhere in your PrestaShop store: best sellers, new products, specials, products from a category, or a hand-ordered manual selection, displayed on six standard hooks or on your own custom hooks created on the fly. The module’s distinctive feature: product cards are rendered through your active theme’s miniature template, via ProductAssembler and ProductPresenter. Prices, flags, quick view and add to cart work exactly as they do on your category pages.

Installation

1. In your PrestaShop back office, open Modules > Module Manager.
2. Click Upload a module and drop the dfproductcarousel.zip file.
3. A Product Carousel Pro tab appears under the Modules menu: that is where everything happens (the module’s Configure button redirects there too).

The module creates three tables (carousels, multilingual titles, shop association) and registers six display hooks plus actionFrontControllerSetMedia for its assets. The custom hooks you create later register automatically when the relevant carousel is saved.

Creating a carousel

From the list, click Add new carousel. The form is organized in five blocks: Content, Placement, Layout, Style and Behavior.

• Internal name: visible only in the back office, to find your way around the list.
• Title and subtitle: multilingual, displayed above the carousel. Leave the title empty to show no header at all.

The carousel list then offers one-click activation, duplication (the copy is created disabled) and bulk delete actions.

Product sources

Each carousel picks its source among six:

• Best sellers: the store’s top-selling products.
• New products: products flagged as new (the time window is your PrestaShop setting “Number of days for which the product is considered new”).
• Specials: products with an active discount.
• Products from a category: pick the category in the selection tree, products follow the category order.
• Home category: products of the shop’s root category, the equivalent of native “featured products”.
• Manual selection: you pick products one by one.

The Max number of products field caps how many products are loaded, whatever the source.

Manual selection

Type at least two characters in the search field: the autocomplete finds your products by name or reference. Each clicked product joins the list below, with its drag handle: reorder by drag and drop, and the front office displays products in exactly that order. Disabled or catalog-hidden products are filtered out automatically at display time, without breaking the carousel.

Choosing the placement

Standard hooks

Six hooks are offered in the dropdown:

• displayHome: homepage;
• displayContentWrapperTop and displayContentWrapperBottom: above and below the main content, on most pages;
• displayFooterBefore: just before the footer;
• displayFooterProduct: bottom of the product page, the classic cross-selling spot;
• displayShoppingCartFooter: below the cart summary.

Several carousels can share the same hook: they stack in the order of their Position field.

Custom hooks

Select Custom hook in the dropdown, then type a name in the field that appears, for example MyCarousel. On save, the module sanitizes the name (letters and digits only), prefixes it as displayMyCarousel if needed, registers it with PrestaShop and starts listening. Then place the call in the template of your choice:

{hook h='displayMyCarousel'}

The created hook joins the dropdown for subsequent carousels. You can create as many hooks as you need.

Widget syntax

To display one specific carousel regardless of its hook, use the widget syntax with the ID shown in the first column of the list:

{widget name='dfproductcarousel' carousel=3}

Handy on a CMS page or in a bespoke template. The carousel must be enabled to display.

Layout

• Products per row: three independent values, from 1 to 8, for desktop (992 px and above), tablet (768 to 991 px) and mobile (below 768 px). The classic setup is 4 / 3 / 1.
• Slide mode: “One product at a time” advances one card per click, “Full row at a time” advances a whole page.
• Gap: the distance in pixels between cards (20 px by default).
• Full width: the carousel breaks out of its container to span the whole viewport, striking on a homepage combined with the Dark section skin.

Style

The five skins

• Classic: the theme’s product cards strictly untouched. The default and safest choice.
• Minimal: removes shadows and borders for a flat look.
• Card: drop shadow, rounded corners and a slight lift on hover.
• Outline: a thin border around each card, taking the accent color on hover.
• Dark section: places the whole carousel on a dark background, with adapted title and pagination.

Additional settings

• Title alignment: left, center or right, the accent underline follows.
• Accent color: used for hovered arrows, the active pagination and the title underline. Leave empty to inherit your theme’s primary color.
• Arrows: shown or hidden, in three styles (circle, square, minimal without background).
• Pagination: dots or bars, generated automatically from the number of pages.

Behavior

• Autoplay: automatic sliding with a configurable delay (5,000 ms by default, 1,000 ms minimum). Playback pauses when the browser tab is hidden.
• Pause on hover: suspends autoplay while the cursor is over the carousel.
• Infinite loop: the carousel loops back to the start without a jump, thanks to transparent edge cloning. Without this option, the arrows disable at each end.

Whatever the settings, the carousel responds to swiping (touch and mouse, with protection against accidental clicks at the end of a gesture), to the keyboard (left and right arrows when the carousel has focus), and respects RTL reading direction as well as the system preference prefers-reduced-motion.

Theme-native rendering: how it works

• Products are assembled and presented by ProductAssembler and ProductPresenter, the mechanisms PrestaShop itself uses for its listings.
• Each card is then rendered by your active theme’s catalog/_partials/miniatures/product.tpl template: prices, discounts, flags, quick view and add to cart are the theme’s own, with no adaptation.
• The module never writes into theme files: it loads its own stylesheet for the carousel mechanics, after the theme’s CSS.
• A broken product is skipped silently rather than taking the whole carousel down.

Multistore

Each carousel is associated with the context shops at save time. To create a carousel for one specific shop, switch to its context with the multistore selector before creating it. A carousel saved in the “All shops” context displays everywhere.

Troubleshooting

• The carousel does not appear: check in order that the carousel is enabled, that its source returns at least one product (an empty category or a manual selection of disabled products yields a silent carousel), that the chosen hook actually exists on the visited page, and clear the PrestaShop cache (Advanced Parameters > Performance).
• The custom hook displays nothing: the name in {hook h='...'} must match the registered name exactly, display prefix included, visible in the Hook column of the list. After adding the call to a template, clear the Smarty cache.
• The arrows do not show: they hide automatically when all products fit in a single row. Add products or reduce the column count.
• The Card or Outline skin renders badly with my theme: some themes already apply shadows and borders to their miniatures. Switch back to the Classic skin, which touches nothing, or Minimal, which neutralizes the theme’s effects.
• Two carousels in the wrong order on one hook: adjust their Position field, display follows ascending order.
• The product search suggests nothing: the search starts at two characters and queries names and references in the language being edited.

Uninstall

Uninstalling removes the three tables, the back-office tab and the registered hooks. Your theme and templates stay intact; only the {hook h='...'} calls you added manually to your templates are yours to remove (a hook with no listening module simply displays nothing and produces no error).