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.

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 instalar o Klaviyo.js, adicione os widgets à sua loja headless usando as etapas abaixo. As instruções de edição de tema da Shopify nas seções de widget se aplicam a temas vintage.

1. Copie cada snippet de widget que você quiser usar das seções abaixo para o modelo de página ou componente em que o widget deve aparecer.
2. Para widgets específicos de produto, substitua {{product.id}} pelo ID numérico do produto no Shopify, por exemplo, data-id="123456789". Forneça o ID correto para cada página de produto. No snippet de classificação por estrelas, substitua também {{product.title}} e {{product.type}} pelo título e tipo desse produto.
3. Mantenha data-id="all" inalterado para SEO/widget de todas as avaliações. O snippet do carrossel de avaliações em destaque não precisa de um ID do produto.
4. Salve suas alterações e pré-visualize a vitrine. Confira uma página de produto com avaliações publicadas e quaisquer outras páginas em que você adicionou widgets antes de aplicar suas alterações.

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 um tema vintage, instale este widget abaixo do título do seu produto:

1. Abra o admin da sua loja da Shopify.
2. Em Canais de venda, clique em Loja virtual.
3. Clique no menu de três pontos ao lado do seu tema atual > Duplicar para criar um clone do seu tema atual.
4. No menu de três pontos do tema duplicado, clique em Editar código.
   

5. 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.)
   

6. Selecione o arquivo e, em seguida, pesquise por {{ product.title }} para localizar o código que exibe o título do seu produto.
   

7. Adicione uma nova linha abaixo desse código.
8. 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>
   

9. Clique em Save.
10. Clique em Visualizar loja.
11. Navegue até uma página de produto na prévia da sua loja para um produto que tenha avaliações publicadas. Você deve ver um widget de estrelas abaixo do título do produto. Um produto sem avaliações pode ter o widget de classificação por estrelas oculto pelas suas configurações de widget.

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 um tema vintage, instale este widget no mesmo tema que o seu widget de avaliação por estrelas:

1. Abra o admin da sua loja da Shopify.
2. Em Canais de venda, clique em Loja virtual.
3. Selecione o mesmo tema que você usou para o widget de avaliação por estrelas. Se você pulou esse widget, escolha seu tema atual para editá-lo ou clique no menu de três pontos > Duplicar para editar uma cópia.
4. No menu de três pontos do tema selecionado, clique em Editar código.
   

5. 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.)
   

6. 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).
7. Adicione uma nova linha e, em seguida, cole este snippet de código:
   <div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>
   

8. Clique em Save.
9. Clique em Visualizar loja.
10. 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 suas avaliações em destaque, primeiro selecione avaliações de produtos publicadas que incluam texto de avaliação. Avaliações por estrelas sem texto e avaliações da loja não podem ser selecionadas usando o controle de recursos.

1. Na navegação principal da Klaviyo, selecione Site > Avaliações.
2. Clique em Todas as avaliações.
3. Ao lado de uma avaliação que você gostaria de destacar, clique no ícone Recursos. Se, em vez disso, você vir Mais opções de recursos, abra essa opção e selecione Adicionar às avaliações em destaque.

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>

Salve suas alterações e, em seguida, visualize a página para confirmar se o carrossel exibe as avaliações que você selecionou.

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. Cole o snippet a seguir no local em que você quer que o widget apareça no código dessa página.

<div id="klaviyo-reviews-all" data-id="all"></div>

Salve suas alterações e, em seguida, visualize a página para confirmar que o widget exibe suas avaliações publicadas.

Resultado

Se você editou um tema duplicado do Shopify, publique-o depois de confirmar que os widgets aparecem como esperado na sua prévia. Para uma loja headless, faça o deploy das suas alterações depois de visualizá-las na prévia. Suas avaliações aparecerão nas páginas de produto e em quaisquer outras páginas onde você tiver instalado os widgets.

Recursos adicionais