PrestaShop Product Page Tabs — Documentation
Install, configure and use the product page tab manager: scopes, HTML or CMS content, drag & drop and mobile accordion.
This module lets you create custom tabs on the product page of your PrestaShop 8 or 9 store. Each tab can target all products, specific categories or a precise product selection, display rich HTML content or a CMS page, and turn into an accordion on mobile. This documentation covers installation, configuration and day-to-day use.
Installation
The module installs like any PrestaShop module, with no dependency or special server configuration.
- In the back office, open Modules > Module Manager, then click Upload a module.
- Select the module ZIP archive and let the installation complete.
- Once installed, a new Catalog > DF Tabs Builder entry appears in the back-office menu.
The module creates five dedicated tables for its data. They are automatically removed on uninstall, leaving no leftovers in the database.
General settings
From the module page, the Configure button opens the general settings, which are independent from the tabs themselves.
Mobile accordion
This option enables the automatic conversion of tabs into an accordion on small screens. When enabled, below a certain screen width the row of tabs becomes a stack of collapsible, single-open headers. Above that width, your theme’s native tabs stay displayed as usual.
Breakpoint
The breakpoint defines the screen width (in pixels) below which accordion mode activates. The default is 768 pixels, which matches the tablet/mobile switch of most themes. You can enter a value between 320 and 1920 pixels.
Create a tab
Open Catalog > DF Tabs Builder, then click Add new tab. The edit form gathers all the settings of a tab.
Tab title
The title is entered language by language: it is the label shown on the tab, on the product page. Fill it in for each of your store languages.
Status
The Active switch lets you enable or disable the tab without deleting it. An inactive tab appears on no product page.
Target the right products
The Display on field determines the tab’s scope. Three choices are available.
All products
The tab is global: it appears on every product page of the store. This is the ideal choice for a reassurance, shipping or common FAQ tab.
Specific categories
The tab only shows on products belonging to the selected categories. A checkbox category tree with search then appears: tick one or more categories. A product attached to any of the ticked categories will see the tab.
Specific products
The tab targets only a precise product selection. A search field appears: type at least two characters to search a product by name, reference or ID. Click a result to add it; it then shows as a chip. Click the cross on a chip to remove the product from the selection.
You can share a care tab across a whole department by targeting a category, while reserving a technical tab for a few precise references through product targeting.
Choose the tab content
The Content type field offers two sources.
Custom HTML
You write the content directly in the built-in rich editor, language by language. You can insert formatted text, lists, images, tables or embedded videos. This is the recommended mode for content specific to the tab.
CMS page
You link an existing CMS page of your store. Its content is then displayed in the tab, in the visitor language. This is handy to reuse an already-written returns policy or care charter, without duplicating it: any update to the CMS page is automatically reflected in the tab.
A tab whose resolved content is empty is not displayed on the product page. This avoids showing an empty tab, for example when a CMS page is disabled.
Reorder the tabs
In the tab list, a position column lets you reorder tabs by drag & drop: grab a row’s handle and move it up or down. The order defined here is exactly the order in which tabs appear on the product page, from left to right.
Behaviour on mobile
When the mobile accordion is enabled in the general settings, tabs automatically turn into an accordion below the defined breakpoint. Each tab becomes a clickable header with a chevron; opening a header closes the previous one (single-open). Above the breakpoint, your theme’s native tabs are restored identically: the behaviour is non-destructive.
The accordion relies on the theme’s standard tab markup. On a theme with very atypical markup, if the accordion cannot be built, the tabs stay displayed as usual: no regression is introduced.
Uninstall
Uninstalling from the Module Manager removes the module, its settings and all created tabs, along with the five associated tables. A confirmation is requested because this operation permanently erases all tabs.
Troubleshooting
My tabs don’t appear on the product page
Check that the tab is active, that its scope indeed matches the viewed product (targeted category or product), and that its content is not empty. For a CMS page tab, make sure the linked CMS page is active in the visitor language.
The accordion doesn’t trigger on mobile
Make sure the mobile accordion option is enabled in the general settings and that your screen width is indeed below the configured breakpoint. Clear the PrestaShop cache after any settings change.
A tab shows in the wrong place
The tab order is determined by the position column in the list. Reorder the tabs by drag & drop, then reload the product page to check.