Hoe je aangepaste CSS gebruikt om Klaviyo Reviews-widgets op te maken

Wat je leert

Meer informatie over aangepaste CSS voor Klaviyo Reviews, inclusief hoe je een paar basisusecases implementeert. Ga voor meer geavanceerde use cases naar onze developer resource over aangepaste CSS voor Klaviyo Reviews. De meeste widget-aanpassingen kun je implementeren met drag-and-drop-editors; CSS is alleen vereist voor geavanceerde use cases.

Over aangepaste CSS voor Klaviyo Reviews

Klaviyo Reviews biedt een breed scala aan CSS-classselectors, die je kunt gebruiken om aangepaste CSS te schrijven en geavanceerde opmaakopties toe te passen op je review-widgets. Ga voor meer informatie naar ons volledige woordenboek met CSS-klassen voor Klaviyo Reviews.

Aangepaste CSS toepassen

Je kunt aangepaste CSS toepassen op Klaviyo Reviews op dezelfde manier als je andere aangepaste CSS zou toepassen:

• Voeg aangepaste CSS toe aan het belangrijkste CSS-stylesheet van je site.
• Voeg <style> -tags in de code van één pagina in om CSS op die pagina toe te passen.
• Sluit CSS in één HTML-element in (bijv. een div) om het alleen op dat element toe te passen.
• Voeg aangepaste CSS toe aan je hele site in Thema-instellingen > Aangepaste CSS (Shopify) of Stijlen > CSS (WooCommerce).

We richten ons hier op de laatste optie, omdat die het eenvoudigst te implementeren is.

Let op: Klaviyo Reviews, inclusief de standaardstijlen, worden meestal geladen na CSS van je e-commerceplatform. Dit betekent dat het belangrijk is om nauwkeurige selectors te gebruiken, zodat je aangepaste CSS niet door de standaardinstellingen wordt overschreven.

Aangepaste CSS toepassen voor Shopify

1. Ga in je Shopify-beheeromgeving naar Webshop > Thema's.
2. Klik in het menu met extra opties (3 puntjes) voor je huidige thema op Dupliceren.
   
   Het wordt niet aanbevolen om bewerkingen aan je huidige thema te doen terwijl het live staat, omdat deze bewerkingen mogelijk aan sitebezoekers worden getoond voordat je de wijzigingen kunt beoordelen en eventuele problemen kunt oplossen.

3. Klik op Aanpassen naast de nieuwe kopie van je thema.
4. Klik op het pictogram Thema-instellingen.
   

5. Selecteer Aangepaste CSS in het menu.
   

6. Voeg je aangepaste CSS toe.
   

1. Navigeer naar een pagina in de editor waar je reviewwidgets verschijnen (bijv. Standaard product).
2. Controleer de bewerkingen en klik vervolgens op Publiceren.

Aangepaste CSS toevoegen voor WooCommerce

Je moet een pagina-ID-selector,.page-id-YOUR_PAGE_ID , gebruiken om CSS toe te passen op een specifieke pagina of pagina's. Ontdek hoe je een pagina-ID kunt vinden.

1. Ga in je WordPress-beheer naar Weergave > Editor.
2. Selecteer Stijlen.
   

3. Open het menu met de drie puntjes (Meer).
4. Selecteer Aanvullende CSS.
   

5. Voeg je aangepaste CSS toe.
   

1. Controleer de bewerkingen en klik vervolgens op Publiceren.

Use cases voor aangepaste CSS

De CSS-snippets hieronder behandelen een aantal basisgebruikssituaties. Voor meer geavanceerde aanpassingen heb je ondersteuning van een ontwikkelaar nodig. Als je geen ontwikkelaar in je team hebt en je je niet prettig voelt bij het zelf schrijven van code, overweeg dan om contact op te nemen met een Klaviyo-partner voor hulp.

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

Extra hulpbronnen