So verwendest du benutzerdefiniertes CSS, um Klaviyo Reviews-Widget zu gestalten

Übersicht

Erfahre mehr über benutzerdefiniertes CSS für Klaviyo Reviews, einschließlich der Implementierung einiger grundlegender Anwendungsfälle. Für fortgeschrittenere Anwendungsfälle schau dir unsere Entwicklerressource zu benutzerdefiniertem CSS für Klaviyo Reviews an. Die meisten Widget-Anpassungen lassen sich mit Drag-and-drop-Editoren umsetzen; CSS ist nur für fortgeschrittene Anwendungsfälle erforderlich.

Über benutzerdefiniertes CSS für Klaviyo Reviews

Klaviyo Reviews bietet eine große Auswahl an CSS-Klassenselektoren, mit denen du benutzerdefiniertes CSS schreiben und erweiterte Styling-Optionen auf deine Bewertungs-Widget anwenden kannst. Weitere Informationen findest du in unserem vollständigen Wörterbuch der Klaviyo Reviews CSS-Klassen.

So wendest du benutzerdefiniertes CSS an

Du kannst benutzerdefiniertes CSS auf Klaviyo Reviews auf die gleiche Weise anwenden, wie du jedes andere benutzerdefinierte CSS anwenden würdest:

• Füge benutzerdefiniertes CSS zum Haupt-CSS-Stylesheet deiner Website hinzu.
• Füge <style> -Tags in den Code einer einzelnen Seite ein, um CSS auf diese Seite anzuwenden.
• Bette CSS in ein einzelnes HTML-Element (z. B. ein div) ein, um es nur auf dieses Element anzuwenden.
• Füge benutzerdefiniertes CSS zu deiner gesamten Website unter Theme-Einstellungen > Benutzerdefiniertes CSS (Shopify) oder Stile > CSS (WooCommerce) hinzu.

Wir konzentrieren uns hier auf die letzte Option, weil sie am einfachsten umzusetzen ist.

Beachte, dass Klaviyo Reviews, einschließlich der Standard-Styles, in der Regel nach dem CSS von deiner E-Commerce-Plattform geladen wird. Das bedeutet, dass es wichtig ist, präzise Selektoren zu verwenden, damit dein benutzerdefiniertes CSS nicht durch die Standardwerte überschrieben wird.

Benutzerdefiniertes CSS für Shopify anwenden

1. Navigiere in deinem Shopify-Adminbereich zu Onlineshop > Themes.
2. Klicke im Menü „Zusätzliche Optionen“ (3 Punkte) für dein aktuelles Theme auf Duplizieren.
   
   Es wird nicht empfohlen, Änderungen an deinem aktuellen Theme vorzunehmen, während es live ist, da diese Änderungen möglicherweise für Website-Besucher*innen sichtbar sind, bevor du die Änderungen überprüfen und Probleme beheben kannst.

3. Klicke neben der neuen Kopie deines Themes auf Anpassen.
4. Klicke auf das Symbol für die Theme-Einstellungen.
   

5. Wähle Benutzerdefiniertes CSS aus dem Menü aus.
   

6. Füge dein benutzerdefiniertes CSS hinzu.
   

1. Navigiere im Editor zu einer Seite, auf der deine Bewertungs-Widgets angezeigt werden (z. B. Standardprodukt).
2. Überprüfe die Änderungen und klicke dann auf Veröffentlichen.

Benutzerdefiniertes CSS für WooCommerce hinzufügen

Du musst einen Seiten-ID-Selektor,.page-id-YOUR_PAGE_ID , verwenden, um CSS auf eine bestimmte Seite oder bestimmte Seiten anzuwenden. Erfahre, wie du eine Seiten-ID findest.

1. Navigiere in deiner WordPress-Administration zu Design > Editor.
2. Wähle Stile aus.
   

3. Öffne das Menü mit den drei Punkten (Mehr).
4. Wähle Zusätzliches CSS aus.
   

5. Füge dein benutzerdefiniertes CSS hinzu.
   

1. Überprüfe die Änderungen und klicke dann auf Veröffentlichen.

Anwendungsfälle für benutzerdefiniertes CSS

Die CSS-Snippets unten decken einige grundlegende Anwendungsfälle ab. Für fortgeschrittenere Anpassungen ist Support durch Entwickler*innen erforderlich. Wenn du keine Entwickler*innen in deinem Team hast und dich beim Schreiben von Code nicht wohl fühlst, solltest du dich für Unterstützung an einen Klaviyo Partner wenden.

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

#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(1) {
   color: blue;
   box-shadow: 0 0 15px #9ecaed;
}  

#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(2) {
   color: blue;
   box-shadow: 0 0 15px #9ecaed;
}