Cómo agregar un enlace de Favoritos (icono, texto o botón) al encabezado de tu tienda Shopify

Añadir un icono específico de Favoritos de "" a la barra de navegación de tu sitio web ("header") fomenta una mayor interacción al reducir la fricción para que tus clientes encuentren sus favoritos dentro del Centro de clientes de Klaviyo. Al ofrecer a los compradores un punto de partida específico para los artículos que han guardado, los animas a llenar más sus carritos y a volver a tu tienda con mayor frecuencia.

Puedes implementarlo como un ícono (por ejemplo, un corazón), un simple enlace de texto (por ejemplo, "Favoritos") o un botón. Esta guía explica cómo insertar el código necesario en el encabezado de tu sitio web utilizando el código Liquid de Shopify.

Esta guía explica cómo subir un ícono de corazón a los recursos de tu tema e insertar el enlace del código en el encabezado de tu sitio web utilizando el código Liquid de Shopify.

Aviso: este proceso implica editar el código del tema de Shopify. Si no te sientes cómodo escribiendo código o no tienes un desarrollador en tu equipo, te recomendamos que te pongas en contacto con un socio de Klaviyo para que te ayude. El servicio de asistencia de Klaviyo no puede resolver problemas relacionados con implementaciones de código personalizado.

Antes de empezar

Recomendamos encarecidamente duplicar tu tema activo antes de realizar cambios. Esto te permite probar el nuevo ícono en un entorno seguro sin afectar tu tienda en vivo.

1. En Shopify, ve a Tienda en línea > ar temas.

2. Haz clic en el menú de tres puntos (...) junto a tu tema activo.

3. Selecciona Duplicar.

Paso 1: Prepara tus recursos (si deseas utilizar un ícono).

Primero, sube el archivo del ícono que servirá como botón. Lo mejor es utilizar un archivo SVG, ya que se adapta a cualquier tamaño de pantalla sin perder calidad y puede heredar los colores de tu tema.

1. Debes encontrar el ícono que deseas utilizar. Puede ser cualquier icono, pero recomendamos utilizar un SVG para evitar la pixelación. Puedes descargar una versión estándar (con licencia MIT) aquí: Heroicons heart.svg.

2. En tu Administrador de Shopify, ve a Tienda en línea > ar temas.

3. Busca tu tema y haz clic en el menú de tres puntos (...) >. Edita el código.

4. En la barra lateral izquierda, desplázate hacia abajo hasta la carpeta Activos y haz clic en Añadir un nuevo activo.

5. Sube tu archivo de icono.

Paso 2: Inserta el enlace del encabezado (barra de navegación superior).

A continuación, agrega el fragmento de código que muestra el ícono y lo vincula al Centro de clientes de Klaviyo.

1. En el editor de código del tema, busca el archivo que controla tu encabezado.

   • Temas de la tienda en línea 2.0 (por ejemplo, Dawn): busca sections/header.liquid.

   • Temas vintage: Busca snippets/header-icons.liquid o header-bar.liquid.

2. Busca el punto de inserción: presiona Ctrl+F (o Cmd+F en Mac) y busca la palabra carrito o cuenta. Debes pegar el nuevo código dentro del mismo contenedor (normalmente un div<> o un <div> <ul>ul<>) que contiene estos iconos existentes.

3. Pega una de las opciones de código que aparecen a continuación donde quieras que aparezca el enlace (por ejemplo, justo antes del ícono del carrito).

<a href="#k-hub/favorites"
   id="favorites-icon-bubble"
   aria-label="Abrir favoritos"
   title="Favoritos"
   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;"> 
  Favoritos
</a>

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

Consejo: Adaptar el estilo de tu tema Si tu tema utiliza una clase CSS específica para los iconos del encabezado (por ejemplo, header__icon or icon-link), you can replace the inline style= attribute in the code above with that class (e.g., class="header__icon"). Esto garantiza que el espaciado y los efectos al pasar el cursor coincidan perfectamente con tus otros botones.

Resultado

Una vez guardado, abre tu tienda en una nueva ventana de incógnito/privada para evitar el almacenamiento en caché del navegador. Deberías ver el ícono del corazón en tu barra de navegación. Al hacer clic en este ícono, se abrirá la pestaña Favoritos dentro del Centro de atención al cliente de Klaviyo.

Guía de solución de problemas

Si el ícono no aparece o se ve incorrecto:

• El ícono es una imagen dañada: asegúrate de haber subido el archivo a la carpeta Assets y de haberlo nombrado exactamente icon-heart.svg. Los nombres de los archivos distinguen entre mayúsculas y minúsculas.

• El ícono está desalineado: es posible que tengas que ajustar los valores de altura y anchura en el atributo de estilo del fragmento de código para que coincidan con la altura de la barra de navegación de tu tema.

• Los cambios no se muestran: los temas de Shopify almacenan en caché de forma agresiva. Prueba a previsualizar el tema en una ventana de incógnito o añade ?preview_theme_id= a tu URL si estás trabajando en un borrador del tema.