O que você vai aprender
Saiba mais sobre CSS personalizado para o Klaviyo Reviews, inclusive como implementar alguns casos de uso básicos. Para casos de uso mais avançados, consulte nosso recurso de desenvolvedor sobre CSS personalizado para o Klaviyo Reviews. A maior parte da personalização dos widgets pode ser implementada usando editores do tipo arrastar e soltar; o CSS só é necessário para casos de uso avançado.
A implementação de CSS personalizado para os widgets de avaliações envolve a edição do código do site. Isso só é recomendado para profissionais de marketing tecnicamente experientes ou para aqueles que têm acesso a um desenvolvedor. Embora nosso produto seja compatível com CSS personalizado, nossa equipe de suporte não pode ajudá-lo a personalizar seus widgets além da orientação geral abordada nesta documentação. Para manter a segurança dos seus dados, a equipe de suporte da Klaviyo não pode abrir seus arquivos HTML.
Sobre o CSS personalizado para o Klaviyo Avaliações
O Klaviyo Reviews oferece uma ampla gama de seletores de classe CSS, que podem ser usados para escrever CSS personalizado e aplicar opções avançadas de estilo aos widgets de avaliações. Para obter mais informações, consulte nosso dicionário completo de classes CSS do Klaviyo Reviews.
Como aplicar CSS personalizadoComo aplicar CSS personalizado
O senhor pode aplicar CSS personalizado às avaliações do Klaviyo da mesma forma que aplicaria qualquer outro CSS personalizado:
- Adicione CSS personalizado à folha de estilo CSS principal do seu site.
- Insira as tags <style> no código de uma única página para aplicar CSS a essa página.
- Incorpore CSS em um único elemento HTML (por exemplo, uma div) para aplicá-lo somente a esse elemento.
- Adicione CSS personalizado a todo o site em Theme Settings (Configurações do tema) > Custom CSS (Shopify) ou Styles (Estilos) > CSS (WooCommerce).
Vamos nos concentrar na última opção aqui, porque é a mais simples de implementar.
Observe que as revisões do Klaviyo, incluindo os estilos padrão, geralmente são carregadas após o CSS da sua plataforma de comércio eletrônico. 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 ShopifyAplicar CSS personalizado para a Shopify
- Em seu admin da Shopify, navegue até Loja virtual > Themes.
- No menu de opções adicionais (3 pontos) do seu tema atual, clique em Duplicate (Duplicar).
Não é recomendável fazer edições no seu tema atual enquanto ele estiver no ar, pois essas edições podem aparecer para os visitantes do site antes que o senhor possa revisar as alterações e solucionar quaisquer problemas. - Clique em Customize (Personalizar ) ao lado da nova cópia do tema.
- Clique no ícone Configurações do tema.
- Selecione Custom CSS no menu.
- Adicione seu CSS personalizado.
Exemplos de trechos de CSS estão disponíveis na seção abaixo para serem copiados. - Navegue até uma página no editor em que os widgets de avaliações apareçam (por exemplo, Produto padrão).
- Revise as edições e clique em Publish (Publicar).
Adicionar CSS personalizado para o WooCommerce
O senhor deve usar um seletor de ID de página,.page-id-YOUR_PAGE_ID O usuário pode aplicar CSS a uma página ou páginas específicas. Saiba como encontrar um ID de página.
- Em seu administrador do Wordpress, navegue até Appearance > Editor.
- Selecionar estilos.
- Abra o menu de três pontos(More).
- Selecione Additional CSS.
- Adicione seu CSS personalizado.
Exemplos de trechos de CSS estão disponíveis na seção abaixo para serem copiados. - Revise as edições e clique em Publish (Publicar).
Casos de uso de CSS personalizado
Os trechos de CSS abaixo abrangem alguns casos básicos de uso. Uma personalização mais avançada requer suporte do desenvolvedor. Se o senhor não tiver um desenvolvedor na sua equipe e não se sentir à vontade para escrever códigos por conta própria, considere a possibilidade de entrar em contato com um parceiro da Klaviyo para obter ajuda.
Aparência do ícone de classificação (estrela)
Substitua os URLs abaixo pelos URLs das imagens que representam a estrela completa, a estrela parcial e a estrela vazia de sua preferência, respectivamente. Observe que, para as lojas da Shopify, seus URLs devem fazer referência a imagens armazenadas na Shopify, devido às suas regras.
#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;
}
}
Tamanho da miniatura da imagem
Defina uma largura específica para as imagens enviadas pelos clientes em sua lista de avaliações.
#klaviyo-product-reviews-wrapper .kl_reviews__review__image { width: 225px; }
Cores e estilos de botões
Aplicar estilos apenas ao botão Escrever uma avaliação.
#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(1) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
} Aplicar estilos apenas ao botão Fazer uma pergunta.
#klaviyo-product-reviews-wrapper .kl_reviews__button:nth-child(2) {
color: blue;
box-shadow: 0 0 15px #9ecaed;
}