Vídeo tutorial: subir tus emails a Klaviyo

Este vídeo explica cómo subir a Klaviyo los emails HTML del plugin Emailify de Figma.

Si necesitas enlaces con variables de plantilla de Klaviyo (por ejemplo, {{ event.url }}) en tus párrafos de texto, el campo de enlace nativo de Figma los bloqueará por no ser URL válidas. Para evitarlo, puedes usar el formato especial de enlace de Klaviyo de Emailify, https://klaviyo.invalid/?{{ event.url }}, y Emailify incluirá la sintaxis de plantilla de Klaviyo sin modificar en el HTML exportado.

En el panel de exportación de Emailify, selecciona la opción Klaviyo en la lista desplegable y, después, pega una clave de API privada válida de Klaviyo (siguiendo estos pasos):

1. Inicia sesión en Klaviyo y ve a la página de ajustes API Keys de Klaviyo.
2. Haz clic en el botón Create Private API Key.
3. Ponle un nombre (por ejemplo, "Emailify API Key") y marca la opción Custom Key.
4. Marca la opción Read/Write Access en el ámbito de API Templates (todos los demás ámbitos de API pueden quedarse en No Access).
5. Haz clic en el botón de icono Copy de la sección Your Private Key, en la pantalla de confirmación de creación de la clave.
6. Pega en el plugin Emailify la clave de API que has copiado (debería tener un aspecto parecido a pk_b3338b071136f98817d2a0e0a9581137ee).

Cuando estés listo, haz clic en el botón Upload To Klaviyo para empezar a exportar a HTML los emails que hayas seleccionado en Figma y subirlos automáticamente a tu página de plantillas de Klaviyo.

Si tu email HTML pesa menos de 102kb pero Gmail lo sigue recortando después de enviarlo desde Klaviyo, la causa es que tienes activado el seguimiento de enlaces en Klaviyo, que sustituye automáticamente las URL originales de tus enlaces por "URL de seguimiento" mucho más largas y aumenta el tamaño del HTML que se envía. Para evitarlo, puedes desactivar el ajuste de seguimiento de enlaces/GA en tu cuenta de Klaviyo.

Actualizar plantillas de Klaviyo subidas desde Emailify

Si quieres que Emailify actualice automáticamente la misma plantilla de Klaviyo en lugar de crear una nueva cada vez, puedes activar el interruptor Enable Updatable Templates en los ajustes de exportación del plugin cuando esté seleccionada la opción Klaviyo.

Así, después de la primera subida correcta, se añade automáticamente un valor klaviyoTemplateId al nombre del frame de Figma, y Emailify reutiliza ese ID de plantilla guardado la próxima vez que se sube el mismo frame a Klaviyo.

Asegúrate de que el interruptor Enable Updatable Templates está activado antes de subir la plantilla por primera vez. Esa primera subida es la que guarda el Template ID original de Klaviyo en el nombre del frame de Figma para las siguientes subidas.

Esto solo actualiza la plantilla guardada en tu biblioteca de plantillas de Klaviyo. Si esa plantilla ya se ha usado en una campaña o un flujo de Klaviyo, Klaviyo crea una copia para ese mensaje, así que volver a subirla desde Emailify no sustituirá automáticamente esas copias en uso.

Usar en una campaña la plantilla de email subida a Klaviyo

1. Crea una campaña de email nueva en Klaviyo
2. Haz clic en el nombre de tu nueva plantilla en la pestaña Email:saved de la lista de la página Templates.
3. Haz clic en el botón Use template de la ventana emergente de vista previa.
4. Haz clic en el botón Save de la página del editor de código (este paso es importante)
5. Cuando aparezca "Your changes have been saved.", haz clic en el botón Back to Content.
6. Programa tu campaña de email como necesites.

Tests A/B de plantillas HTML personalizadas en Klaviyo

Klaviyo admite tests A/B de emails HTML personalizados, pero al crear el test, la variante B se convierte automáticamente en una copia idéntica de la variante A. Para probar dos diseños distintos de Emailify:

1. En Figma, ponles nombres claros a los dos frames de Emailify, por ejemplo, Summer Sale - Test A y Summer Sale - Test B. Emailify usa estos nombres de frame como nombres de las plantillas guardadas en Klaviyo.
2. Sube los dos frames a Klaviyo como plantillas guardadas independientes.
3. Usa la plantilla Test A para crear tu campaña de Klaviyo y, después, haz clic en Create A/B test, encima de la línea de asunto. Klaviyo creará la variante B como copia de la variante A.
4. En otra pestaña del navegador, abre la plantilla guardada Test B en Content > Templates, abre su editor de código y copia todo el HTML.
5. Vuelve a la campaña, abre la variante B, haz clic en Edit, sustituye el HTML copiado de Test A por el HTML de Test B y guarda los cambios.
6. Ponles nombres descriptivos a las dos variantes y, después, previsualiza o envía una prueba de cada versión y revisa la versión de texto sin formato antes de programar la campaña.

Si estás probando el diseño o el contenido del email, mantén iguales la línea de asunto y los datos del remitente para que solo cambie una variable.

Para más información sobre cómo configurar el test y elegir la métrica ganadora, consulta la guía de tests A/B de Klaviyo.

Textos e imágenes editables en Klaviyo (opcional)

IMPORTANTE: el nuevo editor de Klaviyo añade relleno automático a los bloques de texto y botones editables. Por desgracia, tendrás que volver a ponerlos a mano en "0" uno a uno para que el email se vea como tus diseños originales de Figma, siguiendo el vídeo de la sección Corregir el relleno automático que añade Klaviyo en las campañas editables, más abajo.

Si quieres que los bloques de contenido se puedan editar después de subir la plantilla a Klaviyo, activa el interruptor Editable Content en las opciones de exportación de Emailify y, después, sigue estos pasos en Klaviyo:

1. Crea una campaña de email nueva en Klaviyo
2. Haz clic en la opción Drag and Drop en el paso Content de la campaña
3. Haz clic en la pestaña My Templates y, después, en tu nueva plantilla
4. Haz clic en el botón Save y, después, en Back to Content
5. Haz clic en el botón Edit Email

Corregir el relleno automático que añade Klaviyo en las campañas editables

Como Klaviyo actualizó su editor y obliga a todas las plantillas a usarlo desde el 6 de junio de 2023, por desgracia, si exportas emails HTML con el interruptor Editable Content activado en Emailify, Klaviyo aplica de forma predeterminada unos ~18px de relleno adicional alrededor de cada elemento de texto, como atributo style en línea de un nuevo elemento <td> que inserta en el HTML si la plantilla es editable.

Al activar el interruptor Force the padding added by Klaviyo's new editor to be 0px en Emailify, se añade automáticamente algo de CSS adicional para quitar este relleno en todos los clientes móviles y en los clientes de escritorio que no son Outlook, como Gmail. Sin embargo, Outlook seguirá mostrando el relleno salvo que cambies a mano a "0" cada uno de los valores de "Padding" de los bloques de texto editables de tu plantilla al editar el email de tu campaña en el editor de Klaviyo.

Añadir un feed de productos dinámico a tus emails de Klaviyo

Vídeo tutorial: añadir un feed de productos dinámico a tus emails de Klaviyo

Este vídeo explica cómo añadir feeds de productos personalizados de Klaviyo a plantillas HTML personalizadas con el plugin Emailify de Figma.

Para añadir un feed de productos dinámico de Klaviyo a tu plantilla de email HTML en Emailify, puedes usar uno de los ajustes predefinidos de componentes de la pestaña Ecomm, entre las pestañas de categorías del plugin Emailify.

Después de añadir el componente a tu frame de Emailify, tienes que sustituir el nombre YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE del componente añadido por el nombre del Product Feed que hayas creado como feed de productos en tu cuenta de Klaviyo.

Para usar feeds de productos en HTML personalizado en Klaviyo, también tienes que asegurarte de activar el interruptor Editable Content en las opciones de exportación de Emailify, que te permitirá arrastrar y soltar en tu email un bloque "Product" predeterminado desde la barra lateral "Blocks" del editor de Klaviyo después de subirlo a tus plantillas de Klaviyo.

Te recomendamos seguir el vídeo tutorial de arriba para ver cómo hacerlo paso a paso y asegurarte de que tu plantilla de Klaviyo está bien configurada; si no sigues los pasos correctamente, puede que los datos de tu feed de productos no aparezcan.

Si necesitas ayuda con esto, ponte en contacto con un desarrollador de tu equipo o con tu representante de soporte de Klaviyo, ya que nosotros (Emailify) no podemos ofrecer asistencia técnica ni ayudar con implementaciones personalizadas de esta función de plantillas más avanzada de Klaviyo.

Añadir a mano una región editable para arrastrar y soltar el Product Feed de Klaviyo

Desde 2025, parece que también tienes que incluir a mano primero esta región editable en tu plantilla HTML desde el propio editor de código de plantillas HTML de Klaviyo y volver a guardar la plantilla antes de usarla en una campaña, para que el feed de productos dinámico cargue los datos:

<table>
  <tr>
    <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
      <div class="klaviyo-block klaviyo-text-block">
        Drag and Drop your Klaviyo Product Feed Block Here <br/>
        NOTE: Remove this text element in Klaviyo's editor when you're done! <br/>
        Video Tutorial: <a href="https://www.youtube.com/watch?v=PaRSIxVLYlo" target="_blank">https://www.youtube.com/watch?v=PaRSIxVLYlo</a>
      </div>
    </td>
  </tr>
</table>

Puedes pegarlo encima de la línea <div dir="auto" lang="en"... de tu plantilla HTML dentro del editor de plantillas de Klaviyo, lo que lo añadirá al principio de tu plantilla.

Añadir un feed de productos de carrito abandonado a tus emails de Klaviyo

Vídeo tutorial: crear en Figma una plantilla de email para el flujo de carrito abandonado de Klaviyo

Este vídeo explica cómo añadir flujos personalizados de carrito abandonado de Klaviyo a plantillas HTML personalizadas con el plugin Emailify de Figma.

Para añadir a tu plantilla de email HTML en Emailify un bloque dinámico de flujo de carrito abandonado de Klaviyo, puedes usar uno de los ajustes predefinidos de componentes de la pestaña Ecomm, entre las pestañas de categorías del plugin Emailify, para estas variantes:

• Shopify
• WooCommerce
• Magento 1
• Magento 2
• BigCommerce

Así se crean automáticamente las capas que contienen las variables de datos de eventos de producto de Klaviyo para cada plataforma. Ten en cuenta que, para que funcione, igualmente tendrás que configurar tu flujo de carrito abandonado de Klaviyo.

Si necesitas ayuda con esto, ponte en contacto con un desarrollador de tu equipo o con tu representante de soporte de Klaviyo, ya que nosotros (Emailify) no podemos ofrecer asistencia técnica ni ayudar con implementaciones personalizadas de esta función de plantillas más avanzada de Klaviyo.