Personalización avanzada de las plantillas de correo electrónico – WebSelf Simple Centro de Ayuda

En su tienda, puede enviar notificaciones de pedidos de clientes, correos electrónicos de marketing, o notificaciones de administración. Las plantillas de correo electrónico son una mezcla del HTML y código Freemarker. Cada plantilla tiene claves de mensajes, variables y marcas que son responsables de diferentes partes del correo electrónico. Puede personalizar cualquier plantilla cambiando su código: añadir o eliminar texto, añadir una imagen, cambiar el tamaño o el color del texto, etc.

Si quiere añadir un logotipo a los correos electrónicos o cambiar la información de la empresa, basta con cambiar la configuración en el panel de control de su tienda sin editar el código.

Solo para webmasters con experiencia.

Tabla de contenidos

Cambiar el asunto del correo electrónico de notificaciones al cliente

El asunto es el título que los clientes ven cuando reciben un correo electrónico. Cambiar el asunto de un correo electrónico le ayudará a personalizar sus notificaciones.

Para cambiar el asunto del correo electrónico:

Desde el panel de control de su tienda, vaya a Configuración → Notificaciones.
En la sección Notificaciones de pedido de cliente, abra el correo electrónico que desee editar.
En el campo Asunto, elimine el código introduzca su título y guarde los cambios. En nuestro ejemplo, el nuevo título es «Aquí tiene su nuevo pedido»:

Eso es todo. Ahora el asunto del correo electrónico será el que usted haya especificado:

Cambiar saludos a los clientes en los correos electrónicos

Por defecto, todos los correos electrónicos de los clientes comienzan con el saludo «Hola, Juan Sarmiento», donde «Juan Sarmiento» es un ejemplo de nombre que se sustituye por un nombre real de nombre del cliente en cada correo electrónico. El saludo continúa con la breve información sobre el asunto del correo electrónico. Por ejemplo, en el correo electrónico de confirmación del pedido, la segunda línea es «¡Hemos recibido su pedido! Gracias por su compra».

Puede cambiar tanto el saludo en sí como las siguientes líneas cambiando las claves del mensaje del correo electrónico.

Digamos que quiere cambiar el saludo de confirmación del pedido por «¡Hola, Juan Sarmiento! ¡Gracias por su confianza! Hemos recibido su pedido. Nos pondremos en contacto con usted para confirmar el plazo de entrega».

Para cambiar el saludo en una notificación por correo electrónico:

Desde el panel de control de su tienda, vaya a Configuración → Notificaciones.
Haga clic en Editar junto a una plantilla de correo electrónico que desee editar. En nuestro ejemplo, se trata de la plantilla de correo electrónico Confirmación del pedido.
Encuentre la línea con la clave del mensaje que contiene la parte «Hola»: <@rosetta.message key="OrderConfirmation.customer_greeting" params={ "customerName": customer.name } /> :
Sustituya todo el texto de esta línea por su mensaje. En nuestro ejemplo, es Hola, ${customer.name},
Encuentre la línea que contiene la parte de confirmación del pedido: <@rosetta.message key="OrderConfirmation.Confirmation.paid_order" params={ "storeName": store.name?html, "dateCreated": order.dateCreated } />
Sustituya todo el texto de esta línea por su mensaje. En nuestro ejemplo, es ¡Gracias por su confianza! Hemos recibido su pedido <@orderLink/>. Nos pondremos en contacto con usted para confirmar el plazo de entrega.
Guarde los cambios.

Ahora sus clientes verán los saludos personalizados en sus correos electrónicos de confirmación de pedido:

Añadir texto a las notificaciones de pedidos de los clientes

Puede añadir texto personalizado a cualquier notificación por correo electrónico. Digamos que quiere informar a sus clientes de que organiza un concurso en Facebook. Añadir un breve párrafo al correo electrónico de confirmación del pedido pondrá de relieve su concurso.

Se puede añadir un párrafo de texto a cualquier parte del correo electrónico. En nuestro ejemplo, será la sección «Gracias» al final del correo electrónico.

Nota:
Las marcas grises le ayudarán a navegar por la plantilla.

Para añadir un nuevo contenido a la plantilla de correo electrónico:

Desde el panel de control de su tienda, vaya a Configuración → Notificaciones.
Haga clic en Editar junto a la plantilla de correo electrónico del cliente que desea actualizar.
Busque la sección en la que desea añadir texto. En nuestro ejemplo, es la sección «Gracias» que se encuentra entre la sección  y  cerca de la parte inferior de la plantilla.

Añade el siguiente trozo de código justo encima de la línea :


 <tr>
 <td align="left" valign="top" style="padding-top: 40px; padding-bottom: 0;">
        <p style="font-family: ${fontFamily}; font-size: 16px; line-height: 24px; color: ${colorText}; margin: 0; padding: 0;">
          ADJUNTE SU MENSAJE DE TEXTO AQUÍ
        </p>
      </td>
    </tr>

Sustituya Añada su mensaje de texto aquí por su propio texto. Tendrá el siguiente aspecto:
Haga clic en Guardar.

Hecho. Su mensaje personalizado aparecerá en la parte inferior del correo electrónico, después del mensaje de Gracias. Haga clic en Ver plantilla para ver la plantilla de correo electrónico actualizada:

Añadir imágenes a las notificaciones por correo electrónico

Las imágenes son útiles cuando se quiere captar la atención de los clientes hacia una promoción, producto o lo que quiera destacar. En su tienda, puede añadir una imagen en formato .jpeg o .img a cualquier plantilla de correo electrónico.

Para añadir una imagen a una plantilla de correo electrónico:

Suba su imagen a cualquier servicio de alojamiento de imágenes. Por ejemplo, ImgBB, Free Image Host, u otro.
Abra la imagen en su navegador y copie la dirección de la imagen. Debe terminar con .png, .jpeg o .img.
Desde el panel de control de su tienda, vaya a Configuración → Notificaciones.
Abra la plantilla de correo electrónico que desea editar.
Haga clic en Previsualizar plantilla para decidir en qué parte del correo electrónico quiere que aparezca su imagen. En nuestro ejemplo, la imagen va después de la parte «Gracias por comprar con nosotros».
En la plantilla, busque la parte de un correo electrónico en la que desee añadir una imagen. Utilice marcas y claves de mensajes para navegar por el código. En nuestro ejemplo, la «parte de agradecimiento» del correo electrónico está situada entre las líneas de código  y .
Añada el siguiente trozo de código donde quiera mostrar la imagen: <img src="URL">, donde URL es el enlace a la imagen que ha copiado en el paso 2:
Haga clic en Guardar.

Hecho. Ahora su imagen aparecerá en la plantilla del correo electrónico:

Cambiar el color del texto en la notificación por correo electrónico

Es posible marcar un correo electrónico con los colores específicos de su negocio. En la plantilla de correo electrónico, el ${colorText} marcado define los colores de los diferentes bloques de texto. Así que todo lo que tiene que hacer es establecer el parámetro de marcado de color al código HTML para un color específico.

Digamos que quiere cambiar el color de los saludos a verde. El código HTML para verde es #45B212.

Nota:
Puede encontrar el código de cualquier color en el Sitio web de los códigos de colores HTML.

Para cambiar el color del texto en los correos electrónicos:

Desde el panel de control de su tienda, vaya a Configuración → Notificaciones.
Haga clic en Editar junto a la plantilla de correo electrónico que desee actualizar.
Busque el elemento ${colorText} cerca de la sección de texto que desea actualizar. Para acelerar el proceso, pulse Ctrl + F (Comando + F en Mac) para encontrar la marca. La marca de color del texto estará por encima de la clave de mensaje a la que se refiere. En nuestro ejemplo, es la parte de los saludos:
Sustituya el ${colorText} por el código de color HTML. En nuestro ejemplo es #45B212 para el color verde:
Haga clic en Guardar.

Ahora el saludo en la plantilla de correo electrónico será verde:

Añadir un número de seguimiento clicable a un envío con tarifa personalizada

En su tienda, puede añadir un número de seguimiento a un pedido. Sus clientes recibirán una notificación por correo electrónico sobre el envío del pedido con un número de seguimiento en el que se puede hacer clic. Una vez que hagan clic en el título Seguimiento de su paquete del correo electrónico, se les redirigirá a la página web del transportista.

Sin embargo, el número de seguimiento solo se puede pulsar si se utilizan tarifas calculadas por el transportista y envía con UPS, USPS, FedEx, Royal Mail, Australia Post o Canada Post. Si envía con tarifas planas, tarifas de tablas personalizadas o utiliza cualquier otro servicio de envío, el número de seguimiento no redirigirá a los compradores a la página web del transportista. Sin embargo, es posible editar manualmente la plantilla de correo electrónico Envío del pedido para hacer que se pueda hacer clic en el número de seguimiento, de modo que sus clientes sean redirigidos a la página web del transportista para realizar el seguimiento de su pedido.

Para añadir un enlace a una página de seguimiento en el sitio web de un transportista:

Desde el panel de control de su tienda, vaya a Configuración → Notificaciones.
En la sección de notificaciones de pedidos de clientes, abra la plantilla de correo electrónico Pedido enviado.
Encuentre el fragmento de código en el cuerpo de la plantilla que comienza con «Order tracking number number start» y termina con «Order tracking number end». Por lo general, se trata de 73-102 líneas de código:

Sustituya el código anterior por el siguiente, donde LINK_TO_CARRIERS_WEBSITE es el enlace real al sitio donde el cliente puede hacer el seguimiento de su pedido:


<!-- Order tracking number : start -->
 <#if order.trackingNumber?has_content>
      <tr>
          <td align="center" valign="top" style="font-family: Arial,sans-serif;font-size: 14px;line-height: 24px;padding-top: 35px;">
             <#if order.shippingMethod.carrierName?has_content>
                <b><@rosetta.message key="OrderShipped.OrderTracking.number_with_shipping_method" params={ "carrierName": order.shippingMethod.carrierName } /></b>
                <#else>
                <b><@rosetta.message key="OrderShipped.OrderTracking.number" /></b>
             </#if>
           </td>
       </tr>
       <tr>
           <td align="center" valign="top" style="font-family: Arial,sans-serif;font-size: 24px;line-height: 30px;padding-top: 1px; color: #333333;">
                                        ${order.trackingNumber}
           </td>
       </tr>
 <#if order.trackingUrl?has_content>
       <tr>
           <td align="center" valign="top" style="font-family: Arial,sans-serif;font-size: 14px;line-height: 24px;padding-top: 16px;color: #333333;">
                                        <a href="LINK_TO_CARRIERS_WEBSITE" style="text-decoration: none;"><b><@rosetta.message key="OrderShipped.OrderTracking.link_text" /></b></a>
            </td>
       </tr>
 </#if>
       <tr>
           <td style="font-size:1px; line-height: 23px;"> </td>
       </tr>
<!-- Order tracking number : end -->

Haga clic en Guardar.

Ahora sus clientes recibirán un correo electrónico con un enlace a la página web de su compañía. Una vez que hagan clic en un enlace, serán redirigidos a un sitio web que usted haya especificado en la plantilla del correo electrónico. En la página web, pueden especificar un número de seguimiento del correo electrónico del Pedido enviado.

Añadir el bloque de pedidos repetidos

Con la repetición de pedidos (en inglés), sus clientes pueden volver a pedir artículos haciendo clic en el botón «Comprar de nuevo» en el correo electrónico de confirmación del pedido que recibieron para el pedido original. En caso de que haya personalizado su plantilla de Confirmación de pedido antes de que la repetición de pedidos estuviera disponible en su tienda, puede añadir este bloque manualmente.

Para añadir el bloque de pedidos repetidos:

Desde el panel de control de su tienda, vaya a Configuración → Notificaciones.
En la sección Notificaciones de pedido de cliente, abra la plantilla de correo electrónico Confirmación de pedido.

Busque la línea  - o cualquier otro lugar donde quiera que aparezca el bloque - y añada el siguiente trozo de código:


    <!-- block-repeat-order: start -->
                <#if repeatOrder??>
                    <tr>
                        <td align="left" valign="top" style="padding-top: 40px;">
                            <table cellpadding="0" cellspacing="0" border="0" style="width: 100%; min-width: 100%;">
                                <tr>
                                    <td align="left" valign="top" style="<@styleSubtitle />">
                                        <@rosetta.message key="OrderConfirmation.RepeatOrder.title" />
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left" valign="top" style="padding-top: 10px; <@styleText />">
                                        <@rosetta.message key="OrderConfirmation.RepeatOrder.description" />
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left" valign="top" style="padding-top: 20px;">
                                        <#assign goToStoreButtonText><@rosetta.message key="OrderConfirmation.RepeatOrder.button" /></#assign>
                                        <@secondaryButton repeatOrder.url goToStoreButtonText 290 colorBlue "full-width-mobile" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </#if>
                <!-- block-repeat-order: end -->

Haga clic en Guardar.

Ahora sus clientes verán el bloque de pedidos repetidos en sus correos electrónicos de Confirmación de pedido: