Como adicionar um link de Favoritos (ícone, texto ou botão) ao cabeçalho da Shopify

Ao adicionar um ícone específico "Favorites" à barra de navegação do seu site (cabeçalho"" ), você aumenta o engajamento ao reduzir o atrito para que seus clientes encontrem seus favoritos no Klaviyo Customer Hub. Ao oferecer aos compradores um ponto de lançamento dedicado para os itens salvos, você os incentiva a montar cestas maiores e a voltar à sua loja com mais frequência.

Você pode implementar isso como um ícone (por exemplo, um coração), um link de texto simples (por exemplo, "Favorites") ou um botão. Este guia aborda como inserir o código necessário no cabeçalho do seu site usando o código Liquid da Shopify.

Este guia aborda como carregar um ícone de coração nos ativos do seu tema e inserir o link do código no cabeçalho do seu site usando o código Liquid da Shopify.

Aviso Esse processo envolve a edição do código do tema da Shopify. Se você não se sente à vontade para escrever códigos ou não tem um desenvolvedor na sua equipe, recomendamos que entre em contato com um parceiro da Klaviyo para obter ajuda. O suporte da Klaviyo não pode solucionar problemas de implementação de códigos personalizados.

Antes de começar

É altamente recomendável que você duplique seu tema ativo antes de fazer alterações. Isso permite que você teste o novo ícone em um ambiente seguro sem afetar sua loja ativa.

1. Na Shopify, acesse a Loja virtual > Themes.

2. Clique no menu de três pontos (...) ao lado do seu tema ao vivo.

3. Selecione Duplicar.

Etapa 1: Prepare seus ativos (se você quiser usar um ícone)

Primeiro, carregue o arquivo do ícone que servirá como botão. É melhor usar um arquivo SVG porque ele se adapta a qualquer tamanho de tela sem perder a qualidade e pode herdar as cores do seu tema.

1. Você precisa encontrar um ícone que queira usar. Pode ser qualquer ícone, mas recomendamos que você use um SVG para evitar pixelização. Você pode fazer o download de uma versão padrão (licenciada pelo MIT) aqui: Heroicons heart.svg.

2. Em seu Shopify Administrador, navegue até Loja virtual > Temas.

3. Encontre seu tema e clique no menu de três pontos (...) > Editar código.

4. Na barra lateral esquerda, role para baixo até a pasta Assets (Ativos ) e clique em Add a new asset (Adicionar um novo ativo).

5. Carregue seu arquivo de ícone.

Etapa 2: Insira o link do cabeçalho (barra de navegação superior)

Em seguida, adicione o snippet de código que exibe o ícone e o vincula ao Klaviyo Customer Hub.

1. No editor de código do tema, localize o arquivo que controla o cabeçalho.

   • Temas da Online Store 2.0 (por exemplo, Dawn): Procure por sections/header.liquid.

   • Temas vintage: Procure por snippets/header-icons.liquid ou header-bar.liquid.

2. Encontre o ponto de inserção: Pressione Ctrl+F (ou Cmd+F no Mac) e procure a palavra carrinho ou conta. Você deseja colar o novo código dentro do mesmo contêiner (geralmente um <div> ou <ul>) que contém esses ícones existentes.

3. Cole uma das opções de código abaixo de onde você deseja que o link apareça (por exemplo, logo antes do ícone do carrinho).

<a href="#k-hub/favorites"
 id="favorites-icon-bubble"
 aria-label="Open Favorites"
 title="Favorites"
 style="display:flex;align-items:center;justify-content:center;height:4.4rem;width:4.4rem;">
  <span style="height:20px;width:20px"> 
 {{ 'icon-heart.svg' | inline_asset_content }} 
 </span>
</a>

<a href="#k-hub/favorites" class="header__menu-item header__menu-item--list" style="text-decoration: none;"> 
 Favorites
</a>

<a href="#k-hub/favorites" class="button button--primary"> 
 Favorites
</a>

Se o seu tema usar uma classe CSS específica para os ícones de cabeçalho (por exemplo, cabeçalho__icon or icon-link), you can replace the inline style= attribute in the code above with that class (e.g., class="header__icon"),você poderá usar uma classe CSS específica para os ícones de cabeçalho. Isso garante que o espaçamento e os efeitos de foco coincidam perfeitamente com os outros botões.

Resultado

Depois de salvar, abra sua loja em uma nova janela anônima/privada para ignorar o cache do navegador. Você deverá ver o ícone de coração na barra de navegação. Ao clicar nesse ícone, você abrirá a guia Favorites (Favoritos ) no Klaviyo Customer Hub.

Solução de problemas

Se o ícone não for exibido ou parecer incorreto, você poderá usar o ícone para fazer a leitura:

• O ícone é uma imagem quebrada: Certifique-se de que você carregou o arquivo na pasta Assets e o nomeou exatamente como icon-heart.svg. Os nomes de arquivos diferenciam maiúsculas de minúsculas.

• O ícone está desalinhado: Talvez você precise ajustar os valores de altura e largura no atributo de estilo do snippet de código para corresponder à altura da barra de navegação do seu tema.

• As alterações não são exibidas: O cache de temas do Shopify é agressivo. Tente visualizar o tema em uma janela anônima ou anexar ?preview_theme_id= ao URL se você estiver trabalhando em um tema de rascunho.