Så här använder du anpassad CSS för att styla Klaviyo Reviews widget
Du kommer att lära dig
Lär dig mer om anpassad CSS för Klaviyo Reviews, inklusive hur du implementerar några grundläggande användningsfall. För mer avancerade användningsfall, gå till vår utvecklarresurs om anpassad CSS för Klaviyo Reviews. De flesta widget anpassningar kan implementeras med hjälp av dra och släpp-redigerare; CSS krävs endast för avancerade användningsfall.
Att implementera anpassad CSS för din widget för recensioner innebär att du måste redigera webbplatsens kod. Detta rekommenderas endast för tekniskt kunniga marknadsförare eller för dem som har tillgång till en utvecklare. Även om vår produkt har support anpassad CSS, kan vårt team på supportinte hjälpa dig att anpassa din widget utöver den allmänna vägledning som beskrivs i denna dokumentation. För att upprätthålla säkerheten för din data, Klaviyo och supportkan teamet inte öppna dina HTML-filer.
Om anpassad CSS för Klaviyo Reviews
Klaviyo Reviews tillhandahåller ett brett utbud av CSS-klassväljare, som kan användas för att skriva anpassad CSS och tillämpa avancerade stylingalternativ på din widget för recensioner. För mer information, gå till vår fullständiga ordlista över Klaviyo Reviews CSS-klasser.
Hur man använder anpassad CSSHur man använder anpassad CSS
Du kan tillämpa anpassad CSS på Klaviyo Reviews på samma sätt som du skulle tillämpa annan anpassad CSS:
- Lägg till anpassad CSS i webbplatsens huvudsakliga CSS-stilmall.
- Infoga <style> etikett i koden för en enskild sida för att tillämpa CSS på den sidan.
- Bädda in CSS i en enda HTML element (t.ex. en div) för att tillämpa det bara på den element.
- Lägg till anpassad CSS på hela webbplatsen i Temainställningar > Anpassad CSS (Shopify) eller Stilar > CSS (WooCommerce).
Vi kommer att fokusera på det sista alternativet här, eftersom det är enklast att implementera.
Observera att Klaviyo Reviews, inklusive standardstilarna, i allmänhet laddas efter CSS från din e-handelsplattform. Det innebär att det är viktigt att använda exakta väljare, så att din anpassade CSS inte skrivs över av standardvärdena.
Tillämpa anpassad CSS för ShopifyTillämpa anpassad CSS för Shopify
- I din Shopify admin, navigera till webbutik > Teman.
- Klicka på Duplicerai menyn för ytterligare alternativ (3 prickar) för ditt aktuella tema.
Det är inte rekommenderat att göra ändringar i ditt nuvarande tema medan det är live, eftersom dessa ändringar kan visas för webbplatsens besökare innan du kan granska ändringarna och felsöka eventuella problem. - Klicka på Customize bredvid den nya kopian av ditt tema.
- Klicka på ikonen Temainställningar.
- Välj Anpassad CSS från menyn.
- Lägg till din anpassade CSS.
I avsnittet nedan finns exempel på CSS-snuttar som du kan kopiera. - Navigera till en sida i redigeringsverktyget där din widget för recensioner visas (t.ex. Standardprodukt).
- Granska ändringarna och klicka sedan på Publicera.
Lägg till anpassad CSS för WooCommerce
Du måste använda en sid-ID-väljare,.page-id-DITT_PAGE_ID , för att tillämpa CSS på en viss sida eller vissa sidor. Lär dig hur du hittar ett sid-ID.
- I din Wordpress-admin navigerar du till Utseende > Editor.
- Välj stilar.
- Öppna menyn med de tre prickarna(Mer).
- Välj Ytterligare CSS.
- Lägg till din anpassade CSS.
I avsnittet nedan finns exempel på CSS-snuttar som du kan kopiera. - Granska ändringarna och klicka sedan på Publicera.
Användningsfall för anpassad CSS
CSS-klippen nedan täcker några grundläggande användningsområden. Mer avancerade anpassningar kräver utvecklare support. Om du inte har en utvecklare i ditt team och inte känner dig bekväm med att skriva kod själv, överväg att kontakta en Klaviyo-partner för att få hjälp.
Betygsikon (stjärna) utseende
Ersätt URL-adresserna nedan med bild-URL-adresser som representerar den fulla stjärnan, den partiella stjärnan respektive den tomma stjärnan som du föredrar. Observera att för Shopify butik måste dina webbadresser referera till bilder som finns i Shopify butik, på grund av deras regler.
Klaviyo-produkt-recensioner-omslag {
.kl_reviews__star {
display: none;
}
.kl_recensioner__full_stjärna {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/full-moon.png?v=1705073898");
background-size: cover;
}
.kl_recensioner__delvis_stjärna {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/last-quarter-moon.png?v=1705073898");
background-size: cover;
}
.kl_recensioner__tomma_stjärnor {
background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/new-moon.png?v=1705073898");
background-size: cover;
}
}
Storlek på miniatyrbild av bild
Ange en specifik bredd för de kundinlämnade bilderna i din granskningslista.
Klaviyo-produkt-reviews-wrapper .kl_reviews__review__bild { width: 225px; }
Färger och stilar på knappar
Tillämpa stilar på bara knappen Skriv en recension.
Klaviyo-produkt-reviews-wrapper .kl_reviews__button:nth-child(1) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
} Tillämpa stilar på bara knappen Ställ en fråga.
Klaviyo-produkt-reviews-wrapper .kl_reviews__button:nth-child(2) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
}