Como instalar o Klaviyo Reviews no Shopify (temas vintage e headless)
O que você vai aprender
Saiba como instalar o Klaviyo Reviews com um tema Shopify vintage ou uma arquitetura headless. Esse processo envolve copiar vários snippet de código e colá-los no código do seu site.
Se você estiver usando um tema do Shopify 2.0, pode instalar o Klaviyo Reviews sem usar código. Acesse nosso artigo sobre Guia de introdução ao Klaviyo Reviews para saber mais. Se você usa o WooCommerce, saiba como instalar o Klaviyo Reviews para WooCommerce.
Esse processo exige que você edite diretamente os arquivos do seu tema no Shopify. Se você não se sentir à vontade para fazer isso por conta própria, fale com seu desenvolvedor ou entre em contato com um parceiro da Klaviyo para obter ajuda.
Antes de começar
Antes de colar esses snippet de código no código do seu site, adicione o app Klaviyo Reviews à sua loja Shopify. Para temas vintage, ative o rastreamento no site da Klaviyo.
Instalação com arquitetura headless na Shopify
Para integrar o Klaviyo Reviews a uma loja Shopify headless, adicione o snippet de rastreamento JavaScript da Klaviyo, também conhecido como Klaviyo.js, a todas as páginas em que você gostaria de adicionar widgets de avaliações (por exemplo, páginas de produtos). Você talvez já tenha instalado esse snippet se tiver configurado o rastreamento no site da Klaviyo ou formulários de registro.
Saiba como instalar o Klaviyo.js para lojas Shopify.
Depois de adicionar esse script ao seu site, prossiga copiando os snippets de código nas etapas abaixo para o código do seu site.
Adicione os snippets de código
Os snippets de código abaixo permitem que determinados widget de avaliações apareçam em diferentes áreas da sua loja.
- O widget de avaliação por estrelas exibe a avaliação atual em estrelas de um determinado produto e, na maioria das vezes, é instalado abaixo do nome do seu produto.
- O widget de resumo de avaliações mostra um gráfico que detalha todas as avaliações selecionadas para um produto, as imagens de usuários enviadas com avaliações e o feedback mais comum que o produto recebeu. Geralmente, ele é instalado perto da parte inferior de uma página de produto.
- O widget de avaliações de produtos é uma combinação dos widgets de resumo de avaliações e lista de avaliações. 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.
- O widget de lista de avaliações exibe uma lista de todas as avaliações publicadas e perguntas de clientes, junto com uma barra de pesquisa, filtros, um botão Escrever uma avaliação e um botão Fazer uma pergunta. Normalmente, ele é instalado logo abaixo do widget de resumo de avaliações.
- O widget de carrossel de avaliações em destaque exibe avaliações em destaque de todos os 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 pelo cliente acompanham cada avaliação; suas imagens do 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. Esse widget geralmente é adicionado a uma página Avaliações independente no seu site.
Widget de classificação por estrelas
Use o widget de classificação por estrelas para destacar a avaliação média de um produto e a quantidade de avaliações que ele recebeu.
Para instalar este widget abaixo do título do seu produto:
- Abra o admin da sua loja da Shopify.
- Em Canais de venda, clique em Loja virtual.
- Clique no menu de três pontos ao lado do seu tema atual > Duplicar para criar um clone do seu tema atual.
- No menu de três pontos, clique em Editar código.
- Pesquise "product" na barra de pesquisa de arquivos e localize o arquivo usado para o conteúdo da sua página de produto. Pode ser product.liquid, product-template.liquid, ou algo semelhante. (Se você usa um modelo personalizado de página de produto, selecione esse.)
- Selecione o arquivo e, em seguida, pesquise por {{ product.title }} para localizar o código que exibe o título do seu produto.
- Adicione uma nova linha abaixo desse código.
- Na nova linha, cole este snippet de código:
<div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}" data-product-type="{{product.type}}"></div>
- Clique em Save.
- Clique em Visualizar loja.
- Navegue até uma página de produto na visualização da sua loja. Você deve ver um widget de estrela abaixo do título do produto.
Widget de avaliação de produtos
Use o widget de resumo de avaliações e de lista de avaliações (ou apenas o widget de avaliações do produto) para adicionar um resumo e uma lista de todas as avaliações publicadas de cada produto no seu site.
Para instalar o widget de resumo e o widget de lista separadamente, acesse a seção widgets de resumo de avaliações e de lista de avaliações separados abaixo.
Para instalar este widget:
- Abra o admin da sua loja da Shopify.
- Em Canais de venda, clique em Loja virtual.
- Clique em Personalizar ao lado do tema atual para editá-lo ou clique no menu de três pontos > Duplicar se você quiser editar um tema de rascunho em vez do seu tema ativo.
- No menu de três pontos, clique em Editar código.
- Pesquise "product" na barra de pesquisa de arquivos e localize o arquivo usado para o conteúdo da sua página de produto. Pode ser product.liquid, product-template.liquid, ou algo semelhante. (Se você usa um modelo personalizado de página de produto, selecione esse.)
- Selecione o arquivo e navegue até a parte inferior (ou para onde você quiser que o resumo e o widget de lista de avaliações apareçam).
- Adicione uma nova linha e, em seguida, cole este snippet de código:
<div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>
- Clique em Save.
- Clique em Visualizar loja.
- Navegue até uma página de produto na prévia da sua loja para um produto que tenha avaliações. Você deve ver um resumo de avaliações e um widget de visualização em lista perto da parte inferior da página.
Separar widgets de resumo de avaliações e de lista de avaliações
Se você preferir instalar o widget de resumo de avaliações e os widget de lista de avaliações separadamente (em vez de juntos, como descrito na seção acima), use os seguintes snippet de código:
Widget de resumo da avaliação
<div id="klaviyo-reviews-summary" data-id="{{product.id}}"></div>
Revisar widget de lista
<div id="klaviyo-reviews-list" data-id="{{product.id}}"></div>
Widget de carrossel de avaliações em destaque (opcional)
O carrossel de avaliações em destaque exibe avaliações selecionadas manualmente em qualquer página que você escolher (por exemplo, sua página inicial).
Para adicionar um carrossel que exiba todas as suas avaliações em destaque, primeiro você deve selecionar as avaliações que serão destacadas.
- Na navegação principal da Klaviyo, selecione Avaliações.
- Clique em Todas as avaliações.
- Ao lado de uma avaliação que você gostaria de destacar, clique em Destacar.
Depois de selecionar várias avaliações para destacar no seu site, você pode instalar um widget de carrossel de avaliações em qualquer página. Acesse a página em que você gostaria que o carrossel aparecesse e, em seguida, cole o seguinte snippet no código dessa página:
<div id="klaviyo-featured-reviews-carousel"></div>
SEO / Widget de todas as avaliações (opcional)
O widget SEO/Todas as avaliações exibe todas as avaliações publicadas em todos os produtos. Adicione isso a uma página de Avaliações independente ou à sua página Sobre.
<div id="klaviyo-reviews-all" data-id="all"></div>
Resultado
Depois de instalar os widgets descritos neste artigo e ativar o novo tema, suas avaliações aparecerão nas páginas de produto (bem como em quaisquer outras páginas do seu site em que você os tiver instalado).
Recursos adicionais
- Como criar perguntas personalizadas de avaliação
Saiba como adicionar perguntas para seus clientes responderem quando avaliarem seus produtos. As respostas podem ajudar a contextualizar a avaliação e fornecer dados valiosos sobre seus produtos. Se seus clientes responderem a perguntas personalizadas de avaliação, futuros visitantes do site poderão filtrar as avaliações com base nas respostas.
- Referência de dados do Klaviyo Reviews
Saiba mais sobre os dados adicionais disponíveis na Klaviyo quando você começar a usar avaliações. Esses dados se enquadram em duas categorias amplas: métricas de entrega (somente Shopify) e métricas de avaliações (disponíveis para WooCommerce e Shopify).