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
| Gebiet | Was Sie überprüfen sollten |
|---|---|
| Markenwerte | Das Logo und das Favicon sind aktuell, gut lesbar und nicht verzerrt. |
| Farben | Text, Flächen, Schaltflächen, Rahmen, Hinweismeldungen und Links weisen einen ausreichenden Kontrast auf. |
| Typografie | Die Schriftarten sind auf Mobilgeräten gut lesbar und unterstützen die Sprachen des Shops. |
| Abstände und Rahmen | Karten, Formulare und Kassensysteme lassen sich weiterhin problemlos scannen. |
| Semantische Farben | Die Zustände „Fehler“, „Warnung“, „Erfolg“ und „Information“ bleiben voneinander getrennt. |
| Vorschau | Wählen Sie, sofern verfügbar, den hellen, den dunklen oder den kontrastreichen Modus aus. |
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.
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.
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
| Problem | Was Sie überprüfen sollten |
|---|---|
| Der Text ist schwer zu lesen | Farbkontrast des Themes, semantische Farben, benutzerdefinierte CSS-Überschreibungen und Bildhintergründe. |
| Das Layout der Kasse scheint fehlerhaft zu sein | Aktuelle Ausschnitte, lange Bezeichnungen, Breite für Mobilgeräte, Pflichtfelder, Kontrollkästchen für rechtliche Hinweise und Rahmen der Zahlungsanbieter. |
| Änderungen am Design sind nicht sichtbar | Status „Unveröffentlicht“, Browser-Cache, Shop-Domain und ob Sie den richtigen Shop aufrufen. |
| Die Analysefunktion oder die Einwilligungsfunktion funktioniert nicht mehr | Reihenfolge der Snippets, Einstellungen des Einwilligungsmanagers, blockierte Skripte und Einschränkungen auf der Checkout-Seite. |
| Ein benutzerdefinierter Stil wirkte sich auf eine andere Seite aus | Gültigkeitsbereich von Selektoren, gemeinsam genutzte Komponenten, Page-Builder-Blöcke und vererbtes CSS. |
