Hoe aangepaste CSS gebruiken om Klaviyo widget met recensies te stylen
Wat je leert
Leer meer over aangepaste CSS voor Klaviyo Reviews, inclusief het implementeren van een aantal eenvoudige gebruikssituaties. Ga voor meer geavanceerde gebruikssituaties naar onze bron voor ontwikkelaars over aangepaste CSS voor Klaviyo Reviews. De meeste aanpassingen op widget kunnen worden geïmplementeerd met drag-and-drop editors; CSS is alleen nodig voor geavanceerd gebruik.
Voor het implementeren van aangepaste CSS voor je widget met beoordelingen moet je de code van je site bewerken. Dit is alleen aan te raden voor technisch onderlegde marketeers of degenen die toegang hebben tot een ontwikkelaar. Hoewel ons product support aangepaste CSS heeft, kan ons supportteam je niet helpen om je widget aan te passen buiten de algemene richtlijnen in deze documentatie. Om de veiligheid van je gegevens te waarborgen, kan Klaviyo's supportteam je HTML-bestanden niet openen.
Over aangepaste CSS voor Klaviyo Beoordelingen
Klaviyo Reviews biedt een groot aantal CSS class selectors, die kunnen worden gebruikt om aangepaste CSS te schrijven en geavanceerde stylingopties toe te passen op je reviews widget. Ga voor meer informatie naar ons complete woordenboek van Klaviyo Reviews CSS classes.
Hoe pas je aangepaste CSS toeHoe pas je aangepaste CSS toe
Je kunt aangepaste CSS toepassen op Klaviyo Reviews op dezelfde manier waarop je andere aangepaste CSS zou toepassen:
- Voeg aangepaste CSS toe aan het CSS-stylesheet van je site.
- Voeg de tag <style> in de code van een pagina in om CSS op die pagina toe te passen.
- CSS insluiten in een enkel HTML element (bijvoorbeeld 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 Styles > CSS (WooCommerce).
We richten ons hier op de laatste optie, omdat die het eenvoudigst te implementeren is.
Merk op dat Klaviyo Reviews, inclusief de standaard stijlen, over het algemeen worden geladen na CSS van je e-commerce platform. Dit betekent dat het belangrijk is om precieze selectors te gebruiken, zodat je aangepaste CSS niet wordt overschreven door de standaardinstellingen.
Aangepaste CSS toepassen voor ShopifyAangepaste CSS toepassen voor Shopify
- Navigeer in je Shopify admin naar webshop > Thema's.
- Klik in het menu met extra opties (3 puntjes) voor je huidige thema op Dupliceren.
Het is niet aan te raden om wijzigingen in je huidige thema aan te brengen terwijl het live staat, omdat deze wijzigingen zichtbaar kunnen zijn voor bezoekers van de site voordat je de wijzigingen kunt bekijken en eventuele problemen kunt oplossen. - Klik op Aanpassen naast de nieuwe kopie van je thema.
- Klik op het pictogram Thema-instellingen.
- Selecteer Aangepaste CSS in het menu.
- Voeg je aangepaste CSS toe.
Voorbeeld CSS fragmenten zijn beschikbaar in het gedeelte hieronder om te kopiëren. - Navigeer naar een pagina in de editor waar je beoordelingen widget verschijnt (bijvoorbeeld Standaard product).
- Controleer de bewerkingen en klik op Publiceren.
Aangepaste CSS toevoegen voor WooCommerce
Je moet een pagina-ID selector gebruiken,.page-id-YOUR_PAGE_ID om CSS toe te passen op een specifieke pagina of pagina's. Leer hoe je een pagina-ID kunt vinden.
- Navigeer in je Wordpress admin naar Uiterlijk > Editor.
- Selecteer stijlen.
- Open het menu met de drie puntjes(Meer).
- Selecteer Extra CSS.
- Voeg je aangepaste CSS toe.
Voorbeeld CSS fragmenten zijn beschikbaar in het gedeelte hieronder om te kopiëren. - Controleer de bewerkingen en klik op Publiceren.
Aangepaste CSS-gebruiksgevallen
De CSS-fragmenten hieronder behandelen enkele basisgebruiksgevallen. Voor geavanceerdere aanpassingen is ontwikkelaar support nodig. Als je geen ontwikkelaar in je team hebt en het niet prettig vindt om zelf code te schrijven, overweeg dan om een Klaviyo partner om hulp te vragen.
Uiterlijk beoordelingspictogram (ster)
Vervang de URL's hieronder door URL's met afbeeldingen die respectievelijk de volledige ster, gedeeltelijke ster en lege ster van je voorkeur weergeven. Merk op dat voor Shopify zaak, je URL's moeten verwijzen naar afbeeldingen zaak in Shopify, vanwege hun regels.
Klaviyo-product-reviews-wrapper {
.kl_reviews__star {
display: none;
}
.kl_beoordelingen__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_beoordelingen__gedeeltelijke_ster {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/last-quarter-moon.png?v=1705073898");
background-size: cover;
}
.kl_beoordelingen__leeg_ster {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/new-moon.png?v=1705073898");
background-size: cover;
}
}
Grootte miniatuurafbeelding
Stel een specifieke breedte in voor de door de klant ingezonden afbeeldingen in je beoordelingslijst.
Klaviyo-product-reviews-wrapper .kl_reviews__review__afbeelding { width: 225px; }
Knopkleuren en -stijlen
Pas stijlen toe op alleen de knop Schrijf een recensie.
Klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(1) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
} Pas stijlen toe op alleen de knop Stel een vraag.
Klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(2) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
}