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: Ist in den Komponenten-Einstellungen unter Design eine Aktivfarbe gesetzt, gilt sie für diese Komponente statt --configento-color-accent. Lass das Feld leer, wenn die Farbe aus deinem CSS kommen soll.

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).

Eingabefelder und Auswahllisten

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.

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; }

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