Så använder du anpassad CSS för att formge Klaviyo Reviews-widgetar

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 kan du gå till vår utvecklarresurs om anpassad CSS för Klaviyo Reviews. De flesta widget-anpassningar kan implementeras med redigerare med dra och släpp; CSS krävs bara för avancerade användningsfall.

Om anpassad CSS för Klaviyo Reviews

Klaviyo Reviews erbjuder ett brett utbud av CSS-klassväljare som kan användas för att skriva anpassad CSS och tillämpa avancerade stilalternativ på dina granskningswidgetar. Mer information finns i vår fullständiga ordlista över CSS-klasser för Klaviyo Reviews.

Så här använder du anpassad CSS

Du kan använda anpassad CSS på Klaviyo Reviews på samma sätt som du skulle använda vilken annan anpassad CSS som helst:

• Lägg till anpassad CSS i webbplatsens huvudsakliga CSS-formatmall.
• Infoga <style> -taggar i en enskild sidas kod för att tillämpa CSS på den sidan.
• Bädda in CSS i ett enda HTML-element (t.ex. en div) för att bara tillämpa det på det elementet.
• Lägg till anpassad CSS på hela webbplatsen i Temainställningar > Anpassad CSS (Shopify) eller Stilar > CSS (WooCommerce).

Vi fokuserar på det sista alternativet här, eftersom det är det enklaste att implementera.

Observera att Klaviyo Reviews, inklusive standardstilarna, vanligtvis läses in efter CSS från din e-handelsplattform. Det betyder att det är viktigt att använda exakta väljare, så att din anpassade CSS inte skrivs över av standardinställningarna.

Tillämpa anpassad CSS för Shopify

1. I Shopify går du till Webbutik > Teman.
2. I menyn för ytterligare alternativ (3 punkter) för ditt nuvarande tema klickar du på Duplicera.
   
   Vi rekommenderar inte att du gör ändringar i ditt nuvarande tema medan det är live, eftersom ändringarna kan visas för webbplatsbesökare innan du kan granska dem och felsöka eventuella problem.

3. Klicka på Anpassa bredvid den nya kopian av ditt tema.
4. Klicka på ikonen för temainställningar.
   

5. Välj Anpassad CSS på menyn.
   

6. Lägg till din anpassade CSS.
   

1. Navigera till en sida i redigeraren där dina recensionswidgetar visas (t.ex. Standardprodukt).
2. 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-YOUR_PAGE_ID , för att tillämpa CSS på en specifik sida eller sidor. Lär dig hur du hittar ett sid-ID.

1. I din Wordpress-administratör går du till Utseende > Redigerare.
2. Välj Stilar.
   

3. Öppna menyn med tre punkter (Mer).
4. Välj Ytterligare CSS.
   

5. Lägg till din anpassade CSS.
   

1. Granska ändringarna och klicka sedan på Publicera.

Användningsfall för anpassad CSS

CSS-kodsnuttarna nedan täcker några grundläggande användningsfall. Mer avancerad anpassning kräver stöd från en utvecklare. Om du inte har en utvecklare i ditt team och inte känner dig bekväm med att skriva kod själv kan du överväga att kontakta en Klaviyo-partner för hjälp.

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

Ytterligare resurser