In configento.app heißt jeder Konfigurator Komponente. Eine Komponente enthält alle Merkmale, Werte, Preise und Regeln für ein Produkt oder eine Produktgruppe. Dieser Artikel führt dich einmal komplett durch: von der leeren Komponente über Merkmale und Aufpreise bis zur veröffentlichten Fassung, die dein Shop anzeigt. Die Details zu jedem Schritt findest du in den verlinkten Fachartikeln.
Das Prinzip in drei Sätzen
- Du baust die Komponente im Editor auf und speicherst sie. Gespeichert ist ein Entwurf – den sieht nur die Vorschau.
- Mit Veröffentlichen wird der aktuelle Stand geprüft und für die Shops freigegeben.
- Dein Shop oder deine Website bindet die Komponente über ein Plugin oder ein HTML-Snippet ein und zeigt immer die zuletzt veröffentlichte Fassung.
Schritt 1: Admin öffnen
Melde dich im Service-Portal an und klicke bei deinem Dienst auf Verwalten. Es öffnet sich die Komponenten-Übersicht.
Die Hauptnavigation hat vier Einträge:
| Eintrag | Inhalt |
|---|---|
| Komponenten | Alle deine Konfiguratoren |
| Bausteine | Zentral gepflegte Preislisten und Tabellen, die mehrere Komponenten nutzen |
| Einstellungen | Einstellungen für das ganze Konto, z. B. Sprachen und Integrationen – siehe Globale Einstellungen |
| Einführung | Startet die Tour durch die Oberfläche noch einmal |
Leeres Konto: Beispielkomponenten
Ist dein Konto noch leer, fragt dich der Admin beim ersten Besuch, ob er vier Beispielkomponenten anlegen soll. Sie zeigen ein kombiniertes Produktbild, Kombinations- und Formelmerkmale, ein Regelwerk und grafische Icons. Du kannst sie wie jede andere Komponente bearbeiten, veröffentlichen oder löschen – sie eignen sich gut als Vorlage zum Abschauen. Hast du die Frage weggeklickt, erreichst du sie über Einführung wieder, solange das Konto leer ist.
Schritt 2: Komponente anlegen
In der Komponenten-Übersicht hast du zwei Wege:
- Neue Komponente: Gib einen Titel ein, z. B. „Rollo nach Maß“, und klicke auf Erstellen. Der Editor öffnet sich mit einer leeren Komponente.
- ZIP importieren: Übernimmt eine Komponente, die du vorher mit Komponente exportieren als ZIP gesichert hast – etwa aus einem anderen Konto.
Eine bestehende Komponente als Ausgangspunkt nutzt du mit Komponente duplizieren auf ihrer Karte.
Lieber per Chat? Der KI-Assistent legt die Komponente samt Merkmalen für dich an – siehe Mit dem KI-Assistenten.
Schritt 3: Der Editor im Überblick
Der Editor hat drei Spalten:
| Bereich | Inhalt |
|---|---|
| Links | Vier Reiter: Merkmale (der Strukturbaum mit Gruppen und Merkmalen), Regeln, Einstellungen (der ganzen Komponente) und Versionen |
| Mitte | Umschalter Bearbeiten / Vorschau. Bearbeiten zeigt alle Merkmale schematisch – ein Klick wählt ein Merkmal aus. Vorschau zeigt den echten Konfigurator. |
| Rechts | Die Einstellungen des ausgewählten Merkmals oder der ausgewählten Gruppe |
Oben rechts findest du Rückgängig, Zurücksetzen (verwirft alle Änderungen und lädt die zuletzt veröffentlichte Fassung neu) und Veröffentlichen. Gibt es ungespeicherte Änderungen, erscheint über dem rechten Bereich der Knopf Speichern.
Schritt 4: Gruppen und Merkmale anlegen
Merkmale liegen immer in einer Gruppe. Eine neue Komponente hat noch keine, deshalb beginnst du dort:
- Klicke im Reiter Merkmale auf Gruppe hinzufügen. Es entsteht eine Gruppe „Neue Gruppe“. Über das Zahnrad (Gruppeneinstellungen) gibst du ihr einen Namen, z. B. „Maße“.
- Klicke an der Gruppe auf + (Merkmal hinzufügen). Es entsteht ein Merkmal „Neues Merkmal“ vom Typ Auswahl.
- Stelle rechts unter Grundeinstellungen ein:
| Feld | Bedeutung |
|---|---|
| Bezeichnung | Was deine Kunden sehen, z. B. „Farbe“ |
| Interner Name (ID) | Eindeutiger Name für Formeln und Regeln, z. B. farbe. Vergib ihn gleich am Anfang sprechend – den automatisch vergebenen Namen new_option_… willst du später in keiner Formel sehen. |
| Datenkategorie | Grobe Art des Merkmals (siehe unten) |
| Datentyp | Konkrete Darstellung innerhalb der Kategorie |
Wie viele Gruppen du brauchst und wie sie angezeigt werden (ohne Gruppen, als Tabs, als Accordion oder Schritt für Schritt als Wizard), erklärt Merkmalsgruppen & Wizard.
Die vier Datenkategorien
| Datenkategorie | Datentypen (Auswahl) | Wofür |
|---|---|---|
| Diskretes Merkmal | Auswahl, Radio Buttons, Checkbox, Liste mit Bildern, Mehrfachauswahl | Der Kunde wählt aus festen Werten, z. B. Farbe oder Antrieb |
| Freie Eingabe | Kleines Eingabefeld, Großes Eingabefeld, Datum | Der Kunde gibt etwas ein, z. B. Breite in cm |
| Berechnung | Formel, Preisliste, Einfache Kombination | Der Konfigurator rechnet selbst, z. B. Fläche oder Matrixpreis |
| Frontend | Statisches Feld, Aktions-Button, Dateiupload | Inhalte und Aktionen ohne eigene Auswahl, z. B. Hinweistext oder „Angebot anfordern“ |
Alle Typen im Detail: Merkmale & Werte anlegen.
Schritt 5: Werte und Aufpreise
Bei einem diskreten Merkmal legst du im Abschnitt Werte mit + Wert die Auswahlmöglichkeiten an. Ein Klick auf einen Wert öffnet seine Einstellungen:
| Feld | Bedeutung |
|---|---|
| Bezeichnung | Was der Kunde sieht, z. B. „Anthrazit“ |
| Wert | Interner Wert, z. B. anthrazit – wird in Regeln und Formeln verwendet |
| Preis | Aufpreis, wenn der Kunde diesen Wert wählt |
| Artikelnummer | Optional, z. B. für Stücklisten im Shop |
Wie Aufpreise angezeigt werden, stellst du für die ganze Komponente im Reiter Einstellungen unter Aufpreis ein: Preisanzeige ein oder aus, Preistyp Absolut (der Aufpreis des Werts) oder Relativ (der Unterschied zur aktuellen Auswahl) und das Preismuster.
Preise, die von Eingaben abhängen – Staffeln, Formeln, Preismatrizen –, erklären Preisberechnung einrichten, Preisformeln und Preismatrizen aus Excel/CSV.
Schritt 6: Grundeinstellungen der Komponente
Im linken Reiter Einstellungen findest du die Einstellungen der ganzen Komponente, aufgeteilt in Allgemein, Design, Reporting und Benutzerdefinierte Felder. Für den Anfang reichen diese aus Allgemein:
| Einstellung | Wirkung |
|---|---|
| Titel | Name der Komponente in der Übersicht |
| Überschrift | Optionale Überschrift über dem Konfigurator |
| Standardsprache für diese Komponente | Sprache, in der du die Inhalte pflegst |
| Darstellung | Keine Gruppen, Tabs oder Accordion |
| Frontend-Engine | Legacy (Standard) oder V3 (Beta) – siehe unten |
Alle weiteren Einstellungen: Komponenten-Einstellungen.
Frontend-Engine: Legacy oder V3
Die Engine bestimmt, welcher Konfigurator im Shop läuft. Legacy ist der bewährte Standard. V3 ist die neue Engine im Beta-Stadium; einige Funktionen gibt es nur dort, andere nur in Legacy. Für deine erste Komponente lässt du Legacy (Standard) eingestellt. Welche Funktionen es nur in einer Engine gibt, wo welche Engine läuft und was das Kennzeichen V3 in der Übersicht bedeutet, erklärt Frontend-Engine: Legacy oder V3.
Schritt 7: Speichern und in der Vorschau testen
Klicke auf Speichern. Jedes Speichern legt im Reiter Versionen einen Eintrag an – darüber kannst du später zu einem früheren Stand zurück (Wiederherstellen) oder zwei Stände vergleichen.
Schalte dann in der mittleren Spalte auf Vorschau. Du siehst den Konfigurator so, wie ihn deine Kunden sehen werden, mit der eingestellten Frontend-Engine. Prüfe:
- Erscheinen alle Merkmale in der richtigen Reihenfolge?
- Stimmen die Aufpreise und der Gesamtpreis?
- Greifen deine Regeln, falls du schon welche hast?
Wichtig zu wissen:
- Die Vorschau zeigt den zuletzt gespeicherten Stand. Hast du danach etwas geändert, weist ein gelber Hinweis darauf hin – speichere und lade die Vorschau mit ↺ neu.
- Die Vorschau braucht die Integration HTML5. Ist sie aus, bittet dich der Admin, sie zu aktivieren: unter Einstellungen → Integrationen den Schalter auf der Karte HTML5 einschalten. Das ist einmalig nötig.
- Mit In eigenes Fenster verschieben öffnest du die Vorschau separat – der Editor bekommt dann mehr Platz.
Schritt 8: Veröffentlichen
Bis hierher sieht dein Shop nichts davon. Solange der gespeicherte Stand von der veröffentlichten Fassung abweicht, steht oben Noch nicht live.
- Klicke oben rechts auf Veröffentlichen.
- Der Admin prüft die Komponente. Fehler – etwa eine Preisliste ohne Tabellen-Konfiguration – blockieren das Veröffentlichen und werden aufgelistet. Warnungen – etwa eine leere Formel oder ein doppelt vergebener Interner Name – werden ebenfalls angezeigt, das Veröffentlichen bleibt aber möglich.
- Bestätige mit Ja, veröffentlichen. Dabei werden auch ungespeicherte Änderungen gespeichert.
Ab jetzt zeigen alle Shops diese Fassung. Änderungen, die du danach speicherst, landen wieder nur im Entwurf – bis zum nächsten Veröffentlichen.
Schritt 9: Im Shop einbinden
Wie die Komponente auf deine Produktseite kommt, hängt von deinem System ab:
- Magento 2 / Adobe Commerce: Magento-Plugin installieren
- Shopware 6: Shopware-Plugin installieren
- Shopify: Shopify-Plugin installieren
- WordPress, TYPO3 oder jede andere Website: HTML-Snippet Integration
In jedem Fall wählst du dort die Komponente aus, die auf dem Produkt erscheinen soll. Veröffentliche sie vorher – der Shop zeigt nur veröffentlichte Fassungen.
Mit dem KI-Assistenten
Am unteren Rand des Admins liegt über die volle Breite der KI-Assistent. Klicke auf Neuer Chat und beschreibe dein Produkt, zum Beispiel:
Ich verkaufe Rollos nach Maß. Lege eine Komponente „Rollo“ an mit Breite und Höhe in cm (je 40 bis 240), Stoffart (Standard, Verdunkelung +15 €) und Antrieb (Kette, Motor +89 €).
Der Assistent legt Gruppen, Merkmale, Werte und Aufpreise an. Kontrolliere das Ergebnis anschließend im Editor und in der Vorschau, und veröffentliche selbst. Der KI-Assistent verbraucht KI-Tokens und erscheint nur, wenn er für dein Konto aktiviert ist. Mehr dazu: KI-Agent: Konfigurator per Chat aufbauen.
Häufige Stolpersteine
- Der Shop zeigt meine Änderung nicht – gespeichert ist nicht veröffentlicht. Steht oben Noch nicht live, klicke auf Veröffentlichen.
- Die Vorschau zeigt einen alten Stand – sie zeigt immer den zuletzt gespeicherten Stand. Speichern, dann mit ↺ neu laden.
- Die Vorschau bleibt leer mit einem Hinweis auf HTML5 – die Integration HTML5 unter Einstellungen → Integrationen einschalten.
- Ich finde keinen Knopf für ein neues Merkmal – Merkmale brauchen eine Gruppe. Zuerst Gruppe hinzufügen, dann an der Gruppe +.
- Eine Formel findet ein Merkmal nicht – Formeln verwenden den Internen Namen (ID), nicht die Bezeichnung. Prüfe die Schreibweise.