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

Descubre cómo añadir un enlace de Favoritos a la 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 icono (por ejemplo, un corazón), un enlace de texto sencillo (por ejemplo, "Favoritos") o un botón. Esta guía explica cómo insertar el código necesario en el encabezado del sitio mediante el código Liquid de Shopify.

Este enlace del encabezado abre los favoritos guardados. Para permitir que los compradores guarden productos desde la página de detalles del producto o desde las páginas 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 cómodo escribiendo código o no tienes un desarrollador en el equipo, te recomendamos ponerte en contacto con un socio de Klaviyo para obtener ayuda. El equipo de soporte de Klaviyo no puede solucionar problemas relacionados con implementaciones de código personalizado.

Antes de empezar

Antes de añadir este enlace, configura Klaviyo Customer Hub en tu tienda 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.

Te recomendamos encarecidamente duplicar el tema en directo antes de hacer cambios. Esto te permite probar el nuevo enlace sin afectar a tu tienda en directo.

1. En Shopify, ve a Online Store > Themes.
2. Haz clic en el menú de tres puntos (...) junto al tema activo.
3. Selecciona Duplicar.

Paso 1: prepara los recursos (si quieres usar un icono)

Para la opción de icono que aparece a continuación, utiliza un archivo SVG de menos de 15 KB. Los SVG se adaptan 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. Tienes que encontrar un icono que quieras usar. Puede ser cualquier icono, pero recomendamos usar un SVG para evitar la pixelación. Puedes descargar aquí una versión estándar (con licencia MIT): Heroicons heart.svg. Guarda el archivo como icon-heart.svg para que coincida con el código del icono de abajo.
2. En el Administrador de Shopify, accede a Online Store > Themes.
3. Busca el tema duplicado y haz clic en menú de tres puntos (...) > Editar código.
4. En la barra lateral izquierda, haz clic con el botón derecho en la carpeta assets y selecciona Cargar... para abrir el selector de archivos.
5. Selecciona tu archivo SVG y haz clic en Abrir.

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

A continuación, añade el fragmento de código del icono, el enlace de texto o el botón. Cada opción abre Favoritos en Klaviyo Customer Hub.

1. Si te saltaste 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, localiza 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: pulsa Ctrl+F (o Cmd+F en Mac) y busca la palabra cart o account. Tienes que pegar el nuevo código dentro del mismo contenedor (normalmente un <div> o <ul>) que contiene estos iconos existentes.
3. Pega 1 de las opciones de código siguientes donde quieras que aparezca el enlace (p. ej., justo antes del icono del carrito).

Opción A: enlace de icono

Usa este código si has completado el paso 1 y quieres mostrar un icono de corazón, suponiendo que se llama 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 sencillo:

<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. Pulsa Guardar.

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

Paso 3: Prueba y publica los cambios

Después de guardar el código, previsualiza el tema editado y prueba el enlace antes de publicarlo.

1. En Shopify, ve a Tienda online > Temas. Junto al tema duplicado que editaste, haz clic en el menú de tres puntos (...) > Vista previa.
2. Comprueba el encabezado en ordenador y móvil. Deberías ver el icono, el enlace de texto o el botón que has añadido. Haz clic y confirma que abre los favoritos guardados en Klaviyo Customer Hub.
3. Cuando estés listo para hacer visibles para los clientes todos los cambios del tema duplicado, vuelve a Tienda online > Temas. En Temas en borrador, busca el duplicado editado y haz clic en Publicar.
4. Abre la tienda en vivo y vuelve a probar el enlace de Favorites.

Solución de problemas

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

• El icono no se muestra: Comprueba que el archivo esté en la carpeta assets, sea un SVG de menos de 15 KB y se llame exactamente 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: Puede que tengas que 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 aparecen: confirma que estás previsualizando el tema que editaste. Vuelve a abrir su vista previa desde Shopify. Guardar un tema duplicado no actualiza la tienda activa; publícalo después de hacer pruebas.
• El enlace no abre Klaviyo Customer Hub: Confirma que Klaviyo Customer Hub está configurado y que la inserción de la aplicación de Klaviyo está habilitada en el tema que estás viendo. Comprueba que el enlace siga usando #k-hub/favorites.