Como usar CSS personalizado para estilizar widgets do Klaviyo Reviews

O que você vai aprender

Saiba mais sobre CSS personalizado para o Klaviyo Reviews, incluindo como implementar alguns casos de uso básicos. Para casos de uso mais avançados, acesse nosso recurso para desenvolvedores sobre CSS personalizado para o Klaviyo Reviews. A maioria das personalizações de widget pode ser implementada usando editores de arrastar e soltar; o CSS só é necessário para casos de uso avançados.

Sobre CSS personalizado para o Klaviyo Reviews

O Klaviyo Reviews oferece uma ampla variedade de seletores de classe CSS, que podem ser usados para escrever CSS personalizado e aplicar opções avançadas de estilo aos seus widgets de avaliações. Para mais informações, acesse nosso dicionário completo de classes CSS do Klaviyo Reviews.

Como aplicar CSS personalizado

Você pode aplicar CSS personalizado ao Klaviyo Reviews da mesma forma que aplicaria qualquer outro CSS personalizado:

• Adicione CSS personalizado à folha de estilos CSS principal do seu site.
• Insira tags <style> no código de uma única página para aplicar CSS nessa página.
• Incorpore o CSS em um único elemento HTML (por exemplo, uma div) para aplicá-lo apenas a esse elemento.
• Adicione CSS personalizado ao site inteiro em Configurações do tema > CSS personalizado (Shopify) ou Estilos > CSS (WooCommerce).

Vamos focar na última opção aqui, porque ela é a mais simples de implementar.

Observe que o Klaviyo Reviews, incluindo os estilos padrão, geralmente carrega depois do CSS da sua plataforma de e-commerce. Isso significa que é importante usar seletores precisos, para que seu CSS personalizado não seja substituído pelos padrões.

Aplicar CSS personalizado para a Shopify

1. No admin da Shopify, navegue até Loja virtual > Temas.
2. No menu de opções adicionais (3 pontos) do seu tema atual, clique em Duplicar.
   
   Não é recomendável fazer edições no seu tema atual enquanto ele estiver no ar, pois essas edições podem aparecer para visitantes do site antes que você possa revisar as alterações e solucionar possíveis problemas.

3. Clique em Personalizar ao lado da nova cópia do seu tema.
4. Clique no ícone de configurações do tema.
   

5. Selecione CSS personalizado no menu.
   

6. Adicione seu CSS personalizado.
   

1. Navegue até uma página no editor em que seus widgets de avaliações aparecem (por exemplo, Produto padrão).
2. Revise as edições e, em seguida, clique em Publicar.

Adicione CSS personalizado para WooCommerce

Você precisa usar um seletor de ID de página,.page-id-YOUR_PAGE_ID , para aplicar CSS a uma página específica ou a páginas específicas. Saiba como encontrar um ID de página.

1. No admin do Wordpress, navegue até Aparência > Editor.
2. Selecione Estilos.
   

3. Abra o menu de três pontos (Mais).
4. Selecione CSS adicional.
   

5. Adicione seu CSS personalizado.
   

1. Revise as edições e, em seguida, clique em Publicar.

Casos de uso de CSS personalizado

Os snippets de CSS abaixo abrangem alguns casos de uso básicos. Uma personalização mais avançada exige suporte de desenvolvedor. Se você não tem um desenvolvedor na sua equipe e não se sente seguro para escrever código por conta própria, considere entrar em contato com um parceiro da Klaviyo para obter ajuda.

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

Recursos adicionais