# DF Product Story — Product page storytelling blocks

> 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…

- Page: <https://www.datafirefly.com/en/documentation/dfproductstory/>
- Language: en
- Last updated: 2026-08-12
- Other languages: [fr](https://www.datafirefly.com/documentation/dfproductstory/index.md), [es](https://www.datafirefly.com/es/documentation/dfproductstory/index.md), [de](https://www.datafirefly.com/de/documentation/dfproductstory/index.md), [it](https://www.datafirefly.com/it/documentation/dfproductstory/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfproductstory/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfproductstory/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfproductstory/index.md)
- Index: <https://www.datafirefly.com/en/documentation/llms.txt>

## 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

1. In your PrestaShop back office, go to **Modules > Module Manager > Upload a module**.
2. Upload the `dfproductstory-1.1.0.zip` file.
3. 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 four 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.
- **Load Font Awesome (CDN)**: disabled by default. Loads Font Awesome 6 on product pages so benefit icons can use classes like "fa-solid fa-star". Not needed if your theme already includes Font Awesome.

## Creating a story

1. Go to **Catalog > DF Product Story** and click **Add new story**.
2. 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.
3. 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, a Font Awesome class such as "fa-solid fa-star" 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.