Como personalizar widgets de avaliações
Saiba como personalizar a aparência dos seus widgets de avaliações (por exemplo, os blocos na sua loja que exibem e aceitam avaliações de produtos).
Widgets de avaliações disponíveis
O Klaviyo Reviews oferece vários widgets que você pode adicionar à sua loja:
- Widget de avaliação por estrelas
Exibe sua avaliação por estrelas atual de um produto específico e, na maioria das vezes, é adicionado abaixo do nome do seu produto.
- Widget de resumo de avaliações
Mostra um gráfico que detalha todas as avaliações que um produto recebeu, imagens de usuários enviadas com as avaliações e o feedback de cliente mais comum. Geralmente, ele é adicionado perto do final de uma página de produto.
- Widget de lista de avaliações
Exibe uma lista de todas as avaliações publicadas e perguntas de clientes, além de uma barra de pesquisa, filtros, um botão Escrever uma avaliação e um botão Fazer uma pergunta. Na maioria das vezes, ele é adicionado imediatamente abaixo do widget de resumo de avaliações.
- Widget de avaliações de produtos
Uma combinação dos widgets de resumo de avaliações e de lista de avaliações acima. Se você adicionar o widget de avaliações de produtos ao seu site, não será necessário adicionar os widgets de lista de avaliações e de resumo de avaliações separadamente. - Widget de carrossel de avaliações em destaque
Exibe avaliações selecionadas de qualquer um dos seus produtos. Isso pode ser exibido na sua página inicial, em uma página de avaliações independente ou em qualquer outro lugar do seu site. Você pode selecionar as avaliações que aparecem em destaque neste widget. Se disponível, imagens enviadas pelos clientes acompanham cada avaliação; suas imagens de produto são usadas se nenhuma imagem tiver sido enviada junto com a avaliação.
- O widget de SEO/todos os widgets de avaliações exibe todas as suas avaliações de todos os produtos em uma única página. Use esse widget para melhorar seu SEO e oferecer um único lugar para clientes potenciais verem o que seus clientes atuais adoram. Este widget é mais frequentemente adicionado a uma página independente de Avaliações no seu site.
Esses widgets são totalmente personalizáveis, o que significa que você pode escolher as fontes e as cores da sua marca, além de selecionar manualmente avaliações para destacar no carrossel de avaliações em destaque.
Selecione um idioma para widgets de avaliações e páginas de envio
Por padrão, todo o conteúdo de Klaviyo Reviews fica em inglês. Para selecionar outro idioma:
- Acesse a aba Avaliações na Klaviyo.
- Clique em Configurações de avaliações.
- Selecione Geral.
- No menu Selecionar idioma, escolha seu idioma.
Atualizar o idioma do Klaviyo Reviews se aplica a:
- Página de envio de avaliação
- Widgets no site
- Widget de classificação por estrelas
- Widget de resumo da avaliação
- Revisar widget de lista
- Widget de avaliação de produtos
- Widget de carrossel de avaliações em destaque
Você não pode atualizar a configuração de idioma de apenas um widget; todos os widgets precisam usar o mesmo idioma. Todos os widgets e a página de envio são atualizados imediatamente, inclusive os que já estão ativos no seu site.
Atualizar seu idioma para o Klaviyo Reviews não se aplica a nenhum outro recurso da Klaviyo (por exemplo, perguntas personalizadas, fluxo, formulário de registro, páginas de preferências, o conteúdo de avaliações enviadas por clientes etc.). Eles precisam ser traduzidos e editados manualmente.
Oculte widgets de avaliações até que um produto tenha recebido avaliações
Estas instruções se aplicam ao widget de classificação por estrelas e ao widget de lista de avaliações.
Por padrão, um produto sem avaliações mostrará 0/5 estrelas e uma mensagem indicando que nenhuma avaliação foi enviada ainda. Se você preferir ocultar o widget até receber avaliações, siga estas etapas:
- Abra a guia Avaliações na Klaviyo.
- Selecione Configurações de avaliações.
- Clique em Widgets no site.
- Selecione Avaliações de produtos ou Avaliação por estrelas.
- Abra o menu Estado vazio.
- Desative a configuração Mostrar com zero estrelas.
Alterar a aparência do widget
Siga estas etapas para ajustar o estilo (por exemplo, fontes, cores e muito mais) de qualquer widget de avaliações.
- Abra a guia Avaliações na Klaviyo.
- Selecione Configurações de avaliações.
- Clique em Widgets no site.
- Escolha o widget que você gostaria de editar.
- Clique em Layout e estilo.
- Ajuste a aparência do widget como quiser, incluindo fontes, cores e espaçamento.
Alterar uma configuração em um widget de avaliações (por exemplo, a cor do botão) não afeta essa configuração em outros widgets, com exceção do widget de SEO / todas as avaliações. Este widget herda todas as configurações do widget de avaliações de produtos. Para personalizar a aparência do widget de SEO / todas as avaliações, mas não do widget de avaliações de produto, você precisa usar CSS personalizado.
Configurações de estilo de avaliação disponíveis
Abra cada menu suspenso para saber mais sobre as opções de estilo disponíveis para essa categoria.
Widget de avaliação de produtos
Na seção Layout e estilo das configurações de estilo de avaliações de produto, você pode ajustar as seguintes configurações:
- Margem
Ajuste o espaço na parte superior, inferior, esquerda e/ou direita do widget. - Cor de fundo principal
Ative esta configuração para adicionar uma cor de fundo para toda a área do widget. - Cor de fundo secundária
Edite a cor de determinados elementos do widget, como barras de histograma. - Cor de destaque
Edite a cor usada para vários destaques, incluindo a seleção em uma pergunta de intervalo e os selos de avaliador verificado. - Raio do canto
Aplique cantos arredondados a toda a área do widget de avaliações de produtos. Observe que isso só fica visível se você adicionar uma cor de plano de fundo principal. - Linhas de divisão
Adicione linhas opcionais entre cada avaliação. - Fonte principal
Escolha Herdar do site para usar a fonte atual do seu site ou selecione uma fonte. A configuração de Fonte principal se aplica a todas as fontes do widget, exceto:- O rótulo #/5 na seção Avaliações de clientes.
- O carimbo de data/hora em cada avaliação.
- O texto do rótulo no histograma de estrelas.
- O texto provisório no campo de pesquisa.
- Fonte secundária
Escolha Herdar do site para usar a fonte atual do seu site ou selecione uma fonte. A configuração de Fonte secundária se aplica ao histograma de estrelas, ao campo de pesquisa, ao registro de data/hora de cada avaliação e ao rótulo #/5 na seção Avaliações de clientes. - Tamanho, espessura e cor da fonte
Ajuste o tamanho, a espessura e a cor das fontes principal e secundária, respectivamente. - Configurações do botão
- Cor
Cor do botão. - Raio do canto
O arredondamento dos cantos do botão. Defina como 0 para não arredondar. - Borda
Uma borda colorida ao redor do botão. - Especificar cor ao passar o mouse
Se os botões devem mudar de cor ao passar o mouse, ative esta configuração. - Preenchimento
Preenchimento dentro de cada botão, ao redor do texto do botão. Adicionar preenchimento fará com que o botão pareça maior. - Fonte, tamanho da fonte, espessura da fonte, cor da fonte
A fonte usada para os botões do widget.
- Cor
- Configurações de avaliação
- Cor preenchida
A cor das estrelas selecionadas (por exemplo, se um produto for avaliado com 4/5 estrelas, as primeiras 4 estrelas usam essa cor). - Cor vazia
A cor das estrelas não selecionadas (por exemplo, se um produto receber uma classificação de 4/5 estrelas, a 5ª estrela usa essa cor). - Borda
Uma borda colorida opcional ao redor de todas as estrelas. - Espaçamento
O espaço entre cada estrela. - Forma
Escolha estilos alternativos de classificação, como estrelas pontiagudas, corações arredondados e muito mais. - Tamanho
- Resumo
O tamanho das estrelas no resumo de avaliações. - Revisar
O tamanho das estrelas em cada avaliação de cliente.
- Resumo
- Cor preenchida
- Configurações de filtros
As configurações deFiltros se aplicam ao campo de pesquisa e aos filtros de avaliação.- Cor de fundo
A cor de fundo dos botões de filtro e da barra de pesquisa. - Largura do traço, cor com atividade
A largura e a cor da borda que indica uma opção de filtro com atividade (ou seja, selecionada). (Mínimo: 1.) - Raio do canto
O arredondamento dos cantos no campo de pesquisa. Para não arredondar, selecione 0 px. - Ícone de pesquisa
Ative ou desative o ícone de pesquisa de lupa.
- Cor de fundo
- Configurações de imagem
- Raio do canto das imagens de resumo
Arredondamento na seleção de imagens de resumo no resumo da avaliação. - Raio do canto das imagens de avaliações
Arredondamento de cada imagem nas avaliações individuais. - Tamanho das imagens da avaliação
O tamanho das imagens incluídas em avaliações individuais.
- Raio do canto das imagens de resumo
Carrossel de avaliações em destaque
Na seção Layout das configurações de estilo do carrossel de avaliações em destaque, você pode ajustar as seguintes configurações:
- Título da seção
Adicione um rótulo, Avaliações de clientes, a este widget. - Tipo de carrossel
Escolha se o carrossel deve exibir imagens ou apenas texto. - Máximo de avaliações por página
Escolha quantas avaliações em destaque serão exibidas por página. - Limite de texto
Escolha quantas linhas de texto incluir em cada prévia de avaliação. - Margem
Ajuste o espaço na parte superior, inferior, esquerda e/ou direita do widget. - Alinhamento de texto
Se o texto deve ser alinhado à esquerda, à direita ou ao centro. - Itens do cartão
Ative ou desative a opção de exibir a data, o autor e o selo de verificação de uma avaliação.
Na seção Estilo das configurações de estilo do carrossel de avaliações em destaque, você pode ajustar as seguintes configurações:
- Configurações de fonte do título da seção
Fonte, cor da fonte e tamanho da fonte do título da seção. Observe que Título da seção deve estar ativado em Layout para que essa configuração seja aplicada ao seu widget. - Altura da imagem
Edite o tamanho da imagem incluída com a pré-visualização da avaliação. - Raio dos cantos
Modifique o arredondamento dos cantos em cada bloco de avaliação em destaque. - Cor do cartão
Adicione uma cor de fundo a cada bloco de avaliação. - Sombra
Adicione ou remova uma sombra dos cards. - Borda
Adicione ou remova uma borda dos cartões. - Configurações de estilo de classificação
- Cor preenchida
A cor das estrelas selecionadas (por exemplo, se um produto for avaliado com 4/5 estrelas, as primeiras 4 estrelas usam essa cor). - Cor vazia
A cor das estrelas não selecionadas (por exemplo, se um produto receber uma classificação de 4/5 estrelas, a 5ª estrela usa essa cor). - Borda
Uma borda colorida opcional ao redor de todas as estrelas. - Espaçamento
O espaço entre cada estrela. - Tamanho
O tamanho das estrelas em cada avaliação de cliente. - Forma
Escolha estilos alternativos de classificação, como estrelas pontiagudas, corações arredondados e muito mais.
- Cor preenchida
- Configurações de fonte do título da avaliação
Escolha Herdar do site para usar a fonte do seu site existente ou selecione uma fonte, além de tamanho, espessura e cor. - Revisar as configurações de fonte do corpo
Escolha Herdar do site para usar a fonte atual do seu site ou selecione uma fonte e o tamanho, a espessura e a cor da fonte. - Configurações de fonte dos rótulos de data e nome
Escolha Herdar do site para usar a fonte existente do seu site ou selecione uma fonte e o tamanho, a espessura e a cor da fonte.
Classificação por estrelas
- Margem
Ajuste o espaço na parte superior, inferior, esquerda e/ou direita do widget. - Configurações de estilo de classificação
- Cor preenchida
A cor das estrelas selecionadas (por exemplo, se um produto for avaliado com 4/5 estrelas, as primeiras 4 estrelas usam essa cor). - Cor vazia
A cor das estrelas não preenchidas (ou seja, não selecionadas) (por exemplo, se um produto for avaliado com 4/5 estrelas, a 5ª estrela usa essa cor). - Borda
Uma borda colorida opcional ao redor de todas as estrelas. - Espaçamento
O espaço entre cada estrela. - Tamanho
O tamanho das estrelas em cada avaliação de cliente. - Forma
Escolha estilos alternativos de classificação, como estrelas pontiagudas, corações arredondados e muito mais.
- Cor preenchida
- Fonte principal
Edite a fonte usada para o texto # avaliações. Escolha Herdar do site para usar a fonte existente do seu site ou selecione uma fonte. - Tamanho, espessura e cor da fonte
Ajuste o tamanho, a espessura e a cor do texto # ratings.
Desative ou ative filtros e ações de avaliação
Permita que seus clientes filtrem as avaliações por classificação, mídia (ou seja, se as avaliações contêm imagens) ou pelas respostas deles a perguntas personalizadas. Isso pode ajudar clientes em potencial a encontrar as avaliações mais relevantes para eles.
- Acesse a aba Avaliações na Klaviyo.
- Clique em Configurações de avaliações.
- Selecione Widgets no site.
- Selecione widget de avaliações de produtos.
- Selecione Revisar lista.
- Para mostrar ou ocultar o botão e a guia de Perguntas e respostas ou o botão Escreva uma avaliação, ative ou desative essa seleção no card Ações.
- Para remover ou adicionar a seção de filtros no widget da sua lista de avaliações, desative ou ative o botão de alternância Filtros.
- Marque ou desmarque qualquer uma dessas configurações para determinar quais opções de filtro aparecem: Barra de pesquisa, Ordenação (mais recente, mais alta, mais baixa), Avaliação, Mídia, Perguntas personalizadas.
Sobre a filtragem mais relevante
O filtro Mais relevantes destaca as avaliações que os usuários têm mais probabilidade de considerar úteis. Quando selecionado, as avaliações aparecerão nesta ordem:
- Avaliações com texto, imagens ou perguntas personalizadas enviadas do país do visitante
- Avaliações sem nenhum conteúdo (ou seja, avaliações apenas com classificação) enviadas do país do visitante
- Avaliações com texto, imagens ou perguntas personalizadas enviadas de outros países
- Avaliações sem nenhum conteúdo (ou seja, avaliações somente com classificação) enviadas de outros países
Em cada categoria, as avaliações são ordenadas por data de envio, com as mais recentes aparecendo primeiro.
Escolha se deseja incluir imagens de produtos no resumo de avaliações
Os resumos de avaliações incluem uma galeria opcional de imagens de produtos enviadas por clientes. Para ativar ou desativar esta galeria:
- Acesse a aba Avaliações na Klaviyo.
- Clique em Configurações de avaliações.
- Selecione Widgets no site.
- Selecione o widget de Avaliações de produtos .
- Selecione Resumo e mídia da avaliação.
- Ative ou desative a configuração Galeria de imagens.
Oculte itens da lista de avaliações
Estas instruções se aplicam ao widget da lista de avaliações.
Se quiser, você pode ocultar elementos da sua lista de avaliações (por exemplo, autor da avaliação, resposta da loja, carimbo de data/hora). Para isso:
- Abra a guia Avaliações na Klaviyo.
- Selecione Configurações de avaliações.
- Clique em Widgets no site.
- Escolha Avaliações de produtos.
- Clique em Lista de avaliações.
- Desative os elementos que você quer ocultar.
Se você desativar Classificação por estrelas, Mídia e Perguntas personalizadas da lista de avaliações, as opções de configuração de Filtros de avaliações vão desaparecer. Para que um visitante do site consiga filtrar a pesquisa, pelo menos um critério de filtro (classificação por estrelas, mídia ou perguntas personalizadas) precisa estar visível na lista de avaliações.
Selecione as avaliações para exibir no carrossel de avaliações em destaque
As avaliações em destaque aparecerão no carrossel de avaliações em destaque. Para escolher quais avaliações destacar:
- Navegue até a aba Avaliações.
- Selecione Todas as avaliações.
- Ao lado de uma avaliação que você gostaria de destacar, clique em Recursos.
- Repita conforme desejar. Recomendamos selecionar pelo menos 3–5 avaliações para destacar.
Recursos adicionais
- How to install Klaviyo Reviews on Shopify 2.0 themes
Learn how to install Klaviyo Reviews on your Shopify 2.0 store by installing the app and adding reviews widgets.
- How to install Klaviyo Reviews on Shopify (vintage themes and headless)
Learn how to install Klaviyo Reviews with a vintage Shopify theme or headless architecture. This process involves copying several code snippets and pasting them into your site’s code.
- How to install Klaviyo Reviews for WooCommerce
Learn how to install Klaviyo Reviews on your WooCommerce store and add reviews widgets. To learn about all the steps required to get started, head to Getting started with Klaviyo Reviews.