Cómo añadir un enlace de favoritos (icono, texto o botón) al encabezado de Shopify

Añadir un icono específico de «Favoritos» a la barra de navegación de tu sitio web («encabezado») genera más interacción al reducir las dificultades para que tus clientes encuentren sus favoritos en Customer Hub. Al ofrecer a los compradores un punto de lanzamiento exclusivo para sus artículos guardados, les animas a crear cestas más grandes y a volver a tu tienda más a menudo.

Puedes implementar esto como un icono (por ejemplo, un corazón), un enlace de texto simple (por ejemplo, «Favoritos») o un botón. En esta guía, verás cómo insertar el código necesario en el encabezado de tu sitio web con el código Liquid de Shopify.

Esta guía cubre cómo subir un ícono de corazón a tus recursos temáticos e insertar el enlace de código en el encabezado de tu sitio web usando el código líquido de Shopify.

Observa que este proceso implica editar el código de tu tema de Shopify. Si no te sientes cómodo escribiendo código o no tienes desarrolladores en tu equipo, te recomendamos que te pongas en contacto con un socio de Klaviyo para que te ayude. La asistencia de Klaviyo no puede solucionar los problemas de implementación de códigos personalizados.

Antes de empezar

Te recomendamos encarecidamente que dupliques el tema activo antes de hacer cambios. Esto te permite probar el nuevo icono en un entorno seguro sin afectar a tu tienda en directo.

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

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

3. Selecciona Duplicar.

Paso 1: Prepara tus recursos (si quieres usar un icono)

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

1. Necesitas encontrar un icono que quieras usar. Puede ser cualquier icono, pero te recomendamos que uses un SVG para evitar la pixelación. Puedes descargar una versión estándar (con licencia MIT) aquí: Heroicons heart.svg.

2. En tu Shopify Administrador, dirígete a Tienda en línea > Temas.

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

4. En la barra lateral izquierda, desplázate hacia abajo hasta la carpeta Assets y haz clic en Add a new asset.

5. Sube el archivo de iconos.

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

A continuación, añade el fragmento de código que muestra el icono y lo enlaza con el Customer Hub.

1. En el editor de código del tema, localiza 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: pulsa Ctrl+F (o Cmd+F en Mac) y busca la palabra carrito o cuenta. Quieres pegar tu nuevo código dentro del mismo contenedor (generalmente <div> o <ul>) que contiene estos iconos existentes.

3. Pega una de las siguientes opciones de código donde quieras que aparezca el enlace (por ejemplo, justo antes del icono de carrito).

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

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

Consejo: Haz coincidir el estilo de tu tema Si tu tema usa una clase de CSS específica para los iconos de encabezado (por ejemplo, encabezado__icon or icon-link), you can replace the inline style= attribute in the code above with that class (e.g., class="header__icono»). Esto asegura que el espaciado y los efectos de desplazamiento 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é de cualquier navegador. Deberías ver el icono del corazón en tu barra de navegación. Al hacer clic en este icono, se abrirá la pestaña Favoritos en el Customer Hub.

Solución de problemas

Si el icono no aparece o parece incorrecto:

• El icono es una imagen rota: Asegúrate de que hayas subido el archivo a la carpeta Assets y lo hayas llamado exactamente icon-heart.svg. Los nombres de los archivos distinguen entre mayúsculas y minúsculas.

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

• Cambios que no se muestran: Shopify Themes cache agresivamente. Prueba a previsualizar el tema en una ventana de incógnito o a añadir ?preview_theme_id= a tu URL si estás trabajando en un borrador de tema.