# DF Product Story — Storytelling-Blöcke für Produktseiten > Überblick DF Product Story fügt Ihren PrestaShop 8 & 9 Produktseiten reiche Storytelling-Sektionen hinzu: alternierende Bild + Text Blöcke, Click-to-play-Video, Vergleichstabelle, Vorteils-Icon-Raster und freier Text. Stories werden in einem Drag… - Seite: - Sprache: de - Aktualisiert am: 2026-08-12 - Weitere Sprachen: [fr](https://www.datafirefly.com/documentation/dfproductstory/index.md), [en](https://www.datafirefly.com/en/documentation/dfproductstory/index.md), [es](https://www.datafirefly.com/es/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: ## Überblick DF Product Story fügt Ihren PrestaShop 8 & 9 Produktseiten reiche Storytelling-Sektionen hinzu: alternierende Bild + Text Blöcke, Click-to-play-Video, Vergleichstabelle, Vorteils-Icon-Raster und freier Text. Stories werden in einem Drag & Drop Builder im Back Office zusammengestellt und automatisch auf den Produkten oder Kategorien angezeigt, die Sie festlegen — unter der Beschreibung oder in einem eigenen Tab. Eine einer Kategorie zugewiesene Story deckt automatisch alle ihre Produkte ab. Direkte Produktzuweisungen haben Vorrang: ideal, um Bestsellern spezifische Inhalte zu geben. ## Installation 1. Gehen Sie im PrestaShop Back Office zu **Module > Modul-Manager > Modul hochladen**. 2. Laden Sie die Datei `dfproductstory-1.1.0.zip` hoch. 3. Klicken Sie auf **Installieren**. Das Modul legt seine Tabellen, seinen Admin-Tab und die Standard-Tab-Titel in FR/EN/ES/DE/IT an. Nach der Installation gibt es zwei Einstiegspunkte: die Konfigurationsseite des Moduls (Module > DF Product Story > Konfigurieren) und den Story-Manager unter **Katalog > DF Product Story**. ## Allgemeine Konfiguration Die Konfigurationsseite des Moduls enthält vier Einstellungen: - **Anzeigeposition**: „Unter dem Produktinhalt" (Hook displayFooterProduct, Standard) oder „Zusätzlicher Produkt-Tab" (Hook displayProductExtraContent, neben der Beschreibung). - **Tab-Titel**: mehrsprachige Bezeichnung, die nur im Tab-Modus verwendet wird. Standardwerte werden in allen fünf Sprachen mitgeliefert. - **Videos lazy laden**: standardmäßig aktiviert. Ersetzt YouTube/Vimeo-iframes durch eine leichte Click-to-play-Fassade — für Core Web Vitals dringend empfohlen. - **Font Awesome laden (CDN)**: standardmäßig deaktiviert. Lädt Font Awesome 6 auf Produktseiten, damit Vorteils-Icons Klassen wie „fa-solid fa-star" nutzen können. Nicht nötig, wenn Ihr Theme Font Awesome bereits enthält. ## Eine Story erstellen 1. Gehen Sie zu **Katalog > DF Product Story** und klicken Sie auf **Neue Story hinzufügen**. 2. Füllen Sie den **internen Namen** (wird nie im Front Office angezeigt), die **Priorität** (je niedriger die Zahl, desto weiter oben erscheint die Story, wenn sich mehrere stapeln) und den Status **Aktiv** aus. 3. Fügen Sie Ihre Blöcke über die Buttons **+ Block hinzufügen** hinzu, füllen Sie sie aus und klicken Sie auf **Story speichern**. Das Speichern erfolgt per AJAX: Sie bleiben auf der Seite und können weiterarbeiten. Ein Toast bestätigt jede Speicherung. ## Die 5 Blocktypen ### Bild + Text Der Signatur-Block des Storytellings: ein Bild auf einer Seite, Titel und Text auf der anderen. Wählen Sie die Bildposition (links oder rechts) und wechseln Sie zwischen den Blöcken ab, um einen visuellen Zickzack-Rhythmus zu erzeugen. Bilder werden direkt aus dem Builder hochgeladen (jpg, png, webp, gif — max. 4 MB). Das Textfeld akzeptiert HTML. ### Video Drei mögliche Quellen: **YouTube** (beliebige watch-, embed-, shorts- oder youtu.be-URL einfügen), **Vimeo** oder **direktes MP4** (vollständige Datei-URL). Mit aktiviertem Lazy Loading erscheinen YouTube und Vimeo als Click-to-play-Fassade mit Vorschaubild — das iframe wird erst beim Klick geladen, über youtube-nocookie.com und den Vimeo-Parameter dnt=1. Das Feld Bildunterschrift erscheint unter dem Video. ### Vergleichstabelle Fügen Sie mit den Buttons + Spalte / + Zeile beliebig viele Spalten und Zeilen hinzu. Die Einstellung **Hervorgehobene Spalte** wendet eine blaue Hervorhebung auf die Spalte Ihrer Wahl an — praktisch, um Besucher zu Ihrer Flaggschiff-Reihe zu lenken. Die Tabelle scrollt auf Mobilgeräten horizontal. ### Vorteils-Icons Ein Raster mit 2 bis 4 Spalten von Kernargumenten. Jedes Item besitzt ein Icon (ein Emoji, eine Font-Awesome-Klasse wie „fa-solid fa-star" oder der Pfad eines hochgeladenen Bildes), einen Titel und einen Text. Items werden mit den Pfeilen neu sortiert. ### Text Ein Titel und freier HTML-Inhalt, für lange erzählerische Abschnitte oder alles, was die anderen Blöcke nicht abdecken. ## Blöcke organisieren - **Drag & Drop**: Greifen Sie den ⋮⋮-Griff eines Blocks und legen Sie ihn an der neuen Position ab. - **Pfeile** ↑ ↓: Tastatur-/Maus-Alternative zum Drag & Drop. - **Duplizieren**: kopiert den Block mit allen Einstellungen und Inhalten in jeder Sprache. - **Löschen**: fragt vor dem Entfernen des Blocks nach Bestätigung. ## Inhalte übersetzen Oben im Blöcke-Panel zeigen Tabs jede aktive Sprache Ihres Shops (FR, EN, ES…). Klicken Sie auf einen Tab, um alle Editoren in diese Sprache umzuschalten: Titel, Texte, Tabellenspalten und Vorteils-Items werden unabhängig übersetzt. Strukturelle Einstellungen (Bildposition, Videoquelle, Spaltenzahl) werden zwischen allen Sprachen geteilt. Denken Sie daran, vor dem Verlassen der Seite zu speichern: die in allen Sprachen eingegebenen Inhalte werden in einer einzigen Speicherung übertragen. ## Produkte und Kategorien targeten Das Targeting-Panel arbeitet auf zwei Ebenen: - **Zielprodukte**: Suchen Sie nach Name, Referenz oder ID und klicken Sie auf ein Ergebnis, um es als Chip hinzuzufügen. Ist mindestens ein Produkt ausgewählt, erscheint die Story nur auf diesen Produkten. - **Kategorien (Fallback)**: Haken Sie Kategorien im Baum an. Die Story erscheint auf allen Produkten dieser Kategorien, sofern für sie nicht bereits eine direkte Produkt-Story existiert. Wenn mehrere Stories zum selben Produkt passen, werden alle angezeigt, sortiert nach aufsteigender Priorität. ## Multishop Im Multishop-Kontext ist eine Story, die aus dem Kontext „Alle Shops" erstellt wurde, im gesamten Netzwerk sichtbar. Eine aus einem bestimmten Shop erstellte Story bleibt auf diesen Shop beschränkt. ## Performance und DSGVO - Front-CSS und -JS werden nur auf Produktseiten geladen. - Block-Bilder nutzen das native Lazy Loading des Browsers. - Click-to-play-Videofassaden laden vor dem Klick des Besuchers keinerlei Drittanbieter-Skripte, über youtube-nocookie.com und Vimeo dnt=1 — beim Seitenaufruf wird kein Drittanbieter-Cookie gesetzt. - Das Front-CSS ist neutral und übernimmt die Typografie Ihres Themes. ## Deinstallation Die Deinstallation entfernt die Modultabellen, Stories und Blöcke, Zuweisungen, den Admin-Tab und die Konfigurationswerte. Auch die in den Modulordner hochgeladenen Bilder werden mit entfernt. ## FAQ / Fehlerbehebung ### Die Story erscheint nicht im Front Office - Prüfen Sie, ob die Story **aktiv** ist und mindestens einen Block mit Inhalt in der angezeigten Sprache enthält. - Prüfen Sie das Targeting: sind Produkte ausgewählt, erscheint die Story nur auf ihnen; andernfalls folgt sie den angehakten Kategorien. - Im Tab-Modus implementieren einige stark angepasste Themes displayProductExtraContent nicht: wechseln Sie auf „Unter dem Produktinhalt". ### Das YouTube-Video erscheint nicht Prüfen Sie, ob die URL eine gültige Video-ID enthält (Formate watch?v=, youtu.be/, embed/ oder shorts/ werden akzeptiert). Reine Playlist-URLs werden nicht unterstützt. ### Der Bild-Upload schlägt fehl Akzeptierte Formate: jpg, jpeg, png, webp, gif, maximale Größe 4 MB. Prüfen Sie außerdem, ob der Modulordner für den Webserver beschreibbar ist.