PrestaShop Katalog-Verwaltung

Produkt-Konfigurator in Schritten: visuelle Optionen, Live-Vorschau und Preisaufschlag (PrestaShop 1.7, 8 & 9)

Jedes Produkt wird konfigurierbar, Schritt für Schritt

Farbe, Gravur, Zubehör: Ihre Kunden stellen ihr Produkt in einem geführten Ablauf zusammen, sehen das Ergebnis in Echtzeit Ebene für Ebene entstehen, und der richtige Preis landet im Warenkorb — serverseitig berechnet, manipulationssicher.

Auf einen Blick
  • 10 Feldtypen (Listen, Radio-Karten, Farbfelder, Vorschaubilder, Text, Datei-Upload, Zahl, Datum) mit bedingten Feldern „Nur anzeigen, wenn…“
  • Ein Konfigurator für mehrere Produkte oder ganze Kategorien, mit einem Klick duplizierbar
  • Zusammengesetzte Echtzeit-Vorschau (PNG-Ebenen, Einfärbung, gestalteter Text) oder deaktiviert, um die Bilder des Themes oder Page Builders zu behalten
  • Preis und Gewicht serverseitig pro Option berechnet: fest, Prozent, pro Zeichen oder Formel, native gewichtsbasierte Versandkosten
  • Creative Elements: eigener Hook, Info-Link, der eine Vorlage im Fenster öffnet, Warenkorb-Popup mit den Personalisierungsdetails
PrestaShop 1.7, 8 & 9 Mehrere Währungen Live-Vorschau Creative Elements Ohne Composer
  • 30 Tage Rückgaberecht
  • 12 Monate Updates
  • 24-h-Support
  • PrestaShop Certified Agency 2026
  • PrestaShop Expert Certification — Core Skills

Entwickelt von einer zertifizierten PrestaShop-Agentur

www.datafirefly.com/de/
Schrittweiser Produktkonfigurator in PrestaShop mit visuellen Optionen und Live-Preisvorschau
v1.3.0 · aktualisiert 2026-10-11
Was es leistet

Die Kurzfassung.

01

Geführter Ablauf in Schritten

Legen Sie so viele Schritte an, wie jedes Produkt braucht: 10 Feldtypen, visuelle Auswahl, Gravur, Datei-Upload, mit bedingten Feldern, die nur bei einer bestimmten Option erscheinen (die Rahmenwahl nur beim gerahmten Druck). Nummerierung und Schrittleiste lassen sich passend zu Ihrem Design ein- oder ausblenden.

02

Zusammengesetzte Echtzeit-Vorschau

Jede Option kann eine transparente PNG-Ebene über dem Produktfoto tragen oder die Silhouette einfärben. Gravierter Text erscheint live in der vom Kunden gewählten Schrift, Größe und Farbe, in Platzierungszonen, die Sie mit der Maus zeichnen. Die Vorschau lässt sich mit einem Klick abschalten, wenn ein Page Builder die Bilder verwaltet.

03

Serverseitige Preisberechnung

Jede Option trägt einen Nettoaufschlag (fest, Prozent vom Grundpreis, pro Zeichen, pro Einheit oder Formel) und ein Gewicht. Die angezeigte Summe ist ein Richtwert; die echte Berechnung läuft über den nativen Preismechanismus von PrestaShop mit Währungsumrechnung und MwSt., und das Gewicht wird für den Versand zum Warenkorb addiert.

04

Für Page Builder gemacht

Platzieren Sie den Konfigurator, wo Sie wollen, mit dem Hook displayDfProductConfigurator, über das Widget Module oder Shortcode von Creative Elements, ohne Bilder oder Blöcke der Seite anzutasten. Jedes Feld kann einen Info-Link („Materialratgeber“) zeigen, der eine in Creative Elements gestaltete Vorlage im Fenster öffnet.

05

Ein Konfigurator, ein ganzer Katalog

Verknüpfen Sie einen Konfigurator mit mehreren Produkten und ganzen Kategorien, Unterkategorien inklusive: Jedes Produkt behält seinen eigenen Grundpreis. Duplizieren Sie einen Konfigurator mit einem Klick für eine Produktreihe; die Bedingungen zwischen den Feldern werden in der Kopie automatisch neu verknüpft.

06

Sauberer Warenkorb, bereit für die Werkstatt

Jede Konfiguration erzeugt eine native PrestaShop-Personalisierung mit lesbarer Zusammenfassung, vom Warenkorb bis zur Rechnung. Nach dem Hinzufügen zeigt ein Popup das Produkt, jede Auswahl und die Warenkorbsummen mit „Weiter einkaufen“ und „Zur Kasse“. Das Bestelldetail bündelt Zusammenfassung, Kundendateien und finales Motiv.

Die ausführliche Fassung

Alles, was Sie vor der Installation wissen wollen.

Ein detaillierter Blick darauf, wie Produkt-Konfigurator in Schritten: visuelle Optionen, Live-Vorschau und Preisaufschlag (PrestaShop 1.7, 8 & 9) funktioniert, warum wir es so gebaut haben und der Gedanke hinter den Funktionen oben.

§ 01

Maßanfertigung verkaufen, ohne den Katalog aufzublähen

Fotobilder, gravierte Flaschen, personalisierter Schmuck, konfigurierbare Möbel: Sobald ein Produkt in Größen, Ausführungen und kostenpflichtigen Optionen kommt, stoßen native Kombinationen an ihre Grenzen (kombinatorische Explosion, unhandlicher Lagerbestand, keine Gravur). Der Produkt-Konfigurator fügt einen geführten Ablauf direkt auf der Produktseite hinzu: Der Kunde wählt, sieht und zahlt den richtigen Preis, ohne dass Sie eine einzige zusätzliche Kombination anlegen.

§ 02

Eine Vorschau, die für Sie verkauft, oder Ihre eigenen Bilder

Jede Option kann eine transparente PNG-Ebene tragen, die in Echtzeit über dem Produktfoto liegt, und gravierter Text erscheint in der gewählten Schrift, Größe und Farbe. Sind Ihre Produktseiten mit Creative Elements gebaut, schalten Sie die Vorschau ab: Galerien und Blöcke bleiben unberührt, und der Konfigurator sitzt dank seines eigenen Hooks unter Titel und Preis.

§ 03

Der richtige Preis, dort angewendet, wo niemand schummeln kann

Jede Option trägt einen Nettoaufschlag, positiv oder negativ, und ein Gewicht. Die Summe aktualisiert sich live in der Währung des Besuchers, ist aber nur eine Anzeige: Der echte Aufschlag wird von der nativen Preisberechnung von PrestaShop serverseitig angewendet, mit Währungsumrechnung und der MwSt. des Kunden. Das Gewicht der Optionen wird zum Warenkorb addiert, damit gewichtsbasierter Versand und die Schwelle für kostenlosen Versand stimmen.

§ 04

Native Personalisierungen statt einer fragilen Zusatzschicht

Statt den Warenkorb neu zu erfinden, nutzt das Modul die nativen Personalisierungen von PrestaShop: Jede bestätigte Konfiguration erzeugt eine eigene Zeile mit lesbarer Zusammenfassung (Größe: 40 × 60 cm · Ausführung: Gerahmter Druck · Rahmen: Nussbaum), die die Bestellung bis zur Rechnung und ins Backoffice begleitet. Nach dem Hinzufügen fasst ein Popup die Auswahl zusammen und bietet Weitereinkaufen oder Kasse an.

§ 05

Eine Verwaltung, die Zeit spart

Ein Bildschirm pro Konfigurator: die zugeordneten Produkte und Kategorien, dann die Felder, die Sie per Drag-and-drop sortieren und für den Überblick einklappen. Jedes Feld trägt seine Optionen (Bezeichnung, Preis, Gewicht, Artikelnummer, Farbe, Vorschaubild), seine aus einer Liste gewählten Anzeigebedingungen und bei Bedarf einen Info-Link. Ein Konfigurator lässt sich mit einem Klick für eine Produktreihe duplizieren, und drei Demo-Sets werden aus den Moduleinstellungen importiert.

129,00€
Einmalig · 12 Monate Updates
Dokumentation lesen
  • Unbegrenzte Dev- und Staging-Installationen
  • Quellcode inklusive
  • 30 Tage Rückgaberecht
  • 24-h-Support · EN / FR
5,0/5 20 Bewertungen