Brand Carousel: PrestaShop brand logo carousel documentation

Installation

In the back office, open Modules > Module Manager, click “Upload a module” and send the dfbrandcarousel-2.0.0.zip file. The module supports PrestaShop 8.0 to 9.x.

On installation, the module creates its two tables, the displayDfBrandCarousel hook, the /img/dfbrandcarousel/ folder for replacement logos and a first block: a brand carousel on the homepage (displayHome) titled “Our brands” in each installed language. Open your shop to see it, then edit or delete that block.

The module is managed from its “Configure” button in the Module Manager.

Upgrading from version 1.0.x

Upload the 2.0.0 ZIP over the installed version. The upgrade script creates the new tables and moves your settings into a block named “Brand carousel”, on the same hook: title, number of brands, columns, autoplay, speed, spacing, arrows, dots, selected brands and random order. Brands without products stay visible as before. The old DFBC_* settings are then deleted. Swiper is no longer used, which ends conflicts with themes and page builders that load their own copy.

The block list

The Blocks tab lists your blocks with their mode, hook and source. For each block you can:

• Enable or disable the block with the switch.
• Edit the block in the editor.
• Duplicate the block. The copy is created disabled.
• Delete the block.
• Drag and drop blocks to set their order when several share the same hook.

The “Clear cache” button empties the cache of brands, product counts and sales (see Cache and performance).

The block editor

The editor shows the settings on the left, spread over 5 tabs, and a preview on the right. The preview refreshes on every change and can be switched to desktop, tablet or mobile width. It uses a neutral font: on the shop, the block uses your theme’s fonts.

The top bar holds the internal block name, the active switch, the language selector for translatable fields and the Save button. An indicator flags unsaved changes, and Ctrl+S (Cmd+S on Mac) saves without leaving the editor.

Content tab

Heading

• Title and subtitle: per language. Leave the title empty to hide it.
• Title tag: H2 on the homepage, H3 inside a page that already has H2 headings, or p and div for a title with no heading role.
• Heading layout: title on the left and link on the right, all left, or centered. In the last two cases, the link moves below the logos.
• All brands link: text per language and URL. Without a URL, the link leads to the PrestaShop brands page.

Brands to display

• All active brands of the shop.
• Manual selection: add brands from the left list with the + button, then reorder them by drag and drop in the right list. “Add all listed” adds the brands matching the current search.
• Brands of a category: brands with at least one visible product in the chosen category or its subcategories.
• Brands of the current category: on a category page, the brands of that category. On a product page, those of its main category. Elsewhere, all brands.

These settings refine the source:

• Excluded brands: removed from the list, except with a manual selection.
• Sort order: your order (manual selection), alphabetical, most products first, best sellers first over 7 to 730 days, newest brands first, or random on each visit. Alphabetical sorting ignores accents and punctuation: L’Oréal is sorted as “loreal”.
• Maximum brands: 0 displays every matching brand.
• Minimum products: 1 by default, so visitors are never sent to an empty brand page.
• Only brands with a logo: applied before the maximum, so you get the number you asked for.

Random order is drawn in the browser. A full-page cache can serve the same page to every visitor and the order still changes on each visit. In the marquee modes, the maximum applies first in alphabetical order, then the selected brands are shuffled.

Layout tab

The 8 display modes

• Carousel: logos moving by page or by logo, on 1 to 3 rows, with arrows, dots and autoplay.
• Marquee: logos gliding without a stop on 1 to 4 rows.
• Vertical marquee: 1 to 4 columns moving up or down.
• Grid: cards in columns, with optional search, letter filter and “Show more” button.
• Logo wall: a grid without cards, logos separated by thin lines.
• Rotating wall: a fixed grid whose logos swap one at a time.
• Chips: brand names in compact pills, with an optional small logo. Suited to a sidebar.
• A-Z directory: all brands grouped by letter, with a clickable letter bar and a search field.

Columns

The number of columns is set separately for desktop (1 to 12), tablet (1 to 8) and mobile (1 to 4). These steps depend on the width available to the block, not on the screen width: a block placed in a sidebar uses the mobile setting even on a large screen.

• Rows (carousel and rotating wall): 1 to 3. In the carousel, logos fill each column from top to bottom, then the rows scroll together.
• Show part of the next logo (carousel): on tablet and mobile, the next logo peeks in to show that the list can be swiped. Side arrows are then hidden on mobile.
• Rows before Show more (grid and logo wall): 0 shows everything at once.

Marquee and vertical marquee

• Rows (or columns for the vertical marquee): 1 to 4, never more than the number of brands.
• Different brands on each row: brands are shared out between the rows. When off, every row shows all brands, shifted. Sharing out needs at least 3 brands per row, otherwise the module shifts the rows instead.
• Logo width (horizontal) or block Height (vertical).

Search and filters

The search field (grid, logo wall, directory) filters brands as the visitor types, ignoring accents and punctuation. The letter filter (grid and logo wall) shows a 0-9, A to Z and # bar, # covering names that start with neither a letter nor a digit. Letters without a brand are greyed out. The directory accepts 1 to 6 columns and small logos next to the names.

Spacing and width

• Space between logos and section Vertical padding.
• Width: width of the location, full-width background (the background covers the screen, the content stays in the theme column), or full width edge to edge (handy for a marquee that crosses the whole screen).

Style tab

Brand cards

• Card style: filled, outline, shadow or bare.
• Maximum logo height, minimum card height, card padding and corner radius.
• Brand name: only when the brand has no logo, always under the logo, or on hover.
• Short description: the first 160 characters of the brand’s short description.

Logos

• Number of products shown under the logo or in the chip.
• Logo effect: none, grayscale then color on hover, always grayscale, faded then full on hover.
• Card hover effect: lift, logo zoom, accent outline or none.
• Remove white backgrounds: blends the white of JPG logos into light cards. Keep it off on dark backgrounds and use transparent logos instead.
• Image size: the original image is recommended. PrestaShop image sizes often add white margins around logos.

Colors

Six colors can be set: accent (arrows, links, active letter), card background, borders, section background, title and text. “Reset” hands control back to the theme. Text placed on the accent color switches to white or black automatically for contrast.

Motion tab

Carousel

• Automatic scrolling and pause between slides (1 to 15 seconds).
• Transition duration and step: a full page or one logo.
• Back to start at the end: after the last logo, the carousel returns to the first one. For endless scrolling, use the Marquee mode.
• Arrows: 4 styles (filled, outline, square, minimal) and 4 positions (on the edges overlapping, inside the edges, in the heading, under the logos).
• Dots for pagination.

The carousel also works with the keyboard (left and right arrow keys), touch and mouse drag.

Marquee and vertical marquee

• Direction: left or right, up or down.
• Alternate rows: every other row runs the opposite way.
• Speed: 5 to 400 pixels per second, the same whatever the row length.
• On hover: slow down, stop or keep going. Slowing down is gradual.
• Fade the edges: logos fade in and out at the edges.

Rotating wall

Set the number of rows and the time between swaps (0.8 to 20 seconds). At each swap, one logo of the grid is replaced by a brand that is not visible yet.

Accessibility

The pause button, recommended by WCAG 2.2.2 for any content moving longer than 5 seconds, appears in the heading or under the logos. Animations also stop on hover, on keyboard focus, when the tab is hidden and when the block leaves the screen. For visitors who reduced motion in their system, the marquee becomes a still row they scroll by hand, and the carousel no longer moves by itself.

Display tab

Location

The Hook field offers 14 grouped locations:

• Homepage: displayHome.
• Every page: displayWrapperTop, displayWrapperBottom, displayContentWrapperTop, displayContentWrapperBottom, displayNavFullWidth, displayFooterBefore, displayFooterAfter.
• Columns: displayLeftColumn, displayRightColumn.
• Specific pages: displayFooterProduct, displayFooterCategory, displayShoppingCartFooter.
• Integration: displayDfBrandCarousel, or “None” for a block shown only through the widget or the shortcode.

“Other hook” accepts any name starting with display (letters, digits and underscores). The module registers itself on it when you save. Your theme must then call that hook.

Pages and devices

Pages restricts the block to some page types: homepage, categories, products, brands, CMS pages, search, cart and checkout, other pages. Nothing checked means every page where the hook exists. Devices hides the block on desktop (992 px and up), tablet (576 to 991 px) or mobile (under 576 px).

Statistics

With “Send clicks to Google Analytics”, each click on a brand sends the dfbc_brand_click event with the dfbc_block, brand_id and brand_name parameters. The event goes to dataLayer when Google Tag Manager is present, otherwise to gtag. In GTM, create a “Custom event” trigger on dfbc_brand_click.

Placing a block elsewhere

The module’s Integration tab, and the “Insert this block elsewhere” section of each saved block, give the codes to copy. Replace 3 with the block number.

• In a theme template: {widget name='dfbrandcarousel' id_block=3} shows that block, whatever its hook.
• With the module hook: {hook h='displayDfBrandCarousel'} shows every block assigned to that hook, {hook h='displayDfBrandCarousel' id_block=3} one specific block.
• In a CMS page: paste [dfbrandcarousel id="3"] into the content. The shortcode is replaced by the block, even when it sits alone in a paragraph.
• AJAX content or page builder: if the block is inserted after the page has loaded, call window.DFBC.init(container). window.DFBC.destroy(container) stops blocks cleanly before their HTML is removed.

When a block is displayed on a page where the module did not load its files (widget in a template, custom hook), the block adds them itself, once per page.

Brand logos

The Brand logos tab lists every active brand with its PrestaShop logo and product count.

• Replacement logo: upload a PNG, JPG, WebP, GIF or SVG file up to 2 MB. It replaces the PrestaShop logo in every block. “Remove” goes back to the original logo.
• Custom link: full URL (https://…) or a path starting with /. A link to another site opens in a new tab. When empty, the link leads to the brand page.

SVG files containing scripts, event attributes, embedded objects or external links are refused: export them again as plain SVG. Files are stored in /img/dfbrandcarousel/, whose .htaccess file blocks script execution and applies a security policy to SVG files.

If an image optimisation module has created .webp or .avif versions next to the PrestaShop logos in /img/m/, they are served automatically to compatible browsers.

Customising the HTML

Copy modules/dfbrandcarousel/views/templates/hook/dfbrandcarousel.tpl to themes/your-theme/modules/dfbrandcarousel/views/templates/hook/dfbrandcarousel.tpl and edit the copy. Module updates do not overwrite it. Every value in the template is already escaped by the module, hence the use of nofilter.

Each block is rendered in a <section class="dfbc dfbc--MODE"> element with the id dfbc-NUMBER-N. For targeted CSS, prefer the classes, for example:

.dfbc--marquee .dfbc-card { border-radius: 999px; }

Multistore and languages

Blocks are managed shop by shop: pick a shop in the back office shop selector before editing them. Replacement logos and custom links are shared by all shops. Title, subtitle and link text are entered per language. The module is translated into English, French, Spanish, German, Italian, Dutch, Polish and Portuguese, and supports right-to-left languages.

Cache and performance

The module loads no jQuery, no Swiper and no external library. Its CSS and JavaScript weigh about 5 KB and 7 KB compressed, and are loaded only on pages where a block can appear: a block placed on displayHome loads nothing on product pages.

The brand list is cached for 6 hours, product counts per brand for 1 hour and sales for 12 hours, in var/cache/. This cache is cleared on every save in the module and whenever a brand or a product is added, edited or deleted. PrestaShop only runs these triggers for employees allowed to view the module: if a colleague without that permission edits the catalog, use the “Clear cache” button.

Frequently asked questions

The block does not appear

Check that the block is active, that your theme calls its hook and that the Pages and Devices filters allow the current page. Then check that some brands remain: the editor preview shows how many brands are selected and displays a message when none match (source, minimum products, logo filter).

Logos show white rectangles

PrestaShop logos are JPG files on a white background. Enable “Remove white backgrounds” on light cards, or upload transparent logos in the Brand logos tab.

Logos look blurry

Pick “Original image” in Image size, or upload a replacement logo as SVG or a high-resolution PNG.

The marquee does not move

The pause button may have been pressed, or the visitor’s system asks for reduced motion. In that second case the module deliberately shows still logos.

A brand is missing

The brand must be active, assigned to the shop and have at least the minimum number of visible products. Also check the excluded brands and the “Only brands with a logo” option.

Uninstalling

Uninstalling deletes the module tables, the /img/dfbrandcarousel/ folder with the replacement logos and the module cache.