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.
Atualmente, o Klaviyo Customer Hub for Shopify é compatível com vitrines padrão e com o Shopify Headless. Para o WooCommerce, navegue até https://help.klaviyo.com/hc/pt-br/articles/47792369863451
Para obter feedback sobre a funcionalidade do Klaviyo Customer Hub, envie um e-mail para customerhub@klaviyo.com.
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.
Permitir que os favoritos sejam exibidos no Klaviyo Customer Hub
Para exibir os favoritos na gaveta do Klaviyo Customer Hub, o senhor deve primeiro habilitar a configuração Favorites em Klaviyo.
Observe que, se o Klaviyo Customer Hub estiver ativo, salvar essa alteração a publicará em seu site. Caso contrário, o senhor precisará definir o Klaviyo Customer Hub como ativo no menu de configurações gerais para ver essa alteração.
- Na navegação principal do lado esquerdo do site Klaviyo, selecione Service - Klaviyo Customer Hub.
- Clique na guia Extensões .
- Em Favorites (Favoritos), marque a caixa para habilitar os favoritos.
- No menu suspenso Choose icon (Escolher ícone ), selecione o tipo de ícone de 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.
- 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.
Importar listas de desejos existentes para o Klaviyo Customer Hub
Se você estiver fazendo a transição de outro aplicativo de lista de desejos para o Klaviyo Customer Hub do Klaviyo, poderá migrar sem problemas os itens salvos dos seus clientes com uma migração de dados razoavelmente sem perdas. A Klaviyo oferece um fluxo de trabalho padrão para importar dados históricos dos favoritos e da lista de desejos para que seus clientes não percam os produtos salvos.
Importações de aplicativos nativos
O Klaviyo oferece suporte nativo e pronto para uso para importar dados diretamente de aplicativos populares de lista de desejos, inclusive:
- Swym
- Lista de desejos King
Importação via CSV
Se estiver migrando de um provedor de lista de desejos diferente, você pode importar seus dados diretamente na Klaviyo. Navegue até as configurações de favoritos do Customer Hub e solte seu arquivo CSV na área de upload — nenhum modelo é necessário. O importador reconhecerá automaticamente o formato do seu arquivo e mapeará os dados de acordo para preencher os perfis do Customer Hub dos seus compradores.
Adicionar botões de favoritos às páginas de detalhes do produto
Aumente significativamente o engajamento adicionando botões "add to favorites" às páginas de detalhes de seus produtos.
Se o senhor usa um tema vintage Shopify ou uma configuração personalizada que não suporta o aplicativo bloco, consulte nossas instruções para instalar manualmente o botão de favoritos.
- Na configuração Favorites (Favoritos ) em Klaviyo, selecione Add app bloco.
- 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.
- Clique e arraste o aplicativo para ajustar seu posicionamento na página de detalhes do produto, conforme necessário.
- 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.
- 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.
- 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:
- Abra seu Shopify armazenar admin.
- No canal de vendas, selecione loja on-line.
- 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.
- 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".
- 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> - Clique em Save.
- Clique em Preview armazenar.
- 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:
- Abra seu Shopify armazenar admin.
- No canal de vendas, selecione loja on-line.
- 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.
- 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.
- 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).
- 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).
- Na barra lateral esquerda, procure e abra o arquivo de snippet identificado na etapa anterior (por exemplo, card-product.liquid).
- Na parte superior desse arquivo, observe o valor do objeto listado em "Accepts" (por exemplo, "card_product").
- 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-variante-id="{{OBJECT.selected_or_first_available_variant.id}}"
></div>
- Dica: Procure a primeira instância da renderização de preço em seu arquivo e cole o código acima dela.
- No código que o senhor colou, substitua
OBJECTpelo 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.
- 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.
- Clique em Salvar na Shopify.
- 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
OBJECTno 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 com o Klaviyo Customer Hub na Shopify
Conheça o Klaviyo Customer Hub, uma experiência personalizada exclusiva para os visitantes da loja on-line que os orienta desde a descoberta do produto até a compra e o suporte pós-compra.
- Como exibir recomendações de produtos no Klaviyo Customer Hub
Saiba como exibir recomendações personalizadas de produtos na gaveta do Klaviyo Customer Hub para personalizar as experiências de compra de seus clientes e gerar conversões. Ao mostrar produtos que atraem o cliente, o senhor pode melhorar a taxa de conversão e oferecer oportunidades de vendas cruzadas para aumentar o valor médio do pedido.
- Como estilizar seu Klaviyo Customer Hub
Saiba mais sobre as opções de design para estilizar a gaveta do Klaviyo Customer Hub e como o senhor pode projetá-la para combinar com a sua marca. Como a interface do Klaviyo Customer Hub está enraizada na experiência do cliente, é uma prática recomendada estilizá-la para que apareça como uma extensão do seu site.