Reach

Grow

Manage

Automate

Iniciar sesión

Reservar demo

Reach

Grow

Manage

Automate

Iniciar sesión

Reservar demo

Reservar demo

G

G

M

M

Templating Avanzado de Email

Emails Dinámicos y Personalizados con Liquid Language

Templating Avanzado de Email

Templating Avanzado de Email

Predefined Variables

Predefined Variables

Conditional Logic and Loops

Conditional Logic and Loops

Trabajando con Products

Trabajando con Products

Templating Avanzado de Email

Templating Avanzado de Email

Templating Avanzado de Email

La Elaboración Avanzada de Plantillas de Correo Electrónico permite crear plantillas de correo electrónico altamente personalizadas. Se puede utilizar tanto en el editor de arrastrar y soltar como directamente en HTML importado.

Documentación del Lenguaje de Plantillas de Correo Electrónico de Bird

El Lenguaje de Plantillas de Correo Electrónico de Bird es una herramienta poderosa basada en la sintaxis Liquid de Shopify, con extensiones personalizadas diseñadas específicamente para el marketing por correo electrónico. Este lenguaje te permite crear plantillas de correo electrónico dinámicas y personalizadas de manera eficiente, lo que te permite enviar contenido dirigido a tus suscriptores.

  • Las características clave del Lenguaje de Plantillas de Correo Electrónico de Bird incluyen:

  • Personalización fácil utilizando variables predefinidas

  • Visualización de contenido condicional basada en atributos o segmentos de suscriptores

  • Integración con tu catálogo de productos y fuentes de datos externas

  • Soporte para la internacionalización a través de traducciones

  • Opciones avanzadas de formato con filtros

Esta guía te llevará a través de los componentes esenciales del lenguaje, proporcionando ejemplos y mejores prácticas para ayudarte a crear plantillas de correo electrónico efectivas. Para una referencia completa sobre la sintaxis Liquid subyacente, consulta la documentación de Shopify Liquid.

Predefined Variables

Las variables predefinidas te permiten personalizar fácilmente tus correos electrónicos con información del destinatario y detalles de la organización.

Variables de Contacto

Utiliza estas para insertar información específica del destinatario en tus correos electrónicos:

{{ contact.attributes.firstName }}
{{ contact.attributes.lastName }}
{{ contact.attributes.email }}

También puedes usar cualquier atributo personalizado que hayas definido para tus contactos.

Variables de Organización

Incluye la información de tu empresa de manera consistente en todos los correos electrónicos:

{{ organization.name }}
{{ organization.fullAddress }}
{{ organization.websiteUrl }}
{{ organization.street }}
{{ organization.city }}
{{ organization.state }}
{{ organization.country }}
{{ organization.zipCode }}

Variable de Dirección de Correo Electrónico

Referencia la dirección de correo electrónico del destinatario directamente:

{{ emailAddress }}

Mejor Práctica: Siempre ten una alternativa para las variables de personalización en caso de que no estén configuradas para un destinatario en particular.

Filtros de Etiqueta

Los filtros te permiten modificar la salida de tus variables, asegurándote de que el contenido esté formateado correctamente para tus correos electrónicos.

  • default: Configura un valor alternativo si la variable está vacía

{{ contact.attributes.firstName | default: 'Valued Customer' }}

  • capitalize, upcase, downcase: Cambiar el caso del texto

{{ contact.attributes.firstName | capitalize }}
{{ product.brand | upcase }}
{{ 'IMPORTANT NOTICE' | downcase }}

  • date: Formatear fechas según patrones especificados

{{ contact.attributes.birthday | date: '%B %d, %Y' }}
{{ 'now' | date: '%Y-%m-%d %H:%M' }}

  • currencyFormat: Formatear números como moneda

{{ product.price | currencyFormat: 'USD' }}

Mejor Práctica: Usa el filtro currencyFormat para todas las exhibiciones de precios para asegurar consistencia y un formato adecuado en diferentes regiones.

Etiquetas Especiales

Las etiquetas especiales proporcionan acceso rápido a requisitos comunes de marketing por correo electrónico, tales como enlaces de cancelación de suscripción y vistas web.

Enlaces de Cancelación de Suscripción

Esencial para el cumplimiento con las regulaciones de correo electrónico:

{% unsubscribe %}  <!-- Outputs: <a href="...">Unsubscribe</a> -->
{% unsubscribe 'Click here to unsubscribe' %}  <!-- Custom text -->
<a href="{% unsubscribeLink %}">Manage your preferences</a>  <

Enlaces de Vista Web

Proporciona una opción para ver el correo electrónico en un navegador web:

{% webView %}  <!-- Outputs: <a href="...">View in browser</a> -->
{% webView 'View this email online' %}  <!-- Custom text -->
<a href="{% webViewLink %}">Trouble viewing? Click here</a>  <

Etiquetas de Fecha

Útil para mostrar fechas actuales en tus correos electrónicos:

Today's Date: {% currentYear %}-{% currentMonthName %}-{% currentDay %}
Sent on: {% currentWeekday %}

Mejor Práctica: Siempre incluye un enlace de cancelación de suscripción en tus correos electrónicos, generalmente en el pie de página.

Las variables predefinidas te permiten personalizar fácilmente tus correos electrónicos con información del destinatario y detalles de la organización.

Variables de Contacto

Utiliza estas para insertar información específica del destinatario en tus correos electrónicos:

{{ contact.attributes.firstName }}
{{ contact.attributes.lastName }}
{{ contact.attributes.email }}

También puedes usar cualquier atributo personalizado que hayas definido para tus contactos.

Variables de Organización

Incluye la información de tu empresa de manera consistente en todos los correos electrónicos:

{{ organization.name }}
{{ organization.fullAddress }}
{{ organization.websiteUrl }}
{{ organization.street }}
{{ organization.city }}
{{ organization.state }}
{{ organization.country }}
{{ organization.zipCode }}

Variable de Dirección de Correo Electrónico

Referencia la dirección de correo electrónico del destinatario directamente:

{{ emailAddress }}

Mejor Práctica: Siempre ten una alternativa para las variables de personalización en caso de que no estén configuradas para un destinatario en particular.

Filtros de Etiqueta

Los filtros te permiten modificar la salida de tus variables, asegurándote de que el contenido esté formateado correctamente para tus correos electrónicos.

  • default: Configura un valor alternativo si la variable está vacía

{{ contact.attributes.firstName | default: 'Valued Customer' }}

  • capitalize, upcase, downcase: Cambiar el caso del texto

{{ contact.attributes.firstName | capitalize }}
{{ product.brand | upcase }}
{{ 'IMPORTANT NOTICE' | downcase }}

  • date: Formatear fechas según patrones especificados

{{ contact.attributes.birthday | date: '%B %d, %Y' }}
{{ 'now' | date: '%Y-%m-%d %H:%M' }}

  • currencyFormat: Formatear números como moneda

{{ product.price | currencyFormat: 'USD' }}

Mejor Práctica: Usa el filtro currencyFormat para todas las exhibiciones de precios para asegurar consistencia y un formato adecuado en diferentes regiones.

Etiquetas Especiales

Las etiquetas especiales proporcionan acceso rápido a requisitos comunes de marketing por correo electrónico, tales como enlaces de cancelación de suscripción y vistas web.

Enlaces de Cancelación de Suscripción

Esencial para el cumplimiento con las regulaciones de correo electrónico:

{% unsubscribe %}  <!-- Outputs: <a href="...">Unsubscribe</a> -->
{% unsubscribe 'Click here to unsubscribe' %}  <!-- Custom text -->
<a href="{% unsubscribeLink %}">Manage your preferences</a>  <

Enlaces de Vista Web

Proporciona una opción para ver el correo electrónico en un navegador web:

{% webView %}  <!-- Outputs: <a href="...">View in browser</a> -->
{% webView 'View this email online' %}  <!-- Custom text -->
<a href="{% webViewLink %}">Trouble viewing? Click here</a>  <

Etiquetas de Fecha

Útil para mostrar fechas actuales en tus correos electrónicos:

Today's Date: {% currentYear %}-{% currentMonthName %}-{% currentDay %}
Sent on: {% currentWeekday %}

Mejor Práctica: Siempre incluye un enlace de cancelación de suscripción en tus correos electrónicos, generalmente en el pie de página.

Las variables predefinidas te permiten personalizar fácilmente tus correos electrónicos con información del destinatario y detalles de la organización.

Variables de Contacto

Utiliza estas para insertar información específica del destinatario en tus correos electrónicos:

{{ contact.attributes.firstName }}
{{ contact.attributes.lastName }}
{{ contact.attributes.email }}

También puedes usar cualquier atributo personalizado que hayas definido para tus contactos.

Variables de Organización

Incluye la información de tu empresa de manera consistente en todos los correos electrónicos:

{{ organization.name }}
{{ organization.fullAddress }}
{{ organization.websiteUrl }}
{{ organization.street }}
{{ organization.city }}
{{ organization.state }}
{{ organization.country }}
{{ organization.zipCode }}

Variable de Dirección de Correo Electrónico

Referencia la dirección de correo electrónico del destinatario directamente:

{{ emailAddress }}

Mejor Práctica: Siempre ten una alternativa para las variables de personalización en caso de que no estén configuradas para un destinatario en particular.

Filtros de Etiqueta

Los filtros te permiten modificar la salida de tus variables, asegurándote de que el contenido esté formateado correctamente para tus correos electrónicos.

  • default: Configura un valor alternativo si la variable está vacía

{{ contact.attributes.firstName | default: 'Valued Customer' }}

  • capitalize, upcase, downcase: Cambiar el caso del texto

{{ contact.attributes.firstName | capitalize }}
{{ product.brand | upcase }}
{{ 'IMPORTANT NOTICE' | downcase }}

  • date: Formatear fechas según patrones especificados

{{ contact.attributes.birthday | date: '%B %d, %Y' }}
{{ 'now' | date: '%Y-%m-%d %H:%M' }}

  • currencyFormat: Formatear números como moneda

{{ product.price | currencyFormat: 'USD' }}

Mejor Práctica: Usa el filtro currencyFormat para todas las exhibiciones de precios para asegurar consistencia y un formato adecuado en diferentes regiones.

Etiquetas Especiales

Las etiquetas especiales proporcionan acceso rápido a requisitos comunes de marketing por correo electrónico, tales como enlaces de cancelación de suscripción y vistas web.

Enlaces de Cancelación de Suscripción

Esencial para el cumplimiento con las regulaciones de correo electrónico:

{% unsubscribe %}  <!-- Outputs: <a href="...">Unsubscribe</a> -->
{% unsubscribe 'Click here to unsubscribe' %}  <!-- Custom text -->
<a href="{% unsubscribeLink %}">Manage your preferences</a>  <

Enlaces de Vista Web

Proporciona una opción para ver el correo electrónico en un navegador web:

{% webView %}  <!-- Outputs: <a href="...">View in browser</a> -->
{% webView 'View this email online' %}  <!-- Custom text -->
<a href="{% webViewLink %}">Trouble viewing? Click here</a>  <

Etiquetas de Fecha

Útil para mostrar fechas actuales en tus correos electrónicos:

Today's Date: {% currentYear %}-{% currentMonthName %}-{% currentDay %}
Sent on: {% currentWeekday %}

Mejor Práctica: Siempre incluye un enlace de cancelación de suscripción en tus correos electrónicos, generalmente en el pie de página.

Conditional Logic and Loops

La lógica condicional y los bucles te permiten crear contenido dinámico que se adapta a los atributos o preferencias de cada destinatario.

If Statements

Utiliza if statements para mostrar contenido diferente basado en los atributos del destinatario:

{% if contact.attributes.membership == "gold" %}
  <h2>Exclusive Gold Member Offer</h2>
  <p>Enjoy 20% off your next purchase!</p>
{% elsif contact.attributes.membership == "silver" %}
  <h2>Special Silver Member Discount</h2>
  <p>Get 15% off select items!</p>
{% else %}
  <h2>Limited Time Offer</h2>
  <p>Save 10% on your next order!</p>
{% endif %}

Comprobación de Membresía en Segmentos

Dirige contenido a segmentos específicos de tu audiencia: 

{% if contact.segments contains "abcd-1234-efgh-5678" }
  This contact is a member of the segment with ID "abcd-1234-efgh-5678".
{% endif %}

Loops

Itera sobre arreglos de datos para crear listas dinámicas:

<h3>Your Favorite Colors:</h3>
<ul>
{% for color in contact.attributes.favoriteColors %}
  <li style="color: {{ color }};">{{ color }}</li>
{% endfor %}
<

Mejor Práctica: Usa lógica condicional para adaptar tu mensaje a diferentes segmentos de audiencia, aumentando la relevancia y el compromiso.

Trabajando con Products

Integra tu catálogo de productos directamente en tus plantillas de correo electrónico para mostrar productos dinámicos.

Single Product Lookup

Muestra detalles de un producto específico:

{% catalog 'PRODUCT-ID-123' %}
  <div class="product">
    <h2>{{ catalogItem.title }}</h2>
    <img src="{{ catalogItem.imageUrl }}" alt="{{ catalogItem.title }}">
    <p>Price: {{ catalogItem.price | currencyFormat: catalogItem.currency }}</p>
    {% if catalogItem.originalPrice > catalogItem.price %}
      <p>Original Price: <strike>{{ catalogItem.originalPrice | currencyFormat: catalogItem.currency }}</strike></p>
    {% endif %}
    <a href="{{ catalogItem.url }}">Shop Now</a>
  </div>
{


Product Feed

Muestra múltiples productos de un feed:

<h2>Recommended for You</h2>
<div class="product-grid">
  {% productfeed 'FEED-ID-456' %}
    {% for item in catalogItems limit:3 %}
      <div class="product">
        <h3>{{ item.title }}</h3>
        <img src="{{ item.imageUrl }}" alt="{{ item.title }}">
        <p>{{ item.price | currencyFormat: item.currency }}</p>
        <a href="{{ item.url }}">View Product</a>
      </div>
    {% endfor %}
  {% endproductfeed %}
</div>

Mejor práctica: Usa feeds de productos para crear contenido dinámico como secciones de "Productos Recomendados" o "Nuevas Llegadas" en tus correos electrónicos.

Eventos

Aproveche los datos de eventos para crear correos electrónicos altamente relevantes y oportunos basados en las acciones de los suscriptores. Esto es generalmente relevante para correos electrónicos enviados a través de recorridos con desencadenantes de eventos.

{% if event.type == "abandoned_cart" %}
  <h2>Did you forget something?</h2>
  <p>We noticed you left some items in your cart:</p>
  <ul>
  {% for item in event.properties.items %}
    <li>{{ item.product_name }} - {{ item.price | currencyFormat: event.properties.currency }}</li>
  {% endfor %}
  </ul>
  <a href="{{ event.properties.checkout_url }}">Complete your purchase</a>
{% elsif event.type == "purchase_confirmation" %}
  <h2>Thank you for your purchase!</h2>
  <p>Order Total: {{ event.properties.total_price | currencyFormat: event.properties.currency }}</p>
  <p>Order ID: {{ event.properties.order_id }}</p>
{

Mejor práctica: Utilice datos de eventos para desencadenar correos electrónicos oportunos y relevantes, como recordatorios de carrito abandonado o confirmaciones de compra.

Discount Codes

Genera y muestra códigos de descuento únicos en tus correos electrónicos para incentivar las compras.

<h2>Your Exclusive Offer</h2>
<p>Use this code for 15% off your next purchase:</p>
<div class="discount-code">{% discountCode "SUMMER_SALE_POOL" %}</div>

Mejor práctica: Usa códigos de descuento únicos para rastrear el rendimiento de diferentes campañas o segmentos de correo electrónico.

Traducciones

Crea plantillas de correo electrónico multilingües utilizando la función de traducción.

Primero, configure sus archivos de traducción (en formato JSON) para cada idioma que soporte. Por ejemplo:

{
  "welcome_message": "Welcome to our store!",
  "sale_announcement": "Don't miss our big sale, {{name}}!",
  "product_of_the_day": "Product of the day: {{product}}"
}

Luego use el filtro t en sus plantillas:

<h1>{{ "welcome_message" | t }}</h1>
<p>{{ "sale_announcement" | t: "name", contact.attributes.firstName }}</p>
<h2>{{ "product_of_the_day" | t: "product", featuredProduct.title }}</h2>

Mejor práctica: Utilice traducciones para crear una sola plantilla que se pueda utilizar para varios idiomas, reduciendo el mantenimiento.


Fuentes de Datos Externas

Integra datos en tiempo real de fuentes externas en tus correos electrónicos. Puedes aprender más sobre las fuentes de datos externas aquí.

Uso Básico:

{% datafetch "weather-api" %}
  <p>Current temperature in your area: {{ dataFetchResponse.temperature }}°C</p>
  <p>Weather condition: {{ dataFetchResponse.condition }}</p>
{

Usando URLs Dinámicas

Para las APIs que requieren parámetros dinámicos:

{% datafetch "user-recommendations", "userId", contact.attributes.userId %}
  <h2>Recommended for You</h2>
  <ul>
  {% for product in dataFetchResponse.recommendations %}
    <li>{{ product.name }} - {{ product.price | currencyFormat: 'USD' }}</li>
  {% endfor %}
  </ul>
{

Mejor Práctica: Usa fuentes de datos externas para incluir información actualizada y personalizada en tus correos electrónicos, como saldos de cuentas, puntos de lealtad o recomendaciones personalizadas.


Sintaxis Avanzada de Liquid

Mientras que el Bird Email Template Language ofrece funciones potentes específicas para el marketing por correo electrónico, está construido sobre Liquid, que ofrece características avanzadas adicionales. Aquí hay algunos ejemplos:

Manejo de Arrays y Objetos

{% assign sorted_products = products | sort: 'price' %}
{% assign expensive_products = sorted_products | where: "price", ">", 100 %}

Operaciones Matemáticas

{% assign total = product.price | times: item.quantity %}
{% assign discount = total | divided_by: 4 %}

Manipulación de Cadenas

{% assign lowercase_name = contact.attributes.firstName | downcase %}
{% assign greeting = "Hello, " | append: lowercase_name | capitalize %}

Control de Flujo

{% case shipping_method %}
  {% when 'ground' %}
    Estimated delivery: 5-7 business days
  {% when 'express' %}
    Estimated delivery: 2-3 business days
  {% else %}
    Please contact us for shipping information
{% endcase %}

Para una guía completa sobre estas características avanzadas de Liquid, por favor consulta la documentación de Shopify Liquid.

Mejor Práctica: Aunque estas funciones avanzadas son poderosas, úsalas con prudencia. Las plantillas excesivamente complejas pueden ser difíciles de mantener y pueden afectar el rendimiento de renderización del correo electrónico.

Recuerda probar exhaustivamente tus plantillas de correo electrónico en diferentes clientes de correo para asegurar una renderización consistente y un rendimiento óptimo. La plataforma Bird proporciona herramientas para previsualizar y probar tus plantillas antes de enviarlas.

Dominando el Bird Email Template Language, serás capaz de crear campañas de correo electrónico altamente dinámicas, personalizadas y atractivas que resuenen con tu audiencia y generen resultados.

Conectémosle con un experto de Bird.
Vea el poder completo del Bird en 30 minutos.

Al enviar, aceptas que Bird pueda contactarte sobre nuestros productos y servicios.

Puedes darte de baja en cualquier momento. Consulta el Aviso de Privacidad de Bird para obtener detalles sobre el procesamiento de datos.

R

Reach

E

Email

V

Voice API

N

Numbers API

S

SMS API

W

WhatsApp API

G

Grow

M

Marketing

S

Ventas

M

Manage

S

Soporte

P

Pagos

H

HR

E

Gastos

A

Automate

A

AI

W

Workflows

Recursos

Changelog

Base de conocimientos

Centro de desarrolladores

Centro de soporte

Clientes

Blog

Company

Acerca de

Precio

Partners

Carreras

Legal

Términos

Configuración de privacidad

Newsletter

Mantente al día con Bird a través de actualizaciones semanales en tu buzón.

x.com

Instagram

LinkedIn

Contactar Soporte

Conectémosle con un experto de Bird.
Vea el poder completo del Bird en 30 minutos.

Al enviar, aceptas que Bird pueda contactarte sobre nuestros productos y servicios.

Puedes darte de baja en cualquier momento. Consulta el Aviso de Privacidad de Bird para obtener detalles sobre el procesamiento de datos.

R

Reach

E

Email

V

Voice API

N

Numbers API

S

SMS API

W

WhatsApp API

G

Grow

M

Marketing

S

Ventas

M

Manage

S

Soporte

P

Pagos

H

HR

E

Gastos

A

Automate

A

AI

W

Workflows

Recursos

Changelog

Base de conocimientos

Centro de desarrolladores

Centro de soporte

Clientes

Blog

Company

Acerca de

Precio

Partners

Carreras

Legal

Términos

Configuración de privacidad

Newsletter

Mantente al día con Bird a través de actualizaciones semanales en tu buzón.

x.com

Instagram

LinkedIn

Contactar Soporte

Conectémosle con un experto de Bird.
Vea el poder completo del Bird en 30 minutos.

Al enviar, aceptas que Bird pueda contactarte sobre nuestros productos y servicios.

Puedes darte de baja en cualquier momento. Consulta el Aviso de Privacidad de Bird para obtener detalles sobre el procesamiento de datos.

R

Reach

G

Grow

M

Manage

A

Automate

Recursos

Changelog

Base de conocimientos

Centro de desarrolladores

Centro de soporte

Clientes

Blog

Company

Acerca de

Precio

Partners

Carreras

Legal

Términos

Configuración de privacidad

Newsletter

Mantente al día con Bird a través de actualizaciones semanales en tu buzón.

Contactar Soporte