KILB Canvas Configurator – Visueller Produktkonfigurator mit Live-Vorschau

Erste Schritte

Nach der Installation des KILB Canvas Configurators findest du einen neuen Menüeintrag „KILB Canvas Configurator" im Bereich Inhalte der Shopware-Admin-Seitenleiste. Klicke darauf, um das Konfigurator-Admin-Dashboard zu öffnen.

Schritt 1: Konfigurator erstellen

Klicke auf „Konfigurator erstellen" und fülle die folgenden Felder aus:

• Name — Ein interner Name zur Identifikation (z. B. „Schuh-Konfigurator", „Handyhüllen-Designer").
• Canvas-Breite / -Höhe (px) — Die Basisauflösung des Canvas in Pixeln. Diese bestimmt das Seitenverhältnis und die Qualität der generierten Bilder. Wähle Maße, die zu deinen Produktbildern passen (z. B. 800 x 800 für ein quadratisches Produkt).
• Vorschau-Breite / -Höhe (px) — Die Anzeigegröße der Live-Vorschau im Storefront (min. 100, max. 1024). Das Seitenverhältnis ist an die Canvas-Maße gekoppelt — eine Änderung eines Wertes aktualisiert den anderen automatisch.
• Hintergrundbild — Wähle optional ein Hintergrundbild aus der Shopware-Mediathek. Dieses Bild wird als Basisebene des Canvas angezeigt, sichtbar hinter allen anderen Ebenen.
• Canvas-Vorschau als Positionsbild verwenden — Wenn aktiviert, wird das vom Kunden gestaltete Canvas als Produktbild im Warenkorb und in der Bestellbestätigung angezeigt, anstelle des Standard-Produktbilds.

Klicke auf „Speichern", um den Konfigurator zu erstellen.

Schritt 2: Optionen hinzufügen

Nach dem Speichern des Konfigurators siehst du den Bereich Optionen. Klicke auf „Option hinzufügen", um eine neue Option zu erstellen.

• Label — Der Name, der dem Kunden im Storefront angezeigt wird (z. B. „Hintergrund", „Haarfarbe", „Dein Name").
• Typ — Wähle Bild für auswählbare Bildebenen oder Text für Kunden-Texteingabe.
• Pflichtfeld — Aktiviere dies, wenn der Kunde eine Auswahl treffen oder Text eingeben muss, bevor er das Produkt in den Warenkorb legen kann.

Optionen werden in der Reihenfolge angezeigt, in der sie in der Liste erscheinen. Verwende die Pfeil-Buttons, um sie neu zu sortieren.

Schritt 3: Optionswerte hinzufügen

Klicke auf „Bearbeiten" bei einer Option, um deren Werte zu verwalten. Klicke dann auf „Wert hinzufügen".

Für Bild-Optionen

Jeder Wert repräsentiert eine auswählbare Bildebene:

• Label — Der Name auf dem Auswahl-Button (z. B. „Blau", „Holz", „Marmor").
• Bildmaske — Wähle die Bildebene aus der Shopware-Mediathek. Dieses Bild wird auf dem Canvas überlagert, wenn der Kunde diesen Wert auswählt. Verwende transparente PNG-Dateien für beste Ergebnisse.
• Auswahlbild — Lege optional ein separates Thumbnail-Bild für den Auswahl-Button fest. Falls nicht gesetzt, wird die Bildmaske als Fallback verwendet. Dies ist nützlich, wenn die Bildmaske eine vollflächige Canvas-Ebene ist, du aber eine kleine, zugeschnittene Vorschau auf dem Button anzeigen möchtest.

Für Text-Optionen

Jeder Wert repräsentiert ein Texteingabefeld mit eigener Konfiguration:

• Label — Beschreibender Name (z. B. „Vorderseiten-Text", „Rückseiten-Gravur").
• Standardtext — Vorausgefüllter Text, den der Kunde sieht, bevor er etwas eingibt. Kann pro Sprache übersetzt werden.
• Maximale Zeichen — Begrenzt die Anzahl der Zeichen, die der Kunde eingeben kann.

Position und Ausrichtung (Beide Typen)

• Position X / Y — Koordinaten in Pixeln auf dem Canvas, an denen das Element platziert wird.
• Horizontale Ausrichtung — Links, Mitte oder Rechts relativ zum Positionspunkt.
• Vertikale Ausrichtung — Oben, Mitte oder Unten relativ zum Positionspunkt.

Schritt 4: Text-Eigenschaften konfigurieren (nur Text-Optionen)

Für Text-Optionswerte kannst du die verfügbaren Farben, Schriftarten und Größen definieren, aus denen Kunden wählen können. In der Bearbeitungsansicht des Optionswerts findest du den Bereich Eigenschaften.

Farben hinzufügen

1. Klicke auf „Farbe hinzufügen".
2. Gib einen Hex-Farbcode ein (z. B. #FF0000 für Rot).
3. Stelle optional die Deckkraft ein (1 = vollständig deckend, 0 = vollständig transparent).
4. Klicke auf „Hinzufügen".
5. Wiederhole dies für alle Farben, die du anbieten möchtest. Du kannst eine Farbe als Standard markieren.

Schriftarten hinzufügen

Bevor Schriftarten verwendet werden können, müssen sie in die Shopware-Medienbibliothek hochgeladen werden:

1. Öffne die Shopware-Administration und navigiere zu Inhalte > Medien.
2. Erstelle einen Ordner mit dem exakten Namen KilbCanvasConfiguratorFonts (Groß-/Kleinschreibung beachten, keine Leerzeichen).
3. Lade eine oder mehrere verfügbare Schriftarten hier herunter: https://canvas-configurator.kilb.tech/fonts
   → Die Anzahl der verfügbaren Schriftarten wird fortlaufend erweitert.
4. Lade die verfügbaren Schriftarten-PDF-Dateien in diesen Ordner deiner Medienbibliothek hoch.
5. Kehre zum Admin-Dashboard des Konfigurators zurück und bearbeite den Wert deiner Textoption.
6. Klicke im Bereich Schrifteigenschaften auf „Schriftart hinzufügen“.
7. Wähle eine Schriftart aus dem Dropdown-Menü aus: dort werden alle TTF-Dateien angezeigt, die im Ordner KilbCanvasConfiguratorFonts gefunden wurden.
8. Klicke auf „Hinzufügen“. Wiederhole den Vorgang für alle Schriftarten, die du anbieten möchtest.
9. Markiere eine Schriftart als Standard, damit sie für den Kunden vorausgewählt ist.

Größen hinzufügen

1. Klicke auf „Größe hinzufügen".
2. Gib die Schriftgröße in Pixeln ein (z. B. 24).
3. Klicke auf „Hinzufügen".
4. Wiederhole dies für alle Größen, die du anbieten möchtest. Markiere eine als Standard.

Wichtig: Damit Text korrekt auf dem Canvas gerendert wird, sollte jeder Text-Optionswert mindestens eine Farbe, eine Schriftart und eine Größe konfiguriert haben.

Schritt 5: Produkte zuweisen

Navigiere zum Produkte-Tab deines Konfigurators. Hier kannst du den Konfigurator mit einem oder mehreren Shopware-Produkten verknüpfen:

1. Klicke auf „Produkt zuweisen".
2. Nutze das Suchfeld, um Produkte nach Name zu finden.
3. Klicke auf ein Produkt, um es zuzuweisen. Der Konfigurator erscheint nun auf der Produktdetailseite dieses Produkts im Storefront.
4. Produktvarianten werden unterstützt — du kannst den Konfigurator einzelnen Varianten zuweisen.

Ein einzelner Konfigurator kann mehreren Produkten zugewiesen werden. Um eine Zuweisung zu entfernen, klicke auf „Entfernen" neben dem Produkt.

Schritt 6: Übersetzungen

Wenn dein Shop mehrere Sprachen unterstützt, kannst du alle Texte (Konfigurator-Name, Options-Labels, Optionswert-Labels, Standardtexte) pro Sprache übersetzen. Bearbeite eine beliebige Entität und wechsle zur gewünschten Sprache, um Übersetzungen manuell hinzuzufügen.

Alternativ nutze den Button „Fehlende übersetzen" auf der Konfigurator-Bearbeitungsseite. Diese KI-gestützte Funktion übersetzt automatisch alle fehlenden Texte über alle konfigurierten Shop-Sprachen hinweg mit einem einzigen Klick.

Bestellungen verwalten

Navigiere zum Bereich Bestellungen im Konfigurator-Admin-Dashboard. Hier siehst du alle Bestellungen, die konfigurierte Produkte enthalten.

• Nutze das Suchfeld, um nach Bestellnummer oder Konfigurator-Name zu filtern.
• Klicke auf „Vorschau", um eine Canvas-Vorschau des Kundendesigns zu öffnen.
• Im Vorschau-Modal kannst du alle Kundenauswahlen einsehen (gewählte Optionen, eingegebener Text, Schriftart, Farbe, Größe).
• Nutze die Export-Optionen, um das Design herunterzuladen:
  • PNG — Standard-Bildformat, ideal für die Druckproduktion.
  • WebP — Komprimiertes Bildformat für digitale Nutzung.
  • PDF — Export in Vektorqualität mit eingebetteten Schriftarten, ideal für professionellen Druck.
  • JSON — Vollständiger FabricJS-Canvas-Zustand zur Archivierung oder erneuten Darstellung.
• Passe den Auflösungs-Skalierungsfaktor an, um die Exportqualität zu steuern.
• Schalte „Hintergrundbild einbeziehen" um, um die Hintergrundebene ein- oder auszuschließen.
• Markiere Bestellungen als „Erledigt", um deinen Erfüllungsfortschritt zu verfolgen.

Konfigurator duplizieren

Um einen ähnlichen Konfigurator zu erstellen, ohne bei Null anzufangen, klicke auf den „Kopieren"-Button eines bestehenden Konfigurators. Dadurch wird der Konfigurator inklusive aller Optionen, Optionswerte und Eigenschaftskonfigurationen dupliziert. Die Kopie erscheint mit demselben Namen — benenne sie um, um sie vom Original zu unterscheiden.