Cómo agregar un enlace de Favoritos (ícono, texto o botón) al encabezado de Shopify

Descubre cómo agregar un enlace de Favoritos a tu barra de navegación (encabezado) de Shopify para que los compradores puedan abrir sus productos guardados directamente en Klaviyo Customer Hub.

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

Este enlace del encabezado abre los favoritos guardados. Para permitir que los compradores guarden productos desde las páginas de detalles del producto o de colecciones, sigue Cómo mostrar botones de favoritos en tu sitio y en Klaviyo Customer Hub.

Aviso Este proceso implica editar el código del tema de Shopify. Si no te sientes con confianza para escribir código o no tienes un desarrollador en tu equipo, recomendamos ponerte en contacto con un socio de Klaviyo para que te ayude. El equipo de soporte de Klaviyo no puede solucionar problemas de implementaciones de código personalizado.

Antes de empezar

Antes de agregar este enlace, configura Klaviyo Customer Hub en tu tienda de Shopify y habilita Favoritos en Klaviyo. Asegúrate de que la inserción de la aplicación de Klaviyo esté habilitada en el tema de Shopify que vas a editar.

Recomendamos ampliamente duplicar el tema en vivo antes de hacer cambios. Esto te permite probar el nuevo enlace sin afectar la tienda en vivo.

1. En Shopify, ve a Tienda en línea > Temas.
2. Haz clic en el menú de tres puntos (...) junto al tema en vivo.
3. Selecciona Duplicar.

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

Para la opción de icono a continuación, usa un archivo SVG de menos de 15 KB. Los SVG se ajustan a cualquier tamaño de pantalla sin perder calidad y pueden heredar los colores del tema. Si prefieres un enlace de texto o un botón, pasa al paso 2.

1. Necesitas encontrar un ícono que quieras usar. Puede ser cualquier ícono, pero recomendamos usar un SVG para evitar que se pixelee. Puedes descargar una versión estándar (con licencia MIT) aquí: Heroicons heart.svg. Guarda el archivo como icon-heart.svg para que coincida con el código del ícono a continuación.
2. En el Administrador de Shopify, ve a Tienda en línea > Temas.
3. Busca el tema duplicado y haz clic en el menú de tres puntos (...) > Editar código.
4. En la barra lateral izquierda, haz clic derecho en la carpeta assets y selecciona Cargar... para abrir el selector de archivos.
5. Selecciona el archivo SVG y haz clic en Abrir.

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

A continuación, agrega el fragmento de código para el ícono, el enlace de texto o el botón. Cada opción abre Favoritos en Klaviyo Customer Hub.

1. Si omitiste el paso 1, abre el editor de código en Shopify: ve a Tienda online > Temas. Junto al tema duplicado, haz clic en el menú de tres puntos (...) > Editar código. En el editor de código del tema duplicado, encuentra el archivo que controla el encabezado.
   • Temas de Online Store 2.0 (p. ej., Dawn): Busca sections/header.liquid.
   • Temas vintage: Busca snippets/header-icons.liquid o header-bar.liquid.
2. Encuentra el punto de inserción: Presiona Ctrl+F (o Cmd+F en Mac) y busca la palabra cart o account. Debes pegar el nuevo código dentro del mismo contenedor (por lo general, un <div> o <ul>) que contiene estos íconos existentes.
3. Pega 1 de las siguientes opciones de código donde quieras que aparezca el enlace (p. ej., justo antes del ícono del carrito).

Opción A: enlace de ícono

Usa este código si completaste el paso 1 y quieres mostrar un ícono de corazón, suponiendo que se llame icon-heart.svg en nuestro ejemplo:

<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>

Opción B: enlace de texto o botón

Usa este código si prefieres un enlace de texto o un botón. No necesitas subir ningún recurso para esto.

Para un enlace de texto simple:

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

Para un botón:

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

1. Haz clic en Guardar.

Consejo: haz que coincida con el estilo del tema Si el tema usa una clase de CSS específica para los íconos del encabezado (p. ej., header__icon o icon-link), puedes reemplazar el atributo style= en línea del código de arriba por esa clase (p. ej., class="header__icon"). Previsualiza el resultado para comprobar que el espaciado y los efectos al pasar el cursor coincidan con los de los demás enlaces del encabezado.

Paso 3: Prueba y publica los cambios

Después de guardar el código, obtén una vista previa del tema editado y prueba el enlace antes de publicarlo.

1. En Shopify, ve a Tienda en línea > Temas. Junto al tema duplicado que editaste, haz clic en el menú de tres puntos (...) > Vista previa.
2. Revisa el encabezado en computadoras y dispositivos móviles. Deberías ver el ícono, el enlace de texto o el botón que agregaste. Haz clic y confirma que se abran los favoritos guardados en Klaviyo Customer Hub.
3. Cuando estés listo para hacer que todos los cambios del tema duplicado sean visibles para los clientes, vuelve a Tienda online > Temas. En Temas en borrador, busca el duplicado editado y haz clic en Publicar.
4. Abre la tienda activa y vuelve a probar el enlace de Favoritos.

Guía de solución de problemas

Si el enlace no aparece, parece incorrecto o no abre Klaviyo Customer Hub:

• No se muestra el ícono: Revisa que el archivo esté en la carpeta assets, sea un SVG de menos de 15 KB y tenga exactamente el nombre icon-heart.svg para que coincida con el fragmento de código. El nombre de archivo distingue entre mayúsculas y minúsculas.
• El icono está desalineado: Es posible que debas ajustar los valores height y width en el atributo style del fragmento de código para que coincidan con la altura de la barra de navegación del tema.
• Los cambios no se muestran: Confirma que estás previsualizando el tema que editaste. Vuelve a abrir la vista previa desde Shopify. Guardar un tema duplicado no actualiza tu tienda en vivo; publícalo después de hacer pruebas.
• El enlace no abre Klaviyo Customer Hub: Confirma que Klaviyo Customer Hub esté configurado y que la integración de la app de Klaviyo esté habilitada en el tema que estás viendo. Comprueba que el enlace todavía use #k-hub/favorites.