Prestashop Product Designer/Customizer Addon – Benutzerhandbuch

1.0 Beidhändige Rückhand: Einleitung

Als Shop-Betreiber haben Sie sich immer schon Gedanken über die Steigerung Ihrer Konversionsrate gemacht, aber nicht unbedingt über das Einkaufserlebnis Ihrer Kunden. Ein zufriedener Kunde kommt gerne wieder, um weitere Artikel zu kaufen. Wenn Sie also Stammkunden gewinnen möchten, sorgen Sie für ein nachhaltiges Kundenerlebnis, indem Sie das PrestaShop Product Designer/Customizer Add-on in Ihren Online-Shop integrieren. Prestashop Custom Product Design ModulOnline-Händler können ihren Kunden intuitive und kreative Optionen zur Produktindividualisierung anbieten und so die Basisversion eines Produkts in ein modernes, elegantes und einzigartiges Design verwandeln. Das PrestaShop-Add-on zur Produktindividualisierung ermöglicht es dem Administrator, die Seite mit dem Produktindividualisierungs-Panel anzuzeigen, sobald der Nutzer auf der Produktseite auf die Schaltfläche „Anpassen“ klickt. Kunden können ganz einfach farbige Texte mit Effekten hinzufügen, eigene Bilder mit Filtern hochladen und einen QR-Code einfügen, um das Produkt an ihre Bedürfnisse anzupassen.

1.1 Herausragende Merkmale des Prestashop-Add-ons zur Produktanpassung

Für die Konfiguration oder Änderung der Einstellungen des PrestaShop-Moduls „Benutzerdefiniertes Produktdesign“ sind keine Programmierkenntnisse erforderlich. Mit diesem Modul ist alles kinderleicht. Sehen wir uns kurz die verschiedenen Funktionen dieses PrestaShop-Add-ons an.

• Das Prestashop-Add-on „Produktdesigner/Customizer“ ermöglicht es Ihnen, in Ihrem Onlineshop eine breite Palette individualisierbarer Produkte anzubieten. Mit diesem Add-on können Ihre Kunden die erweiterten, nach ihren Bedürfnissen personalisierbaren Online-Produkte einfach erwerben und deren Vorteile nutzen.
• Der Online-Produktdesigner bietet eine Designansicht für Produkte, sodass potenzielle Käufer die Produkte in Echtzeit anpassen können. Mit dem Produktkonfigurator-Modul kann der PrestaShop-Administrator für jedes Produkt im Shop unterschiedliche Anpassungsoptionen hinzufügen.
• Durch die Integration des Prestashop-Produktdesigner-Moduls können Kunden auf das Produktanpassungs-Panel zugreifen und jedes gewünschte Produkt wie T-Shirts, Tassen, Ringe oder andere Produkte individuell gestalten.
• Das Prestashop-Add-on zur Produktanpassung zeigt für jedes anpassbare Produkt im Shop eine Schaltfläche „Anpassen“ an. Der Administrator kann die Anpassungsoptionen nur für die gewünschten Produkte aktivieren.
• Der vollständige Funktionsumfang des Prestashop-Add-ons „Produktdesigner/Customizer“ kann aktiviert oder deaktiviert werden. Wenn dieses Modul deaktiviert ist, werden auf der Produktseite die Standardoptionen zur Produktanpassung angezeigt.
• Das Modul zur erweiterten Produktanpassung zeigt die Preisberechnung für die individuelle Anpassung in Echtzeit auf der Produktseite an.
• Mit dem Prestashop-Add-on „Custom Product Designer“ kann der Administrator die Produktdesignseiten festlegen, die dem Benutzer zur Verfügung stehen.
• Das Produktkonfigurationsmodul ermöglicht es dem Administrator, die Option zum Herunterladen von PDF-Dateien für die Kunden im Frontend zu aktivieren oder zu deaktivieren.
• Das PrestaShop-Modul „Erweiterte Produktanpassung“ bietet die Möglichkeit, vordefinierte Bilder für ein Produkt hinzuzufügen. Diese Bilder sind üblicherweise in Gruppen organisiert. Kunden können aber auch eigene Bilder hochladen und festlegen.
• Mit diesem Prestashop-Produktdesigner-Modul kann der Kunde die gewünschten Schriftarten, Farben und Filter für das Produkt flexibel auswählen.
• Mit diesem erweiterten Produktanpassungsmodul können Administratoren Preise für verschiedene Anpassungsoptionen festlegen.
• Das Prestashop-Produktanpassungsmodul bietet auch die Möglichkeit, das Produkt mithilfe eines QR-Codes zu personalisieren, für den der Administrator einen separaten Preis festlegen kann.
• Das Prestashop-Addon für den benutzerdefinierten Produktdesigner fügt automatisch einen Festpreis für das komplette Design zum endgültigen Preis für ein individuell gestaltetes Produkt hinzu.
• Das Prestashop Product Designer/Customizer Add-on unterstützt Multi-Shop- und Mehrsprachigkeit.
• Das Prestashop-Add-on für benutzerdefinierte Produktdesigner ist mobil responsiv und mit verschiedenen Prestashop-Themes kompatibel.

1.2 Technologie für die Entwicklung

• Sprache: PHP
• Rahmenwerk: Prestashop

2.0 Installationsanleitung für das Modul „Erweiterte Produktanpassung“.

Der Shop-Administrator kann die folgenden einfachen Schritte befolgen, um das Prestashop-Produktanpassungs-Add-on in seinem Online-Shop zu installieren: 1. Laden Sie zunächst das Add-on-Paket aus dem Knowband-Shop herunter. 2. Sie erhalten eine ZIP-Datei mit dem Quellcode und dem Benutzerhandbuch. Entpacken Sie das gesamte Paket im Stammverzeichnis Ihres Prestashop-Shops mithilfe eines FTP-Managers (z. B. FileZilla oder WinSCP – hier herunterladen: https://filezilla-project.org/). Die Dateien und Ordner finden Sie wie in der Abbildung unten dargestellt.

Das PrestaShop-Add-on zur Gestaltung benutzerdefinierter Produkte ist nun installiert und einsatzbereit. Der Administrator kann jetzt die verschiedenen Konfigurationseinstellungen entsprechend seiner PrestaShop-Website anpassen.

3.0 Admin-Oberfläche des Prestashop-Moduls „Erweiterter Produkt-Customizer“.

Unmittelbar nach erfolgreicher Installation von Prestashop Product Designer / Customizer Addon Auf Ihrer Website können Sie die Einstellungen des Produktanpassungsbereichs nach Ihren Bedürfnissen konfigurieren. Klicken Sie im Admin-Bereich oder Dashboard auf „Module und Services“ und anschließend auf die Schaltfläche „Konfigurieren“ neben dem Knowband Product Designer/Customizer.

Hier, in der nächsten Benutzeroberfläche, finden Sie die vollständigen Einstellungen des Moduls Produktdesigner/Customizer sowie dessen Unterabschnitte, die unten aufgeführt sind.

Dieses Knowband-Produktanpassungsmodul besteht aus vier Unterabschnitten, die im Folgenden näher erläutert werden: 1. Konfiguration, 2. Schriftarten, 3. Farben, 4. Bildgruppen. Die einzelnen Registerkarten des erweiterten Prestashop-Produktanpassungsmoduls werden im Folgenden beschrieben:

3.1-Konfiguration

Unter den Konfigurationseinstellungen des Prestashop-Produktanpassungs-Add-ons können Sie die Grundeinstellungen für das Anpassungsfeld vornehmen, das den Kunden im Frontend angezeigt wird.

• Aktivieren deaktivieren: Mit dieser Option können Sie die Funktionalität des Prestashop Extended Product Customization-Moduls für Kunden vollständig aktivieren oder deaktivieren.
• Die Option zum Herunterladen der PDF-Datei im Warenkorb anzeigen: Sie können diese Option aktivieren oder deaktivieren, um das Designbild als PDF auf der Admin-Bestellseite herunterzuladen.
• Designvorschau in der Rechnungs-PDF anzeigen: Aktivieren oder deaktivieren Sie diese Option, um die Designvorschau in der Rechnungs-PDF anzuzeigen oder auszublenden.
• Maximale Anzahl an Folien: Mit dieser Option können Sie die maximale Anzahl der Produktseiten festlegen, die über das Frontend angepasst werden dürfen.

3.2-Schriftarten

In diesem Bereich des PrestaShop-Produktdesigner-Moduls kann der Shop-Betreiber verschiedene Schriftarten hinzufügen, aus denen der Kunde formatierten Text auf das Produkt drucken lassen kann. Die erste unten dargestellte Benutzeroberfläche zeigt eine Liste der verfügbaren Schriftarten. Hier können neue Schriftarten hinzugefügt, bestehende bearbeitet oder gelöscht werden.

Hier können Sie die beiden anderen Aktionen wie folgt ausführen:

1. Hinzufügen einer neuen Schriftart

Um eine neue Schriftart hinzuzufügen, gehen Sie wie folgt vor: Klicken Sie auf den Tab „Schriftarten“ und anschließend im Backend-Bereich auf die Schaltfläche „+“ (Schriftart hinzufügen). Die untenstehende Benutzeroberfläche wird angezeigt.

• Aktiv: Mit dieser Option kann die Schriftart aktiviert oder deaktiviert werden.
• Schriftarttitel: Mit dieser Option können Sie den Schrifttitel so einstellen, wie er in Google Fonts angegeben ist.
• Schriftart einbetten @import Schriftart: Um die Google-Schriftart zu verwenden, müssen Sie die Klasse „import Font“ einbinden. Dazu gehen Sie wie folgt vor:
• Klicken Sie auf den Link „Google Fonts“, der sich direkt unter der Option befindet. Der folgende Bildschirm wird Ihnen angezeigt.
• Wählen Sie die gewünschte Schriftart aus und klicken Sie auf die Schaltfläche „+“ zum Hinzufügen für diese Schriftart.

• Nach dem Hinzufügen einer Schriftart wird ein Popup angezeigt, in dem die ausgewählte Schriftfamilie aufgelistet ist. Klicken Sie auf den Tab „Einbetten“ und anschließend auf die Schaltfläche „@Importieren“.
• Kopieren Sie die @import-URL für diese Schriftart und fügen Sie sie in das Feld „@import-Schriftart einbetten“ ein.

2. Eine vorhandene Schriftart bearbeiten

Wenn Sie die vorhandene Schriftart bearbeiten möchten, klicken Sie einfach auf die Schaltfläche „Bearbeiten“ neben dem Schriftstil. Ihnen werden die folgenden Optionen angezeigt:

• Aktiv: Schriftart aktivieren oder deaktivieren.
• Schriftstil: Mit dieser Option können Sie den Schrifttitel bearbeiten.
• Schriftart einbetten @Import Schriftart: Ändern Sie die Import-URL für diese spezielle Schriftart.

3.3 Farben

Unter diesem Abschnitt von ProduktkonfiguratormodulSie können Ihre eigene Farbpalette definieren und Ihren Kunden die Möglichkeit geben, für das ausgewählte Produkt eine beliebige Farbe zu wählen. Die folgende Benutzeroberfläche zeigt Ihnen eine Liste der vorhandenen Farben, die Sie bearbeiten können. Bei Bedarf können Sie auch eine neue Farbe hinzufügen.

1. Hinzufügen einer neuen Farbe

• Farbcode: Wählen Sie mit dieser Option eine gewünschte Farbe aus, die auf der Produktanpassungsseite angezeigt werden soll.
• Aktiv: Farbe aktivieren oder deaktivieren.

2. Eine vorhandene Farbe bearbeiten

• Farbcode: Wählen Sie mit dieser Option eine gewünschte Farbe aus, die auf der Produktanpassungsseite angezeigt werden soll.
• Aktiv: Die vorhandene Farbe aktivieren oder deaktivieren.

3.4 Bildgruppen

Für ein ausgewähltes Produkt kann der Kunde entweder ein vom Shopbetreiber bereitgestelltes Standardbild auswählen oder ein eigenes Bild zur Produktanpassung hochladen. Die Standardbilder sind in Bildgruppen kategorisiert. Diese bestehenden Bildgruppen können bearbeitet oder um neue ergänzt werden.

1. Hinzufügen einer neuen Bildgruppe

• Name der Bildgruppe: Sie können einen gewünschten Namen für die Bildgruppe festlegen.
• Bild hochladen: Sie können ein Bild für ein Gruppenlogo hochladen und festlegen.
• Aktiv: Mit dieser Option kann die Bildgruppe aktiviert oder deaktiviert werden.

2. Bearbeiten einer vorhandenen Bildgruppe

• Name der Bildgruppe: Sie können einen gewünschten Namen für die Bildgruppe festlegen.
• Bild hochladen: Sie können ein Bild für ein Gruppenlogo hochladen und festlegen.
• Aktiv: Mit dieser Option kann die Bildgruppe aktiviert oder deaktiviert werden.

Um die Bilder innerhalb einer Bildgruppe anzuzeigen, hinzuzufügen oder zu löschen, klicken Sie auf die Option „Bilder anzeigen“, die der jeweiligen Bildgruppe entspricht.

Ihnen wird die folgende Benutzeroberfläche angezeigt.

Hier können Sie ein neues Bild hinzufügen, vorhandene Bilder innerhalb einer Gruppe löschen oder ändern.

4.0 Anpassungseinstellungen für Website-Produkte

Die in den Abschnitten 3.2, 3.3 und 3.4 beschriebenen Konfigurationseinstellungen für Schriftarten, Farben und Bildgruppen gelten für alle Produkte der Website. Diese Einstellungen werden als globale Einstellungen bezeichnet. Darüber hinaus können die Einstellungen auch produktspezifisch vorgenommen werden. Diese Einstellungen sind produktspezifisch und wurden vom Administrator im Backend konfiguriert. Im Folgenden werden die Produktanpassungseinstellungen für einzelne Produkte erläutert. Der Website-Administrator kann diese Einstellungen für jedes Produkt im Shop individuell anwenden. Um die Produktanpassungseinstellungen für einzelne Produkte zu konfigurieren, gehen Sie wie folgt vor: 1. Klicken Sie im Admin-Bereich in der linken Menüleiste auf „Katalog“.

2. Klicken Sie unter „Katalog“ auf die Option „Produkte“.

Sie sehen eine Liste der Shop-Produkte sowie die Möglichkeit, das Produkt zu bearbeiten oder zu konfigurieren. Die Ansicht der Shop-Produkte ist unten dargestellt:

Wenn Sie bei einem Produkt auf die Schaltfläche „Bearbeiten“ klicken, finden Sie die folgenden Konfigurationseinstellungen. Wählen Sie die Registerkarte „Produktdesigner/Konfigurator“.

Die vollständigen Einstellungen des Produktdesigners/Customizers sind nun in vier Gruppen unterteilt:

• Konfiguration
• Preise
• Text
• Seiten

4.1-Konfiguration

• Aktivieren deaktivieren: Mit dieser Option kann das Produktanpassungsfeld auf der Produktseite im Frontend aktiviert oder deaktiviert werden.
• Erforderlich für die Produktanpassung: Aktivieren Sie diese Option, wenn Sie die Produktindividualisierung für Kunden vorschreiben möchten.
• Bildgröße zum Hochladen: Mit dieser Option wird die maximale Größe für den Bild-Upload festgelegt.
• Preis für das Hochladen von Bildern: Mit dieser Option wird der Preis für das Hochladen eines Bildes festgelegt.
• Die Option zum Herunterladen von PNG-Dateien anzeigen: Aktivieren oder deaktivieren Sie die Option zum Herunterladen von PNG-Bildern.
• Bild-Upload zulassen: Aktivieren oder deaktivieren Sie die Option zum Hochladen von Bildern auf der Produktkonfiguratorseite.
• Textgröße ändern: Aktivieren Sie diese Option, um die Textgröße ändern zu können.
• Textrotator anzeigen: Aktivieren Sie diese Option, um die Textdrehung zu ermöglichen.
• Anzeigeoption für QR-Code: Aktivieren oder deaktivieren Sie seine Option zum Hinzufügen eines QR-Codes zum Produkt.
• Transparenz für Bilder anzeigen: Aktivieren Sie diese Option, um die Transparenzoption für Bilder anzuzeigen.
• Anzeigefilter für Bilder: Mit dieser Option können Sie Bildfilter aktivieren oder deaktivieren.
• Filter für Bilder: Wählen Sie mehrere Filter aus, die auf der Produktanpassungsseite im Frontend angezeigt werden sollen.

4.2 Preise

• Textfestpreis: Mit dieser Option können Sie einen Festpreis für den Text festlegen.
• Kosten pro Zeichen aktivieren: Sie können diese Option aktivieren, wenn Sie die Kosten pro Zeichen berechnen möchten.
• Komplettes Design zum Festpreis: Mit dieser Option können Sie einen Festpreis für das komplette Design festlegen. Dieser Preis wird zu den gesamten Anpassungskosten hinzugerechnet.
• Preis per QR-Code: Mit dieser Option können Sie einen Preis für den QR-Code festlegen.

4.3-Text

• Textblock anzeigen: Sie können die Option für den Textblock auf der Seite zur Produktanpassung ein- oder ausblenden.
• Maximale Textlänge: Mit dieser Option können Sie eine maximale Textlänge festlegen.
• Mindesttextlänge: Mit dieser Option können Sie eine Mindestlänge für den Text festlegen.
• Texttransparenz zulassen: Sie können diese Option für Texttransparenz aktivieren oder deaktivieren.
• Textkurve zulassen: Sie können diese Option für die Textkurve aktivieren oder deaktivieren.

4.4 Sides

• Seite aktivieren: Mit dieser Option können Sie die Seite aktivieren oder deaktivieren.
• Seitenname: Mit dieser Option können Sie den Namen für die Seite festlegen.
• Seitenansicht: Mit dieser Option können Sie ein Bild hochladen, das die Produktseite zeigt. Diese Einstellungen gelten für eine Seite des Produkts. Sie können dieselben Einstellungen auch für andere Seiten des Produkts vornehmen.
  Hinweis: Hier können Sie nur die Anzahl der Seiten wie in den „Konfigurationseinstellungen“ des Produktkonfigurators beschrieben festlegen. Wenn Sie beispielsweise die „maximale Anzahl der Seiten“ auf 2 gesetzt haben, können Sie nur die Einstellungen für Seite 1 und Seite 2 konfigurieren.

Wie konfiguriere ich Schriftarten, Farben und Bildgruppen?

Während Sie die Anpassungseinstellungen für ein Produkt ändern, finden Sie die Optionen zur Auswahl verschiedener Schriftarten, Farben und Bildgruppen oben rechts auf dem Bildschirm. Es stehen Ihnen drei Optionen zur Verfügung:

1. Schriftarten konfigurieren
Alle in Abschnitt 3.2 hinzugefügten Schriftarten sind hier in dieser Benutzeroberfläche aufgelistet. Sie können jede Schriftart direkt aktivieren oder deaktivieren.

2. Farben konfigurieren
Alle in Abschnitt 3.3 hinzugefügten Farben sind hier in dieser Benutzeroberfläche aufgelistet. Sie können jede Farbe direkt aktivieren oder deaktivieren.

3. Bildgruppen konfigurieren

Alle in Abschnitt 3.4 hinzugefügten Bildgruppen werden hier in dieser Oberfläche aufgelistet. Sie können jede Bildgruppe direkt aktivieren oder deaktivieren. Nach dem Klicken auf die Schaltfläche „Bilder anzeigen“ wird der folgende Bildschirm angezeigt.

5.0 Frontschnittstelle von Prestashop Modul für benutzerdefiniertes Produktdesign

Sobald der Online-Produktdesigner installiert und für den Shop konfiguriert ist, wird der Tab „Produktdesigner/Konfigurator“ in den allgemeinen Produkteinstellungen angezeigt. Um die Produktanpassungsseite für ein Produkt zu aktivieren oder zu deaktivieren, können Sie die Produkteinstellungen im Backend unter „Produktkatalog“ anpassen. Wenn der Produktdesigner/Konfigurator für ein Produkt aktiviert ist, wird auf der Produktseite die Schaltfläche „Anpassen“ angezeigt (siehe unten).

Nach dem Klicken auf die Schaltfläche „Anpassen“ öffnet sich ein Pop-up-Fenster mit verschiedenen Produktdesign- und Anpassungseinstellungen. Kunden können je nach Bedarf Farben, individuellen Text, Bilder oder QR-Codes hinzufügen.

Ihre Kunden können jegliche Art von Anpassungen vornehmen, wie zum Beispiel: 1. Farbe

2. Bild: Kunden können dem Produkt ein Bild hinzufügen. Sie können ein Standardbild aus der Bildgruppe auswählen, ein eigenes Bild hochladen oder einen QR-Code hinzufügen.

2a. Wählen Sie ein Bild aus

2b. Bild hochladen

Angenommen, der Kunde fügt das hochgeladene Bild auf der Rückseite des Hoodies hinzu. 2c. QR-Code hinzufügen.

3.Text

Produktanpassung sparen

In ähnlicher Weise kann der Kunde auch andere Produkte des Shops, wie Tassen und Handyhüllen, individuell gestalten.

Zusammenfassungsseite des Warenkorbs für personalisierte Produkte Das untenstehende Frontend-Bild zeigt, wie das personalisierte Produkt auf der Warenkorbseite mit verschiedenen Optionen für den Kunden angezeigt wird, nachdem dieser auf die Schaltfläche „Personalisierung speichern“ geklickt hat.

Der Kunde kann die Rechnung für dieses kundenspezifische Produkt wie unten dargestellt einsehen.

Bestellhistorie-Seite mit Rechnung

Nach dem Klicken auf die Schaltfläche „Details“ sieht der Kunde folgenden Bildschirm:

Bestellansicht im Admin-Bereich: Der Administrator kann die Bestellrechnung und alle Konfigurationen zur Produktanpassung im Backend einsehen. Die Details einer Bestellung finden Sie im Bereich „Bestellungen“ des Admin-Bereichs.

Durch Klicken auf die Schaltfläche „Anzeigen“ neben dem jeweiligen Produkt kann der Administrator die vollständigen Bestelldetails des kundenspezifischen Produkts einsehen.

Durch Klicken auf die Schaltfläche „Details anzeigen“ sieht der Administrator die vollständigen Details des personalisierten Produkts in Form eines Popup-Fensters, wie unten dargestellt.

Der Administrator kann auf die Option „Vorschau“ klicken, um das dem Produkt hinzugefügte benutzerdefinierte Bild zu sehen, das wie folgt aussieht.

Anleitung: Videoanleitung ansehen

Um Ihnen bei der Einrichtung und Verwendung zu helfen PrestaShop Produktdesigner-/AnpassungsmodulWir haben eine detaillierte YouTube-TutorialvideoDieses Video führt Sie Schritt für Schritt durch die Installation, Konfiguration und Verwendung des Moduls.

Hier können Sie sich das Tutorial ansehen:

Für weitere Unterstützung, individuelle Anpassungen oder bei Fragen wenden Sie sich bitte an unser Support-Team unter:
[email protected]