O que você vai aprender
Saiba como instalar o Klaviyo Reviews com um tema vintage da Shopify ou uma arquitetura headless. Esse processo envolve copiar vários trechos de código e colá-los no código do seu site.
Se o senhor estiver usando um tema do Shopify 2.0, poderá instalar o Klaviyo Reviews sem usar código. Acesse nosso artigo sobre como começar a usar o Klaviyo Reviews para saber mais. Se o senhor usa o WooCommerce, saiba como instalar o Klaviyo Reviews for WooCommerce.
Esse processo requer a edição direta dos arquivos do tema na Shopify. Se não se sentir à vontade para fazer isso sozinho, entre em contato com seu desenvolvedor ou com um parceiro da Klaviyo para obter ajuda.
Antes de começar
Antes de colar esses trechos de código no código do seu site, adicione o aplicativo Klaviyo Reviews à sua loja da Shopify. Para temas antigos, ative o rastreamento no local do Klaviyo.
Instalação com arquitetura headless na ShopifyInstalação com arquitetura headless na Shopify
Para integrar o Klaviyo Reviews a uma loja Shopify headless, adicione o snippet de rastreamento JavaScript do 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). Talvez o senhor já tenha instalado esse snippet se tiver configurado o rastreamento no local ou os formulários de inscrição do Klaviyo.
Saiba como instalar o Klaviyo.js para lojas da Shopify.
Depois de adicionar esse script ao seu site, copie o snippet de código nas etapas abaixo para o código do seu site.
Adicione os trechos de códigoAdicione os trechos de código
Os trechos de código abaixo permitem que determinados widgets de avaliações apareçam em diferentes áreas de sua loja.
- O widget de classificação por estrelas exibe a classificação por estrelas atual de um determinado produto e é instalado, na maioria das vezes, abaixo do nome do produto.
- O widget de resumo de avaliações mostra um gráfico que detalha todas as classificações selecionadas para um produto, imagens de usuários enviadas com avaliações e o feedback mais comum que o produto recebeu. Geralmente é instalado próximo à parte inferior da página de um produto.
- O widget de avaliações de produtos é uma combinação dos widgets de resumo de avaliações e de lista de avaliações. Se você adicionar o widget de avaliações de produtos ao seu site, não precisará adicionar os widgets de lista de avaliações e 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, juntamente 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 da avaliação.
- O widget de carrossel de resenhas em destaque exibe as resenhas em destaque de todos os seus produtos. Isso pode ser apresentado em sua página inicial, em uma página de avaliações independente ou em qualquer outro lugar do seu site. O senhor pode selecionar as avaliações que são exibidas nesse widget. Se disponíveis, as imagens enviadas pelos clientes acompanham cada avaliação; as imagens de seus produtos são usadas se nenhuma imagem tiver sido enviada junto com a avaliação.
- O widget SEO / Todas as avaliações exibe todas as suas avaliações de todos os produtos em uma única página. Use o site widget para aprimorar seu SEO e oferecer um local único para que os clientes em potencial vejam o que seus clientes atuais adoram. Esse widget é geralmente adicionado a uma página independente de Avaliações em seu site.
Widget de classificação por estrelas
Use o widget de classificação por estrelas para destacar a classificação média de um produto e o número de avaliações que ele recebeu.
Para instalar esse widget abaixo do título do seu produto:
- Abra o admin da loja do Shopify.
- Em Canais de vendas, clique em Loja on-line.
- Clique no menu de três pontos ao lado do tema atual > Duplicate para criar um clone do tema atual.
- No menu de três pontos, clique em Edit code (Editar código).
- Pesquise "product" na barra de pesquisa de arquivos e localize o arquivo usado para o conteúdo da página do produto. Pode ser product.liquid, product-template.liquid, ou algo semelhante. (Se o senhor usar um modelo de página de produto personalizado, selecione-o em vez disso).
- Selecione o arquivo e, em seguida, pesquise {{ product.title }} para localizar o código que exibe o título do produto.
- Adicione uma nova linha abaixo desse código.
- Na nova linha, cole este trecho 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 Salvar.
- Clique em Preview store (Visualizar loja).
- Navegue até uma página de produto na visualização de sua loja. O senhor deve ver um widget de estrela abaixo do título do produto.
Widget de análises de produtos
Use o widget de resumo de resenhas e lista de resenhas (ou apenas o widget de resenhas de produtos) para adicionar um resumo e uma lista de todas as resenhas publicadas para cada produto em seu site.
Para instalar os widgets de resumo e de lista separadamente, vá para a seção de widgets de resumo de avaliação e de lista de avaliação separados abaixo.
Para instalar esse widget:
- Abra o admin da loja do Shopify.
- Em Canais de vendas, clique em Loja on-line.
- Clique em Customize (Personalizar ) ao lado do tema atual para editá-lo ou clique no menu de três pontos > Duplicate (Duplicar ) se quiser editar um tema de rascunho em vez de um tema ativo.
- No menu de três pontos, clique em Edit code (Editar código).
- Pesquise "product" na barra de pesquisa de arquivos e localize o arquivo usado para o conteúdo da página do produto. Pode ser product.liquid, product-template.liquid, ou algo semelhante. (Se o senhor usar um modelo de página de produto personalizado, selecione-o em vez disso).
- Selecione o arquivo e navegue até a parte inferior (ou onde quer que o resumo das avaliações e o widget de lista apareçam).
- Adicione uma nova linha e cole este trecho de código:
<div id="klaviyo-reviews-all" data-id="{{product.id}}"></div> - Clique em Salvar.
- Clique em Preview store (Visualizar loja).
- Navegue até uma página de produto na visualização de sua loja para um produto que tenha avaliações. O senhor deve ver um resumo das avaliações e um widget de exibição de lista na parte inferior da página.
Widgets separados de resumo de avaliações e lista de avaliações
Se preferir instalar os widgets de resumo de resenhas e de lista de resenhas separadamente (em vez de juntos, conforme descrito na seção acima), use os seguintes trechos de código:
Widget de resumo da revisão
<div id="klaviyo-reviews-summary" data-id="{{product.id}}"></div>
Widget de lista de revisões
<div id="klaviyo-reviews-list" data-id="{{product.id}}"></div>
Widget de carrossel de resenhas em destaque (opcional)
O carrossel de avaliações em destaque exibe avaliações selecionadas manualmente em qualquer página que o senhor escolher (por exemplo, sua página inicial).
Para adicionar um carrossel que exiba todas as suas avaliações em destaque, o senhor deve primeiro selecionar as avaliações a serem destacadas.
- Na navegação principal do Klaviyo, selecione Reviews (Avaliações).
- Clique em todas as avaliações.
- Ao lado de uma avaliação que o senhor gostaria de destacar, clique em Feature.
Depois de selecionar várias avaliações para apresentar em seu site, o usuário pode instalar um widget de carrossel de avaliações em qualquer página. Navegue até a página em que deseja que o carrossel apareça e cole o seguinte snippet no código da página:
<div id="klaviyo-featured-reviews-carousel"></div>
SEO / Todas as avaliações widget (opcional)
O widget SEO / Todas as avaliações exibe todas as avaliações publicadas de cada produto. Adicione isso a uma página independente de Avaliações ou à sua página Sobre.
<div id="klaviyo-reviews-all" data-id="all"></div>
Resultado
Depois de instalar os widgets descritos neste artigo e colocar o novo tema no ar, suas avaliações aparecerão nas páginas de produtos (bem como em qualquer outra página do site em que você as tenha instalado).
Recursos adicionais