Du wirst lernen
Erfahre mehr über benutzerdefinierte CSS für Klaviyo Reviews und wie du einige grundlegende Anwendungsfälle implementierst. Für fortgeschrittene Anwendungsfälle schau dir unsere Entwickler-Ressourcen zu benutzerdefinierten CSS für Klaviyo Reviews an. Die meisten Widget-Anpassungen können mit Drag-and-Drop-Editoren vorgenommen werden; CSS ist nur für fortgeschrittene Anwendungsfälle erforderlich.
Die Implementierung von benutzerdefiniertem CSS für dein Bewertungs-Widget erfordert die Bearbeitung des Codes deiner Website. Dies wird nur für technisch versierte Marketer empfohlen oder für diejenigen, die Zugang zu einem Entwickler haben. Obwohl unser Produkt benutzerdefinierte CSS unterstützt, kann unser Support-Team dir nicht dabei helfen, dein Widget über die allgemeine Anleitung in dieser Dokumentation hinaus anzupassen. Um die Sicherheit deiner Daten zu gewährleisten, kann das Support-Team von Klaviyo deine HTML-Dateien nicht öffnen.
Über benutzerdefiniertes CSS für Klaviyo Reviews
Klaviyo Reviews bietet eine breite Palette von CSS-Klassenselektoren, mit denen du benutzerdefiniertes CSS schreiben und erweiterte Stylingoptionen auf dein Bewertungs-Widget anwenden kannst. Weitere Informationen findest du in unserem vollständigen Wörterbuch der CSS-Klassen von Klaviyo Reviews.
Wie man benutzerdefiniertes CSS anwendetWie man benutzerdefiniertes CSS anwendet
Du kannst benutzerdefiniertes CSS auf Klaviyo Reviews auf die gleiche Weise anwenden wie jedes andere benutzerdefinierte CSS:
- Füge benutzerdefiniertes CSS zum Haupt-CSS-Stylesheet deiner Website hinzu.
- Füge <style> Tag in den Code einer einzelnen Seite ein, um CSS auf diese Seite anzuwenden.
- CSS in ein einzelnes HTML-Element (z. B. ein div) einbetten, um es nur auf dieses Element anzuwenden.
- Füge benutzerdefinierte CSS für deine gesamte Website in den Themeneinstellungen > Custom CSS (Shopify) oder Styles > CSS (WooCommerce) hinzu.
Wir konzentrieren uns hier auf die letzte Option, weil sie am einfachsten zu implementieren ist.
Beachte, dass Klaviyo Reviews, einschließlich der Standardstile, in der Regel nach dem CSS von deiner E-Commerce-Plattform geladen werden. Das bedeutet, dass es wichtig ist, präzise Selektoren zu verwenden, damit dein eigenes CSS nicht von den Standardeinstellungen überschrieben wird.
Benutzerdefiniertes CSS für Shopify anwendenBenutzerdefiniertes CSS für Shopify anwenden
- Navigiere in deinem Shopify Admin zu Online-Shop > Themes.
- Klicke im Menü der zusätzlichen Optionen (3 Punkte) für dein aktuelles Thema auf Duplizieren.
Es ist nicht empfehlenswert, Änderungen an deinem aktuellen Theme vorzunehmen, während es live ist, da diese Änderungen für die Besucher der Website angezeigt werden können, bevor du die Änderungen überprüfen und eventuelle Probleme beheben kannst. - Klicke auf Anpassen neben der neuen Kopie deines Themas.
- Klicke auf das Symbol für die Themeneinstellungen.
- Wähle Benutzerdefiniertes CSS aus dem Menü.
- Füge dein eigenes CSS hinzu.
Beispiele für CSS-Schnipsel zum Kopieren findest du im Abschnitt unten. - Navigiere im Editor zu einer Seite, auf der dein Bewertungs-Widget erscheint (z. B. Standardprodukt).
- Überprüfe die Änderungen und klicke dann auf Veröffentlichen.
Benutzerdefiniertes CSS für WooCommerce hinzufügen
Du musst einen Seiten-ID-Selektor verwenden,.page-id-YOUR_PAGE_ID , um CSS auf eine bestimmte Seite oder mehrere Seiten anzuwenden. Lerne, wie man eine Seiten-ID findet.
- Navigiere in deinem Wordpress-Admin zu Erscheinungsbild > Editor.
- Wähle Stile.
- Öffne das Menü mit den drei Punkten(Mehr).
- Wähle Zusätzliches CSS.
- Füge dein eigenes CSS hinzu.
Beispiele für CSS-Schnipsel zum Kopieren findest du im Abschnitt unten. - Überprüfe die Änderungen und klicke dann auf Veröffentlichen.
Benutzerdefinierte CSS Anwendungsfälle
Die folgenden CSS-Schnipsel decken einige grundlegende Anwendungsfälle ab. Weitergehende Anpassungen erfordern den Support eines Entwicklers. Wenn du keinen Entwickler in deinem Team hast und dich nicht wohl dabei fühlst, selbst Code zu schreiben, kannst du dich an einen Klaviyo-Partner wenden.
Aussehen des Bewertungssymbols (Stern)
Ersetze die URLs unten durch Bild-URLs, die deinen bevorzugten vollen Stern, Teilstern bzw. leeren Stern darstellen. Beachte, dass für Shopify Laden, deine URLs auf Bilder verweisen müssen, die in Shopify geladen sind.
Klaviyo-product-reviews-wrapper {
.kl_reviews__star {
display: none;
}
.kl_reviews__full_star {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/full-moon.png?v=1705073898");
background-size: cover;
}
.kl_reviews__partial_star {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/last-quarter-moon.png?v=1705073898");
background-size: cover;
}
.kl_reviews__empty_star {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/new-moon.png?v=1705073898");
background-size: cover;
}
}
Größe der Bildminiatur
Lege eine bestimmte Breite für die vom Kunden eingereichten Bilder in deiner Übersichtsliste fest.
Klaviyo-product-reviews-wrapper .kl_reviews__review__image { width: 225px; }
Farben und Stile der Knöpfe
Wende Stile nur auf die Schaltfläche " Bewertung schreiben" an.
Klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(1) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
} Wende Stile nur auf die Schaltfläche " Eine Frage stellen" an.
Klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(2) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
}