DF Product Story — Product page storytelling blocks
Install and use DF Product Story: drag & drop builder, storytelling blocks, translation and per-product or per-category targeting.
Overview
DF Product Story adds rich storytelling sections to your PrestaShop 8 & 9 product pages: alternating image + text blocks, click-to-play video, comparison table, benefit icon grid and free text. Stories are composed in a drag & drop builder in the back office, then displayed automatically on the products or categories you target — below the description or in a dedicated tab.
A story assigned to a category automatically covers all its products. Direct product assignments take priority: perfect for giving your best-sellers specific content.
Installation
- In your PrestaShop back office, go to Modules > Module Manager > Upload a module.
- Upload the
dfproductstory-1.0.0.zipfile. - Click Install. The module creates its tables, its admin tab and the default tab titles in FR/EN/ES/DE/IT.
After installation, two entry points are available: the module configuration page (Modules > DF Product Story > Configure) and the story manager under Catalog > DF Product Story.
General configuration
The module configuration page holds three settings:
- Display location: “Below the product content” (displayFooterProduct hook, default) or “Extra product tab” (displayProductExtraContent hook, next to the description).
- Tab title: multilingual label used only in tab mode. Defaults are shipped in all five languages.
- Lazy-load videos: enabled by default. Replaces YouTube/Vimeo iframes with a lightweight click-to-play facade — strongly recommended for Core Web Vitals.
Creating a story
- Go to Catalog > DF Product Story and click Add new story.
- Fill in the internal name (never shown on the front office), the priority (the lower the number, the higher the story appears when several stack up) and the Active status.
- Add your blocks with the + Add a block buttons, fill them in, then click Save story.
Saving happens via AJAX: you stay on the page and can keep editing. A toast confirms every save.
The 5 block types
Image + text
The signature storytelling block: an image on one side, a title and text on the other. Choose the image position (left or right) and alternate blocks to create a zigzag visual rhythm. Images upload directly from the builder (jpg, png, webp, gif — 4 MB max). The text field accepts HTML.
Video
Three possible sources: YouTube (paste any watch, embed, shorts or youtu.be URL), Vimeo or direct MP4 (full file URL). With lazy-load enabled, YouTube and Vimeo render as a click-to-play facade with thumbnail — the iframe only loads on click, via youtube-nocookie.com and Vimeo’s dnt=1 parameter. The caption field appears under the video.
Comparison table
Add as many columns and rows as needed with the + Column / + Row buttons. The Highlighted column setting applies a blue highlight to the column of your choice — handy for steering visitors towards your flagship range. The table scrolls horizontally on mobile.
Benefit icons
A grid of 2 to 4 columns of key arguments. Each item has an icon (an emoji, short text or the path of an uploaded image), a title and a text. Items reorder with the arrows.
Text
A title and free HTML content, for long narrative sections or anything not covered by the other blocks.
Organizing blocks
- Drag & drop: grab a block’s ⋮⋮ handle and drop it on its new position.
- Arrows ↑ ↓: keyboard/mouse alternative to drag & drop.
- Duplicate: copies the block with all its settings and content in every language.
- Delete: asks for confirmation before removing the block.
Translating content
At the top of the blocks panel, tabs show every active language of your shop (FR, EN, ES…). Click a tab to switch all editors to that language: titles, texts, table columns and benefit items translate independently. Structural settings (image position, video source, column count) are shared across all languages.
Remember to save before leaving the page: content entered in all languages is sent in a single save.
Targeting products and categories
The Targeting panel works on two levels:
- Target products: search by name, reference or ID, then click a result to add it as a chip. If at least one product is selected, the story only shows on those products.
- Categories (fallback): tick categories in the tree. The story shows on every product belonging to those categories, unless a direct product story already exists for them.
When several stories match the same product, they all display, sorted by ascending priority.
Multistore
In a multistore context, a story created from the “All shops” context is visible across the whole network. A story created from a specific shop is limited to that shop.
Performance and GDPR
- Front CSS and JS only load on product pages.
- Block images use the browser’s native lazy loading.
- Click-to-play video facades load no third-party script before the visitor clicks, via youtube-nocookie.com and Vimeo dnt=1 — no third-party cookie is set on page load.
- The front CSS is neutral and inherits your theme’s typography.
Uninstalling
Uninstalling removes the module tables, stories and blocks, assignments, the admin tab and the configuration values. Images uploaded to the module folder are removed with it as well.
FAQ / Troubleshooting
The story does not show on the front office
- Check that the story is active and contains at least one block with content in the viewed language.
- Check the targeting: if products are selected, the story only appears on them; otherwise it follows the ticked categories.
- In tab mode, some heavily customized themes do not implement displayProductExtraContent: switch to “Below the product content”.
The YouTube video does not appear
Check that the URL contains a valid video ID (watch?v=, youtu.be/, embed/ or shorts/ formats accepted). Playlist-only URLs are not supported.
Image upload fails
Accepted formats: jpg, jpeg, png, webp, gif, maximum size 4 MB. Also check that the module folder is writable by the web server.