Como exibir botões favoritos em seu site e no Klaviyo Customer Hub

O que você vai aprender

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

Antes de começar

Este guia explica como habilitar a configuração Favorites nas configurações do Klaviyo Customer Hub em Klaviyo e adicionar botões de favoritos em diferentes páginas do seu site. Antes de continuar, verifique se o Klaviyo Customer Hub recursos está habilitado em Klaviyo.

Saiba mais sobre o Klaviyo Customer Hub.

Sobre os favoritos

Os botões de favoritos permitem que os compradores salvem os produtos nos quais estão interessados. Os itens favoritos de um comprador são exibidos na gaveta do Klaviyo Customer Hub e podem ser usados no fluxo para gerar conversões adicionais.

Quando o senhor ativa os recursos Favoritos nas configurações do site Klaviyo Customer Hub, um botão de favoritos aparece com todos os produtos exibidos na interface do Klaviyo Customer Hub. Quando um comprador clica nesse botão, o item é adicionado à seção Favoritos e salvo em seu perfil da Klaviyo.

Para aumentar sua visibilidade e incentivar o uso, o senhor também pode adicionar botões de favoritos:

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

Os itens favoritos de qualquer uma dessas páginas também são salvos na seção Favorites (Favoritos ) dos compradores na gaveta do Klaviyo Customer Hub. Observe que qualquer visitante pode adicionar produtos à sua lista de favoritos, independentemente de estar conectado a uma conta de cliente. Quando os senhores entrarem, todos os favoritos salvos serão sincronizados com o perfil Klaviyo.

habilitar favoritos para exibição na gaveta do Klaviyo Customer Hub

Para exibir os favoritos na gaveta do Klaviyo Customer Hub, o senhor deve primeiro habilitar a configuração Favorites em Klaviyo. 

1. Na navegação principal do lado esquerdo do site Klaviyo, selecione Klaviyo Customer Hub.
2. Clique no ícone de engrenagem no canto superior direito.
   
3. Selecione Extensões.
4. Em Favorites (Favoritos), marque a caixa para habilitar os favoritos.
   
5. No menu suspenso Choose icon (Escolher ícone ), selecione o tipo de ícone favorito a ser exibido sob seus produtos (ou seja, um coração ou um sinal de mais). 
   • Por padrão, a visualização mostra a versão não selecionada (ou seja, não favorecida) do ícone. Clique no ícone na visualização para vê-lo mudar para o estado de favorito.
6. Clique em Save.

Agora, um botão de favorito aparecerá abaixo de todos os produtos exibidos na interface do Klaviyo Customer Hub. Clicar nele adiciona o item à seção Favorites (Favoritos ).

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

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

Permita que os compradores marquem como favoritos itens específicos que estão verificando, adicionando botões de favoritos abaixo dos produtos nas páginas de detalhes do produto. 

1. Na configuração Favorites (Favoritos ) em Klaviyo, selecione Add app bloco. 
2. Isso abre o editor de temas da Shopify em uma nova janela, mostrando um modal que indica que o bloco do aplicativo Klaviyo Favorites foi adicionado ao seu modelo de página de produto padrão. Clique em Entendi.
   
3. Clique e arraste o aplicativo para ajustar seu posicionamento na página de detalhes do produto, conforme necessário. 
4. Quando estiver pronto, clique em Save (Salvar ) para salvar suas alterações na Shopify. Nesse momento, os botões favoritos serão exibidos abaixo dos produtos em suas páginas de produtos. 
5. Opcional: Para obter um estilo adicional, navegue novamente para Klaviyo. Usando o menu suspenso App bloco style, o senhor pode personalizar a aparência do botão de favoritos nas páginas de produtos. Escolha um dos dois:
   • Herdar para sincronizar os estilos de botão do seu site (padrão).
   • Personalizado para selecionar uma determinada fonte de botão e cor de texto.
     
6. Salve as alterações.

Navegue de volta para seu site. O senhor deve ver os botões de favoritos aparecerem abaixo dos produtos nas páginas de detalhes do produto.

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

Instalar manualmente os botões favoritos (temas vintage ou configuração personalizada)

Se usar um tema vintage Shopify ou uma configuração personalizada que não suporte o aplicativo bloco, talvez seja necessário instalar manualmente o aplicativo Klaviyo Wishlist nas páginas em que deseja favoritar ações (por exemplo, páginas de produtos).

Para isso:

1. Abra seu Shopify armazenar admin.
2. No canal de vendas, selecione loja on-line.
3. Clique no menu de três pontos em seu tema atual e selecione Edit code (Editar código). Se preferir testá-lo em um tema de rascunho, duplique seu tema atual primeiro e, em seguida, edite o código do tema duplicado.
   
4. Localize o arquivo da página de detalhes do produto. Isso varia de acordo com o tema, mas normalmente tem a palavra "produto" em seu nome. Por exemplo, no tema Dawn, isso é chamado de "main-product.liquid".
5. Cole o seguinte snippet de código onde o senhor 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 Preview armazenar.
8. Navegue até a página de um produto em sua visualização do armazenar. O botão de favoritos adicionado deve estar visível no local designado.

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

Instale um pequeno trecho de código em seu site da Shopify para adicionar botões favoritos às suas 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 seu Shopify armazenar admin.
2. No canal de vendas, selecione loja on-line.
3. Ao lado de seu tema atual, clique no menu de três pontos e selecione Edit code (Editar código). 
   • Se quiser testar em um tema de rascunho, duplique seu tema atual primeiro e, em seguida, edite o código no tema duplicado.
4. Na barra lateral esquerda, procure e abra seu arquivo de coleções. Usaremos o arquivo featured-collections.liquid para este exemplo, mas seu tema pode usar um arquivo diferente.
   
5. No arquivo de coleções, use o atalho de localização (Command+F no Mac ou Control+F no Windows) para pesquisar a palavra "render" no arquivo. Isso ajuda o senhor a identificar o nome do snippet que contém a grade do produto.
   • O snippet provavelmente aparecerá 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, procure e abra o arquivo de snippet identificado na etapa anterior (por exemplo, card-product.liquid).
7. Na parte superior desse 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 instância da renderização de preço em seu arquivo e cole o código acima dela.
     <div

    class="Klaviyo-favorites-plp-slot"

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

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

   dados-variação-id="{{OBJECT.selected_or_first_available_variant.id}}"

  ></div>
9. No código que o senhor colou, substitua OBJECT pelo valor do objeto que anotou anteriormente.
   • Por exemplo, se o valor do objeto do seu arquivo for "card_product", o código terá a seguinte aparência quando colado no arquivo acima do preço.
     
10. Clique em Salvar na Shopify.
11. Acesse a página de coleções do seu site e atualize.

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

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

• Confirme que o senhor substituiu OBJECT no snippet de código pelo valor do objeto do seu arquivo.
• Tente colar o código em outra parte do arquivo.
• Verifique se o senhor colou o código no arquivo de snippet correto.

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

Próximas etapas

Agora que o senhor adicionou botões de favoritos ao seu site, configure um fluxo de lembrete de favoritos para impulsionar a conversão, lembrando os compradores dos itens salvos recentemente.

Recursos adicionais

• Guia de introdução ao Klaviyo Customer Hub
• Como habilitar recomendações de produtos no Klaviyo Customer Hub 
• Como estilizar seu Klaviyo Customer Hub