Design anpassen (CSS)

Der Konfigurator soll aussehen wie dein Shop: Farben, Schrift, Ecken, die Optik der Auswahlfelder. Das alles passt du mit CSS an, ganz ohne JavaScript. Diese Seite gilt für die Frontend-Engine V3. Legacy erzeugt anderes HTML, dort greifen die Variablen und Klassen unten nicht.

Was der Konfigurator schon vom Shop übernimmt

In einem Shop – über ein Shop-Plugin oder das HTML-Snippet – übernimmt der Konfigurator Schrift, Schriftgröße und Textfarbe von deinem Theme. Dafür musst du nichts tun. Anpassen musst du nur, was der Konfigurator selbst mitbringt: Akzentfarbe, Rahmen, Hintergründe, Ecken.

Bindest du ihn mit data-configento-embed-mode="admin-preview" ein, zeigt er Titel, Preis und Zusammenfassung selbst und nutzt auch für Texte seine eigenen Farben. Die Schrift erbt er auch dann von der Seite.

Wo dein CSS hingehört

Du hast zwei Orte:

• Das Theme deines Shops – richtig, wenn alle Konfiguratoren gleich aussehen sollen.
• Benutzerdefiniertes CSS in den Komponenten-Einstellungen unter Design – richtig für eine einzelne Komponente. Es wird mit dem Konfigurator geladen, im Shop und in der Vorschau im Admin.

Schreibe vor Regeln für einzelne Elemente [data-configento], z. B. [data-configento] .cfg-toggle-item__price. Der Konfigurator lädt sein eigenes CSS nach deinem Theme; mit dem Zusatz gewinnt deine Regel trotzdem. Für die Variablen unten ist das nicht nötig.

Farben, Schrift und Ecken

Die einfachste Anpassung: Variablen auf :root setzen. Sie wirken im ganzen Konfigurator und auch in der Bild-Großansicht und den Info-Fenstern, die außerhalb des Konfigurators geöffnet werden.

:root {
  --configento-color-accent: #1d3c78;
  --configento-color-border: #c8d0e0;
  --configento-radius-md: 0;
}

Die Namen dieser Variablen bleiben in allen 3.x-Versionen gleich.

Aktivfarbe und Primärfarbe: Die Akzentfarbe eines Konfigurators kommt aus der ersten Quelle, die gesetzt ist:

1. die Aktivfarbe der Komponente (Komponenten-Einstellungen → Design),
2. --configento-color-accent aus deinem CSS,
3. die Primärfarbe unter Einstellungen → Branding – sie gilt auch für PDFs und E-Mails,
4. das Standard-Blau #2563eb.

Für eine einheitliche Farbe in allen Komponenten reicht also die Primärfarbe im Branding. Die Aktivfarbe brauchst du nur, wenn eine Komponente abweichen soll; sie gilt dann auch statt deines CSS.

Andere Schrift: Soll der Konfigurator eine andere Schrift als die Seite nutzen, setze sie am Element mit data-configento. Die Schrift muss auf der Seite geladen sein, etwa über dein Theme.

[data-configento] { font-family: 'Source Sans 3', sans-serif; }

Einzelne Elemente gestalten

Für Gestaltung über die Variablen hinaus gibt es Klassen und Attribute, die wir zusagen: Sie bleiben in allen 3.x-Versionen gleich, eine Änderung gibt es nur mit einer neuen ersten Versionsstelle. Andere Klassen und die übrige HTML-Struktur können sich ändern.

Rahmen jedes Merkmals

Radio Buttons und Checkboxen

Den gewählten Zustand erreichst du über das input, z. B. .cfg-toggle-item__label:has(input:checked). Lange Bezeichnungen brechen mit Silbentrennung um, der Aufpreis bleibt in einer Zeile. Die Bildgröße stellst du mit --cfg-value-image-size ein.

Eingabefelder und Auswahllisten

Kombiniertes Bild in der 360°-Ansicht

Reicht CSS nicht, weil ein Merkmal ganz anders aussehen und sich anders verhalten soll – etwa als Kfz-Kennzeichen –, zeichnest du es mit einer eigenen Darstellung per JavaScript.

Ein bestimmtes Merkmal sprichst du am einfachsten über eine eigene Klasse an: Trag sie im Editor im Feld CSS-Klasse des Merkmals ein, sie landet am Element .cfg-char.

Felder nebeneinander

Mit den Spalten-Klassen stellst du Merkmale einer Gruppe nebeneinander, etwa Vorname und Nachname in eine Zeile. Trag die Klasse im Editor im Feld CSS-Klasse des Merkmals ein. Eigenes CSS brauchst du dafür nicht.

• Die Merkmale füllen die Zeile in ihrer Reihenfolge in der Gruppe. Zwei Merkmale mit cfg-col-6 hintereinander stehen in einer Zeile.
• Merkmale ohne Spalten-Klasse in derselben Gruppe nehmen die ganze Zeile ein.
• Ist die Gruppe schmaler als 480 Pixel, etwa auf dem Smartphone, stehen alle Merkmale wieder untereinander.
• Die Klassen wirken nur in Gruppen, die mindestens eine davon nutzen. Gruppen ohne Spalten-Klasse und Breiten aus deinem Theme (z. B. Magentos grid12-6) bleiben unverändert.
• Nur mit der Frontend-Engine V3.

Beispiele

Eigene Radio Buttons – Kreis per CSS statt Browser-Standard, gewählte Zeile hervorgehoben:

[data-configento] [data-configento-char-type="radiobuttons"] .cfg-toggle-item__label > input {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--configento-color-accent);
  border-radius: 50%;
}
[data-configento] [data-configento-char-type="radiobuttons"] .cfg-toggle-item__label > input:checked {
  background: radial-gradient(var(--configento-color-accent) 45%, transparent 50%);
}
[data-configento] .cfg-toggle-item__label:has(input:checked) {
  background: var(--configento-color-accent-soft);
}

Setze dafür --configento-color-accent und --configento-color-accent-soft auf :root, wie oben gezeigt.

Fehler deutlicher zeigen:

[data-configento] .cfg-char[data-configento-invalid] .cfg-char__title { color: var(--configento-color-error); }
[data-configento] .cfg-char[data-configento-invalid] .cfg-input { border-color: var(--configento-color-error); }

Aufpreise ausblenden, etwa wenn dein Shop sie anders zeigt:

[data-configento] .cfg-toggle-item__price { display: none; }

Größere Bilder an den Werten und gesperrte Werte schwächer zeigen:

:root { --cfg-value-image-size: 64px; }
[data-configento] .cfg-toggle-item[data-configento-disabled] { opacity: 0.4; }

Fehlersuche

Nächste Schritte

• Komponenten-Einstellungen – Aktivfarbe und benutzerdefiniertes CSS
• HTML-Snippet-Integration
• JavaScript-Schnittstelle (V3) – wenn du über die Optik hinaus eingreifen willst
• Frontend-Engine: Legacy oder V3