Como mostrar botões de favoritos no seu site e no Klaviyo Customer Hub

O que você vai aprender

Saiba como permitir que os compradores salvem os itens favoritos no seu site. Ao adicionar botões de favoritos ao lado dos seus produtos, você pode exibir os itens salvos dos compradores na gaveta do Klaviyo Customer Hub e enviar fluxos de acompanhamento para gerar conversão.

Antes de começar

Este guia explica como ativar a configuração de Favoritos nas configurações do Klaviyo Customer Hub na Klaviyo e adicionar botões de favoritos em diferentes páginas do seu site. Antes de prosseguir, verifique se o recurso Klaviyo Customer Hub está ativado na Klaviyo.

Saiba mais sobre o Klaviyo Customer Hub.

Sobre favoritos

Os botões de favoritos permitem que os clientes salvem produtos de seu interesse. Os itens favoritados de um cliente são exibidos na gaveta do Klaviyo Customer Hub e podem ser usados em fluxos para gerar conversões adicionais.

Quando você ativa o recurso Favoritos nas configurações do Klaviyo Customer Hub, um botão de favoritos aparece em todos os produtos exibidos na interface do Klaviyo Customer Hub. Quando um cliente clica nesse botão, o item é adicionado à seção Favoritos dele e salvo no perfil do Klaviyo.

Para aumentar a visibilidade e incentivar o uso, você também pode adicionar botões de favoritos a:

• Páginas de detalhes do produto
• Páginas de coleção (também chamadas de "páginas de lista de produtos")

Itens favoritados em qualquer uma dessas páginas também são salvos na seção Favoritos dos clientes no drawer do Klaviyo Customer Hub. Observe que qualquer visitante pode adicionar produtos à lista de favoritos, independentemente de ter feito login em uma conta de cliente. Quando eles fizerem login, todos os favoritos que eles salvaram serão sincronizados com o perfil deles no Klaviyo.

Habilite os favoritos para exibir no Klaviyo Customer Hub

Para exibir favoritos no menu lateral do Klaviyo Customer Hub, você precisa primeiro ativar a configuração Favoritos no Klaviyo.

1. Na navegação principal à esquerda do Klaviyo, selecione Serviço - Klaviyo Customer Hub.
2. Clique na aba Extensões .
3. Em Favoritos, marque a caixa para Ativar favoritos.
   

4. No menu suspenso Escolher ícone, selecione qual tipo de ícone de favorito exibir abaixo dos seus produtos (por exemplo, um coração ou um sinal de mais).
   • Por padrão, a prévia mostra a versão não selecionada (ou seja, não favoritada) do ícone. Clique no ícone na prévia para ver ele mudar para o estado favoritado.
5. Clique em Save.

Agora, um botão de favoritos aparecerá abaixo de qualquer produto exibido na interface do Klaviyo Customer Hub. Ao clicar nele, o item é adicionado à seção Favoritos.

Continue para a próxima seção para obter orientações sobre como adicionar botões de favoritos às páginas de detalhes do produto.

Importe listas de desejos existentes para o Klaviyo Customer Hub

Se você estiver migrando para o Klaviyo Customer Hub a partir de outro aplicativo de lista de desejos, poderá migrar os itens salvos dos seus clientes sem complicações, com uma migração de dados razoavelmente sem perdas. A Klaviyo oferece um fluxo de trabalho padrão para importar dados históricos de favoritos e lista de desejos, para que seus compradores não percam os produtos salvos.

Importações de aplicativos nativos

A Klaviyo oferece suporte nativo e pronto para uso para importar dados diretamente de apps de lista de desejos populares, incluindo:

• Swym
• Wishlist King

Importação via CSV

Se você estiver migrando de outro provedor de lista de desejos, poderá importar seus dados diretamente na Klaviyo. Acesse as configurações de favoritos do Klaviyo Customer Hub e solte seu arquivo CSV na área de upload — não é necessário modelo. O importador reconhecerá automaticamente o formato do seu arquivo e mapeará os dados de acordo para preencher os perfis do Klaviyo Customer Hub dos seus compradores.

Adicione botões de favoritos às páginas de detalhes do produto

Gere um engajamento significativamente maior adicionando botões de "adicionar aos favoritos" às suas páginas de detalhes do produto.

1. Na configuração Favoritos no Klaviyo, selecione Adicionar bloco de app.
2. Isso abre o editor de temas da Shopify em uma nova janela, mostrando um modal que indica que o bloco do app Klaviyo Favorites foi adicionado ao seu modelo padrão de página de produto. Clique em Entendi.
   

3. Clique e arraste o aplicativo para ajustar o posicionamento dele na sua página de detalhes do produto conforme necessário.
4. Quando estiver pronto, clique em Salvar para salvar suas alterações na Shopify. Neste ponto, os botões de favorito serão exibidos abaixo dos produtos nas suas páginas de produto.
5. Opcional: para estilos adicionais, volte para a Klaviyo. Usando o menu suspenso Estilo do bloco do app, você pode personalizar a aparência do botão de favoritos nas páginas de produto. Escolha um dos dois:
   • Herdar para sincronizar os estilos de botão do seu site (padrão).
   • Personalizado para selecionar uma determinada fonte e cor do texto do botão.
     

6. Salve quaisquer alterações.

Volte para o seu site. Você deverá ver os botões de favoritos aparecerem abaixo dos produtos nas páginas de detalhes do produto.

Em seguida, avance para a seção Adicionar botões de favoritos às páginas das suas coleções.

Instale manualmente botões de favorito (temas vintage ou configuração personalizada)

Se você usa um tema vintage do Shopify ou uma configuração personalizada que não oferece suporte a blocos de aplicativos, talvez seja necessário instalar manualmente o app Klaviyo Wishlist nas páginas em que você gostaria de ações de favoritar (por exemplo, páginas de produtos).

Para isso:

1. Abra o admin da sua loja da Shopify.
2. Em canais de vendas, selecione Loja online.
3. Clique no menu de três pontos no seu tema atual e selecione Editar código. Se você preferir testar em um tema de rascunho, primeiro duplique seu tema atual e depois edite o código do tema duplicado.
   

4. Encontre o arquivo da página de detalhes do seu produto. Isso varia conforme o tema, mas geralmente tem a palavra "product" no nome. Por exemplo, no tema Dawn, isso se chama "main-product.liquid".
5. Cole o snippet de código a seguir onde você quiser que o botão de favoritos apareça:
   <div class="klaviyo-wishlist-slot" data-product-id="{{ product.id }}"></div>
6. Clique em Save.
7. Clique em Visualizar loja.
8. Navegue até uma página de produto na visualização da sua loja. O botão de favoritos adicionado deve ficar visível no local designado.

Adicione botões de favoritos às páginas das suas coleções

Instale um pequeno snippet de código no seu site da Shopify para adicionar botões de favoritos às páginas de coleções, para que os compradores possam salvar itens rapidamente enquanto navegam pelos seus produtos. Isso é especialmente útil para compradores em dispositivos móveis.

Para isso:

1. Abra o admin da sua loja da Shopify.
2. Em canais de vendas, selecione Loja online.
3. Ao lado do seu tema atual, clique no menu de três pontos e selecione Editar código.
   • Se você quiser testar em um tema de rascunho, primeiro duplique seu tema atual e depois edite o código no tema duplicado.
4. Na barra lateral esquerda, pesquise e abra seu arquivo de coleções. Vamos usar o arquivo featured-collections.liquid neste exemplo, mas o seu tema pode usar um arquivo diferente.
   

5. No arquivo de coleções, use o atalho de busca (Command+F no Mac ou Control+F no Windows) para pesquisar a palavra "render" no arquivo. Isso ajuda você a identificar o nome do snippet que contém sua grade de produtos.
   • É provável que o snippet apareça em um formato semelhante a: {% render 'snippet-name'%}, em que 'snippet-name' é o nome do arquivo de snippet relevante (por exemplo, card-product).
     

6. Na barra lateral esquerda, pesquise e abra o arquivo de snippet identificado na etapa anterior (por exemplo, card-product.liquid).
7. Na parte superior deste arquivo, observe o valor do objeto listado em “Accepts” (por exemplo, “card_product”).
   

8. Copie o código a seguir e cole-o no arquivo de snippet:
   • Dica: procure a primeira ocorrência da renderização do preço no seu arquivo e cole o código acima dela.
     <div

    class="klaviyo-favorites-plp-slot"

   data-product-id="{{ OBJECT.id }}"

   data-product-url="{{ OBJECT.url }}"

   data-variant-id="{{OBJECT.selected_or_first_available_variant.id}}"

  ></div>
9. No código que você colou, substitua OBJECT pelo valor do objeto que você anotou anteriormente.
   • Por exemplo, se o valor do objeto do seu arquivo for "card_product", o código vai ficar assim quando for colado no arquivo acima do preço.
     

10. Clique em Salvar no Shopify.
11. Acesse a página de coleções do seu site e atualize.

Agora você deve ver os botões de favoritos aparecerem em cada produto. Observe que isso pode levar alguns segundos para carregar. Por padrão, eles ficam posicionados no canto superior direito. Se você quiser mudar o posicionamento, consulte seu desenvolvedor para obter ajuda com CSS personalizado.

Se os botões favoritos ainda não tiverem aparecido, tente estas etapas de solução de problemas:

• Confirme que você substituiu OBJECT no snippet de código pelo valor do objeto do seu arquivo.
• Tente colar o código em outro lugar no arquivo.
• Verifique se você colou o código no arquivo de snippet correto.

Se eles ainda não aparecerem, procure ajuda de um desenvolvedor. A equipe de suporte da Klaviyo não consegue editar diretamente os arquivos do seu tema.

Próximas etapas

Agora que você adicionou botões de favoritos ao seu site, configure um fluxo de lembrete de favoritos para aumentar a conversão, lembrando os clientes sobre os itens que eles salvaram recentemente.

Recursos adicionais