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 Favoritos no Klaviyo Customer Hub e adicionar botões de favoritos em diferentes páginas do seu site. Antes de começar, ative o Klaviyo Customer Hub na Klaviyo. Favoritos exige um plano pago do Klaviyo Customer Hub ou uma avaliação gratuita com atividade.

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 Favoritos no Klaviyo Customer Hub, os compradores que atenderem às suas configurações de visibilidade podem usar botões de favoritos para salvar produtos. Os itens salvos aparecem na seção Favoritos. Os itens salvos por compradores conectados são sincronizados com o 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")

Os itens favoritados em qualquer uma dessas páginas também aparecem na seção Favoritos do cliente no Klaviyo Customer Hub. Para permitir que visitantes salvem produtos sem fazer login, defina a visibilidade dos favoritos como Todos os clientes tanto nas configurações do Hub quanto nas configurações de favoritos no site. Os favoritos de visitantes que a Klaviyo não reconhece são salvos no navegador deles e são sincronizados com o perfil na Klaviyo quando eles fazem login ou quando a Klaviyo os reconhece, se as experiências de cliente reconhecido estiverem ativadas.

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 Website > Klaviyo Customer Hub.
2. Clique em Design > Editar seu Hub para abrir o editor.
3. Com o Hub definido como Aberto, selecione Favoritos no menu suspenso Página acima da visualização.

4. Na guia Conteúdo, defina Visibilidade para os compradores que devem ver os favoritos. Selecione Todos os compradores para permitir que os visitantes salvem produtos sem fazer login.
5. Em Ícone, selecione um coração ou um sinal de mais para os botões de favoritos no Klaviyo Customer Hub.
   • Use a visualização para conferir a aparência do ícone. Você pode visualizar os estados selecionado e não selecionado no editor de favoritos do site, descrito abaixo.
6. Clique em Publicar.

Os botões favoritos agora aparecem nos produtos no Klaviyo Customer Hub para compradores que atendem às suas configurações de visibilidade. Ao clicar em um botão, o item é adicionado à seção de Favoritos.

Para adicionar botões fora do Klaviyo Customer Hub, continue em Adicionar botões de favoritos às páginas de detalhes do produto.

Importe listas de desejos existentes para o Klaviyo Customer Hub

Se você está migrando para o Klaviyo Customer Hub a partir de outro aplicativo de lista de desejos, você pode importar os itens salvos dos seus clientes para que eles possam continuar gerenciando seus favoritos no Klaviyo Customer Hub.

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

Depois de ativar os favoritos no Klaviyo Customer Hub, abra as configurações de favoritos do Customer Hub. Seu arquivo precisa incluir endereços de e-mail dos clientes e IDs de produto; IDs de variante são opcionais. Você não precisa de um modelo de CSV específico, mas precisa revisar o mapeamento de campos antes de importar.

1. Em Importar favoritos de outro aplicativo, clique em Importar. Se você tiver dispensado o cartão anteriormente, clique em Importar favoritos de outro aplicativo para reabri-lo.
2. Envie ou arraste seu arquivo CSV para a área de upload e, em seguida, clique em Próximo.
3. Revise os mapeamentos de campo sugeridos. Mapeie as colunas que contêm endereços de e-mail de compradores para Email e os IDs de produto para Product ID. Se o seu arquivo incluir IDs de variante, mapeie essa coluna para ID da variante.
4. Clique em Concluir para enviar a importação.

A tela de importação é fechada e exibe uma confirmação após um envio bem-sucedido. Se você vir um erro, verifique seu arquivo e os mapeamentos antes de tentar novamente.

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

Adicione botões de favoritos às páginas de detalhes do produto para que os clientes possam salvar um item enquanto o visualizam.

1. Volte para Design no Klaviyo Customer Hub e, em seguida, selecione o card Favoritos em Blocos no site. Clique em Adicionar bloco de aplicativo para abrir o editor de temas do Shopify.
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 tudo pronto, clique em Salvar para salvar suas alterações na Shopify. O botão aparece no local que você escolheu quando o Klaviyo Customer Hub está ativo e os favoritos no site estão visíveis para o cliente.
5. Volte para o editor de favoritos no site na Klaviyo. Na aba Conteúdo, defina a Visibilidade para os compradores que devem ver seus botões no site. Isso não pode ser mais amplo do que a visibilidade dos favoritos do Hub.
6. Opcional: no editor de favoritos no site, selecione a aba Style para personalizar o ícone, as cores, a fonte, o alinhamento e o estilo visual do botão.
   • Em Fontes, selecione Herdar do site em Fonte do botão para usar a fonte do seu site ou escolha outra fonte. Selecione Configurar fonte personalizada para inserir um nome e uma espessura de fonte. Sua fonte personalizada já precisa estar instalada no seu site.
   • Em Cores, ajuste Preenchimento do botão e Texto do botão. Em Aparência, defina Alinhamento e Estilo visual. Escolha Apenas ícone, Apenas texto ou Ícone e texto.

• Na prévia, selecione Página do produto ou Lista de coleções para revisar cada posicionamento. O botão começa desmarcado; clique nele para visualizar o estado como favorito.

7. Clique em Publicar para salvar a visibilidade no site e quaisquer alterações de estilo no Klaviyo.

Volte ao seu site e abra uma página de detalhes do produto para verificar se o botão de favoritos aparece no local que você escolheu.

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

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

Se você usa um tema vintage da Shopify ou uma configuração personalizada que não oferece suporte a blocos de app, adicione manualmente o snippet do botão de favoritos às páginas em que você quer que os clientes salvem produtos (por exemplo, páginas de produto).

Antes de editar seu tema, ative os favoritos no Hub e defina a visibilidade dos favoritos no site no cartão Favoritos, em Design > Blocos no site. O Klaviyo Customer Hub precisa estar ativo para que os botões apareçam na sua vitrine.

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.

Antes de adicionar o snippet, ative os favoritos no Hub e defina a visibilidade dos favoritos no site em Design > Blocos no site > Favoritos. O Klaviyo Customer Hub deve estar ativo. As configurações de ícone e cor no site também se aplicam aos botões de favoritos nas páginas de coleção.

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. Abra a página de coleções do seu site e atualize. Se você editou um tema duplicado, abra a prévia desse tema e navegue até uma página de coleções.

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 lembrar os compradores sobre os itens que eles salvaram recentemente.

Recursos adicionais