Design und benutzerdefiniertes CSS

Nutzen Sie die Design-Einstellungen, um den Online-Shop an Ihre Marke anzupassen und gleichzeitig sicherzustellen, dass der Bestellvorgang übersichtlich und zuverlässig bleibt. Verwenden Sie benutzerdefiniertes CSS nur dann, wenn sich die gewünschten Änderungen nicht über die Design-Einstellungen umsetzen lassen.

Dieser Artikel richtet sich an Organisatoren und technisches Personal, die den kundenorientierten Shop betreuen.

Bevor Sie beginnen

Vorbereitung:

• Logo- und Favicon-Dateien
• Markenfarben für Schaltflächen, Text, Hintergründe und Hinweismeldungen
• Anforderungen an die Schriftart
• Beispiele für Seiten oder Phasen des Bestellvorgangs, die überprüft werden müssen
• Genehmigung durch das für Rechtsfragen, Analysen und das Kaufabwicklungsverhalten zuständige Team, sofern Ausschnitte betroffen sind

Öffnen Sie den Design-Editor

Öffnen Sie im Backoffice den Menüpunkt Shops, wählen Sie den Shop aus und öffnen Sie den Menüpunkt Theme.

Nutzen Sie die Designoptionen für Farben, Typografie, Abstände, Rahmen, Schaltflächenstile, semantische Farben, Medien und Kontrastprüfungen.

Nutzen Sie zunächst die Design-Einstellungen

Veröffentlichen Sie das Theme erst, nachdem Sie die Startseite des Shops, die Angebotsdetailseite, den Warenkorb, den Bestellvorgang sowie den Zahlungs- oder Bestätigungsstatus überprüft haben.

Barrierefreie Farben für Eingabefelder prüfen

Die WCAG-Kontrastprüfungen werden aktualisiert, während Sie den hellen, dunklen oder kontrastreichen Modus bearbeiten. Effektiver Eingabetext und Platzhaltertext müssen gegenüber der Füllfarbe jeweils ein Kontrastverhältnis von 4,5:1 erreichen. Gegenüber jedem angrenzenden konfigurierten Hintergrund, jeder Oberfläche und jeder erhöhten Oberfläche muss entweder die Füllfarbe oder der sichtbare Rahmen das Eingabefeld mit 3:1 abgrenzen. Die zwei Pixel breite Tastatur-Fokusmarkierung muss gegenüber jeder dieser umgebenden Oberflächen 3:1 erreichen. Bei nicht ausgewählten Kontrollkästchen und Optionsfeldern muss entweder die nicht ausgewählte Füllung oder der sichtbare Rahmen das Steuerelement gegenüber jeder Farbe, auf der es erscheinen kann, mit 3:1 abgrenzen. Dazu gehört auch die Füllfarbe von Eingabefeldern. Bei ausgewählten Steuerelementen muss die Markierung gegenüber der ausgewählten Füllung 3:1 erreichen. Außerdem muss entweder die ausgewählte Füllung oder der sichtbare Rahmen das Steuerelement gegenüber denselben angrenzenden Farben mit 3:1 abgrenzen.

Der Online-Shop leitet aus den vorhandenen Text-, Oberflächen-, Rahmen- und Primärfarben eigene barrierefreie Farben für Eingabefelder und Auswahlsteuerelemente ab. Eine konfigurierte Farbe bleibt erhalten, wenn sie bereits WCAG AA erfüllt. Andernfalls passt der Shop die effektive Eingabefeld- oder Auswahlfarbe mit der kleinstmöglichen sinnvollen Änderung in Richtung Schwarz oder Weiß an. Diese Anpassung gilt für standardisierte Eingabefelder, Kontrollkästchen und Optionsfelder. Sie ersetzt weder die im Design-Editor gespeicherte Farbe noch dieselbe Markenfarbe an anderen Stellen.

Entwurfsänderungen werden auch dann weiter gespeichert, wenn Prüfungen fehlschlagen. Theme veröffentlichen ist deaktiviert, sobald ein konfigurierter Modus einen eindeutigen WCAG-AA-Kontrastfehler enthält. Öffnen Sie die fehlgeschlagene Prüfung, aktualisieren Sie die hervorgehobenen Farbregler und stellen Sie vor der Veröffentlichung sicher, dass alle konfigurierten Modi die Prüfungen bestehen. Prüfungen mit dem Status „Ausstehend“, weil optionale Farben leer sind, blockieren die Veröffentlichung nicht; für diese Eingabefelder verwendet der Shop barrierefreie Ersatzfarben. Wenn ein anderer Benutzer oder die automatische Speicherung den gespeicherten Entwurf während der Veröffentlichung ändert, prüft der Server diesen neuesten Entwurf und blockiert ein nicht barrierefreies Ergebnis. Der Editor lädt anschließend den neuesten Entwurf und führt Sie zu den fehlgeschlagenen Prüfungen zurück. Falls der Entwurf nicht geladen werden kann, laden Sie die Seite neu, bevor Sie die Farben korrigieren.

Setzen Sie Snippets mit Bedacht ein

Öffnen Sie Code-Schnipsel nur, wenn Sie genehmigtes benutzerdefiniertes CSS, Analytics-Tags, Consent-Manager-Code, Trusted-Shop-Badges oder Partner-Skripte benötigen.

Verwenden Sie „Benutzerdefiniertes CSS hinzufügen“ für kleine Anpassungen am Layout. Verwenden Sie „HTML-/JavaScript-Schnipsel hinzufügen“ ausschließlich für Skripte, die genehmigt und getestet wurden.

Verwenden Sie den unterstützten CSS-Vertrag

Wenn die Design-Einstellungen nicht ausreichen, verwenden Sie die CSS-Referenz für den Online-Shop. Sie wird aus dem geprüften Anpassungsvertrag des Shops generiert und ist auf Englisch verfügbar.

Gehen Sie in dieser Reihenfolge vor:

1. Überschreiben Sie ein unterstütztes Token wie --color-btn-primary-bg, --color-text-body oder --radius-lg.
2. Wenn sich die Änderung nicht über ein Token ausdrücken lässt, begrenzen Sie die Regel mit einem stabilen data-shop-*-Hook.
3. Testen Sie die betroffene Seite und den vollständigen Bestellvorgang in allen unterstützten Designmodi und Ansichtsgrößen.

Beispiel:

:root {
  --color-btn-primary-bg: #0057b8;
}

[data-shop-section="header"] {
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}

[data-shop-shell="checkout"] [data-shop-component="request-item-card"] {
  border-radius: var(--radius-lg);
}

Erstellen Sie keine dauerhaft gepflegten Anpassungen auf Grundlage von data-route-id, Tailwind-Hilfsklassen, DOM-Abstammung wie :nth-child, generierten IDs, data-block-id oder nicht aufgeführten privaten Attributen. Dabei handelt es sich um Implementierungsdetails, die sich ohne Ankündigung ändern können. Nur die Tokens und data-shop-*-Hooks in der generierten Referenz sind unterstützte Anpassungspunkte.

Checkliste für sicheres benutzerdefiniertes CSS

Vor der Veröffentlichung von CSS:

• Bereichsauswahl für den gewünschten Ladenbereich
• Vermeiden Sie es, erforderliche Formularbezeichnungen, Zahlungssteuerelemente oder rechtliche Kontrollkästchen auszublenden
• Test für Desktop und Mobilgeräte
• Testen Sie lange Veranstaltungsnamen, den Status „ausverkauft“, Fehlermeldungen und Pflichtfelder
• Führen Sie Buch darüber, welche CSS-Änderungen vorgenommen werden und wer dafür verantwortlich ist
• Veraltetes CSS entfernen, nachdem es durch die Theme-Einstellungen ersetzt werden kann

Erwartetes Ergebnis

Der Shop spiegelt die Marke des Veranstalters wider, ist sowohl auf Mobilgeräten als auch auf Desktop-Computern gut lesbar und ermöglicht es den Kunden, den Bestellvorgang ohne Probleme hinsichtlich Layout, Kontrast, Einwilligung oder Zahlung abzuschließen.

Fehlerbehebung

Verwandte Artikel

• Konfigurieren Sie Ihren Online-Shop
• CSS-Referenz für den Online-Shop (Englisch)
• Starten Sie Ihren ersten Online-Shop